Agent skill · design visual · sundial-org
human-optimized-frontend
Generates a frontend interface that is visually pleasing and experientially sound by jointly optimizing aesthetics, motion graphics, and user experience (UX) using quantified evaluation. Use only when the user explicitly invokes this skill by name to redesign a frontend. Trigger keywords: use human-optimized-frontend, redesign frontend, redesign interface.
Why this skill is useful
Adds a comprehensive set of design guidelines and quantitative evaluation metrics for frontend interfaces that are not commonly found in standard design practices.
What it needs
About 4k tokens when loaded. Last updated 2026-03-07. 639 stars on the source repository.
What this skill does
Activation Criteria Activate this skill only when the user explicitly instructs the agent to redesign a frontend and references this skill by name. Do not activate for: Conceptual discussion or critique only Coding or implementation tasks Inspiration, references, or visual examples Partial or component-level design requests Execution Steps 1. Context Intake Consume all provided information about the interface. If context is missing, assume a neutral functional product with general-purpose usage. Do not assume branding, audience psychology, or business goals unless explicitly stated. 2. Direction Lock (Aesthetic + UX) Select exactly one aesthetic direction. Select exactly one UX interaction philosophy (e.g. clarity-first, flow-driven, exploration-led). All visual, motion, and interaction decisions must reinforce both. Do not mix stylistic or interaction paradigms. 3. Initial Design Generation Typography Body text baseline: 15–18px equivalent Heading scale: H1 = body × 2.2–2.6 H2 = body × 1.6–1.9 H3 = body × 1.3–1.5 Line height: Body: 1.45–1.6 Headings: 1.15–1.3 Font rule: Serif + sans-serif pairing OR single family with ≥ 4 weights Letter spacing: Headings: -1% to -3% Body: 0% to +1% Prohibited fonts: system defaults, Inter, Roboto, Arial. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills sundial-org/human-optimized-frontend