{
  "markdown": "# taste\n\nFrontend design skills for Claude Code. A consolidated set of 34 opinionated skills for going from blank file to production-grade interface, with stops along the way to polish, audit, restyle, or rip apart what you've made.\n\nEvery skill in here is a single markdown file that teaches Claude Code how to think and act for a specific design task. Drop them into your `~/.claude/skills/` folder and invoke them with `/skill-name` from anywhere.\n\n---\n\n## Install\n\n```bash\ngit clone https://github.com/tyfarrago-hub/taste.git\ncp -r taste/skills/* ~/.claude/skills/\n```\n\nThen restart Claude Code. The skills will appear under your `/` menu.\n\nWant only a few? Copy just the folders you care about.\n\n---\n\n## The skills, grouped\n\n### Build something from scratch\n\n| Skill | When to use it |\n|---|---|\n| `/impeccable` | Production-grade UI from a brief. The default for \"design and build this.\" Handles hierarchy, spacing, accessibility, motion, edge cases. |\n| `/website` | Premium narrative landing pages. The skill behind tydra.netlify.app — handles hero, story arc, conversion, second-read moments. |\n| `/ui-ux-pro-max` | The mega-skill. 67 styles, 96 palettes, 57 font pairings, 25 chart styles, 13 stacks (React, Next, Vue, Svelte, SwiftUI, Flutter, shadcn, etc). Comes with CSV reference data for every choice. |\n| `/image-to-code` | Translate a screenshot or design reference into working frontend code. |\n| `/redesign-existing-projects` | Audit and rebuild an existing site or component, preserving working parts. |\n\n### Plan and shape before coding\n\n| Skill | When to use it |\n|---|---|\n| `/shape` | Structured discovery interview before writing a single line. Produces a brief that guides implementation. |\n| `/brandkit` | Generate or apply a brand system — palette, type, voice, asset rules. |\n\n### Improve what's already there\n\n| Skill | When to use it |\n|---|---|\n| `/layout` | Fix spacing, rhythm, visual hierarchy, alignment. |\n| `/typeset` | Fix fonts, type scale, weight, readability. |\n| `/colorize` | Apply strategic color or fix a flat/muddy palette. |\n| `/animate` | Add motion, transitions, micro-interactions that improve usability. |\n| `/polish` | Final quality pass — alignment, consistency, micro-detail. |\n| `/clarify` | Rewrite UX copy, error messages, labels, instructions. |\n| `/adapt` | Make it responsive across screens, devices, contexts. |\n| `/harden` | Production-readiness — error states, empty states, onboarding, i18n, overflow. |\n| `/optimize` | Performance — load time, rendering, bundle size, animation jank. |\n\n### Calibrate the tone\n\n| Skill | When to use it |\n|---|---|\n| `/bolder` | Amplify a safe or boring design. More personality, more impact. |\n| `/quieter` | Tone down a loud or overdesigned UI. Calmer, more refined. |\n| `/distill` | Strip to essence. Remove noise, simplify, declutter. |\n| `/delight` | Add joy, personality, unexpected moments. |\n| `/overdrive` | Push past conventional limits. Ambitious visual effects. |\n\n### Review, critique, audit\n\n| Skill | When to use it |\n|---|---|\n| `/critique` | UX-perspective review with quantitative scoring, persona testing, anti-pattern detection, actionable feedback. |\n| `/audit` | Technical quality check across accessibility, performance, theming, responsive design. Scored report with P0-P3 severity. |\n\n### Pick a design language\n\nThese ARE specific design tastes. Use them when you want a defined aesthetic from the jump.\n\n| Skill | The vibe |\n|---|---|\n| `/design-taste-frontend` | Senior UI/UX engineer — strict component architecture, hardware-accelerated CSS, balanced design engineering. |\n| `/high-end-visual-design` | Agency-grade — the fonts, spacing, shadows, and animations that make a site feel expensive. |\n| `/emil-design-eng` | Emil Kowalski's philosophy — UI polish, component design, invisible details that make software feel great. |\n| `/gpt-taste` | Editorial typography, gapless bento grids, GSAP ScrollTriggers (pinning, stacking, scrubbing), massive section spacing. |\n| `/stitch-design-taste` | Google Stitch system — premium, anti-generic, strict typography, perpetual micro-motion. |\n| `/minimalist-ui` | Editorial-style — warm monochrome, typographic contrast, flat bento, muted pastels. No gradients, no heavy shadows. |\n| `/cosmic-glass-dashboard` | Dark dashboard — aurora-lit backdrop, frosted glass panels, per-section tone tints, cyan/violet/magenta accents. Ships a drop-in `theme.css` + `starter.html` you rebrand from one block. |\n| `/industrial-brutalist-ui` | Swiss print meets military terminal — rigid grids, extreme type contrast, analog degradation. |\n\n### Image generation as design reference\n\n| Skill | When to use it |\n|---|---|\n| `/imagegen-frontend-web` | Generate premium, conversion-aware web design references. One image per section. Composition variety enforced. |\n| `/imagegen-frontend-mobile` | Same idea for iOS/Android/cross-platform mobile. Phone-mockup framing by default. |\n\n### Meta\n\n| Skill | What it does |\n|---|---|\n| `/full-output-enforcement` | Overrides default LLM truncation. Forces complete code output, bans placeholders, handles split files cleanly. |\n\n---\n\n## Suggested first moves\n\nDon't try to use all 34 at once. Start here:\n\n1. **`/impeccable`** — give it a brief, watch it build. This is the default.\n2. **`/critique`** — point it at what you just made. Get a scored review.\n3. **`/polish`** — let it do the final pass before you ship.\n\nThat's the whole loop. Brief → build → critique → polish → ship.\n\nThen layer in:\n- A taste skill (`/emil-design-eng` or `/high-end-visual-design`) to set the aesthetic up front.\n- `/website` when the thing is a landing page specifically.\n- A tone calibrator (`/bolder`, `/quieter`, `/distill`) when the first pass is close but off-temperature.\n\n---\n\n## How a skill actually works\n\nEach skill is a folder with a `SKILL.md` file. That file teaches Claude Code one specific design discipline. When you type `/skill-name`, the contents are loaded and Claude follows the instructions for that turn.\n\nYou can read any of them yourself. They're not magic — they're just well-written prompts with examples, rules, and references. Edit them, fork them, build your own.\n\n---\n\n## Credits\n\nMost of these started as personal taste rules I kept repeating in conversations. At some point each one earned its own file.\n\nSeveral skills are vendored from or inspired by third parties. See [CREDITS.md](CREDITS.md) for full attribution.\n\nThe video and animation skills (HyperFrames, GSAP, Three.js, etc.) live in a separate bundle — this one is intentionally scoped to **frontend design**.\n\n— Ty\n\n---\n\n## Related\n\n- [compound](https://github.com/tyfarrago-hub/compound): 7 workflow and process skills. Taste covers what good looks like, compound covers how to work.\n- [claude-code-ignition](https://github.com/tyfarrago-hub/claude-code-ignition): first-time Claude Code setup.\n",
  "bytes": 6876,
  "sha": "15421e4484ed0a2692845580e4d3cbde322006c4732940619b24a96b351e0260",
  "repo_slug": "tyfarrago-hub/taste",
  "fonte": "repo",
  "truncated": false,
  "api": "https://api.agentalog.com/api/listings/skl_tyfarrago_hub_taste_website_b9a43277/readme"
}