frontend-design

Files (1)

• SKILL.md

SKILL.md (first lines)

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.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: luxury/refined, editorial/magazine, soft/pastel, art deco/geometric, organic/natural, playful/toy-like, retro-futuristic, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

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

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Pair a distinctive display font with a refined body font. Use Google Fonts for variety. Consider serif display fonts for headlines (like Domaine, Playfair Display, Instrument Serif) paired with clean sans-serif body text. Variable fonts with full weight ranges are preferred.
- **Color & Theme**: Use warm dark mode (not pure #000 — use #111, #141416, or #14120b with warm undertones). Warm off-white text (not pure #fff). Distinctive accent colors that are NOT blue or purple — consider amber, terracotta, racing red, warm cream. Use `clamp()` for responsive sizing. Use hierarchical text opacity (primary, secondary, tertiary, quaternary) instead of hard-coded grays.
- **Motion**: Focus on high-impact moments: staggered entrance animations on page load, scroll-triggered reveals, spring-based physics. ALWAYS respect `prefers-reduced-motion`. Use CSS `animation-delay` for staggered effects. Ambient background motion (subtle grid animations, gradient shifts) adds life.
- **Spatial Composition**: Centered hero with visual element below (not side-by-side). Bento grids with mixed card sizes for features. Generous whitespace. Asymmetric layouts. Step-by-step sections for processes.
- **Backgrounds & Visual Details**: Create atmosphere with gradient meshes, noise textures, warm-toned overlays. Subtle shadows (0 2px 8px rgba(0,0,0,0.08)). Glass/metal-inspired button aesthetics. Real depth through layering, not flat design.

## NEVER DO THESE

These aesthetics are explicitly banned. They look generic, dated, or like AI-generated slop:

### Banned: "Neon Gaming / Esports Arena"
- Vibrant gradient orbs floating on dark backgrounds
- Emoji icons as feature bullets (⚔️ 🎯 🏆)
- "Esports scoreboard" mockup layouts
- Gradient text (`bg-clip-text text-transparent`) as the primary visual trick
- Multiple neon glow colors competing for attention
- Round cards with gradient borders on dark backgrounds
- The word "arena" styled like a gaming tournament

### Banned: "Terminal / Hacker Aesthetic"
- All-monospace-everything pages
- Green-on-black color schemes
- Fake CLI output as the hero section
- `$` prompt symbols as design elements
- Man-page or --help flag styling
- Pages that look like a formatted README
- "Install via npm" as the primary CTA styling

### Banned: Generic AI Patterns
- Overused font families (Inter alone, Roboto, Arial, system fonts without a display pair)
- Purple gradients on white backgrounds
- Pure black (#000000) backgrounds — use warm darks
- Pure white (#ffffff) text — use warm off-whites
- Side-by-side hero layouts (text left, image right) — the 2020 SaaS template
- Stock illustrations and abstract blob shapes
- Cookie-cutter pricing tables on landing pages
- Auto-pulled Twitter/X testimonial embeds
- Flat, zero-motion pages with no animation
- The same "Get started" CTA on every button
- Blue-only accent color palettes

## What Premium Dev Tool Sites Actually Do (2025-2026 Research)

Based on analysis of Linear, Vercel, Stripe, Resend, Cursor, Anthropic, and Cal.com:

1. **Warm dark > cold dark.** Cursor uses #14120b (warm charcoal), not #000. Resend uses "Iron" and "Stone" tones. Pure black looks dated.

2. **Serif display fonts for headlines** signal sophistication. Resend uses Domaine for editorial impact. Pair with clean sans-serif body text.

3. **Custom or distinctive display fonts** are table stakes. Cursor has CursorGothic. Cal has Cal Sans. Even a bold Google Font choice beats system fonts.

4. **Non-blue accent colors** differentiate. Anthropic uses terracotta (#d97757). Consider warm amber, racing red, or sage green.

5. **Centered hero, NOT side-by-side.** Headline centered, visual element below. Two CTAs: primary bold + secondary light. Small eyebrow text above.

6. **Bento grids** for feature sections. Mixed card sizes. Asymmetric layouts. Not uniform 3-column grids.

7. **Staggered entrance animations** on scroll. Spring-based physics over linear easing. One well-orchestrated page load > scattered micro-interactions.

8. **Hierarchical text opacity** — 4+ levels of text color through reduced opacity, not hard-coded gray values.

9. **Trust signals immediately after hero** — logo carousel, GitHub stars, or usage numbers.

10. **Final CTA in a visually distinct block** with different background color.

## Implementation Quality

- Use CSS custom properties (`var()`) for all theme colors
- Use `clamp()` for responsive typography and spacing
- Use `@media (prefers-reduced-motion: reduce)` for all animations
- Use proper semantic HTML
- Test at mobile, tablet, and desktop breakpoints
- Ensure sufficient color contrast for accessibility
- Use `will-change` for GPU-accelerated animations
- Prefer `rgba()` with opacity for text hierarchy over hard-coded hex grays

Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

From agentclash/agentclash, MIT.

More from agentclash/agentclash