UI/UX Pro Designer
Your AI generates UI components. This skill makes those components production-ready. Spacing, states, accessibility, responsiveness -- baked into every component Claude writes, without you specifying each one from scratch.
- Generate full design systems with CSS variables and font pairings.
- Audit code for WCAG accessibility and touch target compliance.
- Select appropriate chart types and data viz patterns for dashboards.
$10
· or 50 creditsSecure checkout via Stripe
Included in download
- Generate full design systems with CSS variables and font pairings.
- Audit code for WCAG accessibility and touch target compliance.
- terminal automation included
See it in action
You say
Plan a dashboard for a fintech app using Tailwind and shadcn. Needs a dark mode and a transaction chart.
Your agent does
I will generate a design system for a 'Fintech' product: - Style: Glassmorphism/Minimalism - Palette: Slate-900 (bg), Emerald-500 (success), Rose-500 (error) - Typography: Inter/JetBrains Mono - UX Focus: 8px grid, 44pt touch targets - Chart: Area chart for cash flow using shadcn/ui charts.
UI/UX Pro Designer
Your AI generates UI components. This skill makes those components production-ready. Spacing, states, accessibility, responsiveness -- baked into every component Claude writes, without you specifying each one from scratch.
$10
· or 50 creditsSecure checkout via Stripe
Included in download
- Generate full design systems with CSS variables and font pairings.
- Audit code for WCAG accessibility and touch target compliance.
- terminal automation included
- Instant install
See it in action
You say
Plan a dashboard for a fintech app using Tailwind and shadcn. Needs a dark mode and a transaction chart.
Your agent does
I will generate a design system for a 'Fintech' product: - Style: Glassmorphism/Minimalism - Palette: Slate-900 (bg), Emerald-500 (success), Rose-500 (error) - Typography: Inter/JetBrains Mono - UX Focus: 8px grid, 44pt touch targets - Chart: Area chart for cash flow using shadcn/ui charts.
About This Skill
The problem
UI development often stalls when developers have to guess at design tokens or UX patterns. Without a dedicated designer, apps end up with inconsistent spacing, poor accessibility, and "amateur" visual polish.
What it does
- Generates complete design systems including industry-matched color palettes, font pairings, and CSS variables.
- Applies 99+ validated UX guidelines for accessibility, touch targets, and interaction states.
- Provides implementation-specific code for 10 stacks including React, SwiftUI, and React Native.
- Audits existing UI code for contrast ratios, layout shifts, and mobile-first responsive errors.
- Recommends specialized data visualization patterns for 25 different chart types.
Frameworks & tools
React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind CSS, shadcn/ui, Lucide, and Heroicons.
Why this beats prompting it yourself
Generic LLM prompts often ignore platform-specific constraints like iOS safe areas or Material Design tap targets. This skill uses a local intelligence database and Python-based search to enforce strict design rules and brand styleguides that generic prompts forget.
Use cases
- Building a SaaS dashboard with complex data tables and accessible charts.
- Creating a high-conversion landing page using validated section hierarchies.
- Refactoring a mobile app to meet WCAG 4.5:1 contrast and touch target standards.
- Implementing a dark mode system that maintains brand identity and legibility.
Known limitations
Focuses on application UI and functional design rather than complex 3D modeling or high-fidelity character illustration.
Use Cases
- Generate full design systems with CSS variables and font pairings.
- Audit code for WCAG accessibility and touch target compliance.
- Select appropriate chart types and data viz patterns for dashboards.
- Enforce platform-specific safe areas and system gestures in mobile code.
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/ui-ux-pro-designer -o /tmp/ui-ux-pro-designer.zip && unzip -o /tmp/ui-ux-pro-designer.zip -d ~/.claude/skills && rm /tmp/ui-ux-pro-designer.zipFree skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Be the first to review this skill.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review