design-taste-frontend

What it does

Directs the agent to craft frontend UI with strong design taste and anti-generic constraints, focusing on React/Next.js ecosystems, motion, typography, spacing, color, and responsive behavior. It enforces a baseline configuration for design variance, motion, and visual density, and requires verification of dependencies before importing libraries. It prescribes a client/server component separation, local state for UI, and Tailwind CSS-based styling with a single accent color and strict layout/no-card bias. It mandates premium interaction cycles (loading, empty, error states) and anti-emoji policy, while guiding typography, color, and layout choices to avoid common UI clichés. It also provides extensive constraints on typography, color, layout, motion, and performance, and discourages generic AI design patterns.

How it works

• Establish baseline values: DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY are used as global defaults (8, 6, 4) and can be overridden by user prompts.
• Before importing any third-party library, verify dependencies via package.json; if missing, output the installation command (e.g., npm install package-name) before code.
• Default to React or Next.js with Server Components unless the user specifies otherwise; use a 'use client' wrapper when global state is needed in Client Components.
• Use local useState/useReducer for isolated UI state; global state only for avoiding deep prop drilling.
• Styling is Tailwind CSS (v3/v4); check package.json for version compatibility and avoid v4 syntax in v3 projects.
• Maintain a single accent color, limit saturation, and avoid AI purple/blue aesthetics.
• Favor CSS Grid over complex flex-math; ensure responsive behavior with standardized breakpoints and safe hero/section heights (min-h-[100dvh]).
• Import icons from exactly permitted paths and standardize strokeWidth.
• Implement interactive UI states: loading, empty, error, and tactile feedback on active interactions.
• Apply performance safeguards: animate via transform/opacity, avoid top/left/width/height animations, and use appropriate z-index discipline.
• When motion is enabled, utilize Framer Motion for layout transitions, staggered reveals, and performance-friendly micro-interactions.
• Follow the design directives (Typography, Color, Layout, Materiality) to produce premium interfaces with consistent typography, color calibration, and layout rules.

When to use it

• Use when building frontend UI with strong design taste and anti-generic constraints.
• Use when React/Next.js, Tailwind, motion, component states, typography, spacing, color, or responsive behavior require senior-level design judgment.
• Use when output should override common UI biases like centered heroes, purple gradients, card overuse, and fragile layouts.

What it can touch

• Tools: claude-code, codex, cursor.
• It requires dependency checks against package.json before importing libraries and may emit installation commands if needed.

Caveats

• This skill provides frontend design and implementation guidance; it does not replace project-specific product requirements, accessibility review, or user testing.
• Verify framework versions, installed dependencies, responsive behavior, and build output in the target repository before treating generated UI as production-ready.
• Do not force these design rules when existing product/brand constraints require a different visual direction.