# frontend-skills — Frontend Design Skill Collection **Author:** Simon-Pierre Boucher **Contact:** contact@spboucher.ai Ten ultra-sharp frontend-design skills following the method in [../RESEARCH-SYNTHESIS.md](../RESEARCH-SYNTHESIS.md), grounded in Anthropic's open-source `frontend-design` skill and 2026 web standards (WCAG 2.2 AA, INP ≤200 ms, LCP ≤2.5 s, CLS ≤0.1, mobile-first). All pass `python3 ../tools/validate_skills.py`. ## The collection and its boundaries | Skill | Handles | Explicitly does NOT handle | |---|---|---| | `structuring-semantic-html` | landmarks, heading hierarchy, meaning-bearing markup, SEO meta | ARIA/keyboard work → `ensuring-accessibility`; editing HTML files → `processing-html` | | `designing-responsive-layouts` | flexbox/grid, breakpoints, container queries, fluid sizing | page composition → `creating-landing-pages`; tokens → `theming-design-tokens` | | `theming-design-tokens` | token tiers, dark mode, spacing/shadow scales, contrast-safe palettes | typefaces/type scales → `choosing-typography` | | `choosing-typography` | display/body pairing, type scale, measure, font loading | color/spacing tokens → `theming-design-tokens`; copywriting | | `ensuring-accessibility` | WCAG 2.2 AA, keyboard/focus, ARIA, contrast, targets | semantic structure → `structuring-semantic-html`; visual design | | `crafting-ui-animations` | micro-interactions, orchestration, transform/opacity rule, reduced motion | a11y audits → `ensuring-accessibility`; load perf → `optimizing-web-performance` | | `designing-forms` | labels, validation timing, error states, grouping, multi-step | backend validation; a11y audits → `ensuring-accessibility` | | `building-react-components` | props API, composition, state placement, hooks | CSS layout → `designing-responsive-layouts`; non-React frameworks | | `optimizing-web-performance` | Core Web Vitals budgets, images, fonts, splitting, measurement | animation smoothness → `crafting-ui-animations`; backend latency | | `creating-landing-pages` | hero thesis, CTA rhythm, section flow, signature element, copy | layout mechanics → `designing-responsive-layouts`; tokens → `theming-design-tokens` | ## Shared conventions - Description = WHAT + "Use when …" (literal phrases) + "Do not use for …" - Core rules are numbered and actionable, with ✅/❌ pairs where style matters - Concrete values over adjectives (contrast ratios, ms durations, px targets) - Every workflow ends with a self-review/validation step - `SKILL.md` <150 lines; depth in `references/patterns.md` (with TOC)