# UI UX Pro Max

> ---

- Skill: `anhvu1107/ui-ux-pro-max` (Agent Skill, multi-file: 39 files)
- Install (CLI): `npx skillmds@latest add anhvu1107/ui-ux-pro-max`
- Raw SKILL.md: https://api.skillmd.com/api/skills/anhvu1107/ui-ux-pro-max/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: anhvu1107 (https://skillmd.com/u/anhvu1107)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/anhvu1107/ui-ux-pro-max

---

---
name: ui-ux-pro-max
description: ALWAYS use this for UI and UX direction, design-system choices, landing pages, dashboards, component styling, or stack-specific frontend implementation across React, Next.js, Remix, Svelte, SvelteKit, Astro, Vue, Nuxt, Expo Router, React Native, Flutter, SwiftUI, Jetpack Compose, and shadcn.
---

# UI/UX Pro Max

## Selective Reading Rule

Start with:

- `references/usage-routing.md`
- `references/quality-checklist.md`

Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.

## Selective Reading Rule

Start with:

- `references/senior-master-standard.md`
- `references/stack-routing.md`
- `references/design-review-checklist.md`

Use `references/stack-routing.md` first to choose the most relevant stack data file and avoid loading irrelevant framework guidance.

## Purpose

Turn vague UI requests into an intentional design system plus implementation guidance that matches the actual frontend stack.

## Use This Skill When

- the user asks for any page, component, dashboard, landing page, redesign, polish pass, design system, or frontend visual direction
- the task includes typography, color, spacing, hierarchy, motion, accessibility, or stack-specific UI implementation
- you need to avoid generic AI-looking frontend output while still shipping something practical

## Data Coverage

This skill now includes curated searchable guidance for 16 stacks:

- `html-tailwind`
- `react`
- `nextjs`
- `remix`
- `astro`
- `vue`
- `nuxtjs`
- `nuxt-ui`
- `svelte`
- `sveltekit`
- `shadcn`
- `expo-router`
- `react-native`
- `flutter`
- `swiftui`
- `jetpack-compose`

## Workflow

1. Classify the UI job.
   - landing page, dashboard, app shell, feature surface, component system, or redesign
2. Choose the stack.
   - use `references/stack-routing.md` if the stack is implied but not named
3. Generate the design system.
   - run the bundled search tool with `--design-system`
4. Pull the stack-specific guidance.
   - run a stack search for the framework and product type
5. Review before finalizing.
   - use `references/design-review-checklist.md`

## Commands

From the repository root:

```bash
python .agent/skills/ui-ux-pro-max/scripts/search.py "b2b analytics dashboard" --design-system -p "Northstar"
python .agent/skills/ui-ux-pro-max/scripts/search.py "dashboard tables filters" --stack remix
python .agent/skills/ui-ux-pro-max/scripts/search.py "routing navigation optimistic forms" --stack sveltekit
```

If you are already inside the skill folder, use `python scripts/search.py ...`.

## Rules

- Default to the actual product context, not whatever style looks trendy.
- Match the stack guidance to the framework in use before inventing patterns.
- Prefer accessible, responsive, production-grade UI over pretty-but-fragile demos.
- When working in an existing design system, preserve established patterns before introducing a new direction.