Design System Compliance

What problem does it solve?

This Skill ensures all UI components adhere strictly to the My Prompt Manager design system, preventing visual inconsistencies, accessibility issues, and deviations from brand identity. It streamlines UI development by providing clear guidelines and patterns, reducing design debt and review cycles.

Core Features & Use Cases

• Comprehensive Design Guidelines: Details brand colors (purple-indigo gradient), typography, spacing, border radius (rounded-xl), and signature glassmorphism effects (backdrop-blur).
• Dark Mode & Accessibility Enforcement: Mandates dark mode variants for every style and outlines ARIA label, keyboard navigation, and focus management requirements.
• Component Patterns & Best Practices: Provides ready-to-use code patterns for primary buttons, input fields, cards, modals, and more, along with common mistakes and their fixes.
• Use Case: A designer or developer is creating a new settings panel. This Skill guides them through applying the correct gradients, rounded corners, dark mode styles, and accessibility attributes, ensuring the new UI seamlessly integrates with the existing application.

Quick Start

I'm building a new UI component. Guide me through the design system compliance checklist, focusing on dark mode, accessibility, and the purple-indigo gradient.