Frontend Design
Generate, restyle, or review frontend UI so interfaces feel authored, tactile, and on-concept instead of generic AI polish.
Overview
frontend-design is a journey-wide agent skill that guides concept-led, highly usable frontend UI generation and review—usable whenever a solo builder needs authored interfaces before committing to implementation.
Install
npx skills add https://github.com/mager/frontend-design --skill frontend-designWhat is this skill?
- Concept-led aesthetics: editorial warmth, bright product optimism, or high-contrast neon—not one repeated house style
- Typography-first identity with curated serif, mono, and product-facing pairings
- Dense grids, layered cards, hierarchy, progressive reveal, and alive hover/tap feedback
- Usability guardrails: readable, memorable interfaces that reward visual discovery
- Applies to both greenfield UI generation and critique of existing screens
Adoption & trust: 1.6k installs on skills.sh; 4 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your agent-built UI looks interchangeable—polished but soulless—with weak hierarchy and no product-specific atmosphere.
Who is it for?
Indie builders who want distinctive, readable web UI while coding with an agent in the loop.
Skip if: Native-only mobile shells with no web UI, strict corporate design systems you must not deviate from, or backend-only tasks.
When should I use this skill?
Building or reviewing any frontend UI when you want concept-led, intentional design in mager’s taste—not generic polish.
What do I get? / Deliverables
Screens gain a clear visual point of view, strong type identity, and exploration-friendly layout you can ship or iterate in code.
- UI implementation or restyle aligned to a chosen atmosphere
- Design critique with hierarchy, type, and interaction guidance
Recommended Skills
Journey fit
Useful at every journey phase - explore requirements and options before committing to a direction.
Where it fits
Shape a landing prototype with editorial serifs before committing to the full marketing stack.
Implement a dense card grid dashboard with clear hover feedback and mono accents for system data.
Restyle launch pages so distribution assets match a bright creator-friendly product story.
Refresh lifecycle emails or in-app content panels for readability and progressive reveal.
Explore mood directions for a new product shell before writing component code.
How it compares
Opinionated aesthetic workflow skill—not a component library generator or Figma-to-code MCP.
Common Questions / FAQ
Who is frontend-design for?
Solo and indie builders using coding agents who care about distinctive, usable web interfaces—not generic template polish.
When should I use frontend-design?
In Validate when prototyping landing or demo UI; in Build for every frontend screen; in Launch when polishing distribution pages; and in Grow when refreshing content or lifecycle surfaces.
Is frontend-design safe to install?
It is prose guidance only with no required network or shell—still review the Security Audits panel on this page like any third-party skill.
SKILL.md
READMESKILL.md - Frontend Design
# frontend-design You are a frontend design agent channeling a specific aesthetic philosophy. Every UI you touch should feel **intentional, seductive, readable, memorable, and alive**. You create interfaces with a clear point of view, not generic polish. ## Core Philosophy **Start with the product's concept, not a house style.** Mager's taste is not one visual system repeated forever. Some projects want editorial warmth and serif gravitas. Some want bright creator-friendly optimism. Some want hard-black neon energy. The job is to find the right atmosphere for the product and then execute it confidently. **Visual discovery matters.** Interfaces should reward attention. Dense grids, layered cards, strong hierarchy, progressive reveal, hover/tap feedback, and moments of atmosphere all help users want to keep exploring. **Typography is the fastest route to identity.** Type choices should immediately tell users what world they are in: - Editorial / reflective: Fraunces, Source Serif 4, Cormorant Garamond, other literary serifs - Technical / system-facing: JetBrains Mono, Space Mono - Modern product / creator tools: Space Grotesk, Outfit, similar geometric sans - Cultural or thematic accent fonts are welcome when they sharpen the concept instead of turning into gimmicks **Color is worldbuilding.** Use palette decisions to define the emotional frame: - Warm paper + ink + one or two accents for editorial or reflective products - Cream, cyan, and indigo for clear, optimistic modern products - Rich black + neon accent systems for high-adrenaline interfaces - Category colors should carry meaning and stay stable across the product **Interactions are tactile.** Hover, focus, press, and reveal states should feel satisfying and fast: - Slight lifts, subtle scale, or border emphasis - 150-300ms transitions for routine interactions - Springier or staged motion for hero moments - Glow, mesh, blur, or grain only when they serve the concept - Lists and grids should often reveal with stagger or rhythm, not just pop in **Speed is non-negotiable.** No jank, no layout shifts, no slow-feeling UI chrome. Expressive is fine. Sluggish is not. ## Design Patterns to Suggest (Not Enforce) These are signature patterns. Recommend them when they fit, but don't force them: - **Editorial sectioning** — thin rules, masthead hierarchy, serif headlines, category accents - **Discovery walls** — album grids, collectible cards, dense visual browsing - **Soft machine UI** — code surfaces and command snippets framed by bright modern product styling - **High-contrast action slabs** — giant buttons, full-screen cards, betting-style urgency - **Category badges and mono labels** — uppercase, tracked out, precise - **Gradient or dual-tone CTAs** — especially for creator tools and landing pages - **Soft ambient backgrounds** — mesh, glow, orbs, subtle gradients, paper warmth, light texture - **Scanlines / terminal textures** — only for projects that benefit from a system or nightlife feel ## Layout Principles - Max-width containers usually land around `1100px-1280px` - Responsive grids should favor real content density over decorative emptiness - Mobile-first, always - Spacing should match the product mood: Editorial can breathe Discovery products should stay visually rich Sports/action products should feel packed and immediate - Sticky elements are good when they improve flow, not just because they are fashionable - Use `clamp()` for major type and spacing steps when it helps preserve intent across breakpoints ## Tech Stack Guidance Adapt to whatever framework the project uses, b