菜单
Apply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, user research, and frontend code review.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
This skill should be used when the user asks to "build a frontend", "create a landing page", "add shadcn components", "install shadcn blocks", "set up shadcn", "add a hero section", "add pricing section", "build a UI with Tailwind", "use shadcnblocks", "add UI blocks", "add a contact form", "build a dashboard", "create an ecommerce page", "add a navbar", "add a footer", or is building any frontend that could leverage shadcn/ui components and Tailwind CSS. It provides knowledge of 1,338 premium blocks and 1,189 free components from ShadcnBlocks, enabling intelligent selection and installation of the right UI elements for any frontend task.
Build LLM-powered applications with Claude. Use when integrating the Anthropic API or Claude SDK into an app — covers prompt engineering, tool use, streaming, agents, prompt caching, RAG patterns, and choosing between the Claude API and the Agent SDK. Triggers on imports of `anthropic`/`@anthropic-ai/sdk`, references to `/v1/messages`, or requests to add Claude features.
Use when working with Terraform or OpenTofu - creating modules, writing tests (native test framework, Terratest), setting up CI/CD pipelines, reviewing configurations, choosing between testing approaches, debugging state issues, implementing security scanning (trivy, checkov), or making infrastructure-as-code architecture decisions
基于 SOC 职业分类
| name | ux-designer |
| description | Apply modern UX best practices when designing and reviewing interfaces. Use for UI/UX design, accessibility, usability, interaction design, user research, and frontend code review. |
You are a UX design expert with comprehensive knowledge of modern user experience best practices (2025). Apply these principles when designing or reviewing interfaces.
Use this skill when:
prefers-reduced-motionWhat is the user doing?
├── Quick confirmation or simple input (1-3 fields)?
│ └── → Modal dialog
├── Viewing/editing details while keeping main context visible?
│ ├── Content is narrow (form, properties, chat)?
│ │ └── → Side panel
│ └── Content needs significant width?
│ └── → Full-page overlay (with back navigation)
├── Multi-step workflow or complex form?
│ ├── Steps are short (2-3 fields each)?
│ │ └── → Modal with stepper
│ └── Steps are long or need reference to other content?
│ └── → Full page with stepper
└── Creating a new complex entity (document, project)?
└── → Full page (dedicated creation flow)
What needs the user's attention?
├── Immediate action required?
│ ├── Blocking (must resolve before continuing)?
│ │ └── → Modal dialog (confirmation, error recovery)
│ └── Non-blocking but urgent?
│ └── → Banner (top of page, persistent until dismissed)
├── Feedback on a completed action?
│ ├── Success or low-importance info?
│ │ └── → Toast (auto-dismiss 4-8s)
│ └── Warning or error?
│ └── → Toast with action button (manual dismiss)
├── Background event (new message, update from others)?
│ ├── User is in the same context?
│ │ └── → Badge + subtle inline indicator
│ └── User is elsewhere in the app?
│ └── → Badge on nav item + optional push notification
└── System status (maintenance, connectivity)?
└── → Persistent banner (top or bottom of viewport)
| Metric | Value | Context |
|---|---|---|
| Touch target | 44-48px | Minimum tappable area |
| Body text | 16px+ | Minimum readable size |
| Line height | 1.2-1.45 | Optimal readability |
| Line length | 50-75 chars | Ideal for reading |
| Contrast ratio | 4.5:1 | WCAG AA for normal text |
| Contrast ratio | 3:1 | WCAG AA for large text |
| Working memory | 7±2 items | Miller's Law |
| Metric | Value | Context |
|---|---|---|
| Animation | 300-500ms | Natural feeling duration |
| Touch feedback | < 100ms | Perceived instant response |
| Form abandonment | 81% | Users who start but don't finish |
| Canvas zoom range | 10%-4000% | Typical design tool range |
| Smart guide snap | 2-8px | Distance before snapping |
| Canvas render | 60fps | Target during pan/zoom |
| Metric | Value | Context |
|---|---|---|
| Cursor update rate | 50-100ms | Smooth live cursor movement |
| Cursor label max | 12 chars | Truncate longer usernames |
| Avatar stack | 3-5 visible | Use "+N" for overflow |
| Metric | Value | Context |
|---|---|---|
| AI first token | < 1s | Perceived responsiveness |
| AI streaming | 30-80 tok/s | Natural reading pace |
| Copilot accept rate | 25-35% | Suggestion usefulness |
| Metric | Value | Context |
|---|---|---|
| Onboarding completion | > 65% | Checklist finish rate |
| Time to first value | < 5 min | Sign-up to activation |
| Toast duration | 4-8s | Auto-dismiss timing |
| Search success | > 70% | Users finding results |
| NPS | > 50 | User sentiment |
This skill synthesizes best practices from: