skills.rest
phm-aguiar
phm-aguiarCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

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 Planning: Commits to a bold design concept (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design System Guidance: Provides concrete rules for typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and textured backgrounds. - Working Code Output: Produces functional HTML/CSS/JS, React, or Vue implementations matched in complexity to the chosen aesthetic vision. - Use Case: Ask for a landing page for a coffee brand, and receive a complete page with a distinctive display font, warm editorial palette, staggered load animations, and asymmetric 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 create 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 staggered load animations rather than defaulting to Inter and purple gradients.

How to choose fonts for web UI design?▼

Avoid generic fonts like Arial, Inter, and Roboto. Select a characterful display font paired with a refined body font that matches the interface's tone. Distinctive, unexpected font choices elevate the design more than safe system defaults.

Does this skill work with React and Vue components?▼

Yes, it supports HTML/CSS/JS, React, Vue, and other frameworks. For React projects, it recommends the Motion library for animations, while plain HTML implementations should prioritize CSS-only animation solutions.

What makes a frontend design look generic or like AI slop?▼

Generic designs use overused fonts like Inter and Roboto, cliched purple gradients on white backgrounds, predictable layouts, and cookie-cutter component patterns. Distinctive work commits to a clear point of view with intentional typography, color, and composition choices.

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, precise spacing, and refined typography. Match implementation complexity to the aesthetic vision.

Related Skills

Explore More Design & Creative Skills→
DanialHaseebDanialHaseeb

bolder

Analyze bland designs and produce a focused amplification plan.

Community
Intermediate
thkim2015thkim2015

moai-platform-deployment

Deploy and host applications on Vercel, Railway, and Convex platforms.

Community
Advanced
PMDevSolutionsPMDevSolutions
16

visual-qa-verification

Validate visual parity between a generated WordPress FSE theme and its Figma design.

Official
Advanced
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate