skills.rest
chhpt
chhptCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

Updated Aug 23, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/chhpt/skills --skill frontend-design-chhpt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/chhpt/skills/tree/main/skills/frontend-design
Command: npx skills add https://github.com/chhpt/skills --skill frontend-design-chhpt

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 First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, maximalist, refined minimal, etc.) before writing any code. - Design Quality Guidelines: Applies concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Safeguards: Explicitly avoids overused fonts (Inter, Roboto, Arial), cliched color schemes, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand, and receive a complete HTML/CSS/JS page with a distinctive display font, warm editorial palette, staggered load animations, and grain texture overlays rather than a generic template look. ## Quick Start Build a landing page for a specialty coffee brand with a bold editorial aesthetic using HTML, CSS, and JavaScript.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I build a landing page that doesn't look AI-generated?▼

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 add atmospheric details like grain overlays or gradient meshes.

What fonts should I avoid in frontend design?▼

Avoid overused generic fonts like Inter, Roboto, Arial, and default system fonts, which signal generic AI output. Instead choose characterful, unexpected typefaces and pair a distinctive display font with a refined body font for hierarchy.

Does this work with React components or only plain HTML?▼

It supports HTML/CSS/JS, React, Vue, and other frameworks. For React, the Motion library is recommended for animations, while plain HTML implementations should prioritize CSS-only animation solutions.

How do I add animations to a web page effectively?▼

Focus on high-impact moments rather than scattered micro-interactions. One well-orchestrated page load with staggered reveals using animation-delay creates more delight, supplemented by scroll-triggered effects and surprising hover states.

When should I use minimalism versus maximalism in web 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
julianromlijulianromli

polish

Polish front-end interfaces by fixing alignment, spacing, consistency, and micro-detail issues across breakpoints and accessibility scenarios.

Community
Advanced
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate