frontend-design

Create a visual content design system for a website — typographic scale, vertical rhythm, and styled content blocks (citations, callouts, code, tables, lists, alerts, examples). Use when building a visual foundation, type scale, or content components, or on "create a design system", "style the content blocks", "make the content look good", "set up typography", "create visual hierarchy", "everything looks the same", "bland design", "blocks have no personality", "grille visuelle", "mise en page de contenu", "système typographique". Also triggers when a new site needs its visual layer built from scratch. Complements frontend-audit-visual (diagnoses) and frontend-audit-functional (audits). This skill creates, those skills audit.

Audit and improve the functional quality of an existing website or web application: interactive states, structural accessibility, responsive layout, form UX, CSS performance, and motion/animation. Use this skill when the user wants to fix interactivity, accessibility, responsive behavior, or animation issues — or says things like "fix the hover states", "it's not accessible", "broken on mobile", "the layout shifts", "forms feel wrong", "focus is invisible", "add transitions", "too many repaints", "prefers-reduced-motion", "fix the tab order", "ARIA is wrong", "the animation is janky", "breakpoints are off", "touch targets too small", "my form has no validation", "skip to content link", "screen reader issues". Also use when the user shares code and asks what's broken functionally, or wants a UX/accessibility review. For visual issues (colors, typography, hierarchy, whitespace, font loading), use frontend-audit-visual instead. Both skills share the same token system and can run sequentially.

Audit and improve the visual quality of an existing website or web application: color palette, typographic hierarchy, content readability, information density, and web font performance. Use this skill when the user wants to improve visual quality, color palette, visual hierarchy, readability, or whitespace — or says things like "improve the UI", "audit the design", "fix the colors", "the site feels wrong", "hierarchy is broken", "improve readability", "clean up the CSS", "make the site feel more professional", "too much info on the page", "the text is hard to read", "fix the typography", "dark mode looks off". Also use when the user shares HTML/CSS code and asks what could be better visually, or wants a design review focused on aesthetics and legibility. For interactivity, accessibility, responsive layout, forms, animations, or CSS performance issues, use frontend-audit-functional instead. Both skills share the same token system and can run sequentially on the same codebase.

Orchestrate a complete frontend design pipeline — audit, diagnose, and build a visual system for a website. Combines frontend-audit-visual, frontend-audit-functional, and content-design-system into a unified workflow with cross-synthesis and a single deliverable. Use when the user wants a full design review, a complete visual overhaul, or a new site's design foundation — or says things like "audit and fix my site", "redesign the frontend", "build the visual layer from scratch", "full design review", "improve everything", "the site needs a complete overhaul", "create the CSS foundation", "make my site professional", "refonte visuelle", "audit complet du frontend". Also triggers when the user's request clearly spans visual + functional + content system concerns. Do NOT use for a single-dimension issue (just colors, just accessibility) — use the individual skills directly instead.

Audit and optimize the semantic HTML of a website or web page. Use this skill when the user wants to improve accessibility, SEO, or code quality of their HTML — or says things like "improve the semantics", "fix the HTML structure", "make it accessible", "improve SEO markup", "fix the heading hierarchy", "replace divs with proper elements", "add ARIA labels", "fix form accessibility", "audit the HTML", or "make the markup more meaningful". Also use when the user shares HTML and asks if it's correct, well-structured, or standards-compliant. This skill produces structured violation reports before proposing any corrections, never improvising generic changes.