Initial commit

skills/frontend-development/NEW-PROJECT-DESIGN.md

@@ -0,0 +1,335 @@
+# New Project: Aesthetic Design Philosophy
+
+**Use this when building from scratch** - no existing codebase to match, full creative freedom.
+
+This guide helps you create bold, distinctive frontend interfaces that avoid generic "AI slop" aesthetics and deliver memorable user experiences.
+
+---
+
+## Design Thinking Process
+
+Before coding, understand the context and commit to a BOLD aesthetic direction.
+
+### 1. Understand the Context
+
+**Purpose**
+- What problem does this interface solve?
+- Who are the users?
+- What are their goals and pain points?
+
+**Constraints**
+- Technical requirements (framework, performance targets)
+- Accessibility standards (WCAG compliance)
+- Browser support needs
+- Device/viewport considerations
+
+**Differentiation**
+- What makes this interface UNFORGETTABLE?
+- What's the one thing someone will remember?
+- How does it stand out from competitors?
+
+### 2. Choose an Aesthetic Direction
+
+**Pick an extreme** - commit fully to a clear conceptual direction:
+
+- **Brutally minimal**: Sparse layouts, monochrome palette, extreme negative space
+- **Maximalist chaos**: Dense information, bold colors, layered complexity
+- **Retro-futuristic**: Nostalgic elements with modern tech aesthetic
+- **Organic/natural**: Flowing forms, earthy tones, biomimicry
+- **Luxury/refined**: Sophisticated typography, muted elegance, premium feel
+- **Playful/toy-like**: Rounded shapes, bright colors, whimsical interactions
+- **Editorial/magazine**: Strong typography hierarchy, grid-based, content-focused
+- **Brutalist/raw**: Exposed structure, harsh contrasts, utilitarian
+- **Art deco/geometric**: Symmetry, geometric patterns, metallic accents
+- **Soft/pastel**: Gentle gradients, low contrast, calming atmosphere
+- **Industrial/utilitarian**: Function-first, mechanical aesthetics, technical precision
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+### 3. Implementation Goals
+
+Create working code that is:
+
+✅ **Production-grade and functional**
+- Real, working code (not mockups)
+- Properly structured components
+- Responsive across devices
+- Accessible to all users
+
+✅ **Visually striking and memorable**
+- Immediate visual impact
+- Distinctive from generic templates
+- Reinforces brand/purpose
+
+✅ **Cohesive with clear aesthetic point-of-view**
+- Every element serves the chosen direction
+- Consistent visual language
+- Intentional design decisions throughout
+
+✅ **Meticulously refined in every detail**
+- Precise spacing and alignment
+- Thoughtful micro-interactions
+- Polish in typography, color, motion
+
+---
+
+## Frontend Aesthetics Guidelines
+
+Apply these principles when executing your design vision:
+
+### Typography
+
+**Go beyond generic fonts** - typography is personality.
+
+✅ **DO:**
+- Choose distinctive, characterful fonts
+- Pair a bold display font with a refined body font
+- Use font variation (weight, width, slant) for hierarchy
+- Consider custom/variable fonts for uniqueness
+- Test readability across sizes and contexts
+
+❌ **AVOID:**
+- Generic system fonts (Arial, Helvetica, system-ui)
+- Overused web fonts (Inter, Roboto - unless intentional)
+- Poor contrast or readability
+- Inconsistent font pairing
+
+**Examples:**
+- Display: Ginto, Clash Display, Syne, Archivo Black, Fraunces
+- Body: Work Sans, Söhne, Untitled Sans, Sentient, Supreme
+- Mono: JetBrains Mono, Commit Mono, Berkeley Mono
+
+### Color & Theme
+
+**Commit to a cohesive palette** - colors create atmosphere.
+
+✅ **DO:**
+- Use CSS variables for consistency
+- Choose dominant colors with sharp accents
+- Create intentional color relationships
+- Consider color psychology (warm/cool, energetic/calming)
+- Test contrast for accessibility (WCAG AA minimum)
+
+❌ **AVOID:**
+- Timid, evenly-distributed palettes
+- Clichéd combinations (purple gradient on white)
+- Poor contrast ratios
+- Randomness without purpose
+
+**Approaches:**
+- **Monochrome + accent**: Single base color with one bold accent
+- **Analogous harmony**: Adjacent colors on color wheel
+- **Bold contrast**: High-contrast complementary colors
+- **Muted elegance**: Desaturated tones with subtle variation
+
+### Motion & Animation
+
+**Animate with purpose** - motion should delight and inform.
+
+✅ **DO:**
+- Prioritize CSS-only solutions for performance
+- Use Motion library (Framer Motion) for React when needed
+- Focus on high-impact moments (page load, key interactions)
+- Use staggered reveals (animation-delay) for orchestration
+- Add scroll-triggered animations for engagement
+- Create surprising hover states
+
+❌ **AVOID:**
+- Scattered, meaningless micro-interactions
+- Performance-heavy JavaScript animations for simple effects
+- Motion that distracts from content
+- Animations without easing (linear motion feels robotic)
+
+**High-Impact Patterns:**
+- Staggered fade-in on page load
+- Smooth scroll-triggered reveals
+- Morphing shapes on interaction
+- Parallax effects (use sparingly)
+- Magnetic cursor effects
+- Elastic hover states
+
+### Spatial Composition
+
+**Break expectations** - layouts should surprise and guide.
+
+✅ **DO:**
+- Use asymmetry intentionally
+- Overlap elements for depth
+- Create diagonal flow to guide eye
+- Add grid-breaking elements for interest
+- Use generous negative space OR controlled density (not in-between)
+
+❌ **AVOID:**
+- Predictable centered layouts
+- Uniform spacing everywhere
+- Tight, cramped compositions
+- Lack of visual hierarchy
+
+**Techniques:**
+- **Asymmetric grids**: Offset columns, uneven distribution
+- **Z-index layering**: Overlap for depth and dimensionality
+- **Diagonal flow**: Angles create energy and movement
+- **Negative space**: Breathing room emphasizes important content
+- **Controlled density**: Information-rich areas with clear structure
+
+### Backgrounds & Visual Details
+
+**Create atmosphere** - go beyond solid colors.
+
+✅ **DO:**
+- Add contextual textures and effects
+- Use gradient meshes for depth
+- Apply subtle noise/grain overlays
+- Create layered transparencies
+- Add dramatic shadows for elevation
+- Consider decorative borders and ornaments
+- Experiment with custom cursor styles
+
+❌ **AVOID:**
+- Plain solid color backgrounds everywhere
+- Overused gradient patterns
+- Details that don't match aesthetic direction
+- Visual noise without purpose
+
+**Techniques:**
+- **Gradient meshes**: Soft, organic color transitions
+- **Noise textures**: Subtle grain for tactile quality
+- **Geometric patterns**: Structured, repeating motifs
+- **Radial gradients**: Spotlight effects, vignettes
+- **Blurred shapes**: Abstract background elements
+- **Glass morphism**: Frosted glass effects (backdrop-filter)
+
+---
+
+## Anti-Patterns: Avoiding AI Slop
+
+**NEVER** create generic AI-generated aesthetics. Recognize and avoid these patterns:
+
+❌ **Overused font families**
+- Inter everywhere (it's become the Arial of AI-generated designs)
+- Roboto (overused, lacks character)
+- System fonts without intentionality
+- Space Grotesk (recently overused in AI designs)
+
+❌ **Clichéd color schemes**
+- Purple gradients on white backgrounds
+- Generic blue/teal combinations
+- Pastel everything without purpose
+- Rainbow gradients without restraint
+
+❌ **Predictable layouts**
+- Centered hero → 3 feature cards → testimonials → CTA
+- Same component patterns as every SaaS landing page
+- No surprises, no memorable moments
+- Cookie-cutter grid systems
+
+❌ **Lack of context-specific character**
+- Designs that could be for any product/service
+- No connection to brand, purpose, or audience
+- Generic stock photography aesthetic
+- Templated feel throughout
+
+---
+
+## Creative Freedom Guidelines
+
+**Interpret creatively** - make unexpected choices that feel genuinely designed for the context.
+
+### Vary Your Approach
+
+**No two designs should be the same.** Intentionally vary:
+
+- **Theme**: Light vs dark (or something in between)
+- **Density**: Spacious vs information-rich
+- **Tone**: Professional vs playful vs experimental
+- **Complexity**: Minimal vs maximalist
+- **Typography**: Serif vs sans-serif vs mixed
+- **Color**: Monochrome vs vibrant vs muted
+
+**NEVER converge on common choices** across different projects. If you used Space Grotesk last time, choose something completely different this time.
+
+### Match Complexity to Vision
+
+**Aesthetic vision dictates code complexity:**
+
+**Maximalist designs** → Elaborate implementation
+- Extensive animations and effects
+- Complex layering and composition
+- Rich interactions and micro-animations
+- Advanced CSS techniques
+
+**Minimalist designs** → Restrained implementation
+- Precise spacing and alignment
+- Subtle, purposeful animations
+- Careful typography tuning
+- Attention to micro-details
+
+**Elegance comes from executing the vision well**, not from choosing "simple" vs "complex."
+
+---
+
+## Implementation Checklist
+
+Before finalizing your design:
+
+### Context & Strategy
+- [ ] Clearly defined purpose and audience
+- [ ] Identified key differentiator (the memorable element)
+- [ ] Chosen specific aesthetic direction (not generic)
+- [ ] Considered technical constraints
+
+### Typography
+- [ ] Distinctive font choices (not Inter/Roboto by default)
+- [ ] Clear hierarchy (display vs body vs UI)
+- [ ] Tested readability across sizes
+- [ ] Proper font pairing
+
+### Color & Theme
+- [ ] Cohesive color palette with CSS variables
+- [ ] Intentional color relationships
+- [ ] Tested contrast for accessibility (WCAG AA+)
+- [ ] Avoided clichéd combinations
+
+### Motion & Animation
+- [ ] High-impact moments identified and animated
+- [ ] CSS-first approach for performance
+- [ ] Easing curves feel natural
+- [ ] Animations enhance, not distract
+
+### Spatial Composition
+- [ ] Unexpected or intentional layout choices
+- [ ] Visual hierarchy guides user attention
+- [ ] Appropriate use of space (generous or dense)
+- [ ] Breaking the grid where appropriate
+
+### Visual Details
+- [ ] Contextual backgrounds and textures
+- [ ] Atmospheric depth (gradients, shadows, layers)
+- [ ] Details match chosen aesthetic
+- [ ] Polish in every interaction
+
+### Originality
+- [ ] Doesn't look like generic AI output
+- [ ] Context-specific character throughout
+- [ ] Memorable and distinctive
+- [ ] Different from previous projects
+
+---
+
+## Remember
+
+**Claude is capable of extraordinary creative work.**
+
+Don't hold back. Show what can truly be created when:
+- Thinking outside the box
+- Committing fully to a distinctive vision
+- Avoiding generic templates and patterns
+- Designing with intention and purpose
+
+Create something unforgettable.
+
+---
+
+**See also:**
+- [EXAMPLES.md](EXAMPLES.md) - Real-world design examples and case studies
+- [REFERENCE.md](REFERENCE.md) - Deep-dive into specific aesthetic techniques