design▌

This skill helps you generate custom design system rules tailored to your project's specific needs. These rules guide AI coding agents to produce consistent, high-quality code when implementing Figma designs, ensuring that your team's conventions, component patterns, and architectural decisions are followed automatically.

Structured dialogue tool for collaboratively designing features, APIs, and architecture through phased information gathering and validation. \n \n Guides through six phases: context discovery, requirements gathering, approach exploration, design presentation, documentation, and execution handoff \n Uses batched multi-question prompts to efficiently collect requirements across core goals, technical layers, quality attributes, integrations, and dependencies \n Generates 2-3 design approach options

Mobile-first responsive layouts using CSS Grid, Flexbox, and media queries. \n \n Covers three core layout techniques: Flexbox for flexible component layouts, CSS Grid for structured multi-column designs, and mobile-first media queries for device adaptation \n Includes reference guides for navigation, typography, cards, and grid-based layouts with working code examples \n Emphasizes mobile-first development strategy, cross-browser compatibility, and accessible design patterns across all device s

$22

Use this skill to create or update full-page screens in Figma by reusing the published design system — components, variables, and styles — rather than drawing primitives with hardcoded values. The key insight: the Figma file likely has a published design system with components, color/spacing variables, and text/effect styles that correspond to the codebase's UI components and tokens. Find and use those instead of drawing boxes with hex colors.

Audit UI code against Web Interface Guidelines with automated compliance checking. \n \n Fetches the latest guidelines from a remote source before each review, ensuring rules stay current \n Accepts file paths or patterns as input; prompts for clarification if none provided \n Outputs findings in a concise file:line format for quick issue identification \n Triggered by user requests like \"review my UI,\" \"check accessibility,\" \"audit design,\" or \"review against best practices\" \n

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Audit UI code against Web Interface Guidelines with automated compliance checking. \n \n Fetches the latest guidelines from a remote source before each review, ensuring rules stay current \n Accepts file paths or patterns to review, or prompts the user if none are specified \n Outputs findings in a concise file:line format for quick issue identification \n Covers all rules defined in the fetched guidelines, including design, accessibility, and UX patterns \n

If you see unfamiliar placeholders or need to check which tools are connected, see CONNECTORS.md.

Framework-agnostic rules for accessible, performant, responsive web interfaces aligned with WCAG 2.2 and modern web standards. \n \n Comprehensive accessibility guidance covering semantic HTML, ARIA, keyboard navigation, focus management, color contrast, forms, and error handling with specific WCAG success criteria mappings \n Mobile-first responsive design using modern CSS (clamp, container queries, logical properties) and touch-friendly targets; no horizontal scrolling at 320px width \n Perfor