StealIt
LeonClaude skill for design

Taste Skill

design-taste-frontend

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals researched directions (idea, composition, type, palette, photographs, section blueprints) from a library, enforces a strict no-slop house style with a real-browser inspector, and runs a look-and-fix loop on screenshots. Use this whenever you build, design, redesign, restyle, polish or review a landing page, marketing site, portfolio, product page, one-pager, hero or any public-facing web page, in any stack (HTML/CSS, React, Next.js, Vue, Svelte, Astro, Tailwind) — also when the user says a page looks generic, templated, "AI-made", sloppy, or asks to make it look designed, premium, award-level or less like every other site. Also for app screens: dashboards, admin and analytics views, settings, inboxes and other screens people work in, with their own run and rules.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

$ npx skills add leonxlnx/taste-skill --skill design-taste-frontend

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Taste Skill

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /design-taste-frontend.

It includes scripts that Claude may run on your computer, so skim them on GitHub before you install.

What the instructions cover

  1. 1Page or app screen
  2. 2The run
  3. 3House rules
  4. 4Laws of the craft
  5. 5Special cases
  6. 6Files

Section headings from the skill's SKILL.md file.

What's inside · 39 files

  • README.md
  • SKILL.md
  • assets/app.css
  • assets/base.css
  • assets/base.js
  • assets/charts.js
  • assets/scenes/stage.css
  • assets/scenes/stage.js
  • evals/evals.json
  • library/app.json
  • library/directions.json
  • library/heroes.json
  • library/motions.json
  • library/palettes.json
  • library/photos.json
  • library/sections.json
  • library/sites.json
  • library/type.json
  • references/app-screens.md
  • references/colour.md
  • references/copy.md
  • references/critique.md
  • references/imagery.md
  • references/layout.md
  • references/motion.md
  • references/research.md
  • references/scenes.md
  • references/tells.md
  • references/type.md
  • scripts/assets.mjs
  • scripts/draw.mjs
  • scripts/inspect.mjs
  • scripts/lib/app-draw.mjs
  • scripts/lib/cdp.mjs
  • scripts/lib/inspection-files.mjs
  • scripts/lib/probe.mjs
  • scripts/lib/rules.mjs
  • scripts/lint.mjs
  • scripts/scenes.mjs

More Claude skills for design

See all →

Frontend DesignTop pick

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't…

Design & UIAnthropic187k

UI UX Pro MaxTop pick

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design…

Design & UINextLevelBuilder145k

Impeccable

Use when the user wants to design, redesign, shape, critique, audit, polish, simplify, harden, animate, or otherwise improve a frontend interface: websites, landing pages…

Design & UIPaul Bakaus103k

Banner Design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with optional generated or supplied visuals. Actions: design…

Design & UINextLevelBuilder145k