.agent/skills/c4-context/SKILL.md
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.
npx skillsauth add carlosverasteguii/daticket c4-contextInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
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:
development
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
development
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
development
Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.
tools
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.