メニュー
This skill should be used when the user asks to "design a UI", "plan component architecture", "improve accessibility", "optimize frontend performance", or discusses UI/UX patterns. Provides pragmatic frontend design guidance with ADHD-friendly patterns.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | frontend-designer |
| description | This skill should be used when the user asks to "design a UI", "plan component architecture", "improve accessibility", "optimize frontend performance", or discusses UI/UX patterns. Provides pragmatic frontend design guidance with ADHD-friendly patterns. |
Auto-activated when: User discusses UI/UX, component architecture, accessibility, or frontend design decisions.
Visual Hierarchy:
Interaction Design:
Cognitive Load Reduction:
Ship Fast Principles:
Anti-Patterns to Avoid:
<Button> with 20 props)When analysis is needed, I will:
ux-ui-designer agent for comprehensive UX reviewexperienced-engineer agent for component architectureaccessibility specialist for a11y auditrun_in_background: trueUser: "I need to design a form for creating tasks with due dates and tags"
Skill activates and provides:
1. Form layout recommendation (vertical, clear labels)
2. Accessibility checklist (ARIA labels, keyboard nav)
3. UX patterns (inline validation, auto-save, success feedback)
4. Component structure (controlled vs uncontrolled inputs)
5. Delegates UX review to ux-ui-designer agent (background)
6. Returns with comprehensive form implementation plan
When activated, I provide:
/brainstorm for UI/UX discussions/next (suggests frontend implementation steps)/done (captures design decisions, patterns used)Common patterns I'll reference:
| Pattern | Use Case | Example |
|---|---|---|
| Progressive Disclosure | Complex forms | Show advanced fields behind toggle |
| Optimistic UI | Create/update actions | Show success immediately, rollback on error |
| Skeleton Screens | Loading states | Show layout while data loads |
| Virtual Scrolling | Long lists | Render only visible items |
| Toast Notifications | Non-blocking feedback | Success/error messages that auto-dismiss |
Remember: This skill auto-activates based on keywords. Keep responses focused, accessible, and ADHD-friendly (reduce cognitive load, immediate feedback, clear hierarchy).
This skill should be used when the user asks to "pre-flight check", "validate before commit", "validate before PR", "validate before deploy", "is this ready to ship", "check readiness", "run pre-flight", "validate project state", or wants context-aware validation across commit/PR/release/deploy boundaries. Orchestrates universal validators (lint, tests, types, version sync, stale refs, docs, hook conflicts) and supports generating new custom validators.
This skill should be used when a command's --refine flag is set, or the user asks to "refine my prompt", "optimize this prompt", "make this request sharper" — rewrites a vague natural-language request into a specific, well-structured prompt using project context, shows before/after, and confirms before the caller proceeds. Replaces the deprecated /craft:refine command.
This skill should be used when the user asks to "release", "create a release", "ship it", "publish a new version", "bump version and release", "cut a release", or mentions releasing to GitHub/npm/PyPI. Orchestrates the full release pipeline from pre-flight checks through GitHub release creation.
ADHD-friendly session and task workflow for craft users — captures context at session end, restores it at session start, picks the next task, breaks through blockers, holds focus on one task, reviews a craft spec, or refines a vague craft prompt. Use when wrapping up or resuming a coding session, when deciding what to work on next (also "what's next", "pick a task for me", "give me something to do"), when stuck or in decision paralysis, when focusing on a single craft task, or when reviewing/refining a craft spec or prompt. The full intent-to-operation map is in the "When to Use" table below.
This skill should be used when the user asks to "init a repo", "set up git", "manage branches", "switch branch", "create a worktree", "list worktrees", "clean merged branches", "sync with remote", "git activity", "git recap", "protect main", "apply branch protection", "bypass protection", "undo a commit", "fix a git mistake", or mentions git lifecycle, worktrees, branch protection, GitHub-side baseline protection, safety rails, or learning git workflows. Covers craft's full git lifecycle — repo init, branch and worktree management, remote sync, status/recap, local and GitHub-side branch protection, and the learning/safety reference docs.
This skill should be used when the user asks "what's my friction", "session insights", "friction report", "what patterns am I hitting", "analyze my sessions", "generate insights report", "aggregate facets", or "show CLAUDE.md suggestions". Aggregates session facet history into a friction/goals report. Formerly bundled with the brainstorm skill (ideation); split out because the two operations share no input or output. Directory name kept as brainstorm-insights for path stability — tests and references/insights.md reference it.