Claude-skill-registry design-tool-picker

Help choose the right design tool based on your current task. Use when unsure whether to use frontend-design, ui-ux-designer, visual-validator, or ui-code-auditor.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/design-tool-picker" ~/.claude/skills/majiayu000-claude-skill-registry-design-tool-picker && rm -rf "$T"

manifest: skills/data/design-tool-picker/SKILL.md

Design Tool Picker

When users ask "which design tool should I use?" or seem unsure about design tooling, guide them with this decision tree.

Quick Reference

Your Situation	Recommended Tool	Type	Invocation
Writing new UI code	`frontend-design`	skill	Loaded automatically
Need a design system template	`ux-brief`	command	`/majestic:ux-brief`
Refining existing UI iteratively	`ui-ux-designer`	agent	`Task(majestic-engineer:design:ui-ux-designer)`
Verifying visual changes match intent	`visual-validator`	agent	`Task(majestic-engineer:qa:visual-validator)`
Reviewing code for accessibility	`ui-code-auditor`	agent	`Task(majestic-engineer:qa:ui-code-auditor)`
Styling React components	`tailwind-styling`	skill	`Skill(majestic-react:tailwind-styling)`

Decision Flow

Question 1: Do you have code written, or are you starting fresh?

Starting fresh → Choose based on what you need:

Need design system from scratch:
```
/majestic:ux-brief
```
Just need design guidance while coding:
```
frontend-design
```
skill (auto-loads)

Have code → Continue to Question 2

Question 2: Is the issue visual (layout, colors, spacing) or code quality (a11y, patterns)?

Visual issues → Continue to Question 3

Code quality →

ui-code-auditor

agent

Reviews source code for accessibility violations
Detects missing alt text, aria-labels, form labels
Finds animation anti-patterns, touch target issues
Returns findings with file:line references

Question 3: Can you run the UI and take screenshots?

Yes → Continue to Question 4

No →

frontend-design

skill

Provides design patterns for typography, color, motion
Reference while coding without needing running UI

Question 4: Do you want to iterate on the design or verify it's correct?

Iterate →

ui-ux-designer

agent

Takes screenshots, analyzes, implements changes
Multiple iteration cycles (default 10)
Progressive refinement through visual feedback

Verify →

visual-validator

agent

Checks if changes achieved intended goals
Validates accessibility, design system compliance
Returns structured pass/fail verdict

Tool Comparison

Screenshot-Based Tools (Visual)

Tool	Purpose	When to Use
`ui-ux-designer`	Iterative refinement	"Make this look better"
`visual-validator`	Verification	"Did my changes work?"

Both require browser tools and running UI.

Code-Based Tools (Static)

Tool	Purpose	When to Use
`ui-code-auditor`	Accessibility/quality audit	"Check my code for a11y issues"
`frontend-design`	Design guidance	"How should I style this?"

Work on source code without running UI.

Creation Tools

Tool	Purpose	When to Use
`ux-brief` command	Generate design system	"Create a design system for my project"
`tailwind-styling`	Tailwind patterns	"Help me use Tailwind effectively"

Common Workflows

New Feature with UI

```
/majestic:ux-brief
```
if no design system exists
```
frontend-design
```
skill while implementing
```
ui-code-auditor
```
before PR to catch a11y issues
```
visual-validator
```
to verify visuals match intent

Fix Visual Bug

```
ui-ux-designer
```
if iterating to find the right fix
```
visual-validator
```
to confirm fix worked

Accessibility Audit

```
ui-code-auditor
```
for code-level violations
```
visual-validator
```
for visual accessibility (contrast, focus states)

Design System Update

```
/majestic:ux-brief
```
to update design system docs
```
visual-validator
```
to verify components match spec