frontend-design

This skill guides creation of intentional, production-grade frontend interfaces. Implement real working code with attention to product context, visual coherence, and interaction details. > Harness Hub adaptation: common visual patterns are contextual design evidence, not a blacklist, and intensity follows the product rather than a house style. The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints. ## Design Thinking Before coding, understand the context and commit to a deliberate, context-appropriate aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **Foundation**: Preserve the existing design system, brand assets, platform conventions, and product vocabulary when they are authoritative. - **Tone**: Choose a coherent visual language whose intensity fits the audience, task frequency, and consequences. - **Constraints**: Technical requirements (framework, performance, accessibility). - **Differentiation**: What should be especially clear, useful, or recognizably specific to this product? Choose a clear conceptual direction and execute it with precision. The standard is intentionality, not novelty or intensity. ## On-Demand External Evidence When a user describes a UI element by appearance or behavior and its exact name affects component choice, consult NameThatUI's static Agent index at `https://namethatui.com/l...