Menu
User experience design principles. Use when designing user flows, improving usability, conducting UX reviews, and optimizing user journeys.
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
RESTful API design best practices. Use when designing endpoints, request/response schemas, error handling, and API versioning.
Perform thorough code reviews with security, performance, and quality checks. Use when reviewing PRs, auditing code changes, or finding potential bugs.
Database design and optimization. Use for schema design, queries, migrations, indexing, and performance tuning.
Systematic debugging methodology for finding and fixing bugs. Use when investigating issues, tracing errors, or fixing production problems.
Docker and containerization best practices. Use for Dockerfile creation, docker-compose, multi-stage builds, and container optimization.
Technical documentation best practices. Use for writing READMEs, API docs, code comments, and project documentation.
| name | ux-design |
| description | User experience design principles. Use when designing user flows, improving usability, conducting UX reviews, and optimizing user journeys. |
User experience principles for creating intuitive, user-centered interfaces.
Visibility of system status
Match between system and real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency
Aesthetic and minimalist design
Help users recognize and recover from errors
Help and documentation
Entry Point → Task Steps → Confirmation → Success State
↓
Error Handling → Recovery Path
Landing Page
↓
Email Input → Validation
↓
Password Create → Strength Check
↓
Profile Setup (Optional) → Skip Option
↓
Welcome / Onboarding
↓
Main Dashboard
❌ Bad: 5+ step registration
Email → Password → Name → Phone → Address → Verify
✅ Good: Progressive disclosure
Email + Password → Verify → (Collect more later)
// ✅ Good: Clear labels, inline validation
<form>
<label htmlFor="email">Email address</label>
<input
id="email"
type="email"
placeholder="you@example.com"
aria-describedby="email-error"
/>
{error && <span id="email-error" className="text-red-500">{error}</span>}
</form>
| Do | Don't |
|---|---|
| Use single column | Multiple columns on mobile |
| Show password toggle | Force complex requirements |
| Inline validation | Validate only on submit |
| Smart defaults | Make user choose everything |
| Save progress | Lose data on navigation |
| Show required fields | Hide what's optional |
❌ Bad: "Invalid input"
✅ Good: "Please enter a valid email address (e.g., name@example.com)"
❌ Bad: "Error 500"
✅ Good: "Unable to save. Please try again or contact support."
| Friction | Solution |
|---|---|
| Too many clicks | Reduce steps, shortcuts |
| Waiting | Skeleton loading, optimistic UI |
| Confusion | Clear labels, tooltips |
| Errors | Validation, auto-correct |
| Decision fatigue | Smart defaults, recommendations |
// Show success immediately, rollback if fails
function handleLike() {
setLiked(true); // Instant feedback
api.like(postId).catch(() => {
setLiked(false); // Rollback on error
toast.error('Failed to like');
});
}
┌────────────────────┐
│ Hard to reach │ ← Move important actions down
│ │
│ Natural reach │ ← Primary navigation here
│ │
│ Easy access │ ← Main CTAs, bottom nav
└────────────────────┘
Click button → Visual press state
Submit form → Loading indicator
Success → Confirmation message
Error → Clear error + solution
Empty state → Helpful guidance
1. Empty → "No items yet. Create your first..."
2. Loading → Skeleton or spinner
3. Error → Error message + retry
4. Partial → Show what's available
5. Success → Full content
| Type | Use Case |
|---|---|
| Top nav | Marketing sites, simple apps |
| Side nav | Dashboards, complex apps |
| Bottom nav | Mobile apps (5 items max) |
| Breadcrumbs | Deep hierarchies |
| Tabs | Related content sections |