[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6AE5RFMX6YZESA6DJWSAMFP":3,"skill-same:01M6AE5RFMX6YZESA6DJWSAMFP":95},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":45,"commitSha":46,"skillDirectory":47,"forksCount":48,"repositoryHtmlUrl":49,"repositoryHomepageUrl":50,"ownerHtmlUrl":51,"ownerBlogUrl":52,"ownerDescription":53,"updatedAt":54,"install":55,"resources":68},"01M6AE5RFMX6YZESA6DJWSAMFP","c4-architecture",null,"Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context\u002Fcontainer\u002Fcomponent\u002Fdeployment diagrams. Triggers include \"architecture diagram\", \"C4 diagram\", \"system context\", \"container diagram\", \"component diagram\", \"deployment diagram\", \"document architecture\", \"visualize architecture\".","davila7\u002Fclaude-code-templates","davila7","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6216945?v=4","01M6ADEWWFPS191NFM0Y1EX1JH","Daniel Avila","01M6ADJHGM78PHQRD3XZTFDVKK",33332,"MIT","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"architecture","c4 architecture","deployment","when","software","structure","diagrams","context","model","system","c4 diagrams","generate","create","mermaid diagrams","architecture diagram","architecture diagrams","mermaid","diagram","documentation","component","visualize","2026-11-10 10:12:30",false,"---\nname: c4-architecture\ndescription: Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context\u002Fcontainer\u002Fcomponent\u002Fdeployment diagrams. Triggers include \"architecture diagram\", \"C4 diagram\", \"system context\", \"container diagram\", \"component diagram\", \"deployment diagram\", \"document architecture\", \"visualize architecture\".\n---\n\n# C4 Architecture Documentation\n\nGenerate software architecture documentation using C4 model diagrams in Mermaid syntax.\n\n## Workflow\n\n1. **Understand scope** - Determine which C4 level(s) are needed based on audience\n2. **Analyze codebase** - Explore the system to identify components, containers, and relationships\n3. **Generate diagrams** - Create Mermaid C4 diagrams at appropriate abstraction levels\n4. **Document** - Write diagrams to markdown files with explanatory context\n\n## C4 Diagram Levels\n\nSelect the appropriate level based on the documentation need:\n\n| Level | Diagram Type | Audience | Shows | When to Create |\n|-------|-------------|----------|-------|----------------|\n| 1 | **C4Context** | Everyone | System + external actors | Always (required) |\n| 2 | **C4Container** | Technical | Apps, databases, services | Always (required) |\n| 3 | **C4Component** | Developers | Internal components | Only if adds value |\n| 4 | **C4Deployment** | DevOps | Infrastructure nodes | For production systems |\n| - | **C4Dynamic** | Technical | Request flows (numbered) | For complex workflows |\n\n**Key Insight:** \"Context + Container diagrams are sufficient for most software development teams.\" Only create Component\u002FCode diagrams when they genuinely add value.\n\n## Quick Start Examples\n\n### System Context (Level 1)\n```mermaid\nC4Context\n  title System Context - Workout Tracker\n\n  Person(user, \"User\", \"Tracks workouts and exercises\")\n  System(app, \"Workout Tracker\", \"Vue PWA for tracking strength and CrossFit workouts\")\n  System_Ext(browser, \"Web Browser\", \"Stores data in IndexedDB\")\n\n  Rel(user, app, \"Uses\")\n  Rel(app, browser, \"Persists data to\", \"IndexedDB\")\n```\n\n### Container Diagram (Level 2)\n```mermaid\nC4Container\n  title Container Diagram - Workout Tracker\n\n  Person(user, \"User\", \"Tracks workouts\")\n\n  Container_Boundary(app, \"Workout Tracker PWA\") {\n    Container(spa, \"SPA\", \"Vue 3, TypeScript\", \"Single-page application\")\n    Container(pinia, \"State Management\", \"Pinia\", \"Manages application state\")\n    ContainerDb(indexeddb, \"IndexedDB\", \"Dexie\", \"Local workout storage\")\n  }\n\n  Rel(user, spa, \"Uses\")\n  Rel(spa, pinia, \"Reads\u002Fwrites state\")\n  Rel(pinia, indexeddb, \"Persists\", \"Dexie ORM\")\n```\n\n### Component Diagram (Level 3)\n```mermaid\nC4Component\n  title Component Diagram - Workout Feature\n\n  Container(views, \"Views\", \"Vue Router pages\")\n\n  Container_Boundary(workout, \"Workout Feature\") {\n    Component(useWorkout, \"useWorkout\", \"Composable\", \"Workout execution state\")\n    Component(useTimer, \"useTimer\", \"Composable\", \"Timer state machine\")\n    Component(workoutRepo, \"WorkoutRepository\", \"Dexie\", \"Workout persistence\")\n  }\n\n  Rel(views, useWorkout, \"Uses\")\n  Rel(useWorkout, useTimer, \"Controls\")\n  Rel(useWorkout, workoutRepo, \"Saves to\")\n```\n\n### Dynamic Diagram (Request Flow)\n```mermaid\nC4Dynamic\n  title Dynamic Diagram - User Sign In Flow\n\n  ContainerDb(db, \"Database\", \"PostgreSQL\", \"User credentials\")\n  Container(spa, \"Single-Page App\", \"React\", \"Banking UI\")\n\n  Container_Boundary(api, \"API Application\") {\n    Component(signIn, \"Sign In Controller\", \"Express\", \"Auth endpoint\")\n    Component(security, \"Security Service\", \"JWT\", \"Validates credentials\")\n  }\n\n  Rel(spa, signIn, \"1. Submit credentials\", \"JSON\u002FHTTPS\")\n  Rel(signIn, security, \"2. Validate\")\n  Rel(security, db, \"3. Query user\", \"SQL\")\n\n  UpdateRelStyle(spa, signIn, $textColor=\"blue\", $offsetY=\"-30\")\n```\n\n### Deployment Diagram\n```mermaid\nC4Deployment\n  title Deployment Diagram - Production\n\n  Deployment_Node(browser, \"Customer Browser\", \"Chrome\u002FFirefox\") {\n    Container(spa, \"SPA\", \"React\", \"Web application\")\n  }\n\n  Deployment_Node(aws, \"AWS Cloud\", \"us-east-1\") {\n    Deployment_Node(ecs, \"ECS Cluster\", \"Fargate\") {\n      Container(api, \"API Service\", \"Node.js\", \"REST API\")\n    }\n    Deployment_Node(rds, \"RDS\", \"db.r5.large\") {\n      ContainerDb(db, \"Database\", \"PostgreSQL\", \"Application data\")\n    }\n  }\n\n  Rel(spa, api, \"API calls\", \"HTTPS\")\n  Rel(api, db, \"Reads\u002Fwrites\", \"JDBC\")\n```\n\n## Element Syntax\n\n### People and Systems\n```\nPerson(alias, \"Label\", \"Description\")\nPerson_Ext(alias, \"Label\", \"Description\")       # External person\nSystem(alias, \"Label\", \"Description\")\nSystem_Ext(alias, \"Label\", \"Description\")       # External system\nSystemDb(alias, \"Label\", \"Description\")         # Database system\nSystemQueue(alias, \"Label\", \"Description\")      # Queue system\n```\n\n### Containers\n```\nContainer(alias, \"Label\", \"Technology\", \"Description\")\nContainer_Ext(alias, \"Label\", \"Technology\", \"Description\")\nContainerDb(alias, \"Label\", \"Technology\", \"Description\")\nContainerQueue(alias, \"Label\", \"Technology\", \"Description\")\n```\n\n### Components\n```\nComponent(alias, \"Label\", \"Technology\", \"Description\")\nComponent_Ext(alias, \"Label\", \"Technology\", \"Description\")\nComponentDb(alias, \"Label\", \"Technology\", \"Description\")\n```\n\n### Boundaries\n```\nEnterprise_Boundary(alias, \"Label\") { ... }\nSystem_Boundary(alias, \"Label\") { ... }\nContainer_Boundary(alias, \"Label\") { ... }\nBoundary(alias, \"Label\", \"type\") { ... }\n```\n\n### Relationships\n```\nRel(from, to, \"Label\")\nRel(from, to, \"Label\", \"Technology\")\nBiRel(from, to, \"Label\")                        # Bidirectional\nRel_U(from, to, \"Label\")                        # Upward\nRel_D(from, to, \"Label\")                        # Downward\nRel_L(from, to, \"Label\")                        # Leftward\nRel_R(from, to, \"Label\")                        # Rightward\n```\n\n### Deployment Nodes\n```\nDeployment_Node(alias, \"Label\", \"Type\", \"Description\") { ... }\nNode(alias, \"Label\", \"Type\", \"Description\") { ... }  # Shorthand\n```\n\n## Styling and Layout\n\n### Layout Configuration\n```\nUpdateLayoutConfig($c4ShapeInRow=\"3\", $c4BoundaryInRow=\"1\")\n```\n- `$c4ShapeInRow` - Number of shapes per row (default: 4)\n- `$c4BoundaryInRow` - Number of boundaries per row (default: 2)\n\n### Element Styling\n```\nUpdateElementStyle(alias, $fontColor=\"red\", $bgColor=\"grey\", $borderColor=\"red\")\n```\n\n### Relationship Styling\n```\nUpdateRelStyle(from, to, $textColor=\"blue\", $lineColor=\"blue\", $offsetX=\"5\", $offsetY=\"-10\")\n```\nUse `$offsetX` and `$offsetY` to fix overlapping relationship labels.\n\n## Best Practices\n\n### Essential Rules\n\n1. **Every element must have**: Name, Type, Technology (where applicable), and Description\n2. **Use unidirectional arrows only** - Bidirectional arrows create ambiguity\n3. **Label arrows with action verbs** - \"Sends email using\", \"Reads from\", not just \"uses\"\n4. **Include technology labels** - \"JSON\u002FHTTPS\", \"JDBC\", \"gRPC\"\n5. **Stay under 20 elements per diagram** - Split complex systems into multiple diagrams\n\n### Clarity Guidelines\n\n1. **Start at Level 1** - Context diagrams help frame the system scope\n2. **One diagram per file** - Keep diagrams focused on a single abstraction level\n3. **Meaningful aliases** - Use descriptive aliases (e.g., `orderService` not `s1`)\n4. **Concise descriptions** - Keep descriptions under 50 characters when possible\n5. **Always include a title** - \"System Context diagram for [System Name]\"\n\n### What to Avoid\n\nSee [references\u002Fcommon-mistakes.md](references\u002Fcommon-mistakes.md) for detailed anti-patterns:\n- Confusing containers (deployable) vs components (non-deployable)\n- Modeling shared libraries as containers\n- Showing message brokers as single containers instead of individual topics\n- Adding undefined abstraction levels like \"subcomponents\"\n- Removing type labels to \"simplify\" diagrams\n\n## Microservices Guidelines\n\n### Single Team Ownership\nModel each microservice as a **container** (or container group):\n```mermaid\nC4Container\n  title Microservices - Single Team\n\n  System_Boundary(platform, \"E-commerce Platform\") {\n    Container(orderApi, \"Order Service\", \"Spring Boot\", \"Order processing\")\n    ContainerDb(orderDb, \"Order DB\", \"PostgreSQL\", \"Order data\")\n    Container(inventoryApi, \"Inventory Service\", \"Node.js\", \"Stock management\")\n    ContainerDb(inventoryDb, \"Inventory DB\", \"MongoDB\", \"Stock data\")\n  }\n```\n\n### Multi-Team Ownership\nPromote microservices to **software systems** when owned by separate teams:\n```mermaid\nC4Context\n  title Microservices - Multi-Team\n\n  Person(customer, \"Customer\", \"Places orders\")\n  System(orderSystem, \"Order System\", \"Team Alpha\")\n  System(inventorySystem, \"Inventory System\", \"Team Beta\")\n  System(paymentSystem, \"Payment System\", \"Team Gamma\")\n\n  Rel(customer, orderSystem, \"Places orders\")\n  Rel(orderSystem, inventorySystem, \"Checks stock\")\n  Rel(orderSystem, paymentSystem, \"Processes payment\")\n```\n\n### Event-Driven Architecture\nShow individual topics\u002Fqueues as containers, NOT a single \"Kafka\" box:\n```mermaid\nC4Container\n  title Event-Driven Architecture\n\n  Container(orderService, \"Order Service\", \"Java\", \"Creates orders\")\n  Container(stockService, \"Stock Service\", \"Java\", \"Manages inventory\")\n  ContainerQueue(orderTopic, \"order.created\", \"Kafka\", \"Order events\")\n  ContainerQueue(stockTopic, \"stock.reserved\", \"Kafka\", \"Stock events\")\n\n  Rel(orderService, orderTopic, \"Publishes to\")\n  Rel(stockService, orderTopic, \"Subscribes to\")\n  Rel(stockService, stockTopic, \"Publishes to\")\n  Rel(orderService, stockTopic, \"Subscribes to\")\n```\n\n## Output Location\n\nWrite architecture documentation to `docs\u002Farchitecture\u002F` with naming convention:\n- `c4-context.md` - System context diagram\n- `c4-containers.md` - Container diagram\n- `c4-components-{feature}.md` - Component diagrams per feature\n- `c4-deployment.md` - Deployment diagram\n- `c4-dynamic-{flow}.md` - Dynamic diagrams for specific flows\n\n## Audience-Appropriate Detail\n\n| Audience | Recommended Diagrams |\n|----------|---------------------|\n| Executives | System Context only |\n| Product Managers | Context + Container |\n| Architects | Context + Container + key Components |\n| Developers | All levels as needed |\n| DevOps | Container + Deployment |\n\n## References\n\n- [references\u002Fc4-syntax.md](references\u002Fc4-syntax.md) - Complete Mermaid C4 syntax\n- [references\u002Fcommon-mistakes.md](references\u002Fcommon-mistakes.md) - Anti-patterns to avoid\n- [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md) - Microservices, event-driven, deployment\n","# C4 Architecture Documentation\n\nGenerate software architecture documentation using C4 model diagrams in Mermaid syntax.\n\n## Workflow\n\n1. **Understand scope** - Determine which C4 level(s) are needed based on audience\n2. **Analyze codebase** - Explore the system to identify components, containers, and relationships\n3. **Generate diagrams** - Create Mermaid C4 diagrams at appropriate abstraction levels\n4. **Document** - Write diagrams to markdown files with explanatory context\n\n## C4 Diagram Levels\n\nSelect the appropriate level based on the documentation need:\n\n| Level | Diagram Type | Audience | Shows | When to Create |\n|-------|-------------|----------|-------|----------------|\n| 1 | **C4Context** | Everyone | System + external actors | Always (required) |\n| 2 | **C4Container** | Technical | Apps, databases, services | Always (required) |\n| 3 | **C4Component** | Developers | Internal components | Only if adds value |\n| 4 | **C4Deployment** | DevOps | Infrastructure nodes | For production systems |\n| - | **C4Dynamic** | Technical | Request flows (numbered) | For complex workflows |\n\n**Key Insight:** \"Context + Container diagrams are sufficient for most software development teams.\" Only create Component\u002FCode diagrams when they genuinely add value.\n\n## Quick Start Examples\n\n### System Context (Level 1)\n```mermaid\nC4Context\n  title System Context - Workout Tracker\n\n  Person(user, \"User\", \"Tracks workouts and exercises\")\n  System(app, \"Workout Tracker\", \"Vue PWA for tracking strength and CrossFit workouts\")\n  System_Ext(browser, \"Web Browser\", \"Stores data in IndexedDB\")\n\n  Rel(user, app, \"Uses\")\n  Rel(app, browser, \"Persists data to\", \"IndexedDB\")\n```\n\n### Container Diagram (Level 2)\n```mermaid\nC4Container\n  title Container Diagram - Workout Tracker\n\n  Person(user, \"User\", \"Tracks workouts\")\n\n  Container_Boundary(app, \"Workout Tracker PWA\") {\n    Container(spa, \"SPA\", \"Vue 3, TypeScript\", \"Single-page application\")\n    Container(pinia, \"State Management\", \"Pinia\", \"Manages application state\")\n    ContainerDb(indexeddb, \"IndexedDB\", \"Dexie\", \"Local workout storage\")\n  }\n\n  Rel(user, spa, \"Uses\")\n  Rel(spa, pinia, \"Reads\u002Fwrites state\")\n  Rel(pinia, indexeddb, \"Persists\", \"Dexie ORM\")\n```\n\n### Component Diagram (Level 3)\n```mermaid\nC4Component\n  title Component Diagram - Workout Feature\n\n  Container(views, \"Views\", \"Vue Router pages\")\n\n  Container_Boundary(workout, \"Workout Feature\") {\n    Component(useWorkout, \"useWorkout\", \"Composable\", \"Workout execution state\")\n    Component(useTimer, \"useTimer\", \"Composable\", \"Timer state machine\")\n    Component(workoutRepo, \"WorkoutRepository\", \"Dexie\", \"Workout persistence\")\n  }\n\n  Rel(views, useWorkout, \"Uses\")\n  Rel(useWorkout, useTimer, \"Controls\")\n  Rel(useWorkout, workoutRepo, \"Saves to\")\n```\n\n### Dynamic Diagram (Request Flow)\n```mermaid\nC4Dynamic\n  title Dynamic Diagram - User Sign In Flow\n\n  ContainerDb(db, \"Database\", \"PostgreSQL\", \"User credentials\")\n  Container(spa, \"Single-Page App\", \"React\", \"Banking UI\")\n\n  Container_Boundary(api, \"API Application\") {\n    Component(signIn, \"Sign In Controller\", \"Express\", \"Auth endpoint\")\n    Component(security, \"Security Service\", \"JWT\", \"Validates credentials\")\n  }\n\n  Rel(spa, signIn, \"1. Submit credentials\", \"JSON\u002FHTTPS\")\n  Rel(signIn, security, \"2. Validate\")\n  Rel(security, db, \"3. Query user\", \"SQL\")\n\n  UpdateRelStyle(spa, signIn, $textColor=\"blue\", $offsetY=\"-30\")\n```\n\n### Deployment Diagram\n```mermaid\nC4Deployment\n  title Deployment Diagram - Production\n\n  Deployment_Node(browser, \"Customer Browser\", \"Chrome\u002FFirefox\") {\n    Container(spa, \"SPA\", \"React\", \"Web application\")\n  }\n\n  Deployment_Node(aws, \"AWS Cloud\", \"us-east-1\") {\n    Deployment_Node(ecs, \"ECS Cluster\", \"Fargate\") {\n      Container(api, \"API Service\", \"Node.js\", \"REST API\")\n    }\n    Deployment_Node(rds, \"RDS\", \"db.r5.large\") {\n      ContainerDb(db, \"Database\", \"PostgreSQL\", \"Application data\")\n    }\n  }\n\n  Rel(spa, api, \"API calls\", \"HTTPS\")\n  Rel(api, db, \"Reads\u002Fwrites\", \"JDBC\")\n```\n\n## Element Syntax\n\n### People and Systems\n```\nPerson(alias, \"Label\", \"Description\")\nPerson_Ext(alias, \"Label\", \"Description\")       # External person\nSystem(alias, \"Label\", \"Description\")\nSystem_Ext(alias, \"Label\", \"Description\")       # External system\nSystemDb(alias, \"Label\", \"Description\")         # Database system\nSystemQueue(alias, \"Label\", \"Description\")      # Queue system\n```\n\n### Containers\n```\nContainer(alias, \"Label\", \"Technology\", \"Description\")\nContainer_Ext(alias, \"Label\", \"Technology\", \"Description\")\nContainerDb(alias, \"Label\", \"Technology\", \"Description\")\nContainerQueue(alias, \"Label\", \"Technology\", \"Description\")\n```\n\n### Components\n```\nComponent(alias, \"Label\", \"Technology\", \"Description\")\nComponent_Ext(alias, \"Label\", \"Technology\", \"Description\")\nComponentDb(alias, \"Label\", \"Technology\", \"Description\")\n```\n\n### Boundaries\n```\nEnterprise_Boundary(alias, \"Label\") { ... }\nSystem_Boundary(alias, \"Label\") { ... }\nContainer_Boundary(alias, \"Label\") { ... }\nBoundary(alias, \"Label\", \"type\") { ... }\n```\n\n### Relationships\n```\nRel(from, to, \"Label\")\nRel(from, to, \"Label\", \"Technology\")\nBiRel(from, to, \"Label\")                        # Bidirectional\nRel_U(from, to, \"Label\")                        # Upward\nRel_D(from, to, \"Label\")                        # Downward\nRel_L(from, to, \"Label\")                        # Leftward\nRel_R(from, to, \"Label\")                        # Rightward\n```\n\n### Deployment Nodes\n```\nDeployment_Node(alias, \"Label\", \"Type\", \"Description\") { ... }\nNode(alias, \"Label\", \"Type\", \"Description\") { ... }  # Shorthand\n```\n\n## Styling and Layout\n\n### Layout Configuration\n```\nUpdateLayoutConfig($c4ShapeInRow=\"3\", $c4BoundaryInRow=\"1\")\n```\n- `$c4ShapeInRow` - Number of shapes per row (default: 4)\n- `$c4BoundaryInRow` - Number of boundaries per row (default: 2)\n\n### Element Styling\n```\nUpdateElementStyle(alias, $fontColor=\"red\", $bgColor=\"grey\", $borderColor=\"red\")\n```\n\n### Relationship Styling\n```\nUpdateRelStyle(from, to, $textColor=\"blue\", $lineColor=\"blue\", $offsetX=\"5\", $offsetY=\"-10\")\n```\nUse `$offsetX` and `$offsetY` to fix overlapping relationship labels.\n\n## Best Practices\n\n### Essential Rules\n\n1. **Every element must have**: Name, Type, Technology (where applicable), and Description\n2. **Use unidirectional arrows only** - Bidirectional arrows create ambiguity\n3. **Label arrows with action verbs** - \"Sends email using\", \"Reads from\", not just \"uses\"\n4. **Include technology labels** - \"JSON\u002FHTTPS\", \"JDBC\", \"gRPC\"\n5. **Stay under 20 elements per diagram** - Split complex systems into multiple diagrams\n\n### Clarity Guidelines\n\n1. **Start at Level 1** - Context diagrams help frame the system scope\n2. **One diagram per file** - Keep diagrams focused on a single abstraction level\n3. **Meaningful aliases** - Use descriptive aliases (e.g., `orderService` not `s1`)\n4. **Concise descriptions** - Keep descriptions under 50 characters when possible\n5. **Always include a title** - \"System Context diagram for [System Name]\"\n\n### What to Avoid\n\nSee [references\u002Fcommon-mistakes.md](references\u002Fcommon-mistakes.md) for detailed anti-patterns:\n- Confusing containers (deployable) vs components (non-deployable)\n- Modeling shared libraries as containers\n- Showing message brokers as single containers instead of individual topics\n- Adding undefined abstraction levels like \"subcomponents\"\n- Removing type labels to \"simplify\" diagrams\n\n## Microservices Guidelines\n\n### Single Team Ownership\nModel each microservice as a **container** (or container group):\n```mermaid\nC4Container\n  title Microservices - Single Team\n\n  System_Boundary(platform, \"E-commerce Platform\") {\n    Container(orderApi, \"Order Service\", \"Spring Boot\", \"Order processing\")\n    ContainerDb(orderDb, \"Order DB\", \"PostgreSQL\", \"Order data\")\n    Container(inventoryApi, \"Inventory Service\", \"Node.js\", \"Stock management\")\n    ContainerDb(inventoryDb, \"Inventory DB\", \"MongoDB\", \"Stock data\")\n  }\n```\n\n### Multi-Team Ownership\nPromote microservices to **software systems** when owned by separate teams:\n```mermaid\nC4Context\n  title Microservices - Multi-Team\n\n  Person(customer, \"Customer\", \"Places orders\")\n  System(orderSystem, \"Order System\", \"Team Alpha\")\n  System(inventorySystem, \"Inventory System\", \"Team Beta\")\n  System(paymentSystem, \"Payment System\", \"Team Gamma\")\n\n  Rel(customer, orderSystem, \"Places orders\")\n  Rel(orderSystem, inventorySystem, \"Checks stock\")\n  Rel(orderSystem, paymentSystem, \"Processes payment\")\n```\n\n### Event-Driven Architecture\nShow individual topics\u002Fqueues as containers, NOT a single \"Kafka\" box:\n```mermaid\nC4Container\n  title Event-Driven Architecture\n\n  Container(orderService, \"Order Service\", \"Java\", \"Creates orders\")\n  Container(stockService, \"Stock Service\", \"Java\", \"Manages inventory\")\n  ContainerQueue(orderTopic, \"order.created\", \"Kafka\", \"Order events\")\n  ContainerQueue(stockTopic, \"stock.reserved\", \"Kafka\", \"Stock events\")\n\n  Rel(orderService, orderTopic, \"Publishes to\")\n  Rel(stockService, orderTopic, \"Subscribes to\")\n  Rel(stockService, stockTopic, \"Publishes to\")\n  Rel(orderService, stockTopic, \"Subscribes to\")\n```\n\n## Output Location\n\nWrite architecture documentation to `docs\u002Farchitecture\u002F` with naming convention:\n- `c4-context.md` - System context diagram\n- `c4-containers.md` - Container diagram\n- `c4-components-{feature}.md` - Component diagrams per feature\n- `c4-deployment.md` - Deployment diagram\n- `c4-dynamic-{flow}.md` - Dynamic diagrams for specific flows\n\n## Audience-Appropriate Detail\n\n| Audience | Recommended Diagrams |\n|----------|---------------------|\n| Executives | System Context only |\n| Product Managers | Context + Container |\n| Architects | Context + Container + key Components |\n| Developers | All levels as needed |\n| DevOps | Container + Deployment |\n\n## References\n\n- [references\u002Fc4-syntax.md](references\u002Fc4-syntax.md) - Complete Mermaid C4 syntax\n- [references\u002Fcommon-mistakes.md](references\u002Fcommon-mistakes.md) - Anti-patterns to avoid\n- [references\u002Fadvanced-patterns.md](references\u002Fadvanced-patterns.md) - Microservices, event-driven, deployment\n",{"name":5,"description":7},"main","2b749c82b5d11fac39d9a6e021ce3f5b8a541bd1","cli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture",3911,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates","https:\u002F\u002Faitmpl.com","https:\u002F\u002Fgithub.com\u002Fdavila7","https:\u002F\u002Fdanielavila.me","Building AI dev tools with LLMs","2026-11-11 21:38:31",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add davila7\u002Fclaude-code-templates --skill c4-architecture",{"tool":61,"command":62},"bunx","bunx skills add davila7\u002Fclaude-code-templates --skill c4-architecture",{"tool":64,"command":65},"pnpm","pnpm dlx skills add davila7\u002Fclaude-code-templates --skill c4-architecture","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002FSKILL.md",true,[69,75,79,83,87,91],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"agents\u002Fopenai.yaml","REFERENCE","参考文档",102,"https:\u002F\u002Fgithub.com\u002FVortex375\u002Fseraph\u002Fblob\u002Fmain\u002Fapp\u002Fseraph_app\u002F.agents\u002Fskills\u002Fwriting-for-agents\u002Fagents\u002Fopenai.yaml",{"path":76,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":77,"sourceHtmlUrl":78},"README.md",7072,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002FREADME.md",{"path":80,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":81,"sourceHtmlUrl":82},"references\u002Fadvanced-patterns.md",18346,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002Freferences\u002Fadvanced-patterns.md",{"path":84,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":85,"sourceHtmlUrl":86},"references\u002Fc4-syntax.md",14564,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002Freferences\u002Fc4-syntax.md",{"path":88,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":89,"sourceHtmlUrl":90},"references\u002Fcommon-mistakes.md",12441,"https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fcreative-design\u002Fc4-architecture\u002Freferences\u002Fcommon-mistakes.md",{"path":92,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":93,"sourceHtmlUrl":94},"SKILL-MECHANICS.md",2629,"https:\u002F\u002Fgithub.com\u002FVortex375\u002Fseraph\u002Fblob\u002Fmain\u002Fapp\u002Fseraph_app\u002F.agents\u002Fskills\u002Fwriting-for-agents\u002FSKILL-MECHANICS.md",[96,127,154,187,221,245],{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":107,"publishedAt":40},"01M70NHBTQ8BV0A2SCAZXEPHCX","wealthville-pool-scoring","Score DeFi liquidity pools before providing liquidity. Returns a 0-100 pool score and an Enter\u002FHold\u002FExit\u002FReduce\u002FAvoid verdict with calibrated confidence for ~68,800 Solana pools and 575 EVM pools, plus a public miss-inclusive track record. Use when asked whether a pool is worth LPing into, which pools look best right now, or how accurate the scores have actually been.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fweb-data\u002Fwealthville-pool-scoring\u002FSKILL.md",[102],{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[108,109,110,111,112,113,114,115,116,22,117,118,119,120,121,122,123,124,125,126],"scoring","pool","wealthville pool scoring","liquidity","which","for","exit","now","use","reduce","with","record","track","verdict","evm","solana","how","public","look",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":134,"publishedAt":40},"01M70MB6VR8ERJ4EM8D5KHBMEV","technical-debt-auditor","Scans a codebase and produces a quantified technical debt report with a prioritized remediation plan. Analyzes dead code, TODO\u002FFIXME\u002FHACK markers, dependency staleness, complexity hotspots, code duplication signals, test coverage gaps, unused exports, and outdated patterns. Use this skill when the user asks to audit their codebase for tech debt, wants a health check of their code quality, says things like \"where should I focus refactoring\", \"find code smells\", \"audit my codebase\", \"what technical debt do we have\", \"prioritize cleanup work\", or asks about code quality metrics. Also trigger when the user mentions \"code rot\", \"legacy cleanup\", \"refactoring priorities\", or wants to understand the overall health of a project before a major effort. Trigger even if the user doesn't say \"technical debt\" explicitly — any request to systematically assess code quality and identify improvement priorities belongs here.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdevelopment\u002Ftechnical-debt-auditor\u002FSKILL.md",[133],{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[135,136,137,138,139,140,141,142,143,144,145,22,146,147,148,149,150,151,152,153],"technical debt","debt","technical","technical debt auditor","auditor","coverage","complexity","markers","project","cleanup","unused","code","todo","work","plan","focus","signals","audit","dependency",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":169,"publishedAt":40},"01M70KPYH9QNHCNME5GJQGE22K","readonly-sql-guard","Make an agent's database access provably read-only. Use when an agent runs caller-supplied SQL against a production\u002FERP\u002Fanalytics database (a \"query\" MCP tool, text-to-SQL, an admin console), or when reviewing DB-access code for write\u002FDDL\u002Fside-effect\u002Ftransaction-escape risks. Checks what a statement CALLS, not just its shape.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdatabase\u002Freadonly-sql-guard\u002FSKILL.md",[160,163,164],{"categoryNo":161,"categoryName":162,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},{"categoryNo":165,"categoryName":166,"taxonomyType":167,"taxonomyTypeDesc":168},"01JBSEEDCAT000000000000033","数据分析师","PROFESSION","适用职业",[170,171,172,173,174,175,176,113,177,178,179,180,181,182,183,116,184,185,22,186],"readonly","guard","sql guard","sql","readonly sql guard","erp","effect","read-only","db","just","tool","calls","only","MCP","access","database","query",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":191,"licenseFileUrl":192,"sourceHtmlUrl":193,"categories":194,"keywords":198,"publishedAt":40},"01M6AFY6F7CC2BBZP1QD6VTNVC","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[195],{"categoryNo":196,"categoryName":197,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000009","前端开发",[199,200,201,202,203,204,205,206,38,207,208,209,210,211,212,213,214,215,216,217,218,219,113,220],"artifacts builder","web","web artifacts builder","artifacts","builder","state","routing","state management","css","frontend","ui","Tools","file","components","shadcn","react","Tailwind","suite","jsx","html","single-file","ui components",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":191,"licenseFileUrl":225,"sourceHtmlUrl":226,"categories":227,"keywords":232,"publishedAt":40},"01M6AFWF33SFV9Z3SF4PEEE4BF","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[228,231],{"categoryNo":229,"categoryName":230,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":196,"categoryName":197,"taxonomyType":105,"taxonomyTypeDesc":106},[233,234,235,236,237,200,238,208,209,239,240,241,242,113,243,118,244],"webapp testing","testing","webapp","browser","playwright","applications","debugging","toolkit","logs","screenshots","local","behavior",{"skillNo":246,"name":247,"nameZh":6,"description":248,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":191,"licenseFileUrl":249,"sourceHtmlUrl":250,"categories":251,"keywords":259,"publishedAt":40},"01M6AF67Q67JJJ5V51JR2P52KA","discernment-nudge","After you give a substantive answer or draft that the user may act on — advice or recommendations, drafted artifacts such as goals, plans, pitches, proposals, or emails, estimates or projections, analysis or interpretation of data, factual claims they may rely on, or a multi-step argument — invoke this skill BEFORE finalizing your reply and then, if it applies, append 2-3 short follow-up questions, each tied to something specific in what you just produced, that help the user check key facts, probe the reasoning or assumptions, and notice missing context. Do this at most once per conversation. Skip it when the user asked a trivial how-to or simple lookup, wants a purely educational explanation, asked you only to format, convert, or assemble a file from content they provided, is writing code they will run, is doing creative writing or casual chat, or already asked you to double-check, cite, or review — the skill file explains these boundaries and the exact output format.","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fdavila7\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fdiscernment-nudge\u002FSKILL.md",[252,255,256],{"categoryNo":253,"categoryName":254,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},{"categoryNo":257,"categoryName":258,"taxonomyType":167,"taxonomyTypeDesc":168},"01JBSEEDCAT000000000000036","内容创作者",[260,261,262,263,264,265,266,267,202,268,211,146,269,270,271,272,273,182,274,22,275,276,277,278,279,124,280],"discernment nudge","nudge","interpretation","help","run","reasoning","data","writing","lookup","content","review","conversation","short","up","invoke","you","analysis","claims","argument","assemble","recommendations"]