{"slug":"frontend-design","title":"frontend-design","tags":["site-building","frontend","frontend","design"],"agent_summary":"This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics","trigger_phrases":["frontend-design","frontend guide","design guide","build ui","landing page","dashboard","web component","frontend design"],"runnable":true,"markdown":"**Trigger:** Use when \"build UI\", \"landing page\", \"dashboard\", \"web component\", \"frontend design\". Production-grade frontend interfaces with distinctive design.\n\nThis skill guides creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.\n\n### Design Thinking\n\nBefore coding, understand the context and commit to a BOLD aesthetic direction:\n- **Purpose**: What problem does this interface solve? Who uses it?\n- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian.\n- **Constraints**: Technical requirements (framework, performance, accessibility).\n- **Differentiation**: What makes this UNFORGETTABLE?\n\nCRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.\n\nThen implement working code (HTML/CSS/JS, React, Vue, etc.) that is:\n- Production-grade and functional\n- Visually striking and memorable\n- Cohesive with a clear aesthetic point-of-view\n- Meticulously refined in every detail\n\n### Frontend Aesthetics Guidelines\n\n- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter. Pair a distinctive display font with a refined body font.\n- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.\n- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals.\n- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.\n- **Backgrounds & Visual Details**: Create atmosphere and depth. Apply gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.\n\nNEVER use: overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (purple gradients on white backgrounds), predictable layouts, cookie-cutter design.\n\n### Mike's Design Standard — Non-Negotiable Rules\n\nEvery website built with this skill must be professional, beautiful, elegant, and built to convert. The benchmark: if a Fortune 500 brand or elite boutique agency built it, it belongs.\n\n**Permanently Banned Aesthetics:**\n- Glassmorphism — frosted glass effects, backdrop-blur cards on gradient backgrounds\n- Neon/Cyber — neon colors, grid lines, glitch effects, monospace-everything\n- Playful/Bouncy — emoji-heavy layouts, confetti blobs, spring-bounce animations\n- Earthy Generic — terracotta + sage + cream \"wellness\" starter kit look\n- Basic SaaS Clone — purple gradient hero, Inter font, three feature cards\n\n**Required in Every Build:**\n1. Clear typographic hierarchy — H1 dominant, H2 supporting, body readable\n2. Conversion anchor above the fold — phone number, primary CTA, or lead form visible without scrolling\n3. Trust signal within 2 sections of hero — reviews, ratings, credentials, or years in business\n4. Real copy — no lorem ipsum, no placeholder text. Write real content.\n5. Mobile-first layout — every section must look good at 375px before desktop\n6. Intentional color palette — max 2-3 colors (primary, dark, accent) + neutral base. No rainbow.\n\n### Niche Design Defaults\n\n**Local Home Services (roofing, HVAC, plumbing, electrical):**\n- Dominant, authoritative — this business owns the market\n- Phone number top-right + sticky header always\n- Above-fold CTA: call or form — never just \"learn more\"\n- Trust signals: licensed, insured, years in business, review count\n- Color: dark authority (charcoal, navy, or deep green) + bold accent (orange, red, or gold)\n- Photography placeholders: crew, trucks, completed jobs — NOT stock handshake photos\n\n**Professional Services (law, finance, consulting, accounting):**\n- Formal, credible, trust-first — the most reliable firm in the room\n- Credentials and awards visible above fold\n- No urgency tactics — gravitas over hype\n- Color: navy, charcoal, burgundy, or forest green + white + minimal accent\n- Headlines: outcome-focused, not feature-focused (\"We Win Cases\" not \"Experienced Lawyers\")\n\n**Health / Med Spa / Cosmetic / Wellness (premium):**\n- Aspirational and clinical simultaneously\n- Before/after results prominent\n- Consultation CTA (not \"buy now\")\n- Color: soft neutrals (off-white, warm gray) + one refined accent (dusty rose, sage, slate)\n- Headlines: transformation language, not clinical jargon\n\n**SaaS / Tech / Digital Products:**\n- Product-led — show the thing, let it speak\n- Social proof: logos, user count, review aggregate\n- Single clear value prop, above fold\n- Color: dark or light depending on product — never random\n- Headlines: outcome + speed (\"Get X in Y time\")\n\n### Design System with CSS Variables\n\nDefine ALL brand values as CSS custom properties in `globals.css`:\n\n```css\n:root {\n --color-primary: #1B4D3E;\n --color-primary-light: #2A6B56;\n --color-accent: #D4A853;\n --color-bg: #FAFAF8;\n --color-bg-alt: #F0EDE6;\n --color-text: #1A1A1A;\n --color-text-muted: #6B7280;\n --font-display: 'Playfair Display', Georgia, serif;\n --font-body: 'Inter', system-ui, sans-serif;\n --radius-sm: 0.5rem;\n --radius-md: 1rem;\n --shadow-card: 0 4px 24px rgba(0,0,0,0.06);\n --shadow-elevated: 0 8px 40px rgba(0,0,0,0.12);\n --max-width: 1200px;\n}\n```\n\nReference via Tailwind arbitrary values: `bg-[var(--color-primary)]` or direct CSS `color: var(--color-text)`.\n\n### Font Loading\n\nAlways use `next/font/google` for Google Fonts. Never use `` tags or external CDN:\n\n```tsx\nimport { Playfair_Display, Inter } from 'next/font/google';\n\nconst playfair = Playfair_Display({\n subsets: ['latin'],\n variable: '--font-display',\n display: 'swap',\n});\n```\n\nApply font variables on ``: className with both variables.\n\n### Image Handling\n\nALL images use `next/image`. Never use `` tags.\n- Above-fold hero: use priority prop\n- Below-fold: default lazy loading\n- Image sources: Always local (/images/site/). Never use Unsplash, Pexels, or any stock photo CDN.\n- Use CSS bg-gradient placeholders during development, not stock photo URLs.\n\n### Component Architecture for Local SEO Sites\n\n**Shared components** (used on every page):\n- `Header.tsx` - Sticky, phone number + CTA always visible, mobile hamburger\n- `Footer.tsx` - Comprehensive links: services, areas, blog, utility pages\n- `TrustBar.tsx` - Licensed, insured, review count, guarantee\n- `CTASection.tsx` - Reusable full-width CTA with phone + button + neighborhoods\n- `SchemaMarkup.tsx` - JSON-LD injection via script tag with type application/ld+json\n\n**Page-specific components:**\n- `ServiceCard.tsx` - Image + title + brief + link\n- `AreaCard.tsx` - Area name + brief + link\n- `TestimonialCard.tsx` - Quote, name, neighborhood, star rating\n- `BeforeAfterSlider.tsx` - Interactive drag slider for before/after image pairs\n- `PricingTable.tsx` - Service rows with prices and features\n\n### Conversion-Focused Layout\n\nEvery page follows this vertical rhythm:\n1. Hero with CTA (above fold)\n2. Trust bar (immediately below hero)\n3. Primary content sections\n4. Mid-page CTA (after ~2 scroll depths)\n5. More content\n6. Testimonials / social proof\n7. Full-width CTA section (bottom)\n\nPhone number visible at ALL times via sticky header.\n\n### Premium Component Sources\n\n- **21st.dev** — Animated backgrounds, shaders, particle effects, mouse-highlight cursors, text effects\n- **shadcn/ui** — Functional UI components: forms, dialogs, dropdowns, tables, toasts, command palettes\n- **Aceternity UI** — Wow-factor hero sections: spotlight effects, 3D card tilts, moving borders\n- **Magic UI** — Animated counters, shimmer buttons, meteor shower effects, border beam animations\n- **Framer Motion** — Page transitions, scroll-triggered reveals, gesture interactions\n- **GSAP (GreenSock)** — Pro-level scroll animations, complex timelines, SVG animation, pin sections\n- **Lenis** — Smooth scroll — replaces native browser scroll with buttery-smooth interpolated scrolling\n- **Animate.css** — Simple, no-JS entrance animations — fade in, bounce, slide in\n\n### Component Selection Guide\n\n| Need | Use |\n|------|-----|\n| Functional form/dialog/table | shadcn/ui |\n| Animated hero background | 21st.dev or Aceternity |\n| Scroll-triggered reveals | Framer Motion or GSAP |\n| Number counters / shimmer effects | Magic UI |\n| Complex scroll storytelling | GSAP + Lenis |\n| Quick entrance animations | Animate.css |\n| Custom interactive animations | Framer Motion |\n| SVG animation / complex timelines | GSAP |\n| Smooth scroll experience | Lenis |\n\n### Animation Screenshot Rule\n\nNever run visual-qa-loop on animated components. When framer-motion, gsap, animate__ classes, @keyframes, or transition: are detected — skip the screenshot loop for that element. Tell the user: \"This component uses animation — screenshots won't capture it accurately. Please review it in the browser.\"\n\n---\n","html":"

Trigger: Use when \"build UI\", \"landing page\", \"dashboard\", \"web component\", \"frontend design\". Production-grade frontend interfaces with distinctive design.

\n

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic \"AI slop\" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

\n

Design Thinking

\n

Before coding, understand the context and commit to a BOLD aesthetic direction:

\n\n

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work — the key is intentionality, not intensity.

\n

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

\n\n

Frontend Aesthetics Guidelines

\n\n

NEVER use: overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (purple gradients on white backgrounds), predictable layouts, cookie-cutter design.

\n

Mike's Design Standard — Non-Negotiable Rules

\n

Every website built with this skill must be professional, beautiful, elegant, and built to convert. The benchmark: if a Fortune 500 brand or elite boutique agency built it, it belongs.

\n

Permanently Banned Aesthetics:

\n\n

Required in Every Build:

\n
    \n
  1. Clear typographic hierarchy — H1 dominant, H2 supporting, body readable
    2. \n
  2. Conversion anchor above the fold — phone number, primary CTA, or lead form visible without scrolling
    3. \n
  3. Trust signal within 2 sections of hero — reviews, ratings, credentials, or years in business
    4. \n
  4. Real copy — no lorem ipsum, no placeholder text. Write real content.
    5. \n
  5. Mobile-first layout — every section must look good at 375px before desktop
    6. \n
  6. Intentional color palette — max 2-3 colors (primary, dark, accent) + neutral base. No rainbow.
    7. \n
\n

Niche Design Defaults

\n

Local Home Services (roofing, HVAC, plumbing, electrical):

\n\n

Professional Services (law, finance, consulting, accounting):

\n\n

Health / Med Spa / Cosmetic / Wellness (premium):

\n\n

SaaS / Tech / Digital Products:

\n\n

Design System with CSS Variables

\n

Define ALL brand values as CSS custom properties in globals.css:

\n
:root {\n  --color-primary: #1B4D3E;\n  --color-primary-light: #2A6B56;\n  --color-accent: #D4A853;\n  --color-bg: #FAFAF8;\n  --color-bg-alt: #F0EDE6;\n  --color-text: #1A1A1A;\n  --color-text-muted: #6B7280;\n  --font-display: 'Playfair Display', Georgia, serif;\n  --font-body: 'Inter', system-ui, sans-serif;\n  --radius-sm: 0.5rem;\n  --radius-md: 1rem;\n  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);\n  --shadow-elevated: 0 8px 40px rgba(0,0,0,0.12);\n  --max-width: 1200px;\n}\n
\n

Reference via Tailwind arbitrary values: bg-[var(--color-primary)] or direct CSS color: var(--color-text).

\n

Font Loading

\n

Always use next/font/google for Google Fonts. Never use <link> tags or external CDN:

\n
import { Playfair_Display, Inter } from 'next/font/google';\n\nconst playfair = Playfair_Display({\n  subsets: ['latin'],\n  variable: '--font-display',\n  display: 'swap',\n});\n
\n

Apply font variables on <html>: className with both variables.

\n

Image Handling

\n

ALL images use next/image. Never use <img> tags.

\n\n

Component Architecture for Local SEO Sites

\n

Shared components (used on every page):

\n\n

Page-specific components:

\n\n

Conversion-Focused Layout

\n

Every page follows this vertical rhythm:

\n
    \n
  1. Hero with CTA (above fold)
    2. \n
  2. Trust bar (immediately below hero)
    3. \n
  3. Primary content sections
    4. \n
  4. Mid-page CTA (after ~2 scroll depths)
    5. \n
  5. More content
    6. \n
  6. Testimonials / social proof
    7. \n
  7. Full-width CTA section (bottom)
    8. \n
\n

Phone number visible at ALL times via sticky header.

\n

Premium Component Sources

\n\n

Component Selection Guide

\n

| Need | Use |\n|------|-----|\n| Functional form/dialog/table | shadcn/ui |\n| Animated hero background | 21st.dev or Aceternity |\n| Scroll-triggered reveals | Framer Motion or GSAP |\n| Number counters / shimmer effects | Magic UI |\n| Complex scroll storytelling | GSAP + Lenis |\n| Quick entrance animations | Animate.css |\n| Custom interactive animations | Framer Motion |\n| SVG animation / complex timelines | GSAP |\n| Smooth scroll experience | Lenis |

\n

Animation Screenshot Rule

\n

Never run visual-qa-loop on animated components. When framer-motion, gsap, animate__ classes, @keyframes, or transition: are detected — skip the screenshot loop for that element. Tell the user: \"This component uses animation — screenshots won't capture it accurately. Please review it in the browser.\"

\n
\n"}