skills.rest
Clay-HHK
Clay-HHKCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate production-grade frontend interfaces with distinctive typography, color, motion, and layout design.

1|Updated Mar 5, 2026
Search Tags:#typography#ui#landing page#frontend#react#css#web design
One-click install
npx skills add https://github.com/Clay-HHK/claude-skills --skill frontend-design-clay-hhk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/Clay-HHK/claude-skills/tree/main/frontend-design
Command: npx skills add https://github.com/Clay-HHK/claude-skills --skill frontend-design-clay-hhk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, using overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of distinctive, production-grade frontend code with a committed aesthetic direction instead of cookie-cutter output. ## Core Features & Use Cases - Aesthetic Direction Selection: Commits to a bold design tone (brutalist, editorial, retro-futuristic, luxury, etc.) before writing any code. - Design Guidelines: Applies concrete rules for typography pairing, CSS variable color systems, motion and micro-interactions, spatial composition, and textured backgrounds. - Framework Flexibility: Produces working HTML/CSS/JS, React, or Vue code matched to the complexity of the design vision. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, cohesive palette, staggered load animations, and a memorable layout rather than a generic template. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using the frontend-design skill.

Frequently Asked Questions about frontend-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make AI-generated websites look less generic?▼

Commit to a specific aesthetic direction before coding, such as brutalist, editorial, or retro-futuristic. Pair a distinctive display font with a refined body font, use dominant colors with sharp accents, and avoid default choices like Inter, Roboto, and purple gradients on white.

How to add animations to a frontend page?▼

Prioritize CSS-only animations for plain HTML, and use the Motion library for React projects. Focus on high-impact moments like one orchestrated page load with staggered reveals via animation-delay, plus scroll-triggered and hover states.

Does this skill work with React and Vue components?▼

Yes, it produces working code in HTML/CSS/JS, React, Vue, or other frameworks depending on the stated technical constraints. Implementation complexity is matched to the aesthetic vision, from restrained minimalism to elaborate maximalist effects.

What fonts should I avoid in web design?▼

Avoid overused generic families like Inter, Roboto, Arial, and system fonts, as well as commonly converged choices like Space Grotesk. Choose characterful, unexpected fonts and pair a distinctive display font with a refined body font.

When should I use minimalist versus maximalist design?▼

Both work when executed with intentionality. Maximalist designs need elaborate code with extensive animations and effects, while minimalist designs need restraint, precision, and careful attention to spacing, typography, and subtle details.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
tenequmtenequm
32

shadcn-tailwind

Build UIs with Tailwind CSS v4 and shadcn/ui using CSS-first configuration.

Community
Intermediate