ui-ux-pro-max
Use when designing/reviewing UI or UX for web/mobile products, selecting style/color/typography/layout/animation/chart patterns, or generating stack-specific implementation guidance (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui).
Full skill instructions
Design rules + searchable CLI for style, UX, color, typography, charts, landing patterns, and stack guidance.
| Priority | Category | Impact | Domain |
|---|---|---|---|
| 1 | Accessibility | Critical | ux |
| 2 | Touch/Interaction | Critical | ux |
| 3 | Performance | High | ux |
| 4 | Layout/Responsive | High | ux |
| 5 | Typography/Color | Medium | typography, color |
| 6 | Animation | Medium | ux |
| 7 | Style Selection | Medium | style, product |
| 8 | Charts/Data | Low | chart |
color-contrast: >= 4.5:1 for normal textfocus-states: visible keyboard focusalt-text: meaningful images onlyaria-labels: icon-only controls must have labelskeyboard-nav: tab order matches visual orderform-labels: explicit labels, not placeholder-onlytouch-target-size: >= 44x44pxhover-vs-tap: primary action must work on tap/clickloading-buttons: disable during asyncerror-feedback: field-local and explicitcursor-pointer: interactive elements onlyimage-optimization: WebP/AVIF + responsive srcset + lazy loadreduced-motion: honor prefers-reduced-motioncontent-jumping: reserve async spaceviewport-meta: width=device-width, initial-scale=1readable-font-size: mobile body >= 16pxhorizontal-scroll: no unintentional overflowz-index-management: explicit scale (10/20/30/50/...)semantics-first: type hierarchy follows content roles, not visual decorationline-height: body typically ~1.2-1.45 for sustained reading; adjust by face/x-heightline-length: prose target ~45-75 charsfont-pairing: heading/body personality alignmentglyph-integrity: true quotes/apostrophes/dashes/ellipsis; no faux stylesbreak-quality: avoid widows/orphans; monitor rivers/ladders in justified copyduration-timing: 150-300ms micro interactionstransform-performance: prefer transform/opacityloading-states: skeleton or spinner where wait existsstyle-match: style must fit product + audienceconsistency: one language across pagesno-emoji-icons: SVG icon sets onlychart-type: match data semanticsdata-table: provide accessible tabular fallback--design-system first.html-tailwind default).python3 --version || python --version
python3 skills/ui-ux-pro-max/scripts/search.py "<product> <industry> <keywords>" --design-system [-p "Project Name"]
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" [--page "dashboard"]
Creates:
design-system/MASTER.md: project baselinedesign-system/pages/<page>.md: page-level overrideRetrieval rule:
design-system/MASTER.mddesign-system/pages/<page>.md exists, page file overrides masterpython3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
html-tailwind default)python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack html-tailwind
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
| Domain | Purpose |
|---|---|
product | Product-type recommendations |
style | Visual language/effects |
typography | Font pairings |
color | Palette by product type |
landing | Page structure + CTA strategy |
chart | Chart type/library guidance |
ux | UX patterns + anti-patterns |
react | React/Next performance patterns |
web | Accessibility + interface guidelines |
prompt | Prompt/CSS keyword guidance |
| Stack | Focus |
|---|---|
html-tailwind | Utility-first responsive UI (default) |
react | Hooks/state/render behavior |
nextjs | Routing/SSR/images |
vue | Composition API/Pinia/router |
svelte | Runes/stores/SvelteKit |
swiftui | View/state/nav/animation |
react-native | Native components/lists/nav |
flutter | Widgets/state/layout/theming |
shadcn | shadcn/ui components + patterns |
jetpack-compose | Composables/state/recomposition |
| Rule | Required | Never |
|---|---|---|
| Icon source | SVG sets (Heroicons/Lucide/Simple Icons) | Emoji as UI icon |
| Hover behavior | Color/opacity transitions | Layout-shifting scale transforms |
| Brand logos | Official vectors | Guessed/inaccurate marks |
| Icon sizing | Consistent viewBox and dimensions | Mixed arbitrary sizes |
| Rule | Required | Never |
|---|---|---|
| Click affordance | cursor-pointer on interactive elements | Default cursor on clickable cards |
| Feedback | Visible hover/focus/active state | No interaction feedback |
| Transition | ~150-300ms | Instant or >500ms without reason |
| Rule | Required | Never |
|---|---|---|
| Transparent cards | Readable opacity (e.g. bg-white/80) | Low-opacity glass that kills contrast |
| Body text | High contrast (e.g. slate-900) | Light gray body text |
| Muted text | Still readable (>= slate-600 equivalent) | Gray-400 or lighter for body copy |
| Borders | Visible in light and dark | Near-invisible borders |
| Rule | Required | Never |
|---|---|---|
| Floating nav | Edge spacing (top/left/right offsets) | Hard pin to edges by default |
| Fixed header | Offset content by header height | Hidden content under navbar |
| Containers | Consistent max width scale | Random max-width per section |
prefers-reduced-motion supported
Accessibility guidelines for VS Code features — covers accessibility help dialogs, accessible views, verbosity settings, accessibility signals, ARIA alerts/status announcements, keyboard navigation, and ARIA labels/roles. Applies to both new interactive UI surfaces and updates to existing feature...
Mermaid diagram creation for flowcharts, sequences, ERDs, and more. Generate diagrams from text in markdown files. Use for documentation, architecture diagrams, and visual representations. Triggers on mermaid, flowchart, sequence diagram, ERD, entity relationship, gantt chart, pie chart, class di...
Guides development of cross-platform desktop apps with Tauri 2, TypeScript, React, and Rust. Use when building Tauri apps, implementing IPC, designing Rust backend or TypeScript/React frontend, when researching or cloning a website (open site, snapshot elements), when verifying local dev or built...
Handle errors as values using fp-ts Either and TaskEither for cleaner, more predictable TypeScript code. Use when implementing error handling patterns with fp-ts.
Gate 0 research phase for pre-dev workflow. Dispatches 3 parallel research agents to gather codebase patterns, external best practices, and framework documentation BEFORE creating PRD/TRD. Outputs research.md with file:line references.
Create and configure Vapi voice AI assistants with models, voices, transcribers, tools, hooks, and advanced settings. Use when building voice agents, phone bots, customer support assistants, or any conversational AI that handles phone or web calls.
Use when working with full stack orchestration full stack feature
Delegiere Aufgaben an OpenAI Codex CLI im Headless-Mode. Nutzt ChatGPT Subscription (KEIN API Key). Nur Workspace-Zugriff, KEIN System-Zugriff. Auto-Accept mit --full-auto. Web-Recherche mit --search.
Generate a full week of social media content for any topic. Outputs platform-optimized posts for Twitter/X, LinkedIn, and Instagram with hashtags and posting times.
Data privacy and regulatory compliance specialist for GDPR, CCPA, HIPAA, and international data protection laws. Use when implementing privacy controls, conducting data protection impact assessments, ensuring regulatory compliance, or managing data subject rights. Expert in consent management, da...
Reviews a task using the TRIPLE protocol, as the review agent.
Define and document the technology stack and architecture decisions for a project. Use when the user needs to choose a tech stack, make architecture decisions, define infrastructure choices, or document technology selections. Triggers on requests like "define the tech stack", "choose technologies...
Generate, edit, and beat-sync AI video with leading models in one workspace.
The world's fastest calendar for remote work
Transform Your Design with AI Designer by ImgCreator.ai
Revolutionizing Video Production with AI-Powered Creativity
Extend an image past the frame and let AI fill the new aspect ratio.
Discover your celebrity doppelgänger with StarByFace!
ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.
Opus.ai: Revolutionize Your Web Experience