Accessibility Audit

Audits components, pages, and designs against WCAG 2.1 AA and outputs a prioritized remediation checklist with code-level fixes. Use this skill whenever the user asks to check accessibility, run a WCAG audit, review color contrast, validate keyboard navigation, check screen reader support, or says things like "is this accessible?", "audit this for a11y", "check this for WCAG", "does this pass accessibility?", "make this accessible", or "review this component for accessibility issues." Also triggers when the user shares a React component, HTML file, CSS token set, or design description and asks for feedback — if accessibility is even a secondary concern, use this skill. Works across HTML pages, React components, Eleventy sites, CSS design tokens, and design mockup descriptions.

Creates and manages design token systems — the single source of truth for visual decisions (color, spacing, typography, shadow, radius, motion, z-index). Use when setting up a design system, defining CSS custom properties, generating a Tailwind theme config, extracting tokens from Figma, auditing inconsistent hardcoded values, or migrating scattered magic numbers into a structured token architecture.

Converts Figma designs into production-ready code adapted to the project's stack, components, and design token system. Use when the user shares a figma.com URL (design, board, slides, or make file), asks to implement a Figma design, or says "build this" while sharing a Figma link. Coordinates the Figma MCP tools, the design-tokens skill, and the frontend-design skill into a single structured workflow.

Creates distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications, designing UIs, or when the user asks to create frontend code. Generates creative, polished code that avoids generic AI aesthetics.

Generates a fully self-contained interactive HTML architecture diagram for a software project. Use this skill whenever the user asks to "visualize the architecture", "create a diagram of the project", "make an interactive map of the codebase", "diagram the system", "show how the pieces fit together", or any request to produce an explorable/interactive visualization of a project's components, services, agents, APIs, or data flows. Also triggers on "zoom into the architecture", "interactive diagram", "clickable diagram", "architecture overview with details", "show me the tech stack visually", or "I want to explore the codebase structure". Always use this skill when the user wants something richer than a static diagram — especially if they mention zoom, click-through, detail panels, or multiple layers of information.