Claude Can Write the Interface. These Seven Skills Add Design Judgment.

Claude can turn a brief into React, CSS, and animation code. It still tends to give unrelated products the same visual language. The missing layer is usually not syntax. The workflow explains what to build but leaves out why a choice fits, how it should be reviewed, and when the agent should stop adding effects.

Agent Skills can preserve that judgment. A skill is a versionable folder containing a SKILL.md, references, and sometimes scripts. The effective pattern is not to install everything at once. Give separate skills responsibility for direction, motion, layout, quality checks, and cognitive usability.

Correct the source names before recommending tools

The original brief mixed community nicknames, creator names, and package names. "Jakob Creel" can be traced to design engineer Jakub Krehel. His public repository includes better-layout, better-accessibility, and interface-review.

The names "Conrad Lee's Garden Skills," "Eliya Design AI Skill," "Mongto Awwwards Skills," and "Tastemaker" could not be tied to maintained official repositories. They may refer to private packages, community aliases, or transcription errors. This guide replaces those labels with seven projects whose source files, installation paths, and licenses can be inspected.

The seven projects solve different parts of the workflow

Skill or repository	Best responsibility	Do not use it to
Anthropic frontend-design	Establish subject-specific direction, typography, palette, and a signature element	Serve as final pixel QA
Emil Kowalski Skills	Decide whether motion is needed, then choose timing, curves, feedback, and reduced-motion behavior	Define the whole information architecture
Jakub Krehel Skills	Review layout, type, color, accessibility, and interface changes	Add decoration without a purpose
Impeccable	Preserve product context, create shared design vocabulary, and run deterministic checks	Replace usability testing
UI Skills	Fetch small, focused fixes for metadata, accessibility, and motion performance	Load every rule into every task
Taste Skill	Increase layout variance and support image-to-code or audit-first redesigns	Treat anti-slop as one fixed visual style
Wondel UX Skills	Audit affordances, feedback, and microinteraction structure	Treat a score as proof of quality

There is no single winner. The projects behave more like a small design-engineering team. One chooses direction, another handles motion, another inspects layout, and another looks for failures before release.

1. Anthropic frontend-design forces the agent to choose a direction

Anthropic's official skill brings the task back to first principles: the subject, audience, and single job of the page. It asks the agent to define color, typography roles, a layout concept, and one memorable signature element before writing code.

That process blocks familiar shortcuts such as using the same typeface, gradient, and nested card treatment for every SaaS product. Responsive behavior, visible keyboard focus, and reduced motion remain part of the quality floor.

Anthropic documents its Claude Code marketplace as the official installation path for the example skills:

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

Skills can load from their descriptions. A same-named slash command is not guaranteed because command behavior depends on the package and agent harness.

2. Emil Kowalski Skills asks whether the interface should move at all

Emil Kowalski's repository includes emil-design-eng, animate, review-animations, improve-animations, and animation-vocabulary. Its strongest rule comes before implementation: decide whether animation serves the interaction.

A keyboard action triggered hundreds of times per day usually should not animate. An occasional drawer, toast, or onboarding step has more room for motion. The animate skill then selects the cheapest suitable mechanism, from a CSS transition to WAAPI or Motion.

npx skills@latest add emilkowalski/skills

Use this suite during implementation and review. A vague instruction to "add premium animation" at the beginning of a brief is much less useful.

3. Jakub Krehel Skills separates layout from accessibility

Jakub Krehel's repository divides interface quality into focused skills. better-layout covers grouping, alignment, reading order, and breakpoints. better-typography handles scale, spacing, wrapping, and truncation. better-accessibility reviews focus states, keyboard support, ARIA, forms, and hit areas.

interface-review can inspect uncommitted changes, a branch, or a pull request. variant produces meaningfully different versions inside the actual page, making comparison more useful than three prose descriptions in chat.

npx skills add jakubkrehel/skills

4. Impeccable keeps design context out of temporary chat history

Impeccable extends Anthropic's frontend-design idea with a project layer. /impeccable init writes PRODUCT.md and can add DESIGN.md, giving later tasks a stable record of the audience, brand lane, anti-references, colors, type, and components.

The current repository documents 23 commands such as audit, critique, polish, distill, bolder, and quieter. Its CLI and extension also expose 59 deterministic detector rules that do not require an LLM or API key.

npx impeccable install

Review hook installation before enabling it for a team. A tool that scans or blocks file changes has become part of the delivery system, not merely a prompt library.

5. UI Skills keeps the context small

UI Skills provides a registry and an MCP endpoint. A team can inspect categories and fetch only the skill needed for the current problem, such as a baseline, accessibility, metadata, or motion-performance fix.

npx ui-skills categories
npx ui-skills list --category motion
npx ui-skills get baseline-ui

This selective approach controls context size. A design system does not paste every policy into every ticket. An agent adjusting one button also does not need the complete brand, animation, SEO, and research manual.

6. Taste Skill supports an image-first pipeline with explicit checks

Taste Skill packages anti-template rules for layout, typography, motion, and spacing. design-taste-frontend is the general option. image-to-code follows an image-first path, while redesign-existing-projects audits an existing codebase before changing it.

npx skills add https://github.com/Leonxlnx/taste-skill \
  --skill "design-taste-frontend"

An image-first workflow is useful, but it does not guarantee pixel fidelity. Check reference rights first. Then compare the implementation at real viewports with the intended fonts and responsive states. One desktop screenshot says nothing about mobile, empty, loading, or error states.

7. Wondel UX Skills adds cognitive review

Wondel's design-everyday-things skill turns affordances, signifiers, mappings, constraints, and feedback into review criteria. microinteractions uses triggers, rules, feedback, loops, and modes to inspect small interactions.

npx skills add wondelai/skills/design-everyday-things --global
npx skills add wondelai/skills/microinteractions --global

Use these scores to find gaps, not to certify a design. A reported 10 out of 10 does not prove that a real user can find a control. It also does not establish WCAG conformance. Follow the score with browser tests, keyboard operation, and real content.

A three-stage pipeline: direction, implementation, evidence

Do not invoke all seven at once. Give them an order so their rules do not fight each other.

Stage	Suggested combination	Deliverable	Gate
Direction	frontend-design, Impeccable init, Taste Skill	Tokens, type roles, layout concept, signature element, anti-references	Every choice maps to the brief
Implementation	Emil, Jakub, UI Skills	Components, responsive states, motion, accessibility fixes	Commands are repeatable and do not create parallel rule systems
Evidence	Impeccable audit, Jakub review, Wondel UX	Screenshots, keyboard result, issue list, before-and-after proof	Blockers are fixed or explicitly excepted

A practical task can use this sequence:

Use frontend-design to establish one direction for this B2B analytics product.
Return only the palette, type roles, layout, and signature element. Do not code yet.

After the direction is accepted, implement the dashboard. Use better-layout to
review grouping and reading order. Invoke animate only when motion explains a
state change.

Capture the result at 1440, 1024, and 390 pixels. Run interface-review and
impeccable audit. Fix every blocker and report keyboard and reduced-motion tests.

GitHub review needs evidence, not the phrase "design improved"

Once skills live in the repository, their review criteria should appear in pull requests. Preserve screenshots for named viewports, keyboard results, reduced-motion behavior, and detector or accessibility reports.

Reject conclusions that cannot be replayed. A change should point to the file, state, rule, and corrected visual result. Skills that edit files or install hooks also need pinned versions and reviewed updates like any other supply-chain dependency.

Frequently asked questions

Should all seven skills be installed globally?

They can be, but that is a poor starting point. Team rules, design tokens, and release gates belong in the repository. Personal exploration tools can be global. Start with one direction skill, one implementation skill, and one review skill.

Do skills activate automatically or require a slash command?

Both patterns exist. A standard skill can load from its frontmatter description, while a plugin may also expose commands. Each repository defines its installation behavior, and the folder name may differ from the command name.

Will skills eliminate generic AI interfaces?

No. Skills preserve decisions and review order. They cannot replace real content, brand material, user research, or browser verification. An empty brief still pushes the model toward familiar patterns.

Which three projects are the best starting stack?

For a new product, start with frontend-design, Emil Kowalski Skills, and Impeccable. For an existing interface with layout and accessibility problems, replace Emil with Jakub Krehel Skills. Add Taste Skill when reference images are central to the workflow.

Sources

• Anthropic Agent Skills repository
• Emil Kowalski Skills
• Jakub Krehel Skills
• Impeccable
• UI Skills
• Taste Skill
• Wondel UX Skills
• W3C Web Content Accessibility Guidelines 2.2

Author Insight

The difference between two AI-built interfaces often appears after the first draft. A workflow that separates direction, implementation, and evidence leaves reviewable decisions behind. A team can measure what a skill improved and remove it when it does not help, without rebuilding the entire process.