Agent skill · design visual · nexu-io
design-taste-frontend-v1
The original v1 taste-skill, preserved for projects depending on its exact behavior. The current default is `design-taste-frontend` (v2 experimental), which is a substantial rewrite. Use this v1 install name only if you need exact backward compatibility.
Why this skill is useful
Provides specific design guidelines and conventions for frontend development that the AI wouldn't reliably generate on its own.
What it needs
Requires tailwindcss installed locally. About 11k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
High-Agency Frontend Skill 1. ACTIVE BASELINE CONFIGURATION DESIGNVARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos) MOTIONINTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics) VISUALDENSITY: 4 (1=Art Gallery/Airy, 10=Pilot Cockpit/Packed Data) AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7. 2. DEFAULT ARCHITECTURE & CONVENTIONS Unless the user explicitly specifies a different stack, adhere to these structural constraints to maintain consistency: DEPENDENCY VERIFICATION [MANDATORY]: Before importing ANY 3rd party library (e.g. framer-motion, lucide-react, zustand), you MUST check package.json. If the package is missing, you MUST output the installation command (e.g. npm install package-name) before providing the code. Never assume a library exists. Framework & Interactivity: React or Next.js. Default to Server Components (RSC). RSC SAFETY: Global state works ONLY in Client Components. In Next.js, wrap providers in a "use client" component. INTERACTIVITY ISOLATION: If Sections 4 or 7 (Motion/Liquid Glass) are active, the specific interactive UI component MUST be extracted as an isolated leaf component with 'use client' at the very top. Server Components must exclusively render static layouts. State Management: Use local useState/useReducer for isolated UI. Use global state strictly for deep prop-drilling avoidance. Styling Policy: Use Tailwind CSS (v3/v4) for 90% of styling. TAILWIND VERSION LOCK: Check package.json first. Do not use v4 syntax in v3 projects. T4 CONFIG GUARD: For v4, do NOT use tailwindcss plugin in postcss.config.js. Use @tailwindcss/postcss or the Vite plugin. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/taste-skill-v1