name: frontend-design
description: Create distinctive, production-grade frontend interfaces. Avoids generic AI aesthetics and prioritizes bold, creative design choices. Use when building UI components, pages, or web applications.
license: MIT
metadata:
author: thesimpleapp
version: "1.0"

Frontend Design

Create distinctive, high-quality frontend interfaces that avoid generic "AI slop" aesthetics.

Design Philosophy

1. Be Bold: Make intentional design choices, not safe defaults
2. Avoid AI Clichés: No gratuitous gradients, generic hero sections, or cookie-cutter layouts
3. Purpose Over Decoration: Every element should serve the user
4. Distinctive Character: Each project should have its own personality

Implementation Guidelines

Visual Hierarchy

• Use size, weight, and spacing to guide attention
• Limit color palette to 2-3 primary colors max
• Create clear focal points on each view

Typography

• Choose fonts that match the project's personality
• Establish clear type scale (don't use arbitrary sizes)
• Ensure readable line lengths (45-75 characters)

Spacing & Layout

• Use consistent spacing scale (4px, 8px, 16px, 24px, 32px, 48px, 64px)
• Embrace whitespace - don't fill every pixel
• Align elements to an invisible grid

Interactions

• Provide immediate feedback on user actions
• Use subtle, purposeful animations (not decorative)
• Ensure touch targets are at least 44x44px

Accessibility

• Maintain WCAG 2.1 AA contrast ratios
• Support keyboard navigation
• Include proper ARIA labels

Anti-Patterns to Avoid

• Generic gradient backgrounds
• Stock photo hero sections
• Excessive drop shadows
• Animations for animation's sake
• Dark mode as an afterthought
• Inconsistent component styling

Tech Stack Preferences

When not specified, prefer:
- CSS: Tailwind CSS for utility-first styling
- Components: shadcn/ui for accessible primitives
- Icons: Lucide for consistent iconography
- Animations: Framer Motion for complex interactions