Loading...
Loading...
resources/implementation-playbook.md.[One-sentence description of what the system does]
[Detailed description of the system's purpose, capabilities, and the problems it solves]
[Mermaid diagram showing system, users, and external systems]
## Context Diagram Template
According to the [C4 model](https://c4model.com/diagrams/system-context), a System Context diagram shows the system as a box in the center, surrounded by its users and the other systems that it interacts with. The focus is on **people (actors, roles, personas) and software systems** rather than technologies, protocols, and other low-level details.
Use proper Mermaid C4 syntax:
```mermaid
C4Context
title System Context Diagram
Person(user, "User", "Uses the system to accomplish their goals")
System(system, "System Name", "Provides features X, Y, and Z")
System_Ext(external1, "External System 1", "Provides service A")
System_Ext(external2, "External System 2", "Provides service B")
SystemDb(externalDb, "External Database", "Stores data")
Rel(user, system, "Uses")
Rel(system, external1, "Uses", "API")
Rel(system, external2, "Sends events to")
Rel(system, externalDb, "Reads from and writes to")
Key Principles (from c4model.com):
When creating context documentation, provide:
c4-context is an expert AI persona designed to improve your coding workflow. Expert C4 Context-level documentation specialist. Creates high-level system context diagrams, documents personas, user journeys, system features, and external dependencies. Synthesizes container and component documentation with system documentation to create comprehensive context-level architecture. Use when creating the highest-level C4 system context documentation. It provides senior-level context directly within your IDE.
To install the c4-context skill, download the package, extract the files to your project's .cursor/skills directory, and type @c4-context in your editor chat to activate the expert instructions.
Yes, the c4-context AI persona is completely free to download and integrate into compatible Agentic IDEs like Cursor, Windsurf, Github Copilot, and Anthropic MCP servers.
Expert C4 Context-level documentation specialist. Creates high-level system context diagrams, documents personas, user journeys, system features, and external dependencies. Synthesizes container and component documentation with system documentation to create comprehensive context-level architecture. Use when creating the highest-level C4 system context documentation.
Download Skill Package.cursor/skills@c4-context in editor chat.Copy the instructions from the panel on the left and paste them into your custom instructions setting.
"Adding this c4-context persona to my Cursor workspace completely changed the quality of code my AI generates. Saves me hours every week."
Developers who downloaded c4-context also use these elite AI personas.
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
Structured guide for setting up A/B tests with mandatory gates for hypothesis, metrics, and execution readiness.
You are an accessibility expert specializing in WCAG compliance, inclusive design, and assistive technology compatibility. Conduct audits, identify barriers, and provide remediation guidance.
Explore our most popular utilities designed for the modern Indian creator.