Design skills
Browse reusable Agent Skills, each with a clear purpose and practical guidance.
172-java-diagrams
Use when you need to generate Java project diagrams — including UML sequence diagrams, UML class diagrams, C4 model diagrams, and UML state machine diagrams — through a modular, step-based interactive process that adapts to your specific visualization needs. Part of the skills-for-java project
Accessibility Audit (WCAG)
A specialised skill for detecting accessibility barriers in React/HTML.
activity-grid
Configure activity grid heatmaps in drizzle-cube dashboards for GitHub-style contribution visualizations. Use when creating activity grids, heatmaps, contribution calendars, or daily activity patterns.
apply-design-system
Apply design tokens and system patterns correctly. Reference for semantic colors, spacing, typography, borders, and shadows. Never use arbitrary values.
arcanea-design-system
Generate UI code that strictly adheres to the Arcanea Brand Guidelines (Cosmic, Glassmorphism, Crystal Accents)
arch-lens-process-flow
Create Process/Execution Flow architecture diagram showing runtime behavior, state transitions, and decision points. Physiological lens answering "How does it behave?"
brainstorm-ideas
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
chakra-design-system
Build and refactor UI in this repo using Chakra UI v2 + Emotion and the repo theme (`app/theme.ts`). Use for Chakra component usage, responsive layout, a11y, theme tokens/semanticTokens, component variants, and UI polish.
cloodle-design-tokens
Cloodle design system tokens for colors, typography, spacing, and components. Use when styling Cloodle interfaces, creating CSS, or implementing consistent visual design across the platform.