From 319a9393cd78917ad81e0b12ad9b5fd56c318945 Mon Sep 17 00:00:00 2001 From: September999999999 <32701871+September999999999@users.noreply.github.com> Date: Sat, 17 Jan 2026 10:48:00 +0800 Subject: [PATCH] fix(cli): support OpenCode ai type (#84) --- cli/README.md | 1 + .../.opencode/skills/ui-ux-pro-max/SKILL.md | 253 ++++++++++++++++++ cli/src/types/index.ts | 5 +- cli/src/utils/detect.ts | 6 +- cli/src/utils/extract.ts | 2 +- 5 files changed, 263 insertions(+), 4 deletions(-) create mode 100644 cli/assets/.opencode/skills/ui-ux-pro-max/SKILL.md diff --git a/cli/README.md b/cli/README.md index 83fa548..255a70c 100644 --- a/cli/README.md +++ b/cli/README.md @@ -23,6 +23,7 @@ uipro init --ai roocode # Roo Code uipro init --ai qoder # Qoder uipro init --ai gemini # Gemini CLI uipro init --ai trae # Trae +uipro init --ai opencode # OpenCode uipro init --ai all # All assistants # Options diff --git a/cli/assets/.opencode/skills/ui-ux-pro-max/SKILL.md b/cli/assets/.opencode/skills/ui-ux-pro-max/SKILL.md new file mode 100644 index 0000000..b5fed98 --- /dev/null +++ b/cli/assets/.opencode/skills/ui-ux-pro-max/SKILL.md @@ -0,0 +1,253 @@ +--- +name: ui-ux-pro-max +description: "UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). 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. Integrations: shadcn/ui MCP for component search and examples." +compatibility: "OpenCode with Python 3.x" +--- + +# 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. + +## OpenCode Tool Mapping + +| Claude Code Tool | OpenCode Equivalent | +|---------------------|------------------------| +| `TodoWrite` | `update_plan` | +| `Task` subagents | `@mention` system | +| `Skill` tool | `use_skill` tool | +| File operations | Native OpenCode tools | + +## When to Use + +Use this skill when: +- User requests UI/UX work (design, build, create, implement, review, fix, improve) +- User wants to build frontend pages (landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app) +- User asks about design patterns, color palettes, typography, or UI components + +## 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 + +### 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 `update_plan` to track your search tasks, then execute multiple searches to gather comprehensive information. + +```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`, `shadcn` + +--- + +## 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 | +| `shadcn` | shadcn/ui components, theming, forms, patterns | + +--- + +## Example Workflow + +**User request:** "Build a landing page for a professional skincare service." + +**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 + +--- + +## 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) +- [ ] 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 66aa3aa..7682cbb 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' | 'gemini' | 'trae' | 'all'; +export type AIType = 'claude' | 'cursor' | 'windsurf' | 'antigravity' | 'copilot' | 'kiro' | 'roocode' | 'codex' | 'qoder' | 'gemini' | 'trae' | 'opencode' | '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', 'gemini', 'trae', 'all']; +export const AI_TYPES: AIType[] = ['claude', 'cursor', 'windsurf', 'antigravity', 'copilot', 'roocode', 'kiro', 'codex', 'qoder', 'gemini', 'trae', 'opencode', 'all']; export const AI_FOLDERS: Record, string[]> = { claude: ['.claude'], @@ -34,4 +34,5 @@ export const AI_FOLDERS: Record, string[]> = { qoder: ['.qoder', '.shared'], gemini: ['.gemini', '.shared'], trae: ['.trae', '.shared'], + opencode: ['.opencode', '.shared'], }; diff --git a/cli/src/utils/detect.ts b/cli/src/utils/detect.ts index e9d5984..643f733 100644 --- a/cli/src/utils/detect.ts +++ b/cli/src/utils/detect.ts @@ -43,7 +43,9 @@ export function detectAIType(cwd: string = process.cwd()): DetectionResult { if (existsSync(join(cwd, '.trae'))) { detected.push('trae'); } - + if (existsSync(join(cwd, '.opencode'))) { + detected.push('opencode'); + } // Suggest based on what's detected let suggested: AIType | null = null; @@ -80,6 +82,8 @@ export function getAITypeDescription(aiType: AIType): string { return 'Gemini CLI (.gemini/skills/ + .shared/)'; case 'trae': return 'Trae (.trae/skills/ + .shared/)'; + case 'opencode': + return 'OpenCode (.opencode/skills/ + .shared/)'; case 'all': return 'All AI assistants'; } diff --git a/cli/src/utils/extract.ts b/cli/src/utils/extract.ts index 6878bbc..ee23aac 100644 --- a/cli/src/utils/extract.ts +++ b/cli/src/utils/extract.ts @@ -40,7 +40,7 @@ export async function copyFolders( const copiedFolders: string[] = []; const foldersToCopy = aiType === 'all' - ? ['.claude', '.cursor', '.windsurf', '.agent', '.github', '.kiro', '.roo','.codex', '.gemini', '.trae', '.shared'] + ? Object.values(AI_FOLDERS).flat() : AI_FOLDERS[aiType]; // Deduplicate folders (e.g., .shared might be listed multiple times)