1999azzar/ui-designer-skill
Overview
This skill provides expert guidance to design beautiful, user-centric interfaces across Material You, Minimalism, Glassmorphism, Neo‑Brutalism, and Claymorphism. It combines color harmonics, Tailwind CSS expertise, component theming, and WCAG-focused accessibility to produce polished, production-ready UI intent. Use it to define palettes, theme tokens, component states, and accessibility fixes before implementation.
How this skill works
I generate cohesive color palettes with HEX codes, Tailwind config snippets, and CSS variable sets tailored to the chosen design language and vibe. I produce theme systems with clear tokens (--bg, --text, --accent, --border) and unified interaction states for hover, focus, and active. I perform accessibility audits that check contrast ratios, semantic structure, ARIA guidance, and keyboard focus behavior. Optionally, I can append design rules to your local cursor rules file to keep tooling aligned with the chosen style.
When to use it
- Starting a new feature or product and you need a clear visual direction
- Converting a wireframe into themed components with Tailwind CSS
- Creating accessible color palettes and ensuring WCAG AA/AAA contrast
- Standardizing component states and design tokens across a codebase
- Experimenting with hybrid aesthetics (e.g., pastel glass or neo‑M3) before handoff
Best practices
- Pick one primary design language per project to maintain visual coherence
- Define atomic tokens (--bg, --text, --accent, --border) for both light and dark themes
- Validate color choices with WCAG contrast checks and fallback text styles
- Use Tailwind config extensions to centralize palette and spacing decisions
- Document hover/focus/active states and ARIA expectations for each component
Example use cases
- Generate a dark luxury palette plus Tailwind config and CSS variables for a premium dashboard
- Create a Material You themed button system with large rounded corners and responsive typography
- Audit an existing site for contrast failures and provide exact color replacements and ARIA fixes
- Prototype a glassmorphism landing hero with backdrop blur, gradient assets, and interaction rules
- Define component structure and Tailwind utility suggestions for a claymorphism-style settings panel
FAQ
Yes — I output Tailwind extend snippets including color keys and recommended shades so you can paste them into your config.
Do you check accessibility automatically?
I run contrast and semantic checks and return concrete fixes: alternate colors, ARIA usage, and keyboard focus guidance.
