Menu
Generate and validate Mermaid diagrams (component, sequence, ER, deployment, state machine) for features. Use when documenting architecture.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Manage GitHub Projects v2 board: add issues, update field values, and query board state. Use when managing project boards.
Run WCAG 2.2 Level AA accessibility audits against generated UI. Use when a story has ui:true or when asked to audit accessibility.
Generate a complete component file tree wired to design tokens with tests and Gherkin spec. Use when scaffolding a new UI component.
Extract Gherkin scenarios from story markdown files into runnable .feature files and generate step definition stubs. Use when syncing stories to test suites.
Read and write design tokens in W3C DTCG format (tokens.json) and emit CSS, Tailwind, and Mantine outputs. Use when modifying or generating design tokens.
Apply Docker and Docker Compose best practices for containerising services. Use when writing or reviewing Dockerfiles and compose configs.
| name | mermaid-diagrams |
| description | Generate and validate Mermaid diagrams (component, sequence, ER, deployment, state machine) for features. Use when documenting architecture. |
graph TB)sequenceDiagram)erDiagram)graph TB with deployment focus)stateDiagram-v2) — where applicablegraph TB
subgraph "Frontend"
UI["React App"]
end
subgraph "Backend"
API["REST API"]
DB[("PostgreSQL")]
Cache[("Redis")]
end
UI -->|"HTTPS"| API
API --> DB
API --> Cache
sequenceDiagram
actor U as User
participant F as Frontend
participant A as API
participant D as Database
U->>F: Action
F->>A: POST /api/resource
A->>D: INSERT
D-->>A: 201 Created
A-->>F: {id, data}
F-->>U: Success
erDiagram
USER {
uuid id PK
string email UK
timestamp created_at
}
ORDER {
uuid id PK
uuid user_id FK
decimal total
timestamp created_at
}
USER ||--o{ ORDER : "places"
stateDiagram-v2
[*] --> Pending
Pending --> Processing: payment received
Processing --> Completed: fulfilled
Processing --> Failed: error
Failed --> Pending: retry
Completed --> [*]
graph TB
subgraph "Vercel Edge"
FE["Next.js App"]
EF["Edge Functions"]
end
subgraph "AWS"
LB["Load Balancer"]
APP["App Servers"]
RDS[("RDS PostgreSQL")]
EC["ElastiCache Redis"]
end
FE --> EF
EF --> LB
LB --> APP
APP --> RDS
APP --> EC