メニュー
Review UI components for design system compliance, accessibility, and visual consistency
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Use when designing prompts for LLMs, optimizing model performance, building evaluation frameworks, or implementing advanced prompting techniques like chain-of-thought, few-shot learning, or structured outputs.
How to deploy Dravr infrastructure and apply Cloud Run config changes. Use when editing infra/ terraform, when a merged code change is live but a Cloud Run setting (cpu, memory, min/max instances, env var, scaling) hasn't taken effect, or when asked to plan/apply infra. Explains the two-pipeline model (app binary auto-deploys on push; terraform infra config is a separate manual apply) plus the cpu/cpu_idle guardrails.
Enforces zero-tolerance code quality policy using Clippy with strict lints, all warnings treated as errors
Write well-formatted notes to the dravr-vault Obsidian knowledge base. Use this skill whenever creating or updating an ADR, runbook, plan, API doc, guide, session output, or any structured document that should land in the vault — even when the user doesn't say "Obsidian" explicitly. Delegates to obsidian:obsidian-cli to write to the live vault and applies Dravr frontmatter and formatting standards.
Bootstrap Pierre server with database, admin user, coaches, and test users for development and testing
Validates coach markdown files for required frontmatter fields, sections, and naming conventions
| name | design-review |
| description | Review UI components for design system compliance, accessibility, and visual consistency |
| user-invocable | true |
Perform a comprehensive design system review of the frontend changes.
Analyze files in:
frontend/src/components/ - React componentsfrontend/src/index.css - Component CSS definitionstemplates/ - OAuth HTML templates (if modified)Search for anti-patterns in changed files:
# Find raw button elements (should use <Button>)
grep -r "<button" frontend/src/components/ --include="*.tsx" | grep -v "// allowed"
# Find raw div cards (should use <Card>)
grep -rE "className=\"[^\"]*border[^\"]*rounded" frontend/src/components/ --include="*.tsx"
# Find custom spinners (should use pierre-spinner)
grep -r "animate-spin" frontend/src/components/ --include="*.tsx"
# Find raw hex colors (should use design tokens)
grep -rE "bg-\[#|text-\[#|border-\[#" frontend/src/components/ --include="*.tsx"
# Find non-pierre colors
grep -rE "(bg|text|border)-(red|green|blue|yellow|purple|gray)-[0-9]" frontend/src/components/ --include="*.tsx" | grep -v "pierre-"
Verify all component variants have CSS definitions:
Badge.tsx variants against .badge-* classes in index.cssButton.tsx variants against .btn-* classes in index.css.focus-ring utilitygradient-pierre or pillar gradientspierre-spinner=== Pierre Design System Review ===
📁 Files Analyzed: [count]
== Component Compliance ==
✅/❌ Button usage: [details]
✅/❌ Card usage: [details]
✅/❌ Badge usage: [details]
✅/❌ Loading states: [details]
✅/❌ Color tokens: [details]
== Accessibility ==
✅/❌ Focus states: [details]
✅/❌ ARIA labels: [details]
✅/❌ Contrast ratios: [details]
== CSS Completeness ==
✅/❌ All variants defined: [details]
== Issues Found ==
1. [file:line] - [issue description]
2. [file:line] - [issue description]
== Recommendations ==
- [specific improvement with code example]
== Verdict ==
[PASS / NEEDS WORK - X issues to address]
If issues are found, provide specific code fixes following the patterns in .claude/skills/frontend-design/SKILL.md.
Run this review after any frontend changes before committing.