frontend-design

name	frontend-design
description	Create distinctive, production-grade frontend interfaces for ArtStroy with high design quality. Use when building React components, Astro layouts, landing sections, or any UI where aesthetic quality matters. Generates creative, polished code that avoids generic AI aesthetics.

Frontend Design for ArtStroy

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI-generated" aesthetics. The output is real, working code with intentional aesthetic choices — not filler components.

Design Thinking First

Before writing a single line of code, commit to a BOLD aesthetic direction:

• Purpose: What problem does this interface solve? Who looks at it?
• Tone: Choose an extreme — brutally minimal, maximalist, retro-futuristic, editorial/magazine, brutalist/raw, luxury/refined, industrial, etc. Execute one direction with precision.
• Constraints: Astro 5 + React 19 + Tailwind 4 + DaisyUI 5. client:load for immediate interactivity, client:visible for lazy hydration.
• Differentiation: What's the one thing a visitor will remember about this UI?

CRITICAL: Intentionality over intensity. Bold maximalism and refined minimalism both work — half-committed aesthetics don't.

Aesthetic Guidelines

Typography:

• Choose fonts that are beautiful, unexpected, and characterful
• Pair a distinctive display font with a refined body font
• Avoid: Arial, Inter, Roboto, system-ui — these are the baseline, not the design
• Unexpected font choices elevate everything around them

Color & Theme:

• Commit to a cohesive palette with CSS variables
• Dominant colors + sharp accent beats timid evenly-distributed palettes
• Avoid: purple-gradient-on-white (the default AI cliché)

Motion:

• CSS-only for HTML; use Motion library for React when available
• One well-orchestrated page load with staggered reveals > scattered micro-interactions
• Hover states that surprise; scroll-triggered animations where appropriate

Spatial Composition:

• Asymmetry over symmetry
• Unexpected overlap, diagonal flow, grid-breaking elements
• Generous negative space OR controlled density — not the default "safe" middle

Visual Details:

• Create atmosphere: gradient meshes, noise textures, geometric patterns, layered transparencies
• Dramatic shadows, decorative borders, grain overlays — match the overall aesthetic
• No flat, atmosphere-free backgrounds unless the concept demands it

ArtStroy Tech Constraints

Astro 5 (SSG) + React 19 + Tailwind 4 + DaisyUI 5 + Bun

• DaisyUI-first: use DaisyUI component classes before writing custom CSS
• No <img> for content images: use Astro <Image> component (optimized AVIF/WebP output)
• Client directives: client:visible by default; client:load only for components that must be interactive immediately (search, nav toggles)
• No direct DOM manipulation: React state and refs only
• Props typed: no implicit any; TypeScript strict

Implementation Standards

• Production-grade: functional, responsive, accessible (WCAG AA minimum)
• Visually striking: a clear aesthetic POV that serves the design brief
• Cohesive: every detail (spacing, border-radius, shadow, transition) serves the concept
• Meticulously refined: the difference between a 7/10 and a 10/10 is in the details

Match code complexity to the vision:

• Maximalist design → elaborate animations, layered effects, rich code
• Minimalist design → restraint, precise spacing, careful typography

What NOT to Do

• Do not use Space Grotesk (overused), purple gradients, or card-with-shadow-on-white
• Do not produce the same aesthetic twice — vary between light/dark, different fonts, different flavors
• Do not write generic component code; every component should feel designed for this context
• Do not produce placeholder designs with "TODO: add real content"

Deliverables

For React components:

• src/content/articles/{slug}/components/ComponentName.tsx — named export
• Styled with Tailwind + DaisyUI classes
• Full TypeScript types on all props
• Import and render example for the MDX file

For Astro layouts or pages:

• Follow existing patterns in src/layouts/ and src/pages/
• Use <Image> from astro:assets for images
• Client directives applied correctly

After writing the component, describe:

1. The aesthetic direction chosen and why it fits the context
2. Any non-obvious implementation choices
3. How to import and use it