---

name: best-practices description: Ensure code and design follow the latest industry standards, premium UI/UX trends, and library documentation.

Best Practices Skill

Proactively research latest standards before implementation.

When to Use

• Adding new UI components
• Fixing bugs in libraries
• Refactoring existing code
• Performance optimization

1. Research Protocol

Before writing code, you MUST:

1. Library Check: Use context7 mcp → resolve-library-id → query-docs
2. Design Trends: Use search_web for "2025/2026 [component] trends"
3. Performance: Check for modern optimizations (lazy loading, CSS-only animations)

2. Premium UI Standards

Copy/* Glassmorphism Example */
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* Vibrant Gradient */
.gradient-bg {
  background: linear-gradient(135deg, hsl(240, 80%, 60%), hsl(280, 90%, 50%));
}

/* Micro-interaction */
.btn-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

Checklist

• Glassmorphism with blur + semi-transparent borders
• Micro-interactions (hover, focus, active states)
• HSL gradients, avoid flat colors
• Engagement loops (progress bars, success states)
• WCAG accessibility compliance

3. Execution Flow

1. Discover: Research using context7 + search_web
2. Propose: Explain WHY it's best practice
3. Implement: Use latest syntax
4. Validate: Test against research findings

4. Code Style

• Prefer fewer lines of code
• Use modern JS/TS: optional chaining (?.), nullish coalescing (??)
• Graceful degradation for unsupported features