This is what you use when you need actual design system work, not component libraries. It forces you to read reference docs on token architecture, OKLCH color systems, and real-world patterns before generating anything. The whole approach is built around fighting generic output: you have to articulate intent, explore domain-specific color worlds, and justify every choice (typography, spacing, depth strategy) or it won't move forward. Best for dashboards, SaaS tools, and fintech interfaces where the difference between "clean and modern" and actually considered design matters. Works in light mode by default, which is honestly refreshing.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.
17
skills.sh installs
842
GitHub stars
98
last updated
Aug 21, 2026

Install

$ npx -y skills add saifyxpro/ui-ux-design-pro-skill --skill ui-ux-design-pro --agent claude-code

Installs into .claude/skills of the current project.

Files

UI/UX Design Pro

Recommended Models

For best results, use GPT-5.3 Codex or Gemini 3.0 Pro.

Default Settings

  • Theme: Always prefer Light Mode by default. Only use Dark Mode if explicitly requested by the user.

Build every interface with senior-level craft, intent, and consistency. Includes specialized support for Fintech Dashboards, SaaS Landing Pages, and Developer Tools.

Scope

Use for: Dashboards, admin panels, SaaS apps, tools, settings pages, data interfaces, AI interfaces, mobile apps, landing pages, marketing sites, product showcases.


MANDATORY: Read References Before Designing

You MUST read all reference files in references/ before proposing or building any UI. These are not optional — they contain production-tested patterns, validated token systems, and craft principles that prevent generic output.

Required reading order:

Sponsors

Details

Repository
github.com/saifyxpro/ui-ux-design-pro-skill
Categories
Frontend Development, Code Review & Quality, Design & UI/UX
First seen
Jun 3, 2026
1onewave-ai avatarcss-animation-creatoronewave-ai/claude-skillsCreate professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page 830skills.sh installs
2mindrally avatarvue-typescriptmindrally/skillsExpert in Vue.js TypeScript development with Vite, Pinia, and modern UI frameworks814skills.sh installs
3mindrally avatarexpo-react-native-javascript-best-practicesmindrally/skillsExpo React Native JavaScript best practices for clean code, functional components, performance optimization, and Expo Router navigation.804skills.sh installs
4gluestack avatargluestack-ui-v4gluestack/agent-skillsEnforces constrained, opinionated styling patterns for gluestack-ui v4. Main overview skill that coordinates specialized sub-skills for setup, components, styli795skills.sh installs
5sickn33 avatarreact-best-practicessickn33/antigravity-awesome-skillsreact best practices762skills.sh installs
6sickn33 avatarfrontend-security-codersickn33/antigravity-awesome-skillsfrontend security coder735skills.sh installs