# 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, 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)