skills.rest
jpmoya
jpmoyaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, with overused fonts, cliched purple gradients, and predictable layouts. This Skill guides the creation of frontend code with a committed, distinctive 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) before writing any code. - Design System Guidance: Covers typography pairing, cohesive color themes via CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: Explicitly bans overused fonts (Inter, Roboto, Arial), cliched gradients, and predictable component patterns. - Use Case: Ask for a landing page for a coffee brand and receive a complete HTML/CSS page with a distinctive display font, staggered load animations, grain textures, and an asymmetric editorial 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 single bold aesthetic direction before coding, then execute it precisely. Use distinctive display fonts instead of Inter or Roboto, dominant colors with sharp accents instead of purple gradients, and asymmetric layouts with intentional motion rather than default component patterns.

How to choose fonts for a distinctive web design?▼

Pair a characterful display font with a refined body font, avoiding overused families like Arial, Inter, Roboto, and Space Grotesk. Vary font choices across projects so no two designs converge on the same typographic identity.

Does this skill work with React and Vue components?▼

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

What animations work best for web page design?▼

Prioritize one well-orchestrated page load with staggered reveals using animation-delay over scattered micro-interactions. Add scroll-triggered effects and surprising hover states, preferring CSS-only solutions for plain HTML pages.

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, refined typography, and subtle detail work.

Related Skills

Explore More Design & Creative Skills→
WeWake1WeWake1

frontend-design

Generate distinctive production-grade frontend interfaces with typography, color, motion, and interaction guidelines.

Community
Advanced
PlayableIntelligencePlayableIntelligence
307

game-deploy

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

Official
Advanced
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
shinnytechshinnytech

using-shadcn-ui

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

Official
Intermediate