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.

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.

$22

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.

These are instructions for creating design philosophies - aesthetic movements that are then EXPRESSED VISUALLY. Output only .md files, .pdf files, and .png files.

Principle-based design patterns for website sections that avoid AI-generated aesthetics. \n \n Covers five core section types: heroes, cards, CTAs, trust signals, and testimonials with context-specific guidance for different business types \n Teaches WHY and WHEN to use each pattern, not just templates; includes explicit anti-patterns like democratic design, perfect symmetry, and generic copy \n Provides cross-cutting principles on hierarchy, asymmetry, and restraint that apply across all patter

Design handoff bridges design and development, ensuring developers have all information needed to implement designs accurately and efficiently.