UI Design & Frontend Skills

Builds the full component hierarchy from the raw design tree — mapping Figma components to atoms, molecules, and sections. Produces a component tree with names, props, and nesting relationships. Use this skill after layout-analyzer completes. All component names it assigns become the canonical names used by the developer.

Reads Figma variables, token files, theme configs, and existing CSS custom properties to determine whether a design system exists. Outputs a structured token detection result. Use this skill at the start of every pipeline run, in parallel with framework-detector.

Reads a Figma file via the Figma MCP as the primary method, falling back to a Figma share URL if MCP is unavailable. Returns the raw design tree for all downstream designer skills. Use this skill whenever a Figma link or file is provided and design parsing needs to begin.

Translates Figma auto-layout, constraints, and spacing rules into explicit CSS intent — flex vs grid, gap values, padding rhythms, overflow behaviour. Produces a layout map keyed by section name. Use this skill after figma-reader completes, before component-mapper runs.

Generates and injects meta title, meta description, and Open Graph tags (og:title, og:description, og:image) into the generated HTML. Derives content from the section manifest and Figma text content. Use this skill after semantic-auditor completes.

Identifies performance issues in the generated code that affect search ranking — images missing width/height attributes, images below the fold missing lazy loading, and render-blocking script or style patterns. Produces a report with specific file and line references. Use this skill after meta-writer completes.

Assembles a live, renderable artifact from the generated code files that the user can interact with directly in the conversation. Use this skill after fidelity-checker completes, as part of the QA output bundle.

Validates generated code for accessibility compliance — WCAG AA color contrast, ARIA roles and landmark regions, heading hierarchy, and image alt text. Produces a list of issues keyed by severity. Use this skill after responsive-adapter completes and before fidelity-checker runs.

Wraps all generated code with mobile-first responsive breakpoints using the syntax and conventions defined in framework.md. For Tailwind outputs, applies sm/md/lg prefixes. For plain CSS, writes @media blocks. Use this skill after token-applier completes.

Bootstraps the full file and folder structure for the detected framework when no codebase exists. Creates entry files, config stubs, component directories, and an initial index. Uses framework.md as the only source of truth for the correct file structure. Use this skill when framework-detector or setup-wizard indicates no existing codebase was found.

Identifies landing page sections present in the Figma design — hero, navbar, features, testimonials, pricing, FAQ, CTA, footer — and produces a section manifest with order, content type, and layout hints. Use this skill after component-mapper completes.

Audits the generated HTML for semantic correctness — checks for a single h1, correct heading hierarchy, presence of landmark regions (main, nav, footer, aside), and document outline completeness. Use this skill after QA reports zero critical issues, as the first step in the SEO layer.

Generates a sitemap.xml and robots.txt from the detected section and page structure. For single-page sites, produces a single-entry sitemap. Robots.txt defaults allow all crawlers with a sitemap reference. Use this skill after performance-advisor completes.

Injects design token values from tokens.md into generated code — as Tailwind theme extensions, CSS custom properties, SCSS variables, or framework-specific theme objects depending on what framework.md specifies. Use this skill after code-generator completes.

Extracts all design tokens from the raw design tree — colors, typography, spacing, shadows, border radii — and writes them to tokens.md. Tokens from Figma variables take priority over inferred values. Use this skill after figma-reader completes and before any code generation begins.