frontend

# Frontend Skill Four modes: **Design** (UX copy, design systems, critique, accessibility, handoff, research), **Distinctive** (surface check, then brand-led visual direction for landing and campaign pages), **HTML-Artifact** (self-contained HTML generation with 8 shapes), and **Three.js** (3D web apps in imperative, R3F, or WebGPU paradigms). ## Load first for any UI work Before DESIGN, DISTINCTIVE, HTML-ARTIFACT, or a THREEJS UI overlay (HUD, menu, panel), read `skills/shared-patterns/ui-design-judgment.md`. Take starting values from `ui-design-recipes.md` and before/after fixes from `ui-design-examples.md` in the same folder. The mode references below add depth. Where they conflict with the core doc, the core doc wins. Every default can be overridden; state the reason. ## Mode Selection Classify the request into one mode before loading references. | Mode | Signals | What to Load | |------|---------|-------------| | **DESIGN** | UX copy, design system, design critique, accessibility, WCAG, design handoff, user research | Design-refs per sub-mode table below | | **DISTINCTIVE** | Frontend design, typography, visual identity, anti-cliche, text animation, card effects | `references/distinctive-frontend-design-refs/` per step | | **HTML-ARTIFACT** | HTML artifact, make HTML, as HTML, rich visualization, interactive document, pptx, deck | `references/html-artifact-refs/` per shape | | **THREEJS** | Three.js, 3D scene, WebGL, WebGPU, react three fiber, R3F, GLTF | `referenc...