一键导入
component-polish
Polish components to production quality — interactive states, micro-interactions, and final refinement. Run all three passes or target one area.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
菜单
Polish components to production quality — interactive states, micro-interactions, and final refinement. Run all three passes or target one area.
用 Codex 或 Claude 帮你安装 复制这段 Prompt,粘贴到 Codex、Claude 或其他助手里,让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Identify and fix accessibility issues for WCAG 2.1 Level AA compliance, including mobile screen reader support (VoiceOver/TalkBack), touch targets, and keyboard navigation.
Autonomously build an app from staged plans created by /launch-app. Reads plans/active/ stage files and builds each stage with verification, commits, and Slack notifications. Designed for unattended execution via build-app-runner.sh.
Audit and optimize pages for conversion — value props, CTAs, copy, social proof, and friction points. Run a full audit or target a specific area.
Generate multiple design concepts for an app, compare them side-by-side, and implement the chosen direction. Creates detailed design documents with color palettes, typography, spacing, component specs, and interactive HTML mockups.
Apply foundational design system improvements — color palette, typography, spacing, and layout. Run all at once or target a specific area. Use before component-polish for a complete design overhaul.
Enhance an existing project with Claude Code agents, teams, rules, hooks, plans, MCP servers, and CLAUDE.md. Scans what exists, installs what's missing. Links shared files (agents, plan templates) from ~/.claude/shared/enterprise/ instead of duplicating.
| name | component-polish |
| description | Polish components to production quality — interactive states, micro-interactions, and final refinement. Run all three passes or target one area. |
| argument-hint | [states | interactions] — Optional: run just interactive states or micro-interactions. Default: full polish pass (all three). |
Polish components to production quality. Run a full pass or target a specific area.
/component-polish — full pass (states + interactions + polish)
/component-polish states — interactive states only (hover, focus, active, disabled, loading)
/component-polish interactions — micro-interactions only (animations, transitions, entrance effects)
Parse the argument and run the specified area. If no argument, run all three in order.
Add complete interactive states to components: hover, focus, active, disabled, loading.
Goals:
Hover states — subtle, purposeful changes:
.button:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.card:hover { border-color: var(--color-border-hover); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.link:hover { color: var(--color-primary-dark); text-decoration-color: currentColor; }
Focus states — keyboard-accessible, always visible:
.button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.15); outline: none; }
Active/pressed states:
.button:active { transform: translateY(0); box-shadow: none; background: var(--color-primary-darker); }
.card:active { transform: scale(0.99); }
Disabled states:
.button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.input:disabled { background: var(--color-gray-100); color: var(--color-gray-400); cursor: not-allowed; }
Loading states:
.buttonLoading { position: relative; color: transparent; pointer-events: none; }
.buttonLoading::after {
content: ''; position: absolute; width: 16px; height: 16px;
border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: spin 0.6s linear infinite;
top: 50%; left: 50%; transform: translate(-50%, -50%);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
Component-specific state guide:
| Component | Hover | Focus | Active | Disabled | Loading |
|---|---|---|---|---|---|
| Button | Darken + lift | Ring outline | Press down | Dim + no-pointer | Spinner, text hidden |
| Input | Border color | Border + glow ring | — | Gray bg | — |
| Card | Shadow + border | focus-within ring | Scale 0.99 | Dim | Skeleton |
| Link | Color + underline | Outline | Darker | Dim | — |
| Toggle | Preview state | Ring | Scale 0.95 | Dim | Spinner |
Base transition:
.button { transition: all 0.15s ease-out; }
.card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.15s ease-out; }
Add micro-interactions — animations and transitions that make interfaces feel responsive and alive.
Goals:
prefers-reduced-motiontransform and opacity for 60fps performanceHover effects:
/* Lift */
.card { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; }
.card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.15); }
/* Underline slide */
.link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: currentColor; transition: width 0.2s ease-out; }
.link:hover::after { width: 100%; }
Press feedback:
.button:active { transform: scale(0.98); transition: transform 0.1s ease; }
Entrance animations:
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fadeIn { animation: fadeIn 0.3s ease-out; }
.slideUp { animation: slideUp 0.4s ease-out; }
/* Stagger for lists */
.staggerItem { opacity: 0; animation: slideUp 0.4s ease-out forwards; }
.staggerItem:nth-child(1) { animation-delay: 0ms; }
.staggerItem:nth-child(2) { animation-delay: 50ms; }
.staggerItem:nth-child(3) { animation-delay: 100ms; }
Loading animations:
/* Skeleton pulse */
.skeleton { background: var(--color-gray-200); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
Common patterns:
/* Tooltip */
.tooltip { opacity: 0; transform: translateY(4px); transition: all 0.15s ease-out; pointer-events: none; }
.trigger:hover .tooltip { opacity: 1; transform: translateY(0); }
/* Modal */
.modal { opacity: 0; transform: scale(0.95); transition: all 0.3s ease-out; }
.modalOpen { opacity: 1; transform: scale(1); }
Timing guide:
| Interaction | Duration | Easing |
|---|---|---|
| Hover on/off | 150ms | ease-out |
| Button press | 100ms | ease |
| Card hover | 200ms | ease-out |
| Modal open | 300ms | ease-out |
| Modal close | 200ms | ease-in |
| Entrance | 300-400ms | ease-out |
Always include reduced-motion override:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
When no argument is provided, run all three areas in order, then apply final refinements:
states area aboveinteractions area aboveDesign system consistency check:
// ❌ Inconsistent
<div className="p-3 rounded-md bg-gray-100">
<div className="p-4 rounded-lg bg-slate-50">
// ✅ Consistent
<div className="p-4 rounded-lg bg-surface">
Refined shadows:
.card { box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 8px rgba(0,0,0,.04); }
.cardElevated { box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 16px rgba(0,0,0,.08); }
Polish checklist:
prefers-reduced-motion respected