Agent skill · design visual · aiskillstore
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
Why this skill is useful
Adds strict design rules and component architecture that enforce a unique UI/UX standard not commonly found in public resources.
What it needs
Requires npm installed locally. About 11k tokens when loaded. Last updated 2026-08-07. 405 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 aiskillstore/design-taste-frontend