Leonxlnx/taste-skill

TL;DR

Taste Skill is a collection of Agent Skills – tiny, portable instruction files – that tell LLM‑powered coding assistants (ChatGPT, Claude, Codex, Cursor, etc.) how to produce cleaner, more polished front‑end UI code and design assets. You install a skill with a single npx skills add … command, then the agent follows the embedded rules (layout variance, motion intensity, visual density, anti‑slop guidelines) to generate HTML/CSS/JS or design mock‑ups.

---

What it does

• Design‑focused code generation – reads a brief, picks a design language, and emits a full front‑end implementation (GSAP‑based animation skeletons, strict spacing, typography, etc.).
• Adjustable “dials” – three numeric parameters (DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY) let you steer how experimental or dense the output should be.
• Specialised variants – e.g. gpt‑taste for stricter GPT/Codex output, soft‑skill for premium‑look UI, brutalist‑skill for high‑contrast industrial style, redesign‑skill to audit and fix an existing codebase.
• Image‑generation skills – produce reference boards (web, mobile, brand kits) that you can feed to image‑capable agents, then hand the frames to a coding skill (image‑to‑code).
• Portable SKILL.md files – each skill lives in its own folder under skills/ and can be installed via the Vercel‑Labs npx skills add CLI or simply copied into a project or chat.

---

Who it’s for

• Developers using AI coding assistants who want consistent, high‑quality UI without hand‑crafting every CSS rule.
• Design‑to‑code pipelines where you first generate mock‑ups (via ChatGPT Images, DALL‑E, etc.) and then automatically turn them into production‑ready code.
• Teams that need a repeatable style guide across React, Vue, Svelte, or any front‑end framework – the skill enforces layout and motion rules regardless of the underlying library.

---

How to get started

1. Install the default skill (v2, experimental):

   npx skills add https://github.com/Leonxlnx/taste-skill
   

2. In your prompt to the LLM, reference the skill name, e.g.:

   Use skill "design‑taste‑frontend" to build a landing page for a fintech startup. Keep motion intensity low and visual density high.
   

3. If you only need the original behaviour, install design‑taste‑frontend‑v1 instead.
4. For image‑first workflows, add imagegen-frontend-web (or mobile/brandkit) and then run image‑to‑code.
5. Tweak the three dials by adding lines like DESIGN_VARIANCE: 7 at the top of the SKILL.md if you want more experimental layouts.

---

What’s inside the repo

• skills/ folder – each sub‑folder contains a SKILL.md that defines the prompt template, dial defaults, and any helper scripts.
• research/ – background notes on the anti‑slop design principles that inform the skills.
• CHANGELOG.md – details of the v1→v2 rewrite and future roadmap.
• MIT license – free to use and modify.

---

Limitations & open questions

• The skills generate framework‑agnostic markup; you may still need to adapt the output to your specific component library.
• Image‑generation skills only produce reference images; they rely on a separate image‑capable model (e.g., ChatGPT Images, Kimi) to actually render the visuals.
• The default design‑taste‑frontend is marked experimental (v2); stability and edge‑case handling are still evolving.

---

Quick links

• Website: https://tasteskill.dev
• Install docs: #installing section above
• Full skill list: #skills
• License: MIT