Style Direction
Skill Verified ActiveVisual style direction recommendation with current style analysis + top 3 directions with implementation guidance
To provide objective, data-backed visual style direction recommendations for UI/UX projects, moving beyond subjective design reviews to quantifiable analysis.
Features
- Analyze current visual style (CSS, JSX, Tailwind)
- Recommend top 3 visual style directions
- Provide implementation guidance for each direction
- Score 12 weighted design dimensions
- Cite specific UX laws and research for findings
Use Cases
- When needing to establish or refine the visual style of a new project.
- When iterating on an existing design and seeking data-driven direction.
- When aiming to improve a project's accessibility and adherence to UX best practices.
- When wanting to quantify and track design quality over time.
Non-Goals
- Providing subjective design opinions without data.
- Generating full design mockups or code.
- Replacing human designers; augmenting their decision-making.
- Performing tasks outside of visual style analysis and recommendation.
Workflow
- Analyze current project's visual style (code, config).
- Identify project type and target audience.
- Compare current style against 10 viable style directions.
- Recommend top 3 directions with rationale.
- Detail implementation checklist, risk factors, and references for each recommendation.
Practices
- Design Analysis
- Style Recommendation
- UX Best Practices
- Accessibility Standards
Installation
First, add the marketplace
/plugin marketplace add Aboudjem/ui-ux-suite/plugin install ui-ux-suite@ui-ux-suiteQuality Score
VerifiedTrust Signals
Similar Extensions
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Impeccable
99Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Component Audit
100Component consistency audit covering state coverage, hierarchy, patterns
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
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.