frontend-design

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.

Stack Awareness

Detect the project's stack and match the implementation approach. Read existing config files (package.json, tailwind.config.*, globals.css, Blade layouts) before writing anything.

Next.js / App Router projects

• Server Components by default; 'use client' only for state/interactivity
• If the project ships a custom CSS design system, USE IT — do not introduce Tailwind
• If the project ships Tailwind, USE IT — do not introduce a parallel custom system
• Prefer CSS-only animation with Intersection Observer over animation libraries
• Reuse existing design tokens (--color-*, --space-*, --font-*, --ease-*) instead of inventing new ones

Laravel projects (Blade + Alpine / Livewire)

• Blade templates with component syntax (<x-button>, <x-layout>) and slots
• Tailwind CSS is the standard — don't bolt on custom CSS unless the project already does
• Alpine.js for client state; Livewire if present
• If the project uses Tailwind JIT, remember: new utility classes must appear in scanned files for the bundle to include them. Run the build after adding novel classes.