القائمة
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.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.
Skill file structure, naming conventions, directory layout, frontmatter requirements, and invocation control. Use when creating skill files or slash commands to ensure correct format and validation.
Forces adversarial reasoning before committing to decisions. Triggers on architectural choices, approach selection, and planning phases to prevent premature commitment bias.
Verify LLM reasoning using Reverse Chain-of-Thought (RCoT) to detect overlooked conditions.
Autonomous task implementation - research, plan, build, review, fix, ship
Generate a complete favicon set (ICO, PNG variants, apple-touch-icon, web manifest) from a source image and integrate into the project's HTML layout. Use when user asks to generate favicons, set up PWA icons, or add an apple-touch-icon.
| name | design-tool-picker |
| description | 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. |
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 | Skill("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:
Skill("ux-brief")frontend-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" |
Skill("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)Skill("ux-brief") to update design system docsvisual-validator to verify components match spec