kunthawat/opencode-skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Activity

Update design and ui-ux-pro-max skills from install

Browse Source
This commit is contained in:
Kunthawat Greethong
2026-04-16 18:35:24 +07:00
parent da5f964d9a
commit ba1bca244a
12 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
skills/website-creator/ui-ux-pro-max/SKILL.md
View File

@@ -363,7 +363,7 @@ Extract key information from user request:
**Always start with `--design-system`** to get comprehensive recommendations with reasoning:
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
python3 skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]
```
This command:
@@ -374,7 +374,7 @@ This command:
**Example:**
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
python3 skills/ui-ux-pro-max/scripts/search.py "beauty spa wellness service" --design-system -p "Serenity Spa"
```
### Step 2b: Persist Design System (Master + Overrides Pattern)
@@ -382,7 +382,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "beauty
To save the design system for **hierarchical retrieval across sessions**, add `--persist`:
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name"
```
This creates:
@@ -391,7 +391,7 @@ This creates:
**With page-specific override:**
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
python3 skills/ui-ux-pro-max/scripts/search.py "<query>" --design-system --persist -p "Project Name" --page "dashboard"
```
This also creates:
@@ -416,7 +416,7 @@ Now, generate the code...
After getting the design system, use domain searches to get additional details:
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --domain <domain> [-n <max_results>]
```
**When to use detailed searches:**
@@ -441,7 +441,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keywo
Get React Native implementation-specific best practices:
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
python3 skills/ui-ux-pro-max/scripts/search.py "<keyword>" --stack react-native
```
---
@@ -485,7 +485,7 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "<keywo
### Step 2: Generate Design System (REQUIRED)
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
python3 skills/ui-ux-pro-max/scripts/search.py "AI search tool modern minimal" --design-system -p "AI Search"
```
**Output:** Complete design system with pattern, style, colors, typography, effects, and anti-patterns.
@@ -494,16 +494,16 @@ python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "AI sea
```bash
# Get style options for a modern tool product
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
python3 skills/ui-ux-pro-max/scripts/search.py "minimalism dark mode" --domain style
# Get UX best practices for search interaction and loading
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
python3 skills/ui-ux-pro-max/scripts/search.py "search loading animation" --domain ux
```
### Step 4: Stack Guidelines
```bash
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
python3 skills/ui-ux-pro-max/scripts/search.py "list performance navigation" --stack react-native
```
**Then:** Synthesize design system + detailed searches and implement the design.
@@ -516,10 +516,10 @@ The `--design-system` flag supports two output formats:
```bash
# ASCII box (default) - best for terminal display
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system
# Markdown - best for documentation
python3 ~/.hermes/skills/website-creator/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
python3 skills/ui-ux-pro-max/scripts/search.py "fintech crypto" --design-system -f markdown
```
---