Color Audit
Skill Verifiziert AktivColor-only audit to extract, evaluate, and recommend improvements for the project's color system
To provide developers with an automated, data-driven method for evaluating and enhancing their project's color system, ensuring consistency, accessibility, and aesthetic harmony.
Funktionen
- Color extraction from CSS, JSX, and Tailwind
- WCAG and APCA contrast ratio checking
- Semantic color role mapping
- Harmony, consistency, and coverage analysis
- Generation of improved color palettes (light/dark)
- Output of color tokens (CSS vars or Tailwind config)
Anwendungsfälle
- Auditing an existing project's color system for compliance and consistency
- Identifying and fixing contrast issues for accessibility
- Generating a cohesive and semantically sound color palette
- Ensuring a consistent color system across light and dark modes
Nicht-Ziele
- Auditing aspects other than the color system (e.g., typography, layout)
- Providing subjective design feedback or aesthetic opinions
- Modifying project files directly without user interaction
Workflow
- Extract all colors from project files
- Map extracted colors to semantic roles
- Check contrast ratios for foreground/background pairs
- Evaluate color harmony, consistency, and coverage
- Generate an improved color system and palettes
- Output audit findings and recommendations
Praktiken
- Color System Auditing
- Accessibility Compliance
- Design System Maintenance
- Automated Code Analysis
Voraussetzungen
- Node.js 18+
Installation
Zuerst Marketplace hinzufügen
/plugin marketplace add Aboudjem/ui-ux-suite/plugin install ui-ux-suite@ui-ux-suiteQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Impeccable
99Verwenden Sie dies, wenn der Benutzer ein Frontend-Interface entwerfen, neu gestalten, formen, kritisieren, prüfen, polieren, klären, destillieren, härten, optimieren, anpassen, animieren, einfärben, extrahieren oder anderweitig verbessern möchte. Deckt Websites, Landingpages, Dashboards, Produkt-UI, App-Shells, Komponenten, Formulare, Einstellungen, Onboarding und leere Zustände ab. Umfasst UX-Bewertung, visuelle Hierarchie, Informationsarchitektur, kognitive Last, Barrierefreiheit, Leistung, responsives Verhalten, Theming, Anti-Patterns, Typografie, Schriften, Abstände, Layout, Ausrichtung, Farbe, Bewegung, Mikrointeraktionen, UX-Texte, Fehlerzustände, Randfälle, i18n und wiederverwendbare Designsysteme oder Tokens. Verwenden Sie es auch für langweilige Designs, die mutiger oder ansprechender werden sollen, laute Designs, die leiser werden sollen, Live-Browser-Iterationen an UI-Elementen oder ambitionierte visuelle Effekte, die technisch außergewöhnlich wirken sollen. Nicht für reine Backend- oder Nicht-UI-Aufgaben.
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Macos Design
100Design and build native-feeling macOS application UIs. Use this skill whenever the user asks to create a desktop app, macOS app, Mac-style interface, Apple-style UI, system utility, or anything that should look and feel like a native Mac application. Also trigger when users mention "native feel", "desktop app design", "Apple design patterns", "sidebar layout", "traffic lights", or want to build tools/utilities that feel like they belong on macOS. This skill covers layout, composition, interaction patterns, animations, light/dark mode, and all the subtle details that make an app feel like Apple built it.
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Review Ux Ui
99Review user experience and interface design using Nielsen's heuristics, WCAG 2.1 accessibility guidelines, keyboard and screen reader audit, user flow analysis, cognitive load assessment, and form usability evaluation. Use when conducting a usability review before release, assessing WCAG 2.1 accessibility compliance, evaluating user flows for efficiency, reviewing form design, or performing a heuristic evaluation of an existing interface.