From d45721a49ab69fd2b9b93a703af4369bab91b971 Mon Sep 17 00:00:00 2001 From: dingtalk_ssjygq <1505398065@qq.com> Date: Fri, 9 Jan 2026 09:18:56 +0800 Subject: [PATCH] feat: add support for Gemini CLI - Added .gemini/skills/ui-ux-pro-max/SKILL.md configuration - Updated CLI to detect and install for Gemini (.gemini + .shared) - Added Gemini CLI instructions to README.md --- .gemini/skills/ui-ux-pro-max/SKILL.md | 227 ++++++++++++++++++ README.md | 10 + .../.gemini/skills/ui-ux-pro-max/SKILL.md | 227 ++++++++++++++++++ cli/src/types/index.ts | 5 +- cli/src/utils/detect.ts | 5 + cli/src/utils/extract.ts | 2 +- 6 files changed, 473 insertions(+), 3 deletions(-) create mode 100644 .gemini/skills/ui-ux-pro-max/SKILL.md create mode 100644 cli/assets/.gemini/skills/ui-ux-pro-max/SKILL.md diff --git a/.gemini/skills/ui-ux-pro-max/SKILL.md b/.gemini/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..7e79686 --- /dev/null +++ b/.gemini/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,227 @@ +--- +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, instruct the user to install it based on their OS. + +--- + +## 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 `run_shell_command` to execute the `search.py` script multiple times to gather comprehensive information. Search until you have enough context. + +**Command Format:** + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --domain +``` + +**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:** + +1. Search product type: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product + ``` + +2. Search style (based on industry: beauty, elegant): + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style + ``` + +3. Search typography: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography + ``` + +4. Search color palette: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color + ``` + +5. Search landing page structure: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing + ``` + +6. Search UX guidelines: + ```bash + 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): + ```bash + 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 + +--- + +## 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, Simple Icons) +- [ ] Brand logos are correct (verified from Simple Icons) +- [ ] Hover states don't cause layout shift +- [ ] Use theme colors directly (bg-primary) not var() wrapper + +### Interaction +- [ ] All clickable elements have `cursor-pointer` +- [ ] Hover states provide clear visual feedback +- [ ] Transitions are smooth (150-300ms) +- [ ] Focus states visible for keyboard navigation + +### Light/Dark Mode +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) +- [ ] Glass/transparent elements visible in light mode +- [ ] Borders visible in both modes +- [ ] Test both modes before delivery + +### Layout +- [ ] Floating elements have proper spacing from edges +- [ ] No content hidden behind fixed navbars +- [ ] Responsive at 320px, 768px, 1024px, 1440px +- [ ] No horizontal scroll on mobile + +### Accessibility +- [ ] All images have alt text +- [ ] Form inputs have labels +- [ ] Color is not the only indicator +- [ ] `prefers-reduced-motion` respected diff --git a/README.md b/README.md index 1183c09..5a12459 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,7 @@ 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 gemini # Gemini CLI uipro init --ai all # All assistants ``` @@ -62,6 +63,7 @@ Copy the appropriate folders to your project: | 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/` | +| Gemini CLI | `.gemini/skills/ui-ux-pro-max/` + `.shared/ui-ux-pro-max/` | ## Prerequisites @@ -123,6 +125,14 @@ The skill activates automatically for UI/UX requests. You can also invoke it exp $ui-ux-pro-max Build a landing page for my SaaS product ``` +### Gemini CLI + +The skill activates automatically when you request UI/UX work. + +``` +Build a landing page for my SaaS product +``` + ### Example Prompts ``` diff --git a/cli/assets/.gemini/skills/ui-ux-pro-max/SKILL.md b/cli/assets/.gemini/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..7e79686 --- /dev/null +++ b/cli/assets/.gemini/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,227 @@ +--- +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, instruct the user to install it based on their OS. + +--- + +## 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 `run_shell_command` to execute the `search.py` script multiple times to gather comprehensive information. Search until you have enough context. + +**Command Format:** + +```bash +python3 .shared/ui-ux-pro-max/scripts/search.py "" --domain +``` + +**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:** + +1. Search product type: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --domain product + ``` + +2. Search style (based on industry: beauty, elegant): + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "elegant minimal soft" --domain style + ``` + +3. Search typography: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "elegant luxury" --domain typography + ``` + +4. Search color palette: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "beauty spa wellness" --domain color + ``` + +5. Search landing page structure: + ```bash + python3 .shared/ui-ux-pro-max/scripts/search.py "hero-centric social-proof" --domain landing + ``` + +6. Search UX guidelines: + ```bash + 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): + ```bash + 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 + +--- + +## 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, Simple Icons) +- [ ] Brand logos are correct (verified from Simple Icons) +- [ ] Hover states don't cause layout shift +- [ ] Use theme colors directly (bg-primary) not var() wrapper + +### Interaction +- [ ] All clickable elements have `cursor-pointer` +- [ ] Hover states provide clear visual feedback +- [ ] Transitions are smooth (150-300ms) +- [ ] Focus states visible for keyboard navigation + +### Light/Dark Mode +- [ ] Light mode text has sufficient contrast (4.5:1 minimum) +- [ ] Glass/transparent elements visible in light mode +- [ ] Borders visible in both modes +- [ ] Test both modes before delivery + +### Layout +- [ ] Floating elements have proper spacing from edges +- [ ] No content hidden behind fixed navbars +- [ ] Responsive at 320px, 768px, 1024px, 1440px +- [ ] No horizontal scroll on mobile + +### Accessibility +- [ ] All images have alt text +- [ ] Form inputs have labels +- [ ] Color is not the only indicator +- [ ] `prefers-reduced-motion` respected diff --git a/cli/src/types/index.ts b/cli/src/types/index.ts index a41f069..854297e 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' | 'codex' | 'qoder' | 'all'; +export type AIType = 'claude' | 'cursor' | 'windsurf' | 'antigravity' | 'copilot' | 'kiro' | 'roocode' | 'codex' | 'qoder' | 'gemini' | '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', 'codex', 'qoder', 'all']; +export const AI_TYPES: AIType[] = ['claude', 'cursor', 'windsurf', 'antigravity', 'copilot', 'roocode', 'kiro', 'codex', 'qoder', 'gemini', 'all']; export const AI_FOLDERS: Record, string[]> = { claude: ['.claude'], @@ -32,4 +32,5 @@ export const AI_FOLDERS: Record, string[]> = { codex: ['.codex'], roocode: ['.roo', '.shared'], qoder: ['.qoder', '.shared'], + gemini: ['.gemini', '.shared'], }; diff --git a/cli/src/utils/detect.ts b/cli/src/utils/detect.ts index f5919e9..c5afcd9 100644 --- a/cli/src/utils/detect.ts +++ b/cli/src/utils/detect.ts @@ -37,6 +37,9 @@ export function detectAIType(cwd: string = process.cwd()): DetectionResult { if (existsSync(join(cwd, '.qoder'))) { detected.push('qoder'); } + if (existsSync(join(cwd, '.gemini'))) { + detected.push('gemini'); + } // Suggest based on what's detected let suggested: AIType | null = null; @@ -69,6 +72,8 @@ export function getAITypeDescription(aiType: AIType): string { return 'RooCode (.roo/commands/ + .shared/)'; case 'qoder': return 'Qoder (.qoder/rules/ + .shared/)'; + case 'gemini': + return 'Gemini CLI (.gemini/skills/ + .shared/)'; case 'all': return 'All AI assistants'; } diff --git a/cli/src/utils/extract.ts b/cli/src/utils/extract.ts index 7ee0971..ceefd8c 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','.codex', '.shared'] + ? ['.claude', '.cursor', '.windsurf', '.agent', '.github', '.kiro', '.roo','.codex', '.gemini', '.shared'] : AI_FOLDERS[aiType]; // Deduplicate folders (e.g., .shared might be listed multiple times)