diff --git a/MASTER-PROMPT.md b/MASTER-PROMPT.md index 3571f9f..2780a54 100644 --- a/MASTER-PROMPT.md +++ b/MASTER-PROMPT.md @@ -252,46 +252,34 @@ Result: Complete app, launch-ready ✓ You can ALSO directly call any specialist agent anytime for manual control. --- - -## Step 1.5: Install UI/UX Pro Max Agent (PROACTIVELY Auto-Triggers) - -Source: https://github.com/nextlevelbuilder/ui-ux-pro-max-skill - -Clone the ui-ux-pro-max-skill repository: -git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-pro-max-skill - -Install UI/UX Pro Max agent with PROACTIVELY triggers: -mkdir -p ~/.claude/agents/design -wget -O ~/.claude/agents/design/ui-ux-pro-max.md https://raw.githubusercontent.com/github.rommark.dev/admin/claude-code-glm-suite/main/agents/design/ui-ux-pro-max.md - -Also install the SKILL file for enhanced compatibility: -mkdir -p ~/.claude/skills/ui-ux-pro-max -cp /tmp/ui-ux-pro-max-skill/.claude/skills/ui-ux-pro-max/SKILL.md ~/.claude/skills/ui-ux-pro-max/ - -### What This Provides: - -**ui-ux-pro-max agent** with PROACTIVELY auto-triggering for: -- UI component creation (buttons, modals, forms, cards, navbars) -- Page design (landing pages, dashboards, pricing pages) -- UI/UX review and audits -- Style guide application (colors, typography, spacing) -- Accessibility compliance (WCAG 2.1 AA/AAA) -- Tech-stack specific patterns (React, Next.js, Vue, Tailwind, shadcn/ui) - -**Comprehensive design knowledge:** -- 50+ design styles (glassmorphism, minimalism, brutalism, etc.) -- 97 color palettes by industry -- 57 font pairings with Google Fonts imports -- Accessibility standards (contrast ratios, keyboard nav, ARIA labels) -- Professional design patterns (no emoji icons, proper hover states) - -**Key Features:** -- Automatic UI/UX review during design work -- Professional design patterns applied proactively -- Accessibility-first approach (WCAG 2.1 AA/AAA) -- Comprehensive styling guidelines - ---- +## Step 1.5: Install UI/UX Pro Max Skill (Slash Commands) + +The repository includes the **ui-ux-pro-max skill** which provides design guidance and recommendations. + +Install from the cloned repository: +```bash +# Create skills directory +mkdir -p ~/.claude/skills + +# Copy ui-ux-pro-max skill (includes search.py for design patterns) +cp -r claude-code-glm-suite/skills/ui-ux-pro-max ~/.claude/skills/ + +# Make Python scripts executable +chmod +x ~/.claude/skills/ui-ux-pro-max/scripts/*.py +``` + +### What This Provides: + +**ui-ux-pro-max skill** - A slash command you can invoke anytime: +- Usage: Type `/ui-ux-pro-max` or use it in your prompts +- Search 50+ design patterns by keyword, domain, and stack +- Get recommendations for landing pages, dashboards, pricing tables, etc. +- Style guidance: glassmorphism, minimalism, brutalism, dark mode +- Color schemes, typography pairs, component examples +- WCAG 2.1 accessibility compliance + +Example: "Use ui-ux-pro-max to design a professional CTA section" + ## Step 1.75: Install Agent Sync Script (Keep Agents Updated) diff --git a/README.md b/README.md index 2c24cf6..dd9e809 100644 --- a/README.md +++ b/README.md @@ -229,20 +229,32 @@ npx @z_ai/coding-helper --help tldr --help ``` -#### Step 4: Install UI/UX Pro Max Skill +#### Step 4: Install Skills (Optional Design Guidance) + +The repository includes user-invocable skills for enhanced functionality: ```bash -# Clone the skill repository -git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git /tmp/ui-ux-skill +# From the cloned repository +cd claude-code-glm-suite -# Copy to Claude skills directory +# Install ui-ux-pro-max skill (design patterns and recommendations) mkdir -p ~/.claude/skills -cp -r /tmp/ui-ux-skill/* ~/.claude/skills/ +cp -r skills/ui-ux-pro-max ~/.claude/skills/ + +# Make Python scripts executable +chmod +x ~/.claude/skills/ui-ux-pro-max/scripts/*.py + +# Verify installation +ls -la ~/.claude/skills/ui-ux-pro-max/ +# Should show: README.md, SKILL.md, scripts/search.py ``` -#### Step 5: Configure MCP Tools +**What this provides:** +- `/ui-ux-pro-max` slash command for design guidance +- Search 50+ design patterns (minimalism, glassmorphism, etc.) +- Color schemes, typography pairs, component examples +- WCAG 2.1 accessibility compliance -```bash # Create MCP configuration cat > ~/.claude/settings.local.json << 'EOF' { diff --git a/interactive-install-claude.sh b/interactive-install-claude.sh index f90df2f..ccdbb96 100755 --- a/interactive-install-claude.sh +++ b/interactive-install-claude.sh @@ -612,7 +612,7 @@ backup_config() { create_directories() { log_info "Creating directory structure..." - mkdir -p "$CLAUDE_DIR"/{agents,plugins/cache,plugins/marketplaces,hooks,debug,file-history,paste-cache,projects,session-env,shell-snapshots,todos} + mkdir -p "$CLAUDE_DIR"/{skills,agents,plugins/cache,plugins/marketplaces,hooks,debug,file-history,paste-cache,projects,session-env,shell-snapshots,todos} if [ "$INSTALL_ENGINEERING" = true ]; then mkdir -p "$CLAUDE_DIR/agents/engineering"; fi if [ "$INSTALL_MARKETING" = true ]; then mkdir -p "$CLAUDE_DIR/agents/marketing"; fi @@ -725,6 +725,33 @@ install_agents() { log_info "Installing agent-updater for automatic sync..." fi + # ============================================ + # INSTALL SKILLS + # User-invocable skills (slash commands) + # ============================================ + if [ -d "$SCRIPT_DIR/skills" ]; then + log_info "Installing skills..." + mkdir -p "$CLAUDE_DIR/skills" + + # Copy all skill directories + for skill_dir in "$SCRIPT_DIR/skills"/*; do + if [ -d "$skill_dir" ]; then + skill_name=$(basename "$skill_dir") + log_info " → Installing skill: $skill_name" + cp -r "$skill_dir" "$CLAUDE_DIR/skills/" + + # Make scripts executable + if [ -d "$CLAUDE_DIR/skills/$skill_name/scripts" ]; then + chmod +x "$CLAUDE_DIR/skills/$skill_name/scripts"/*.py 2>/dev/null || true + fi + fi + done + + log_success "✓ Skills installed to: $CLAUDE_DIR/skills/" + else + log_warning "Skills directory not found at $SCRIPT_DIR/skills" + fi + # Install sync-agents.sh script if [ -f "$SCRIPT_DIR/sync-agents.sh" ]; then log_info "Installing sync-agents.sh script..." @@ -733,6 +760,11 @@ install_agents() { log_success "sync-agents.sh installed (run: ~/.claude/sync-agents.sh)" fi + if [ -d "$CLAUDE_DIR/skills" ]; then + skill_count=$(find "$CLAUDE_DIR/skills" -maxdepth 1 -type d | wc -l) + skill_count=$((skill_count - 1)) # Subtract 1 for the skills directory itself + log_success "Skills installed: $skill_count skill(s)" + fi log_success "Agents installed: $SELECTED_AGENTS" }