8 Essential Agent Skills to Supercharge Web Design in Claude Code: UI Standardization, Motion, and Automated Testing

There are quite a few skills designed for Claude being shared, but they are scattered all over the place. This document gathers the eight most worthwhile ones in one place, detailing what each one is, how to install it, which prompts to use, and when to use it.

Even if you have never installed a skill before, you can easily follow along: The first section explains what a “skill” is and shows the easiest way to install one (drag-and-drop a single file). If you are already familiar, feel free to jump straight to the section you need using the table of contents below.

1. What is a Skill? Two Ways to Install for Beginners

Simply put, a Skill is an instruction package we install for Claude so it excels at a specific task. It’s just like installing an app on your phone: the device remains the same, but it gains new capabilities. Technically speaking, each skill is simply a text file named SKILL.md containing the rules Claude must follow.

The beauty of it is that Claude automatically knows when to use it. You don’t have to call the skill by name. Once installed, simply prompt, “build me a landing page to sell an online course,” and it will automatically pull up and apply the relevant design skill.

There are two places to install it, and these two places are different. Make sure you choose the right one, otherwise you won’t see any results after installing:

Three types of tools in this collection

The 8 items in this article are not all the same type. Knowing the right type will help you understand what we’re doing during installation and know where to look when things break.

Method 1: Drag-and-drop the file into chat (Easiest)

1. Click the View on GitHub button for the skill you need, then open the SKILL.md file. In the top right corner, click the Download raw file button (downward arrow icon) to download it to your machine.
2. Open Claude and drag-and-drop the downloaded file into the chat box (where you type messages).
3. Send a prompt: “Please install this skill for me”. Claude will automatically add it.
4. Done. From now on, simply tell it what you need done, and it will automatically use that skill.

If you prefer manual setup: Open Claude > go to Settings > Capabilities (or Skills) > add the downloaded file. If you don’t want to download the file, open SKILL.md on GitHub, click the Copy raw file button, and paste the content directly into the chat.

Method 2: One-line command for Claude Code

1. Install Node.js first if you don’t have it yet; download it from nodejs.org and click Next all the way through.
2. Open your command-line interface (Windows: Type cmd in the search bar; Mac: Open Terminal).
3. Navigate to your project directory, then paste one line from the sections below and press Enter.
4. Restart Claude Code. Type /skills to check if the skill appears in the list.

If you want the skill available across all projects instead of just this one, add --global to the end of the command.

General Syntax of the npx skills Command

Most skills in this article are installed using a tool called skills by the Vercel Labs team.[10] There’s no need to install it beforehand; the npx prefix automatically downloads and runs it. The first line in the box below checks if Node.js is already installed on your machine: If a version like v22.x.x appears, you’re all set; if it says command not found, download the LTS version from nodejs.org.[14]

# check Node.js
node -v
# install an entire skill collection from a repo
npx skills add <owner>/<repo>
# install only a specific skill from that repo
npx skills add <owner>/<repo> --skill "skill-name"
# install globally across the machine instead of just the open project
npx skills add <owner>/<repo> -g
# view installed skills
npx skills list

By default, skills are copied into .claude/skills/ within the currently open project. Only that project can use them, but pushing them to Git makes them available to the entire team. Adding -g (or --global) installs the skills into ~/.claude/skills/, making them available to every project on your machine.[10]

In the /skills list, each skill appears under its display name. This name often differs from the repository name used during installation, so don’t assume the installation failed if you notice a discrepancy.

2. Taste Skill: Injecting Good Taste into Claude

This is what we consider the most worthwhile part of the entire toolkit, because it doesn’t fix the code—it fixes Claude’s aesthetic mindset. Still the same AI, still the same prompt, but the returned results are completely different.

Specifically, Taste Skill is a very long list of “don’t do this, do that” rules, compiled from scrutinizing hundreds of AI-generated websites and documenting every recurring mistake. It directly eliminates the telltale signs of an “AI-made website”: purple-to-blue gradients, centered hero sections on dark backgrounds, identical rows of cards repeated section after section, and massive headlines paired with tiny subtext. In return, it pushes Claude toward asymmetrical layouts, clear typographic hierarchy, generous whitespace, and purposeful motion.

Three “Dials” to Tweak

The best part of Taste Skill is the three numbers at the top of the file, which you can adjust manually to get exactly what you want, on a scale from 1 to 10:

When building sales landing pages, we usually set VARIANCE 7, MOTION 5, DENSITY 3. For internal admin dashboards, it’s the opposite: VARIANCE 3, MOTION 2, DENSITY 8.

Installing Taste Skill

1. The easy way: Open the repo below, go to skills/taste-skill/SKILL.md, click Download raw file, then drag and drop that file into Claude chat and say “Install this skill for me.”
2. Via CLI (entire repo, including 13 variants): Paste npx skills add https://github.com/Leonxlnx/taste-skill
3. Get only the standard version: Paste npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
4. To use it across all projects, add --global to the end.

Choosing the Right Flavor Among the 13 Skills

This repo contains 13 skills, each with its own personality.[1] Here are the ones people use the most:

Installing the entire suite won’t confuse Claude. Each skill has its own description line; Claude reads the description and automatically selects the one that matches what you’re asking for. If you want to be completely sure, specify the style directly in your prompt, for example, “go with a minimalist approach.”

How to Use

The skill activates automatically whenever you ask for UI-related tasks. Just describe what you need without calling the skill by name:

Create an about page for our coffee shop: a hero section, a menu section,
and a customer reviews section. Muted tones, minimal color, typography as the hero element. Don't use templates.

Our /pricing page looks too bland. Review and refine it to give it a distinct identity,
while keeping the text content and data structure intact.

3. Emil Kowalski: Smooth and “Eye-Pleasing” Motion

Taste Skill handles static beauty. This one takes care of beauty in motion. Emil Kowalski is a former engineer at Vercel and Linear, as well as the creator of the Sonner notification library. This skill set is years of his experience packaged together.[5]

The problem it solves is very specific: AI often picks the wrong ingredients for an effect. Choosing an ease-in curve for an opening menu (when it should actually be ease-out), or making a button expand from scale(0)—that is, out of thin air, when nothing in real life appears that way. Each small mistake might sound insignificant, but combined, they make the difference between an interface with “soul” and one that is… bland.

A few specific rules it taught Claude

• Never use ease-in for UI. It starts slowly right when the human eye is looking the closest, making the website feel laggy even if the duration is identical.
• UI transitions must be under 300ms. A 180ms menu feels noticeably faster than a 400ms menu.
• Buttons must shrink when pressed: transform: scale(0.97). It makes users feel like the device actually “heard” them.
• Keyboard-driven actions must have zero transitions. Things you press hundreds of times a day become sluggish if they have animations. Raycast doesn’t have open/close transitions, and that is the right call.
• Only animate transform and opacity. These two run on the GPU. Touching height, width, or margin forces the browser to recalculate the layout, causing stutter.
• Use custom curves, not defaults. Default CSS easings are too soft and lack punch. For example, use cubic-bezier(0.23, 1, 0.32, 1).

The Repo Has 15 Skills, Not Just One

When installing via the command line, you get all 15. Here are the 9 most notable ones:

Installing Emil Kowalski’s Skill Set

1. The easy way: Open the repo in the box below, go to skills/emil-design-eng/SKILL.md, click Download raw file, then drag that file into the Claude chat and say “Help me install this skill.”
2. The CLI way (get all 15 skills): Paste npx skills@latest add emilkowalski/skills
3. After installing, try prompting: “Review all the animations in this project for me.” It will return a Before / After / Why table for each issue.

4. Impeccable: A single command to clean up your layout

Instead of fumbling around and second-guessing which font to use or what spacing looks right, with Impeccable you just need to throw in a single command. It automatically cleans up and realigns your entire layout.

Impeccable originated from Anthropic’s own frontend-design skill, then expanded into 24 commands and 59 automated lint rules. These checks run without making AI calls, so it’s both fast and saves tokens.[6]

Most Frequently Used Commands

Append a section name to keep it focused: /impeccable audit blog, /impeccable polish settings, or speak directly in plain language: /impeccable redo this hero section. Pin frequently used commands with /impeccable pin audit, so from then on you only need to type /audit.

List of Things It Prohibits

This part is worth reading, as it serves as a checklist of “AI-generated website hallmarks” that you should avoid even if you don’t install the skill:

• Overused fonts: Arial, Inter, default system fonts
• Gray text on a colored background
• Pure black or pure gray—always mix in a slight tint of color
• Wrapping everything in cards, then nesting cards inside cards
• Bouncy/elastic easing effects that look dated
• Purple-to-blue gradients, glowing light effects on dark backgrounds

Installing Impeccable (Claude Code Only)

1. Open your terminal and navigate to your project root directory.
2. Paste: npx impeccable install and hit Enter. It automatically detects whether you are using Claude Code or Cursor and installs it in the right place.
3. Reopen Claude Code, run just once: /impeccable init, and answer a few questions about your product.
4. From then on, simply type /impeccable to see the full list of commands.

An alternative method for Claude Code only: /plugin marketplace add pbakaus/impeccable, then open /plugin and select Impeccable. For future updates: npx impeccable update.

Warning: Impeccable is not a drag-and-drop SKILL.md file like other skills. It comes with a small binary and a “hook”—a trigger that runs automatically every time Claude edits a UI file. Therefore: (1) It only works with Claude Code / Cursor / Codex, it cannot be used on claude.ai; (2) This hook runs independently of whether you approve individual commands, so only install it in projects you trust. If you want to disable all hooks for a single run, add --no-hooks during installation. The live mode also only works locally on your machine—do not attempt to run it on a production website.

5. Web Design Guidelines: The Tough Judge

The four skills above take care of the creation. This one handles the grading. It acts like a tough judge, scrutinizing every line of code based on Vercel’s design guidelines: over 100 rules on accessibility, performance, and user experience.[2]

The smartest point: the skill file is very short because it contains no rules at all. Every time it runs, it fetches the latest rule set from Vercel’s repo before evaluating. This means the guidelines are always up to date—you install it once and use it forever without worrying about it becoming obsolete.

What it inspects

• Accessibility: Missing aria-label tags, using semantically incorrect HTML tags, buttons inaccessible via keyboard
• Focus states: Is the focus ring visible, is focus-visible used correctly
• Forms: Presence of autocomplete, how errors are reported, how data is validated
• Motion: Does it respect prefers-reduced-motion (essential for users with motion sickness), does it use GPU-friendly properties
• Typography: Curly quotes, proper ellipsis characters, tabular figures for aligned numbers
• Images: Dimensions declared (omitting them causes layout shifts during loading), lazy loading, alt text
• Dark mode, touch, internationalization and a few more categories

Installing Web Design Guidelines

1. The easy way: Open the repository in the box below, go to skills/web-design-guidelines/SKILL.md, click Download raw file, then drag that file into the Claude chat and message: “Help us install this skill”.
2. The CLI way (fetches Vercel’s entire skill set): Paste npx skills add vercel-labs/agent-skills
3. Trigger it by directly messaging prompts like: “Review our interface”, “Check accessibility”, “Audit this page’s design”.

This skill requires internet access to fetch the latest guidelines. If Claude reports it cannot access the web, make sure to enable web search permissions for it.

How to Use

If you only want the linting skill without installing Vercel’s entire suite, install it with this command:

npx skills add vercel-labs/agent-skills --skill web-design-guidelines

When asking it to inspect, clearly specify the file or directory you want to review, otherwise it will ask you what you want to check.[2] The ruleset it downloads is located in the web-interface-guidelines repository.[12]

Audit all files in the app/ directory against the UI design guidelines, list errors with line numbers,
sorted by severity. Do not make any edits yet, leave them for us to review first.

Please fix the high-severity errors from the previous list for us, one file at a time.

6. Awesome Design: Design frameworks from major brands

Simply put: It loads entire design frameworks from major tech giants into Claude. Color palettes, typography, border radiuses, spacings—everything is pre-standardized, so all you have to do is name the brand.

There are two versions, sharing the same concept but implemented differently, and in this set of 8 skills, they are counted as two. You should understand the differences to choose the right one:

The HTML version is based on an argument we found quite convincing: A text line saying “rounded blue button” forces the reader to imagine it, whereas an HTML file is the result itself. Claude reads that file and sees the exact same pixels that you see. A 300-line HTML file conveys color, font size, motion, and interaction in 30 seconds. Describing that in text would take hours while still losing precision.[3]

How to Call It: Just Mention the Brand Name

No special commands needed. Once installed, simply prompt naturally—just mention the brand name, and it will automatically pull up the reference file:

Build us a product page in Linear's style
Replicate Stripe's hero gradient
Create an iPhone mockup of Spotify's Now Playing screen
Chunky 3D button like Duolingo
Dark landing page like Cursor

Available out of the box: Stripe, Linear, Notion, Apple, Vercel, Figma, Airbnb, Cursor, Claude, Mistral, Spotify, Tesla, Ferrari, BMW, Nike, Shopify, Supabase, Sentry… along with 22 iOS app templates.

Easiest Way to Install Awesome Design HTML

1. Open Claude Code, paste this exact prompt into the chat: Please install this Claude Code skill for me: https://github.com/yzfly/awesome-design-html
2. Claude will automatically download the entire repo into its skills directory. Done.
3. If you prefer doing it manually, run: git clone https://github.com/yzfly/awesome-design-html.git ~/.claude/skills/awesome-design-html
4. Don’t want to install anything: Head over to the online library, open any page you like, and press Ctrl+S to save it. Each page is a standalone HTML file ready to be used as a template right away.

Using Claude Design on the web is slightly different: Visit awesome-claude-design, download the DESIGN.md file for your preferred brand, attach it to the chat input at claude.ai/design, and message: “Create a design system from this DESIGN.md”.

Using DESIGN.md Directly in Claude Code

Even without using Claude Design on the web, you can still take advantage of this file format. The VoltAgent/awesome-design-md repository contains 73 DESIGN.md files extracted from major brand websites, each accompanied by two preview.html pages (light and dark) for previewing.[13]

1. Open the repo, navigate to the design-md/ directory, select your preferred brand, open DESIGN.md, and copy its content. If you want the entire repo, click the green Code button and select Download ZIP.
2. Copy the file into your project’s root directory, keeping the filename as DESIGN.md. Placing it right at the root makes it easy for Claude to find and ensures the whole team shares a single version.
3. Explicitly mention the filename in your prompt; don’t let Claude guess. A sample prompt is provided in the box below.

Read the DESIGN.md file in the root directory and build the homepage strictly following the color palette, typography,
and button styling described inside. If anything is unspecified in the file, ask us—do not invent it yourself.

Warning: This skill requires the entire directory of over 110 HTML files to function properly. The SKILL.md file alone is merely a guide that maps out which brand corresponds to which file. If you only download that single file, Claude will know the list but won’t have the reference files to inspect. To actually use it, install it using one of the three methods above. Additionally, these files serve as learning references, not official design systems of the respective companies. Color palettes, logos, and proprietary fonts remain their intellectual property. Use them as inspiration to craft your own system; do not copy them 1:1 for commercial use.

7. Image to Code: Drop an image in, get code out

This is super convenient: You drop in a screenshot or a design file, and Claude translates it directly into code, capturing every single detail.

What few people know, however, is that this skill also works in reverse—and that’s the best part. It forces Claude to generate the design image first, and only then write code based on that image. The mandatory sequence is: Generate image -> Deeply analyze image -> Write code. The reason is simple: If you let the AI code freely from the start, it falls back on generic, familiar patterns. But when it has to draw it first and then replicate it with code, it has a concrete “blueprint” to stay faithful to.

Notable rules in this skill

• One section, one image. If you request 8 sections, it generates 8 separate images instead of cramming them into a single long image with tiny, unreadable text.
• No cropping old images. If you need a close-up of a specific section, generate a new image—cropping ruins all spacing and proportions.
• Don’t be “lazy” with the image count. More clear images are better than fewer compressed, tiny ones.
• Hero headlines: maximum 3 lines. If it’s longer, trim the copy; do not add extra line breaks.
• Preventing “drift” during coding. The most common issue is an image that looks great, but turns into a generic page once coded. The skill has an entire dedicated rule prohibiting this.
• Banned buzzwords: “unleash”, “elevate”, “revolutionize”, “next-gen”, “seamless”, along with fake brand names like Acme, Nexus, and NovaCore.

Build a course sales landing page with four sections: Hero, benefits, instructors, pricing table.
First, generate four separate high-resolution mockups for each of the four sections—one image per section.
Analyze each image for typography, spacing, color, and layout, and then code the page to precisely match those images.

Installing Image to Code

1. The easy way: Open the repo in the box below, navigate to skills/image-to-code-skill/SKILL.md, click Download raw file, then drag that file into the Claude chat and prompt: “Please install this skill for me.”
2. The CLI way: Paste npx skills add https://github.com/Leonxlnx/taste-skill --skill "image-to-code"
3. It is located in the same repository as Taste Skill, so if you already installed the entire repo in section 2, you already have it—no need to reinstall.

8. Playwright CLI: Giving Claude a Pair of Eyes

This is the ultimate game changer, and it’s straight from Microsoft. The seven skills above only teach Claude to know what looks good. This one lets it actually see the results of what we’ve built.

Specifically: Claude opens the browser on its own, navigates to the page it just generated, takes screenshots or inspects the page structure, and checks for broken layouts, text overflows, or misaligned buttons—then fixes them automatically before you even notice. No more painful loops of “you open the preview → spot a bug → take a screenshot → describe it to Claude → it fixes it → you preview it again.”

Commands You Should Know

Installing Playwright CLI Specifically for Claude Code

1. Install Node.js 18 or higher first if you don’t have it yet, download at nodejs.org.
2. Open your terminal, paste: npm install -g @playwright/cli@latest and press Enter. Wait for it to finish downloading.
3. Verify the installation with: playwright-cli --help. If you see the list of commands, you’re good to go.
4. Navigate to your project directory and run: playwright-cli install --skills. The skill file will be placed in .claude/skills/playwright-cli.
5. If you want to use it across all projects, add -g: playwright-cli install --skills -g

Alternative method: npx -y skills add microsoft/playwright-cli --skill playwright-cli --agent claude-code

How to use

You rarely have to type these commands manually—Claude will handle that. Your job is simply to clearly state what you need to check:

Open https://devpixelvn.com:3000, take screenshots at 390px and 1440px viewport widths,
and check if the header has any horizontal overflow or truncated text.

Try clicking the Sign Up button on the page, check the console for any errors, and report back to us.

9. Putting it all together: Building a website in 6 steps

If you’ve installed all 8 skills but don’t know which order to use them in, you’ll still end up with messy results. Here is the exact workflow we are using. Just follow it step-by-step, with each step being a single prompt sent to Claude.

Step 1: Declare the context once

Run /impeccable init. It asks what your product is, who uses it, what the tone of voice is, and then writes it to PRODUCT.md. This step takes 3 minutes but saves a lot of time, because every subsequent command reads this file, so it no longer gives generic answers.

Step 2: Finalize the design direction before coding

Prompt something like: “Create an English course landing page, Linear-style but warmer. Show us the design direction before writing code.” Awesome Design handles brand references, while Taste Skill takes care of layout and visual rhythm. Do not let it write code at this step.

Step 3: Generate design images, then start coding

Message: “follow the skill: generate images, then analyze, then code”. Image to Code will generate images for each section, analyze them, and then build the code (requires an image generation tool, see section 7). If you already have design images ready, simply drag them in and skip the generation step.

Step 4: Clean up layout and typography

Run /impeccable layout and then /impeccable typeset. These two commands fix spacing, visual rhythm, fonts, and font sizes—the things most prone to misalignment when coding quickly.

Step 5: Add motion, then audit it

Prompt: “Add animations to the necessary parts, then audit everything according to Emil’s rules.” Emil Kowalski’s skill builds and evaluates at the same time. It will return a Before / After / Why table: Where it’s ease-in, change it to ease-out; where it’s scale(0), change it to scale(0.95).

Step 6: Self-Inspect, Self-Fix, Then Deliver

Prompt: “Use playwright-cli to open this page, take screenshots on both desktop and mobile, detect visual bugs, and fix them automatically. Then inspect the UI against Vercel standards.” Playwright inspects, Web Design Guidelines scores. This is the step most people skip, yet it is the most effective one.

Whenever building or modifying a UI: Lock in the design direction first, clean up layout and typography with Impeccable, inspect animations following Emil's rules, and finally use playwright-cli to automatically capture screenshots on both desktop and mobile, self-fixing any issues before reporting completion.

10. Frequently Asked Questions & Troubleshooting (FAQ)

A compilation of answers to common questions and troubleshooting tips when applying the 8 Agent Skills to Claude Code:

Click on the error you’re encountering to see how to fix it.

Read next: Headless WordPress with Next.js: REST API, Image Handling, and SEO Optimization