1---2name: frontend3description: "Context-led frontend design. Derives art direction from product, audience, brand, content, and the existing system; avoids generic defaults. Triggers: frontend, UI, CSS, styling, visual, theme, component, layout, responsive, accessibility, design system, aesthetic, animation, motion, abyss, spatial, verdant, substrate, ember, arctic, void, patina, signal, kinetic-type, haunted-machine, cursor-field, real-weight, one-surface, liquid-material, held-breath, grand-tour."4allowed-tools: Read, Write, Edit, Bash, Grep, Glob5kernel:6 kind: methodology7 version: 28 side_effects: none9 confirmation: none10---1112<skill id="frontend">1314<purpose>15Make interfaces feel intentional because their visual choices fit the actual product.16Distinctiveness is not a pile of effects. It is a coherent point of view with fewer17unexamined defaults.18</purpose>1920<context-fit>21Before styling, recover the evidence already present in the task and repository:22231. Product: what the interface does and which action matters most.242. Audience and use context: device, environment, familiarity, urgency, accessibility needs.253. Brand: existing tokens, logo, type, imagery, voice, screenshots, and reference qualities.264. Content: real density, length, hierarchy, empty/error/loading states, and localization risk.275. Technical constraints: current stack, component library, performance budget, supported browsers.2829Preserve and extend the existing design system when one exists. Do not replace a coherent30brand because a variant or personal preference is louder. If the evidence is incomplete,31make the smallest reversible assumption and state it; ask only when the answer changes the32product direction.33</context-fit>3435<art-direction>36Write a tiny direction before implementation:3738- desired feeling in 2-3 plain words;39- one dominant visual idea;40- typography, color, layout, imagery, and motion choices tied to evidence;41- 2-3 defaults to avoid for this specific project.4243No choice is universally premium. A system font can be correct for speed or platform44familiarity. Symmetry can communicate calm. Flat color can be the strongest choice. Huge45type, gradients, glass, noise, asymmetry, and animation are tools—not proof of taste.46</art-direction>4748<variants>49Optional lenses: abyss, spatial, verdant, substrate, ember, arctic, void, patina, signal.50Load `variants/{name}.md` when the user names one or when exploration genuinely benefits.51Variants describe mood, never mandatory components, fonts, palettes, effects, or layouts.52</variants>5354<motion-languages>55Optional motion lenses, orthogonal to mood variants: kinetic-type, haunted-machine,56cursor-field, real-weight, one-surface, liquid-material, held-breath, grand-tour.57Load `motion/{name}.md` when the user names one, when animation is central to the ask, or58when exploration genuinely benefits. A motion language defines how the page moves — its59dominant idea, signature move families, prohibitions, and reduced-motion degrade — never60specific components, libraries, durations, or easing values.6162Compose freely: any mood x any motion language, either alone, or neither. Context-fit63always wins over any lens; a lens bends to the content, never the reverse. Each language's64prohibition list is binding while that language is active — bans differentiate more than65moves do. All languages inherit the reduced-motion hard bar: every design must survive66with its motion stripped.67</motion-languages>6869<exploration>70When the brief is open and distinctiveness matters, run a small tournament: generate 2-371divergent interpretations of the same mood x motion pick (or different picks), compare72rendered results, fork the winner. A lens is a direction vector, not a template — two runs73of the same pick on different products should rhyme, never match.74</exploration>7576<hard-bars>77- Hierarchy: the primary action and reading order are obvious without explanation.78- Responsive: content fits and remains usable at the project breakpoints; touch targets are79 at least 44px where touch is expected.80- Accessible: semantic structure, keyboard operation, visible focus, useful labels/alt text,81 AA contrast, reduced-motion support, and no meaning encoded by color alone.82- Content-real: test realistic long/short copy plus empty, error, loading, and disabled states83 when the interface has them.84- Performance: avoid decorative weight that delays the main content; size images, subset or85 avoid webfonts, and use JavaScript only for behavior that needs it.86- System-fit: reuse the repository's components, tokens, naming, and state patterns unless the87 task explicitly includes changing the system.88</hard-bars>8990<implementation>91Use the smallest structure the product needs. Reusable components should follow the existing92stack; a one-off static section does not need a component framework. Centralize repeated93visual decisions in tokens. Prefer CSS for presentation, semantic HTML for structure, and94progressive enhancement for interaction.9596Motion must explain change, guide attention, or provide feedback. If it does none of those,97remove it. Decorative texture, depth, and unusual composition need the same justification.98</implementation>99100<anti-convergence>101Generic output usually comes from an unexamined default, not from a forbidden ingredient.102Before finishing, name the most dominant visual decision and ask:1031041. What evidence caused this choice?1052. Is it inherited from the product, or copied from recent model habits?1063. Would removing it make the interface clearer or more specific?107108Common warning signs—not automatic bans—include purple gradient startup pages, identical109rounded cards, default component-library styling, ornamental dashboards, centered-everything110layouts, decorative blobs, fake testimonials, and a fashionable font with no brand reason.111Change a warning sign when it is unexamined; keep it when the context earns it.112</anti-convergence>113114<verification>115Do visual QA on rendered output, not source alone. Inspect screenshots at the task's target116sizes (for a general web page, start with 375, 768, and 1440 widths), then exercise keyboard,117focus, hover/touch, overflow, and reduced motion. Fix the largest hierarchy or usability118problem first and re-check. Never claim visual completion without seeing the rendered result.119</verification>120121<reference>122Read `skills/frontend/reference/design-research.md` when deeper rationale is useful.123Read `skills/frontend/reference/component-sources.md` before pulling any third-party124animated component or effect: it lists vetted open-source libraries, per-library licenses,125a do-not-use ledger, and the binding rule — pull the primitive, restyle it to the active126direction, never ship it stock.127</reference>128129<on_complete>130Report the art direction, evidence behind the dominant choices, sizes/states visually checked,131and any accessibility or performance bar not verified.132</on_complete>133134</skill>
hashgraph-online