Menu
Review and refactor UI components for better design, accessibility, and consistency. Loads ux-designer skill knowledge to evaluate and improve existing interfaces.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Commit the current working tree on a feature branch (cut from develop), push it, and open a pull request into develop. Use when the user says "ship this", "make a PR", "commit and push and open a PR", or wants to turn local changes into a reviewable PR. Handles branch-first safety, commitlint-format messages, and the GitHub PR.
Merge a feature→develop pull request once CI is green. Use when the user says "merge the PR", "merge if green", "land this", or after watch reports success. Verifies all checks pass and the branch is mergeable before merging; refuses on pending/failed checks. For develop→master production releases use the `release` skill instead.
Prisma ORM with Cloudflare D1 — schema configuration, migration workflow, client setup, and deployment. Load when working with Prisma + D1 migrations, schema changes, or PrismaClient instantiation in Workers.
PWA implementation — Service Worker registration, cache strategies, update notification flow, and manifest setup. Load when adding PWA support, Service Worker caching, update prompts, offline fallback, or cache-invalidation logic to any web app.
Promote develop to master — open (or reuse) the develop→master PR, confirm CI is green, merge to master (which triggers the production Cloudflare deploy), then tag the release vX.Y.Z. Use when the user says "release", "cut a release", "promote develop to master", "ship to production". This is the ONLY path that touches master/production.
TanStack Query (React Query) best practices for data fetching, caching, mutations, and server state management. Activate when building data-driven React applications with server state.
| name | ui-refactor |
| description | Review and refactor UI components for better design, accessibility, and consistency. Loads ux-designer skill knowledge to evaluate and improve existing interfaces. |
| user_invocable | true |
Review and improve existing UI components based on modern UX best practices.
If the user specified a component or page, use that. Otherwise, ask which area to refactor:
Load the ux-designer skill for design knowledge by reading .claude/skills/ux-designer/SKILL.md.
Also read the project's design constraints:
src/index.css for current color tokens and themeCLAUDE.md for coding conventions (shadcn/ui rules, animation rules, etc.)For each component in scope, evaluate against these criteria:
Visual Design
Interaction Design
Accessibility
Consistency
src/components/ui/)Mobile-First
Present findings in Japanese as a structured report:
## UI リファクタリングレポート: [Component/Page]
### 問題点
| # | 重要度 | 箇所 | 問題 | 改善案 |
|---|--------|------|------|--------|
| 1 | 高/中/低 | file:line | ... | ... |
### 推奨変更 (優先順)
1. [高] ...
2. [中] ...
3. [低] ...
### 推定コスト: [S/M/L/XL]
Ask the user: "この改善を実行してよろしいですか？全て / 一部を選択 / キャンセル"
bunx biome check --write after modifications.src/components/ui/ — override styles via className on the consumer side.bun run build.