spb/ultra-sharp-agent-skills Public

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