diff --git a/.codex/skills/ui-ux-pro-max/SKILL.md b/.codex/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..24cf28f --- /dev/null +++ b/.codex/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,205 @@ +--- +name: ui-ux-pro-max +description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient." +--- + +# UI/UX Pro Max - Design Intelligence + +Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. + +## Prerequisites + +Check if Python is installed: + +```bash +python3 --version || python --version +``` + +If Python is not installed, install it based on user's OS: + +**macOS:** +```bash +brew install python3 +``` + +**Ubuntu/Debian:** +```bash +sudo apt update && sudo apt install python3 +``` + +**Windows:** +```powershell +winget install Python.Python.3.12 +``` + +--- + +## How to Use This Skill + +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: + +### Step 1: Analyze User Requirements + +Extract key information from user request: +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. +- **Industry**: healthcare, fintech, gaming, education, etc. +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` + +### Step 2: Search Relevant Domains + +Use `search.py` multiple times to gather comprehensive information. Search until you have enough context. + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --domain [-n ] +``` + +**Recommended search order:** + +1. **Product** - Get style recommendations for product type +2. **Style** - Get detailed style guide (colors, effects, frameworks) +3. **Typography** - Get font pairings with Google Fonts imports +4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border) +5. **Landing** - Get page structure (if landing page) +6. **Chart** - Get chart recommendations (if dashboard/analytics) +7. **UX** - Get best practices and anti-patterns +8. **Stack** - Get stack-specific guidelines (default: html-tailwind) + +### Step 3: Stack Guidelines (Default: html-tailwind) + +If user doesn't specify a stack, **default to `html-tailwind`**. + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind +``` + +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter` + +--- + +## Search Reference + +### Available Domains + +| Domain | Use For | Example Keywords | +|--------|---------|------------------| +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | +| `prompt` | AI prompts, CSS keywords | (style name) | + +### Available Stacks + +| Stack | Focus | +|-------|-------| +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | +| `react` | State, hooks, performance, patterns | +| `nextjs` | SSR, routing, images, API routes | +| `vue` | Composition API, Pinia, Vue Router | +| `svelte` | Runes, stores, SvelteKit | +| `swiftui` | Views, State, Navigation, Animation | +| `react-native` | Components, Navigation, Lists | +| `flutter` | Widgets, State, Layout, Theming | + +--- + +## Example Workflow + +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" + +**AI should:** + +```bash +# 1. Search product type +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product + +# 2. Search style (based on industry: beauty, elegant) +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style + +# 3. Search typography +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography + +# 4. Search color palette +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color + +# 5. Search landing page structure +python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing + +# 6. Search UX guidelines +python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux +python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux + +# 7. Search stack guidelines (default: html-tailwind) +python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind +``` + +**Then:** Synthesize all search results and implement the design. + +--- + +## Tips for Better Results + +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" +2. **Search multiple times** - Different keywords reveal different insights +3. **Combine domains** - Style + Typography + Color = Complete design system +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues +5. **Use stack flag** - Get implementation-specific best practices +6. **Iterate** - If first search doesn't match, try different keywords +7. **Split Into Multiple Files** - For better maintainability: + - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`) + - Extract reusable styles into dedicated files + - Keep each file focused and under 200-300 lines + +--- + +## Common Rules for Professional UI + +These are frequently overlooked issues that make UI look unprofessional: + +### Icons & Visual Elements + +| Rule | Do | Don't | +|------|----|----- | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | + +### Interaction & Cursor + +| Rule | Do | Don't | +|------|----|----- | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | + +### Light/Dark Mode Contrast + +| Rule | Do | Don't | +|------|----|----- | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | + +### Layout & Spacing + +| Rule | Do | Don't | +|------|----|----- | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | + +--- + +## Pre-Delivery Checklist + +Before delivering UI code, verify these items: + +### Visual Quality +- [ ] No emojis used as icons (use SVG instead) +- [ ] All icons from consistent icon set (Heroicons/Lucide) diff --git a/README.md b/README.md index 456ee1d..4a4af60 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ An AI skill that provides design intelligence for building professional UI/UX ac ## Overview -UI UX Pro Max is a searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. It works as a skill/workflow for AI coding assistants (Claude Code, Cursor, Windsurf, etc.). +UI UX Pro Max is a searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. It works as a skill/workflow for AI coding assistants (Claude Code, Codex, Cursor, Windsurf, etc.). ## Features @@ -37,6 +37,7 @@ uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity (.agent + .shared) uipro init --ai copilot # GitHub Copilot uipro init --ai kiro # Kiro +uipro init --ai codex # Codex (Skills) uipro init --ai all # All assistants ``` @@ -60,6 +61,7 @@ Copy the appropriate folders to your project: | Antigravity | `.agent/workflows/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` | | GitHub Copilot | `.github/prompts/ui-ux-pro-max.prompt.md` + `.shared/ui-ux-pro-max/`| | Kiro | `.kiro/steering/ui-ux-pro-max.md` + `.shared/ui-ux-pro-max/` | +| Codex | `.codex/skills/ui-ux-pro-max/` + `.shared/ui-ux-pro-max/` | ## Prerequisites @@ -113,6 +115,14 @@ In VS Code with Copilot, type `/` in chat to see available prompts, then select /ui-ux-pro-max Build a landing page for my SaaS product ``` +### Codex CLI + +The skill activates automatically for UI/UX requests. You can also invoke it explicitly: + +``` +$ui-ux-pro-max Build a landing page for my SaaS product +``` + ### Example Prompts ``` diff --git a/cli/README.md b/cli/README.md index eb1b904..b4a54c9 100644 --- a/cli/README.md +++ b/cli/README.md @@ -16,6 +16,7 @@ uipro init --ai claude # Claude Code uipro init --ai cursor # Cursor uipro init --ai windsurf # Windsurf uipro init --ai antigravity # Antigravity +uipro init --ai codex # Codex (Skills) uipro init --ai all # All assistants # Other commands diff --git a/cli/assets/.codex/skills/ui-ux-pro-max/SKILL.md b/cli/assets/.codex/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..24cf28f --- /dev/null +++ b/cli/assets/.codex/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,205 @@ +--- +name: ui-ux-pro-max +description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient." +--- + +# UI/UX Pro Max - Design Intelligence + +Searchable database of UI styles, color palettes, font pairings, chart types, product recommendations, UX guidelines, and stack-specific best practices. + +## Prerequisites + +Check if Python is installed: + +```bash +python3 --version || python --version +``` + +If Python is not installed, install it based on user's OS: + +**macOS:** +```bash +brew install python3 +``` + +**Ubuntu/Debian:** +```bash +sudo apt update && sudo apt install python3 +``` + +**Windows:** +```powershell +winget install Python.Python.3.12 +``` + +--- + +## How to Use This Skill + +When user requests UI/UX work (design, build, create, implement, review, fix, improve), follow this workflow: + +### Step 1: Analyze User Requirements + +Extract key information from user request: +- **Product type**: SaaS, e-commerce, portfolio, dashboard, landing page, etc. +- **Style keywords**: minimal, playful, professional, elegant, dark mode, etc. +- **Industry**: healthcare, fintech, gaming, education, etc. +- **Stack**: React, Vue, Next.js, or default to `html-tailwind` + +### Step 2: Search Relevant Domains + +Use `search.py` multiple times to gather comprehensive information. Search until you have enough context. + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --domain [-n ] +``` + +**Recommended search order:** + +1. **Product** - Get style recommendations for product type +2. **Style** - Get detailed style guide (colors, effects, frameworks) +3. **Typography** - Get font pairings with Google Fonts imports +4. **Color** - Get color palette (Primary, Secondary, CTA, Background, Text, Border) +5. **Landing** - Get page structure (if landing page) +6. **Chart** - Get chart recommendations (if dashboard/analytics) +7. **UX** - Get best practices and anti-patterns +8. **Stack** - Get stack-specific guidelines (default: html-tailwind) + +### Step 3: Stack Guidelines (Default: html-tailwind) + +If user doesn't specify a stack, **default to `html-tailwind`**. + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --stack html-tailwind +``` + +Available stacks: `html-tailwind`, `react`, `nextjs`, `vue`, `svelte`, `swiftui`, `react-native`, `flutter` + +--- + +## Search Reference + +### Available Domains + +| Domain | Use For | Example Keywords | +|--------|---------|------------------| +| `product` | Product type recommendations | SaaS, e-commerce, portfolio, healthcare, beauty, service | +| `style` | UI styles, colors, effects | glassmorphism, minimalism, dark mode, brutalism | +| `typography` | Font pairings, Google Fonts | elegant, playful, professional, modern | +| `color` | Color palettes by product type | saas, ecommerce, healthcare, beauty, fintech, service | +| `landing` | Page structure, CTA strategies | hero, hero-centric, testimonial, pricing, social-proof | +| `chart` | Chart types, library recommendations | trend, comparison, timeline, funnel, pie | +| `ux` | Best practices, anti-patterns | animation, accessibility, z-index, loading | +| `prompt` | AI prompts, CSS keywords | (style name) | + +### Available Stacks + +| Stack | Focus | +|-------|-------| +| `html-tailwind` | Tailwind utilities, responsive, a11y (DEFAULT) | +| `react` | State, hooks, performance, patterns | +| `nextjs` | SSR, routing, images, API routes | +| `vue` | Composition API, Pinia, Vue Router | +| `svelte` | Runes, stores, SvelteKit | +| `swiftui` | Views, State, Navigation, Animation | +| `react-native` | Components, Navigation, Lists | +| `flutter` | Widgets, State, Layout, Theming | + +--- + +## Example Workflow + +**User request:** "Làm landing page cho dịch vụ chăm sóc da chuyên nghiệp" + +**AI should:** + +```bash +# 1. Search product type +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product + +# 2. Search style (based on industry: beauty, elegant) +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style + +# 3. Search typography +python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography + +# 4. Search color palette +python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color + +# 5. Search landing page structure +python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing + +# 6. Search UX guidelines +python3 .shared/ui-ux-pro-max/scripts/search.py "animation" --domain ux +python3 .shared/ui-ux-pro-max/scripts/search.py "accessibility" --domain ux + +# 7. Search stack guidelines (default: html-tailwind) +python3 .shared/ui-ux-pro-max/scripts/search.py "layout responsive" --stack html-tailwind +``` + +**Then:** Synthesize all search results and implement the design. + +--- + +## Tips for Better Results + +1. **Be specific with keywords** - "healthcare SaaS dashboard" > "app" +2. **Search multiple times** - Different keywords reveal different insights +3. **Combine domains** - Style + Typography + Color = Complete design system +4. **Always check UX** - Search "animation", "z-index", "accessibility" for common issues +5. **Use stack flag** - Get implementation-specific best practices +6. **Iterate** - If first search doesn't match, try different keywords +7. **Split Into Multiple Files** - For better maintainability: + - Separate components into individual files (e.g., `Header.tsx`, `Footer.tsx`) + - Extract reusable styles into dedicated files + - Keep each file focused and under 200-300 lines + +--- + +## Common Rules for Professional UI + +These are frequently overlooked issues that make UI look unprofessional: + +### Icons & Visual Elements + +| Rule | Do | Don't | +|------|----|----- | +| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons | +| **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout | +| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths | +| **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly | + +### Interaction & Cursor + +| Rule | Do | Don't | +|------|----|----- | +| **Cursor pointer** | Add `cursor-pointer` to all clickable/hoverable cards | Leave default cursor on interactive elements | +| **Hover feedback** | Provide visual feedback (color, shadow, border) | No indication element is interactive | +| **Smooth transitions** | Use `transition-colors duration-200` | Instant state changes or too slow (>500ms) | + +### Light/Dark Mode Contrast + +| Rule | Do | Don't | +|------|----|----- | +| **Glass card light mode** | Use `bg-white/80` or higher opacity | Use `bg-white/10` (too transparent) | +| **Text contrast light** | Use `#0F172A` (slate-900) for text | Use `#94A3B8` (slate-400) for body text | +| **Muted text light** | Use `#475569` (slate-600) minimum | Use gray-400 or lighter | +| **Border visibility** | Use `border-gray-200` in light mode | Use `border-white/10` (invisible) | + +### Layout & Spacing + +| Rule | Do | Don't | +|------|----|----- | +| **Floating navbar** | Add `top-4 left-4 right-4` spacing | Stick navbar to `top-0 left-0 right-0` | +| **Content padding** | Account for fixed navbar height | Let content hide behind fixed elements | +| **Consistent max-width** | Use same `max-w-6xl` or `max-w-7xl` | Mix different container widths | + +--- + +## Pre-Delivery Checklist + +Before delivering UI code, verify these items: + +### Visual Quality +- [ ] No emojis used as icons (use SVG instead) +- [ ] All icons from consistent icon set (Heroicons/Lucide) diff --git a/cli/src/types/index.ts b/cli/src/types/index.ts index 8be87f6..1e18a4a 100644 --- a/cli/src/types/index.ts +++ b/cli/src/types/index.ts @@ -1,4 +1,4 @@ -export type AIType = 'claude' | 'cursor' | 'windsurf' | 'antigravity' | 'copilot' | 'kiro' | 'roocode' | 'all'; +export type AIType = 'claude' | 'cursor' | 'windsurf' | 'antigravity' | 'copilot' | 'kiro' | 'roocode' | 'codex' | 'all'; export interface Release { tag_name: string; @@ -20,7 +20,7 @@ export interface InstallConfig { force?: boolean; } -export const AI_TYPES: AIType[] = ['claude', 'cursor', 'windsurf', 'antigravity', 'copilot', 'roocode', 'kiro', 'all']; +export const AI_TYPES: AIType[] = ['claude', 'cursor', 'windsurf', 'antigravity', 'copilot', 'roocode', 'kiro','codex', 'all']; export const AI_FOLDERS: Record, string[]> = { claude: ['.claude'], @@ -29,5 +29,6 @@ export const AI_FOLDERS: Record, string[]> = { antigravity: ['.agent', '.shared'], copilot: ['.github', '.shared'], kiro: ['.kiro', '.shared'], + codex: ['.codex', '.shared'], roocode: ['.roo', '.shared'], }; diff --git a/cli/src/utils/detect.ts b/cli/src/utils/detect.ts index 5361b16..345ee21 100644 --- a/cli/src/utils/detect.ts +++ b/cli/src/utils/detect.ts @@ -28,6 +28,8 @@ export function detectAIType(cwd: string = process.cwd()): DetectionResult { if (existsSync(join(cwd, '.kiro'))) { detected.push('kiro'); } + if (existsSync(join(cwd, '.codex'))) { + detected.push('codex'); if (existsSync(join(cwd, '.roo'))) { detected.push('roocode'); } @@ -57,6 +59,8 @@ export function getAITypeDescription(aiType: AIType): string { return 'GitHub Copilot (.github/prompts/ + .shared/)'; case 'kiro': return 'Kiro (.kiro/steering/ + .shared/)'; + case 'codex': + return 'Codex (.codex/skills/ + .shared/)'; case 'roocode': return 'RooCode (.roo/commands/ + .shared/)'; case 'all': diff --git a/cli/src/utils/extract.ts b/cli/src/utils/extract.ts index 9cb1b6f..7ee0971 100644 --- a/cli/src/utils/extract.ts +++ b/cli/src/utils/extract.ts @@ -39,7 +39,7 @@ export async function copyFolders( const copiedFolders: string[] = []; const foldersToCopy = aiType === 'all' - ? ['.claude', '.cursor', '.windsurf', '.agent', '.github', '.kiro', '.roo', '.shared'] + ? ['.claude', '.cursor', '.windsurf', '.agent', '.github', '.kiro', '.roo','.codex', '.shared'] : AI_FOLDERS[aiType]; // Deduplicate folders (e.g., .shared might be listed multiple times)