Stats
Actions
Tags
From majestic-engineer
Guides developers to select the right UI design tool (frontend-design, ui-ux-designer, visual-validator, ui-code-auditor) via decision tree for tasks like writing code, visual iteration, or accessibility audits.
How this skill is triggered — by the user, by Claude, or both
Slash command
/majestic-engineer:design-tool-pickerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
When users ask "which design tool should I use?" or seem unsure about design tooling, guide them with this decision tree.
When users ask "which design tool should I use?" or seem unsure about design tooling, guide them with this decision tree.
| 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) |
Starting fresh → Choose based on what you need:
/majestic:ux-brieffrontend-design skill (auto-loads)Have code → Continue to Question 2
Visual issues → Continue to Question 3
Code quality → ui-code-auditor agent
Yes → Continue to Question 4
No → frontend-design skill
Iterate → ui-ux-designer agent
Verify → visual-validator agent
| 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.
| 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.
| 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" |
/majestic:ux-brief if no design system existsfrontend-design skill while implementingui-code-auditor before PR to catch a11y issuesvisual-validator to verify visuals match intentui-ux-designer if iterating to find the right fixvisual-validator to confirm fix workedui-code-auditor for code-level violationsvisual-validator for visual accessibility (contrast, focus states)/majestic:ux-brief to update design system docsvisual-validator to verify components match specnpx claudepluginhub majesticlabs-dev/majestic-marketplace --plugin majestic-engineerAudits, refines, and builds polished UI with real-world design patterns, brand-appropriate palettes, and anti-pattern detection. Use when frontend visual work needs to look less generic or 'AI-made'.
Designs UI/UX systems with style guides, color palettes, typography, and component specs for new interfaces. Asks about product type, tech stack, and deliverables before producing design tokens, layouts, or style guides.
Design UI/UX with 50+ styles, 97 palettes, 57 font pairings, 99 UX guidelines, and 25 chart types across 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Also provides code review rules for accessibility, touch targets, performance, and responsive layout.