design-taste-frontend
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
npx skills add Leonxlnx/taste-skill --skill taste-skill --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
The skill guides an agent to read a brief and infer the design direction for front-end interfaces, aiming to avoid templated looks. It emphasizes landing pages, portfolios, and redesigns (not dashboards or data-heavy UIs), and instructs the agent to ship interfaces that feel tailored rather than generic. It supports using real design systems when applicable and requires an audit-first approach on redesigns, including a strict pre-flight check.
How it works
Begin with a BRIEF INFERENCE step where the agent reads the brief to determine page kind, audience, vibe, reference signals, and constraints (0.A signals). It then outputs a one-line Design Read describing the intended language and design system leaning. If ambiguous, the agent can ask exactly one clarifying question (0.C). It sets three global dials: DESIGN_VARIANCE, MOTION_INTENSITY, and VISUAL_DENSITY, with baseline values and adjustment tables (1.A, 1.B). After determining the design read and dials, the agent selects an appropriate foundation in a BRIEF → DESIGN SYSTEM MAP, preferring real design systems when the brief matches (2.A) and resorting to native CSS + Tailwind + components for aesthetic directions (2.B). The default architecture and conventions prescribe React/Next.js, Tailwind v4, Motion for animation, and font handling, with rules for state, icons, responsiveness, and dependency checks (3. A–F).
When to use it
Use when the project involves landing pages, portfolios, or redesigns where the goal is an anti-slop, non-templated design direction and a design-system-aware approach. The skill instructs to infer the design read first and apply dials accordingly before producing concrete UI decisions.
What it can touch
The skill references using official design systems or native CSS + Tailwind + component libraries. It specifies framework/tools like React/Next.js, Tailwind v4, motion/react for animation, and font handling via next/font or self-hosted fonts. It also mentions dependency verification before importing third-party libraries (3.F). The exact tool names and packages to touch are determined by the design read and system choice.
Caveats
The skill requires contextual application; rules are not automatic and depend on brief interpretation. It emphasizes not defaulting to common AI design tropes and mandates adherence to accessibility and design-system constraints where applicable.
# tasteskill: Anti-Slop Frontend Skill > Landing pages, portfolios, and redesigns. Not dashboards, not data tables, not multi-step product UI. > Every rule below is **contextual**. None of it fires automatically. First read the brief, then pull only what fits. --- ## 0. BRIEF INFERENCE (Read the Room Before Anything Else) Before touching code or tweaking dials, **infer what the user actually wants**. Most LLM design output is bad because the model jumps to a default aesthetic instead of reading the room. ### 0.A Read these signals first 1. **Page kind** - landing (SaaS / consumer / agency / event), portfolio (dev / designer / creative studio), redesign (preserve vs overhaul), editorial / blog. 2. **Vibe words** the user used - "minimalist", "calm", "Linear-style", "Awwwards", "brutalist", "premium consumer", "Apple-y", "playful", "serious B2B", "editorial", "agency-y", "glassy", "dark tech". 3. **Reference signals** - URLs they linked, screenshots they pasted, products they named, brands they're competing with. 4. **Audience** - B2B procurement panel vs. design-conscious consumer vs. recruiter scanning a portfolio. The audience picks the aesthetic, not your taste. 5. **Brand assets
- 0. BRIEF INFERENCE (Read the Room Before Anything Else)
- 0.A Read these signals first
- 0.B Output a one-line "Design Read" before generating
- 0.C If the brief is ambiguous, ask one question, do not guess
- 0.D Anti-Default Discipline
- 1. THE THREE DIALS (Core Configuration)
- 1.A Dial Inference (design read → dial values)
- 1.B Use-Case Presets
- 1.C How the Dials Drive Output
- 2. BRIEF → DESIGN SYSTEM MAP
- 2.A When to reach for a real design system (use official packages)
- 2.B When the brief is an aesthetic, not a system
- 3. DEFAULT ARCHITECTURE & CONVENTIONS
- 3.A Stack
Material Web (Material 3) npm install @material/web Fluent UI React (v9) npm install @fluentui/react-components Fluent UI Web Components (framework-free) npm install @fluentui/web-components @fluentui/tokens IBM Carbon npm install @carbon/react @carbon/styles Radix Themes npm install @radix-ui/themes
What does the design-taste-frontend skill do?
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
How do I install it?
Run `npx skills add Leonxlnx/taste-skill --skill taste-skill --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Leonxlnx/taste-skill, a repository with 71,680 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.