awesome-frontend-design

Frontend rules for web apps that have a backend, from simple (forms, CRUD) to complex (auth, roles, dashboards, realtime, multi-tenant). Default stack Next.js App Router + TypeScript + Tailwind CSS + shadcn/ui; alternative Vite + React + Node API. Use when the request is for an app, SaaS, dashboard, admin, or any UI that reads and writes data. Covers states, forms, data fetching, auth UX, density, and how motion level applies.

Design direction and anti-template rules for any frontend. Use before designing or restyling a page, section, component, palette or typography, and whenever a UI looks generic, "AI-made" or template-like. Covers the design read, VARIANCE/MOTION/DENSITY dials, colour, type, layout, copy rules and a pre-flight checklist. Includes the optional signature industrial multi-theme style.

Motion, animation and interaction rules and recipes for web frontends, with three levels (calm, balanced, expressive). Use when adding or changing any animation, transition, hover effect, scroll reveal, page transition, cursor effect, marquee, kinetic type or microinteraction. CSS-first (scroll-driven animations, View Transitions), small JS only when needed, comfort and performance rules included.

Frontend rules for static sites - landing pages, portfolios, blogs, docs and marketing pages - using Astro (default) or plain HTML/CSS. Use when the request is for a static page or site with no or little backend. Covers page recipes, structure per page type, performance, SEO, i18n, fonts, CSP-friendly output and how motion level changes the build.

Architecture for design tokens, dark mode and multi-theme frontends where themes change colour, chrome and even page structure. Use when adding a theme, dark mode, a theme switcher, design tokens, a per-theme layout, or when mapping tokens to Tailwind/shadcn. Covers token tiers, no-flash theme init, skins vs layouts, contrast gating and the circular theme-switch transition.

Visual and UX audit to run before shipping frontend changes. Use after implementing or changing pages, components, themes or motion, when asked to "test the UI", "check for UI bugs", "review the design", or before calling a design phase done. Runs the repo gates, renders a page x theme x viewport matrix in a real browser, and reports findings by severity.

Entry point for building distinctive, production-grade frontends (UI/UX, layout, themes, animation). Use first for any request to design, build or restyle a website, landing page, portfolio, blog, dashboard or web app UI. Picks a mode (static site or app with backend), a motion level (calm, balanced, expressive) and a stack (Astro, Next.js + shadcn, Vite + Node), then routes to the specialist afd-* skills.