메뉴
Automated detection and enforcement of design system guidelines including dark mode, colors, spacing, typography, focus states, and accessibility compliance
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Launch multiple Claude Code instances in parallel using tmux and git worktrees to tackle beads tasks concurrently. Use when user mentions parallel execution, multi-agent, parallel claude, or wants to run multiple Claude instances simultaneously on different tasks.
Full development workflow from idea to parallel execution. Use when planning features/bugfixes/refactors, breaking work into beads tasks, selecting tasks to parallelize (max 4), launching Claude instances in tmux worktrees, and cleaning up after completion. Triggers: "plan feature", "plan refactor", "plan bugfix", "start parallel work", "launch parallel", "cleanup worktrees", "kill parallel", or /dev-workflow.
Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes
Guide for adding new AI platform support (e.g., Gemini, Mistral, Anthropic) to the Chrome extension with strategy pattern and testing requirements
Ensure all UI components follow the design guidelines including purple-indigo gradient, rounded-xl borders, backdrop-blur-sm effects, dark mode support, and accessibility requirements
Automate version bumping, changelog generation, and release preparation. Creates release PR that triggers GitHub Actions workflow for building, testing, and publishing.
| name | Design System Violation Detector |
| description | Automated detection and enforcement of design system guidelines including dark mode, colors, spacing, typography, focus states, and accessibility compliance |
Automated detection and enforcement of design system guidelines for React components in the My Prompt Manager Chrome extension.
Scan React components (*.tsx, *.jsx) to identify violations of the design system guidelines documented in docs/DESIGN_GUIDELINES.md. Ensure consistency, accessibility, and adherence to the established purple-indigo visual language across all UI components.
Use this skill:
npm test and npm run lint)DO NOT use this skill for:
Rule: Every color class must have a dark: variant.
Checks:
bg-* → must have dark:bg-*text-* → must have dark:text-*border-* → must have dark:border-*placeholder-* → must have dark:placeholder-*ring-* → must have dark:ring-*Exceptions:
bg-transparent, text-inherit, border-none don't need dark variantsbg-linear-to-r don't need dark variantstext-white (no dark variant needed)Examples:
❌ VIOLATION:
<div className="bg-white text-gray-900 border border-purple-200">
✅ CORRECT:
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 border border-purple-200 dark:border-gray-600">
Rule: Use only predefined color palette, no arbitrary colors.
Primary Actions:
bg-linear-to-r from-purple-600 to-indigo-600hover:from-purple-700 hover:to-indigo-700text-white (on gradient backgrounds)Status Colors:
bg-green-600, text-green-600bg-red-600, text-red-600bg-yellow-600, text-yellow-600bg-blue-600, text-blue-600Text Colors:
text-gray-900 dark:text-gray-100text-gray-600 dark:text-gray-400text-gray-500 dark:text-gray-500Background Colors:
bg-white dark:bg-gray-900bg-gray-50 dark:bg-gray-800bg-white/70 dark:bg-gray-800/70 (glassmorphism)Border Colors:
border-purple-200 dark:border-gray-600border-purple-100 dark:border-gray-700border-red-300 dark:border-red-500Examples:
❌ VIOLATION:
<button className="bg-blue-500 text-white">Save</button>
✅ CORRECT:
<button className="bg-linear-to-r from-purple-600 to-indigo-600 text-white">Save</button>
❌ VIOLATION:
<div className="bg-[#f3f4f6]">
✅ CORRECT:
<div className="bg-gray-50 dark:bg-gray-800">
Rule: Use consistent border radius values.
Standard Sizes:
rounded-xl (12px)rounded-lg (8px)rounded-fullExamples:
⚠️ VIOLATION:
<div className="bg-white border rounded-lg p-5">
✅ CORRECT:
<div className="bg-white border rounded-xl p-5">
Rule: Use consistent spacing patterns.
Standard Spacing:
p-5p-6space-x-3space-y-3 or space-y-4gap-4Examples:
⚠️ VIOLATION:
<div className="p-3 space-x-2">
✅ CORRECT:
<div className="p-5 space-x-3">
Rule: Use consistent typography scale.
Font Sizes:
text-sm (14px)text-xs (12px)text-lg (18px)Font Weights:
font-semiboldfont-light (rare)Font Family:
Examples:
⚠️ VIOLATION:
<button className="text-base font-bold">Click me</button>
✅ CORRECT:
<button className="text-sm font-semibold">Click me</button>
Rule: Use consistent effects and transitions.
Backdrop Blur (Glassmorphism):
className="bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm"
Shadows:
shadow-lg hover:shadow-xlshadow-xs (subtle) or noneshadow-xlTransitions:
transition-all duration-200transition-colors duration-200Examples:
⚠️ VIOLATION:
<button className="bg-purple-600 hover:bg-purple-700">
✅ CORRECT:
<button className="bg-purple-600 hover:bg-purple-700 transition-all duration-200">
Rule: All interactive elements must have predefined focus classes.
Predefined Focus Classes:
.focus-primary - Primary actions (buttons).focus-secondary - Secondary actions.focus-danger - Destructive actions.focus-input - Input fields.focus-interactive - Links, icon buttonsDO NOT use raw Tailwind focus classes like focus:ring-2 focus:ring-purple-500.
Examples:
❌ VIOLATION:
<button className="bg-purple-600 focus:ring-2 focus:ring-purple-500">
✅ CORRECT:
<button className="bg-purple-600 focus-primary">
❌ VIOLATION:
<input className="border border-gray-300" />
✅ CORRECT:
<input className="border border-purple-200 dark:border-gray-600 focus-input" />
Rule: Ensure accessibility compliance.
Required Attributes:
aria-label or visible labelalt attribute<label> or aria-labelaria-labelrole="switch" and aria-checkedSemantic HTML:
<button> not <div onClick><article> for cards<time> for dates<nav> for navigationColor Contrast:
Examples:
❌ VIOLATION:
<div onClick={handleClick} className="cursor-pointer">
<svg>...</svg>
</div>
✅ CORRECT:
<button onClick={handleClick} aria-label="Delete prompt" className="focus-interactive">
<svg>...</svg>
</button>
Primary Button Pattern:
<button className="
px-6 py-3 text-sm font-semibold text-white
bg-linear-to-r from-purple-600 to-indigo-600
rounded-xl hover:from-purple-700 hover:to-indigo-700
transition-all duration-200 shadow-lg hover:shadow-xl
disabled:opacity-50 focus-primary
">
{text}
</button>
Text Input Pattern:
<input className="
w-full px-4 py-3
border border-purple-200 dark:border-gray-600
rounded-xl focus-input
bg-white/60 dark:bg-gray-700/60 backdrop-blur-sm
transition-all duration-200
text-gray-900 dark:text-gray-100
placeholder-gray-500 dark:placeholder-gray-400
" />
Card Container Pattern:
<article className="
bg-white/70 dark:bg-gray-800/70 backdrop-blur-sm
border-b border-purple-100 dark:border-gray-700
p-5 hover:bg-white/90 dark:hover:bg-gray-800/90
transition-all duration-200
">
{content}
</article>
Icon Button Pattern:
<button className="
p-2 text-gray-400 dark:text-gray-500
hover:text-purple-600 dark:hover:text-purple-400
rounded-lg hover:bg-purple-50 dark:hover:bg-purple-900/20
transition-colors focus-interactive
" aria-label="Action description">
<svg>...</svg>
</button>
src/components/**/*.tsx
src/components/**/*.jsx
**/*.test.tsx, **/__tests__/**For each file:
Run these checks in order:
Dark Mode Variants Missing
bg-white, bg-gray-*, text-gray-*, border-gray-*, border-purple-*dark:* variant exist?bg-transparent, text-white, border-noneFocus States Missing
<button, <input, <a, role="button".focus-* class?.focus-primary, .focus-input, .focus-interactive, etc.Arbitrary Colors Used
bg-[#, text-[#, border-[#, hex color patternsAccessibility Violations
<button> without text/aria-label<img> without alt<input> without label/aria-labelonClick on <div>)role="switch" on togglesBorder Radius Inconsistencies
rounded-md, rounded-lg on cards/inputs/buttons (Note: rounded-xs doesn't exist in Tailwind v4 - use rounded-sm for small radii)rounded-xl for standard components, rounded-sm for small UI elementsSpacing Inconsistencies
p-3, p-4, p-7 on cardsp-5 (cards) or p-6 (containers)Typography Violations
text-base, text-md, font-bold on buttons/body texttext-sm (body) and font-semibold (emphasis)Missing Transitions
transition-all duration-200Shadow Misuse
shadow-lg hover:shadow-xl (buttons), shadow-xs (cards)Pattern Optimization
Glassmorphism Pattern
bg-white/ without backdrop-blur-smGenerate a structured report:
═══════════════════════════════════════════════════════════
DESIGN SYSTEM VIOLATION REPORT
═══════════════════════════════════════════════════════════
Files Checked: 42
Components Analyzed: 45
SUMMARY:
🔴 ERRORS: 12 (Must fix)
⚠️ WARNINGS: 8 (Should fix)
ℹ️ INFO: 3 (Consider)
═══════════════════════════════════════════════════════════
ERRORS (Must Fix)
═══════════════════════════════════════════════════════════
1. Missing Dark Mode Variant
File: src/components/PromptCard.tsx:45
Current:
<div className="bg-white border border-purple-200">
Problem: Missing dark mode variants for background and border
Fix:
<div className="bg-white dark:bg-gray-800 border border-purple-200 dark:border-gray-700">
Docs: docs/DESIGN_GUIDELINES.md#dark-mode
─────────────────────────────────────────────────────────
2. Missing Focus State
File: src/components/Button.tsx:23
Current:
<button className="bg-purple-600 rounded-xl">
Problem: Interactive element missing focus state
Fix:
<button className="bg-purple-600 rounded-xl focus-primary">
Docs: docs/DESIGN_GUIDELINES.md#focus-states
─────────────────────────────────────────────────────────
═══════════════════════════════════════════════════════════
WARNINGS (Should Fix)
═══════════════════════════════════════════════════════════
[Similar format for warnings...]
═══════════════════════════════════════════════════════════
INFO (Consider)
═══════════════════════════════════════════════════════════
[Similar format for info...]
═══════════════════════════════════════════════════════════
RECOMMENDATIONS
═══════════════════════════════════════════════════════════
Priority Actions:
1. Fix all 12 ERRORS before PR submission
2. Address 8 WARNINGS for consistency
3. Review 3 INFO suggestions for optimization
Next Steps:
- Run this check again after fixes: [command to re-run]
- Review design guidelines: docs/DESIGN_GUIDELINES.md
- Check existing components for patterns: src/components/
Quality Gate: ❌ FAILED (12 errors must be fixed)
For certain violations, offer to auto-fix:
Safe Auto-Fixes:
dark: variants (follow standard patterns)rounded-lg → rounded-xl on cards/buttonstransition-all duration-200 to interactive elements.focus-*Manual Review Required:
Auto-Fix Workflow:
1. Ask user: "Found 8 auto-fixable violations. Apply fixes? (y/n)"
2. If yes:
- Use Edit tool for each fix
- Show diff of changes
- Re-run checks to verify fixes
3. If no:
- Provide manual fix instructions
Add to package.json:
{
"scripts": {
"check-design": "echo 'Run Claude Code skill: design-violation-detector'"
}
}
Update quality workflow:
# Mandatory checks before commit
npm test # ✓ Existing
npm run lint # ✓ Existing
# Run design check manually via Claude Code skill
Before submitting PR with UI changes:
npm test passesnpm run lint passesUser Request:
"Check PromptCard.tsx for design violations"
Skill Actions:
src/components/PromptCard.tsxUser Request:
"Scan all components for design violations"
Skill Actions:
src/components/**/*.tsxUser Request:
"Check design system compliance for components I just changed"
Skill Actions:
git diff --name-only to find modified filessrc/components/**/*.tsxUser Request:
"Check and fix design violations in Button.tsx"
Skill Actions:
Before:
const MyComponent = () => (
<div className="bg-white border border-gray-200 text-gray-900">
<h2 className="text-lg font-bold">Title</h2>
<p className="text-gray-600">Description</p>
</div>
);
After:
const MyComponent = () => (
<div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 text-gray-900 dark:text-gray-100">
<h2 className="text-lg font-bold">Title</h2>
<p className="text-gray-600 dark:text-gray-400">Description</p>
</div>
);
Before:
<button className="px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700">
Save
</button>
After:
<button className="px-6 py-3 bg-purple-600 text-white rounded-xl hover:bg-purple-700 transition-all duration-200 focus-primary">
Save
</button>
Before:
<div className="bg-[#f3f4f6] text-[#1a202c] border-[#e5e7eb]">
After:
<div className="bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-gray-200 dark:border-gray-700">
Before:
<div onClick={handleClick} className="cursor-pointer">
<TrashIcon />
</div>
After:
<button onClick={handleClick} aria-label="Delete item" className="focus-interactive">
<TrashIcon />
</button>
Always structure output as:
Summary Statistics
Critical Errors (if any)
Warnings (if any)
Info (if any)
Recommendations
Auto-Fix Options (if applicable)
The skill is successful when:
Dynamic ClassNames: Cannot analyze runtime-generated classes
// Cannot analyze
<div className={`bg-${color}-500`}>
Component Libraries: External component libraries (if added) may have their own patterns
Inline Styles: While flagged, inline styles might be necessary for dynamic values
Context Required: Some violations need human judgment (e.g., when arbitrary values are justified)
False Positives: Edge cases may trigger false alarms (user should verify)
/Users/e0538224/Developer/My-Prompt-Manager/docs/DESIGN_GUIDELINES.md/Users/e0538224/Developer/My-Prompt-Manager/docs/COMPONENTS.md/Users/e0538224/Developer/My-Prompt-Manager/src/components//Users/e0538224/Developer/My-Prompt-Manager/tailwind.config.jsTools Used:
Glob: Find component filesRead: Read component sourceGrep: Search for specific patterns (optional optimization)Edit: Apply auto-fixes (if user approves)Performance:
Testing: