Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions cli/assets/templates/base/skill-content.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ Extract key information from user request:
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
python3 {{SCRIPT_PATH}} "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```

This command:
Expand All @@ -71,15 +71,15 @@ This command:

**Example:**
```bash
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
python3 {{SCRIPT_PATH}} "beauty spa wellness service" --design-system -p "Serenity Spa"
```

### Step 2b: Persist Design System (Master + Overrides Pattern)

To save the design system for **hierarchical retrieval across sessions**, add `--persist`:

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
python3 {{SCRIPT_PATH}} "<query>" --design-system --persist -p "Project Name"
```

This creates:
Expand All @@ -88,7 +88,7 @@ This creates:

**With page-specific override:**
```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
python3 {{SCRIPT_PATH}} "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```

This also creates:
Expand All @@ -113,7 +113,7 @@ Now, generate the code...
After getting the design system, use domain searches to get additional details:

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
python3 {{SCRIPT_PATH}} "<keyword>" --domain <domain> [-n <max_results>]
```

**When to use detailed searches:**
Expand All @@ -136,7 +136,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n
Get React Native implementation-specific best practices:

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
python3 {{SCRIPT_PATH}} "<keyword>" --stack react-native
```

---
Expand Down Expand Up @@ -179,7 +179,7 @@ python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
### Step 2: Generate Design System (REQUIRED)

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
python3 {{SCRIPT_PATH}} "AI search tool modern minimal" --design-system -p "AI Search"
```

**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
Expand All @@ -188,16 +188,16 @@ python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" -

```bash
# Get style options for a modern tool product
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
python3 {{SCRIPT_PATH}} "minimalism dark mode" --domain style

# Get UX best practices for search interaction and loading
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
python3 {{SCRIPT_PATH}} "search loading animation" --domain ux
```

### Step 4: Stack Guidelines

```bash
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
python3 {{SCRIPT_PATH}} "list performance navigation" --stack react-native
```

**Then:** Synthesize design system + detailed searches and implement the design.
Expand All @@ -210,10 +210,10 @@ The `--design-system` flag supports two output formats:

```bash
# ASCII box (default) - best for terminal display
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 {{SCRIPT_PATH}} "fintech crypto" --design-system

# Markdown - best for documentation
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
python3 {{SCRIPT_PATH}} "fintech crypto" --design-system -f markdown
```

---
Expand Down
2 changes: 1 addition & 1 deletion cli/assets/templates/platforms/claude.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"skillPath": "skills/ui-ux-pro-max",
"filename": "SKILL.md"
},
"scriptPath": "skills/ui-ux-pro-max/scripts/search.py",
"scriptPath": "scripts/search.py",
"frontmatter": {
"name": "ui-ux-pro-max",
"description": "UI/UX design intelligence. 67 styles, 161 palettes, 57 font pairings, 25 charts, 15 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."
Expand Down