Design Taste Frontend V1
Generate high-agency frontend UI with fixed v1 taste baselines when you must keep exact legacy design-taste behavior instead of the v2 rewrite.
Overview
design-taste-frontend-v1 is an agent skill for the Build phase that applies legacy high-agency frontend taste rules (variance, motion, density) while enforcing real dependency checks before UI code ships.
Install
npx skills add https://github.com/leonxlnx/taste-skill --skill design-taste-frontend-v1What is this skill?
- Frozen v1 behavior: default install when backward compatibility with taste-skill v1 is required
- Global baselines DESIGN_VARIANCE 8, MOTION_INTENSITY 6, VISUAL_DENSITY 4 (overridable via user chat, not file edits)
- Mandatory dependency verification: check `package.json` before any third-party import and emit install commands
- Sections 3–7 driven by baseline variables for layout, motion, and visual density logic
- Current default in the repo is `design-taste-frontend` (v2 experimental)—this slug is compatibility-only
- 3 global baseline dimensions default to 8, 6, and 4 (variance, motion, density)
- Skill body references Sections 3 through 7 driven by baseline variables
Adoption & trust: 30.8k installs on skills.sh; 37.9k GitHub stars.
What problem does it solve?
Your agent ships polished-looking React UI that breaks the build because libraries were assumed—or your product locked to v1 taste behavior and v2 rewrites the feel.
Who is it for?
Maintainers on an existing codebase that standardized on taste-skill v1 baselines and section logic.
Skip if: Greenfield UI where you want the latest experimental taste-skill—install `design-taste-frontend` (v2) instead unless you have a compatibility requirement.
When should I use this skill?
User needs exact backward compatibility with design-taste-frontend v1 rather than the v2 experimental default.
What do I get? / Deliverables
You get v1-consistent frontend generations with explicit install steps for missing packages and tunable design knobs via prompts instead of silent drift.
- Frontend UI code with taste baselines applied
- Documented `npm install` commands for any newly required packages
Recommended Skills
Journey fit
How it compares
Legacy pinned frontend taste package; use v2 default for new work, not a generic component library or Figma-to-code MCP.
Common Questions / FAQ
Who is design-taste-frontend-v1 for?
Solo frontend builders and small teams already committed to taste-skill v1 outputs who cannot absorb the v2 rewrite without visual or behavioral regressions.
When should I use design-taste-frontend-v1?
During Build frontend work when implementing pages or components and you need the exact v1 baseline (8/6/4) and dependency verification ritual.
Is design-taste-frontend-v1 safe to install?
It is prose guidance plus optional npm installs your agent proposes—review the Security Audits panel on this Prism page and validate every `npm install` before running.
SKILL.md
READMESKILL.md - Design Taste Frontend V1
# High-Agency Frontend Skill ## 1. ACTIVE BASELINE CONFIGURATION * DESIGN_VARIANCE: 8 (1=Perfect Symmetry, 10=Artsy Chaos) * MOTION_INTENSITY: 6 (1=Static/No movement, 10=Cinematic/Magic Physics) * VISUAL_DENSITY: 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. * **ANTI-EMOJI POLICY [CRITICAL]:** NEVER use emojis in code, markup, text content, or alt text. Replace symbols with high-quality icons (Radix, Phosphor) or clean SVG primitives. Emojis are BANNED. * **Responsiveness & Spacing:** * Standardize breakpoints (`sm`, `md`, `lg`, `xl`). * Contain page layouts using `max-w-[1400px] mx-auto` or `max-w-7xl`. * **Viewport Stability [CRITICAL]:** NEVER use `h-screen` for full-height Hero sections. ALWAYS use `min-h-[100dvh]` to prevent catastrophic layout jumping on mobile browsers (iOS Safari). * **Grid over Flex-Math:** NEVER use complex flexbox percentage math (`w-[calc(33%-1rem)]`). ALWAYS use CSS Grid (`grid grid-cols-1 md:grid-cols-3 gap-6`) for reliable structures. * **Icons:** You MUST use exactly `@phosphor-icons/react` or `@radix-ui/react-icons` as the import paths (check installed version). Standardize `strokeWidth` globally (e.g., exclusively use `1.5` or `2.0`). ## 3. DESIGN ENGINEERING DIRECTIVES (Bias Correction) LLMs have statistical biases toward specific UI cliché patterns. Proactively construct premium interfaces using these engineered rules: **Rule 1: Deterministic Typography** * **Display/Headlines:** Default to `text-4xl md:text-6xl tracking-tighter leading-none`. * **ANTI-SLOP:** Discourage `Inter` for "Premium" or "Creative" vibes. Force unique character using `Geist`, `Outfit`, `Cabinet Grotesk`, or `Satoshi`. * **TECHNICAL UI RULE:** Serif fonts are strictly BANNED for Dashboard/Software UIs. For these contexts, use exclusively high-end Sans-Serif pairings (`Geist` + `Geist Mono` or `Satoshi` + `J