DEV Community

A0mineTV
A0mineTV

Posted on

Claude Code Skills: install UI Skills + build a /frontend-design workflow (Claude Code + Cursor/VS Code)

#claude #ai #productivity #frontend

Claude Code “Skills” (Agent Skills) let you package your best instructions into reusable slash commands like:

  • /frontend-design
  • /baseline-ui
  • /fixing-accessibility
  • /fixing-motion-performance

In this article you’ll learn how to:

1) Install UI Skills (a ready-made skills pack)

2) Create your own /frontend-design skill (tailored to your stack)

3) Chain skills into a repeatable UI workflow

4) Use the same workflow in Claude Code and in Cursor/VS Code

What are Skills (and why they beat copy-pasted prompts)

A skill is a folder containing a SKILL.md file. Claude Code reads:

  • YAML frontmatter (metadata like name, description)
  • the instructions below

The frontmatter name becomes the slash command, and you can invoke it at any time with:

/skill-name
Enter fullscreen mode Exit fullscreen mode

Skills also replaced/merged the older “custom slash commands” mechanism, so skills are the modern way to build reusable commands.

Where skills live (global vs project)

You typically have two places:

Global (available across all your projects) 

~/.claude/skills/<skill-name>/SKILL.md
Enter fullscreen mode Exit fullscreen mode

Project (only for the current repo) 

.claude/skills/<skill-name>/SKILL.md
Enter fullscreen mode Exit fullscreen mode

This is great when you want a skill that is project-specific (e.g., it knows your component library, naming conventions, and folder structure).

Install UI Skills (baseline, accessibility, motion, metadata)

UI Skills is a set of opinionated skills that help “polish” interfaces built by agents.

Install the full pack 

npx skills add ibelick/ui-skills
Enter fullscreen mode Exit fullscreen mode

Or install only what you need 

npx ui-skills add baseline-ui
npx ui-skills add fixing-accessibility
npx ui-skills add fixing-motion-performance
npx ui-skills add fixing-metadata
Enter fullscreen mode Exit fullscreen mode

Confirm they show up

In Claude Code, type / and you should see:

  • /baseline-ui
  • /fixing-accessibility
  • /fixing-motion-performance
  • /fixing-metadata

Create your own /frontend-design skill

You can install a “frontend-design” skill via a plugin marketplace, but I prefer creating my own so it matches:

  • my stack (Vue / React / Svelte…)
  • my style rules (Tailwind/UnoCSS, naming, file structure)
  • my aesthetic preferences (no “AI slop”)

1) Create the folder

Project-scoped (recommended for iteration):

mkdir -p .claude/skills/frontend-design
Enter fullscreen mode Exit fullscreen mode

2) Create SKILL.md

Create:

.claude/skills/frontend-design/SKILL.md
Enter fullscreen mode Exit fullscreen mode

Example SKILL.md (trimmed, customize freely):

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications.
---

Before coding:
- Pick a clear aesthetic direction (editorial / brutalist / refined minimal / playful…)
- Define typography scale + spacing rules
- Define interaction states (hover/focus/disabled) and an a11y checklist
- Define motion rules and respect prefers-reduced-motion

Then produce production-ready code matching the user’s stack.
Avoid generic “AI slop” aesthetics.
Enter fullscreen mode Exit fullscreen mode

3) Restart Claude Code (if needed)

If the command doesn’t appear immediately, restart your Claude Code session. Then type / and confirm you see:

/frontend-design
Enter fullscreen mode Exit fullscreen mode

The workflow: generate with /frontend-design, then polish with UI Skills

Here’s the pattern that works extremely well in practice:

1) /frontend-design → generate design direction + real code
2) /baseline-ui → remove “agent UI slop”, improve spacing/typography/states
3) /fixing-accessibility → keyboard, labels, focus, semantics
4) /fixing-motion-performance → performance-first motion + reduced-motion compliance

Think of it like: Design → Craft → A11y → Perf.

A complete example (general topic): Habit Tracker + Focus Timer (Vue 3)

Step 1 — Ask /frontend-design to build the page

Copy/paste in Claude Code:

/frontend-design

Build a full-page “Habit Tracker + Focus Timer” screen.

Stack:
- Vue 3 SFC + <script setup lang="ts">
- TailwindCSS + dark mode
- No external UI libs

File:
@src/pages/HabitFocus.vue

UX requirements:
- Full viewport layout: w-screen h-screen
- Sticky top bar with: title, date, “Add habit” button
- Main layout (desktop):
  Left: Habit list (check today, streak, small progress indicator)
  Right: Focus timer card (25/5 pomodoro) + session history
- Mobile: single column, timer above list
- Internal scrolling: habit list scrolls inside its panel (no global page scroll for long lists)
- States: loading / empty / error (mock states ok)

A11y:
- Keyboard navigation (tab order makes sense)
- Visible focus rings
- Proper labels (sr-only ok)
- aria-live for “X habits completed”

Motion:
- Subtle transitions only (transition-colors, small scale on hover)
- Respect prefers-reduced-motion (motion-reduce:transition-none)

Data:
- Use local reactive state (no API)
- Habits array: name, doneToday, streak, goalPerWeek
- Timer: start/pause/reset, sessions array

Deliverables:
1) Choose a bold aesthetic direction and justify it in 3 bullets.
2) Implement the full working page code in the file.
3) Return only the final code + a short QA checklist.
Enter fullscreen mode Exit fullscreen mode

Step 2 — Run the UI Skills polishing passes

Now run the skills (in this order):

/baseline-ui src/pages/HabitFocus.vue
Enter fullscreen mode Exit fullscreen mode

Then:

/fixing-accessibility src/pages/HabitFocus.vue
Enter fullscreen mode Exit fullscreen mode

Then:

/fixing-motion-performance src/pages/HabitFocus.vue
Enter fullscreen mode Exit fullscreen mode

Optional (if this is a real “page” that needs meta/SEO):

/fixing-metadata src/pages/HabitFocus.vue
Enter fullscreen mode Exit fullscreen mode

Using the same workflow in Cursor (or VS Code)

Cursor is VS Code-based, so the easiest approach is:

1) Open the integrated terminal (inside Cursor/VS Code)
2) Run Claude Code CLI:

claude
Enter fullscreen mode Exit fullscreen mode

3) Use your slash commands inside that session:
/frontend-design, /baseline-ui, /fixing-accessibility, etc.

CLI vs Extension note

In VS Code, the Claude Code extension provides a graphical experience, but the CLI typically supports all commands and skills, while the extension may show only a subset (type / to see what’s available).

If you can’t see a command in the extension UI, run claude in the integrated terminal and use it there.

Troubleshooting

“My /frontend-design command doesn’t show up”

Checklist:

  • The path is correct:
    • .claude/skills/frontend-design/SKILL.md (project)
    • OR ~/.claude/skills/frontend-design/SKILL.md (global)
  • The file name is exactly SKILL.md
  • The frontmatter includes at least name: and description:
  • Restart Claude Code

“A skill works in CLI but not in the VS Code extension”

That’s expected sometimes: the extension can expose fewer commands than the CLI.
Use the integrated terminal + claude as your “escape hatch.”

Suggested “one-shot” prompt template

This is the reusable template I keep around:

/frontend-design

Build @src/pages/<PageName>.vue
Stack: Vue 3 + Tailwind + dark mode.
Needs: full viewport layout, sticky header, internal-scroll panel, a11y focus rings, motion-safe transitions.

After writing code:
1) /baseline-ui @src/pages/<PageName>.vue
2) /fixing-accessibility @src/pages/<PageName>.vue
3) /fixing-motion-performance @src/pages/<PageName>.vue

Apply all fixes directly in the file.
Return only the final code + a short QA checklist.
Enter fullscreen mode Exit fullscreen mode

References

Top comments (0)