skills.rest
mccleod1290
mccleod1290COMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Generate distinctive production-grade frontend interfaces with cohesive aesthetic direction and polished code.

1|Updated Jul 2, 2026
Search Tags:#typography#landing page#frontend#react#css#web design#ui design
One-click install
npx skills add https://github.com/mccleod1290/bb-agentic-setupv2 --skill frontend-design-mccleod1290
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/mccleod1290/bb-agentic-setupv2/tree/main/documenting-skills/frontend-design
Command: npx skills add https://github.com/mccleod1290/bb-agentic-setupv2 --skill frontend-design-mccleod1290

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? AI-generated web interfaces often look generic, with overused fonts, cliched purple gradients, and cookie-cutter layouts. This Skill guides the creation of frontend code with a deliberate, distinctive aesthetic direction so every interface feels intentionally designed rather than templated. ## Core Features & Use Cases - Aesthetic Direction First: Commits to a bold conceptual direction (brutalist, editorial, retro-futuristic, minimal, maximalist) before writing any code. - Design Quality Guidelines: Covers typography pairing, color systems with CSS variables, motion and micro-interactions, spatial composition, and atmospheric backgrounds. - Anti-Generic Rules: 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 page with a distinctive display font, grain texture, staggered load animations, and an asymmetric editorial layout. ## 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, pair a distinctive display font with a refined body font, and use dominant colors with sharp accents. Avoid generic fonts like Inter and cliched purple-gradient schemes, and add atmospheric details like grain textures or layered transparencies.

What frameworks does this frontend design skill support?▼

It produces working code in HTML/CSS/JS, React, Vue, and similar frameworks. For React projects it recommends the Motion library for animations, while plain HTML pages should prioritize CSS-only animation solutions.

How should I handle animations in frontend design?▼

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-triggering and surprising hover states.

Which fonts should I avoid in web UI design?▼

Avoid overused generic families like Inter, Roboto, Arial, and system fonts, and do not converge on common choices like Space Grotesk across generations. Instead choose unexpected, characterful fonts paired with a refined body font.

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

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Community
Intermediate
PostalocityPostalocity
1

ckm:ui-styling

Integrate shadcn/ui with Tailwind CSS to enforce design tokens and CSS variable theming.

Official
Advanced