frontend-design
Installation
SKILL.md
This skill guides creation of distinctive, production-grade frontend interfaces using Tailwind CSS v4 that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
Tech Stack
- Primary: Astro + React + Tailwind CSS v4
- Styling: Tailwind utility classes with CSS-first configuration
- Animations: CSS transitions, @starting-style for enter animations
- Modern CSS: OKLCH colors, container queries, cascade layers
Quick Setup: Astro + React + Tailwind v4
# Install dependencies
npm install tailwindcss @tailwindcss/vite
# Configure astro.config.mjs
import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";
import react from "@astrojs/react";