Taste Skill

Overview

Taste Skill is an open-source Agent Skill for coding agents such as Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable, and OpenCode. It supplies SKILL.md rules for typography, spacing, color, layout, and motion so agents can design websites and app screens instead of assembling generic landing pages. The default design-taste-frontend skill reads a brief, infers a design direction, uses credited real images from open collections, and checks its work in a real browser.

Key Features

• Open-source SKILL.md skill files for coding agents, with one install for Cursor, Claude Code, Codex, Gemini CLI, v0, Lovable, OpenCode, and other tools that read SKILL.md files.
• Gives agents concrete rules for typography, spacing, color, layout, and motion to avoid the same generic template.
• The default v2 skill reads the brief, maps it to a design system, handles dark mode and redesign protocols, and runs a hard pre-flight check before shipping output.
• Uses real, credited pictures from open collections and checks the page in a real browser at three widths, then fixes the top problems over up to three rounds.
• Since v2.1, distinguishes app screens from pages and builds dashboards, admin views, or settings screens with app-specific style, data, chart, table, and checks.
• Works with React, Vue, Svelte, and plain HTML because its rules are about design rather than a framework.

Use Cases

• Building landing pages and marketing sites from a brief with art direction, real imagery, and a browser-based quality check.
• Auditing and redesigning existing projects with an audit-first protocol that preserves what works and applies explicit modernization levers.
• Creating dashboards, admin views, and settings screens with app-specific layout, data, chart, and table rules since v2.1.
• Generating design references before implementation with image-first skills such as image-to-code-skill.

Getting Started

• Install with the npx skills CLI: npx skills add Leonxlnx/taste-skill
• Install the default v2 skill by name: npx skills add Leonxlnx/taste-skill --skill design-taste-frontend
• For Claude Code, add the plugin marketplace and install taste-skill@taste-skill inside Claude Code.
• For Codex, run codex plugin marketplace add Leonxlnx/taste-skill and codex plugin add taste-skill@taste-skill, then start a new Codex session.

Deployment & Requirements

• Node 22 or newer.
• An installed Chrome, Edge, or Chromium browser.
• No API keys are required, and the skill installs nothing.
• Network access is needed to find pictures.

Before You Adopt

• License: MIT. Review its terms before using, modifying, or distributing the project.
• v2 is described as experimental even though it is the default; the install name remains stable while rule wording settles before 2.0.
• The skill requires Node 22 or newer and Chrome, Edge, or Chromium, installs nothing, uses no API keys, and needs internet access only for finding pictures.
• The original v1 is preserved for projects that depend on its exact behavior and should be used only if v2 breaks something specific.
• Pictures are limited to public domain, CC0, CC BY, and CC BY-SA files, with credits placed on the page; users should replace them with their own when available.