@brunosps00/dev-workflow 0.1.2 → 0.2.0

package/scaffold/skills/ui-ux-pro-max/scripts/search.py

@@ -0,0 +1,114 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+UI/UX Pro Max Search - BM25 search engine for UI/UX style guides
+Usage: python search.py "<query>" [--domain <domain>] [--stack <stack>] [--max-results 3]
+       python search.py "<query>" --design-system [-p "Project Name"]
+       python search.py "<query>" --design-system --persist [-p "Project Name"] [--page "dashboard"]
+
+Domains: style, prompt, color, chart, landing, product, ux, typography, google-fonts
+Stacks: react, nextjs, vue, svelte, astro, swiftui, react-native, flutter, nuxtjs, nuxt-ui, html-tailwind, shadcn, jetpack-compose, threejs
+
+Persistence (Master + Overrides pattern):
+  --persist    Save design system to design-system/MASTER.md
+  --page       Also create a page-specific override file in design-system/pages/
+"""
+
+import argparse
+import sys
+import io
+from core import CSV_CONFIG, AVAILABLE_STACKS, MAX_RESULTS, search, search_stack
+from design_system import generate_design_system, persist_design_system
+
+# Force UTF-8 for stdout/stderr to handle emojis on Windows (cp1252 default)
+if sys.stdout.encoding and sys.stdout.encoding.lower() != 'utf-8':
+    sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
+if sys.stderr.encoding and sys.stderr.encoding.lower() != 'utf-8':
+    sys.stderr = io.TextIOWrapper(sys.stderr.buffer, encoding='utf-8')
+
+
+def format_output(result):
+    """Format results for Claude consumption (token-optimized)"""
+    if "error" in result:
+        return f"Error: {result['error']}"
+
+    output = []
+    if result.get("stack"):
+        output.append(f"## UI Pro Max Stack Guidelines")
+        output.append(f"**Stack:** {result['stack']} | **Query:** {result['query']}")
+    else:
+        output.append(f"## UI Pro Max Search Results")
+        output.append(f"**Domain:** {result['domain']} | **Query:** {result['query']}")
+    output.append(f"**Source:** {result['file']} | **Found:** {result['count']} results\n")
+
+    for i, row in enumerate(result['results'], 1):
+        output.append(f"### Result {i}")
+        for key, value in row.items():
+            value_str = str(value)
+            if len(value_str) > 300:
+                value_str = value_str[:300] + "..."
+            output.append(f"- **{key}:** {value_str}")
+        output.append("")
+
+    return "\n".join(output)
+
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="UI Pro Max Search")
+    parser.add_argument("query", help="Search query")
+    parser.add_argument("--domain", "-d", choices=list(CSV_CONFIG.keys()), help="Search domain")
+    parser.add_argument("--stack", "-s", choices=AVAILABLE_STACKS, help=f"Stack-specific search. Available: {', '.join(AVAILABLE_STACKS)}")
+    parser.add_argument("--max-results", "-n", type=int, default=MAX_RESULTS, help="Max results (default: 3)")
+    parser.add_argument("--json", action="store_true", help="Output as JSON")
+    # Design system generation
+    parser.add_argument("--design-system", "-ds", action="store_true", help="Generate complete design system recommendation")
+    parser.add_argument("--project-name", "-p", type=str, default=None, help="Project name for design system output")
+    parser.add_argument("--format", "-f", choices=["ascii", "markdown"], default="ascii", help="Output format for design system")
+    # Persistence (Master + Overrides pattern)
+    parser.add_argument("--persist", action="store_true", help="Save design system to design-system/MASTER.md (creates hierarchical structure)")
+    parser.add_argument("--page", type=str, default=None, help="Create page-specific override file in design-system/pages/")
+    parser.add_argument("--output-dir", "-o", type=str, default=None, help="Output directory for persisted files (default: current directory)")
+
+    args = parser.parse_args()
+
+    # Design system takes priority
+    if args.design_system:
+        result = generate_design_system(
+            args.query, 
+            args.project_name, 
+            args.format,
+            persist=args.persist,
+            page=args.page,
+            output_dir=args.output_dir
+        )
+        print(result)
+        
+        # Print persistence confirmation
+        if args.persist:
+            project_slug = args.project_name.lower().replace(' ', '-') if args.project_name else "default"
+            print("\n" + "=" * 60)
+            print(f"✅ Design system persisted to design-system/{project_slug}/")
+            print(f"   📄 design-system/{project_slug}/MASTER.md (Global Source of Truth)")
+            if args.page:
+                page_filename = args.page.lower().replace(' ', '-')
+                print(f"   📄 design-system/{project_slug}/pages/{page_filename}.md (Page Overrides)")
+            print("")
+            print(f"📖 Usage: When building a page, check design-system/{project_slug}/pages/[page].md first.")
+            print(f"   If exists, its rules override MASTER.md. Otherwise, use MASTER.md.")
+            print("=" * 60)
+    # Stack search
+    elif args.stack:
+        result = search_stack(args.query, args.stack, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))
+    # Domain search
+    else:
+        result = search(args.query, args.domain, args.max_results)
+        if args.json:
+            import json
+            print(json.dumps(result, indent=2, ensure_ascii=False))
+        else:
+            print(format_output(result))

package/scaffold/skills/ui-ux-pro-max/skills/brand/SKILL.md

@@ -0,0 +1,97 @@
+---
+name: ckm:brand
+description: Brand voice, visual identity, messaging frameworks, asset management, brand consistency. Activate for branded content, tone of voice, marketing assets, brand compliance, style guides.
+argument-hint: "[update|review|create] [args]"
+metadata:
+  author: claudekit
+  version: "1.0.0"
+---
+
+# Brand
+
+Brand identity, voice, messaging, asset management, and consistency frameworks.
+
+## When to Use
+
+- Brand voice definition and content tone guidance
+- Visual identity standards and style guide development
+- Messaging framework creation
+- Brand consistency review and audit
+- Asset organization, naming, and approval
+- Color palette management and typography specs
+
+## Quick Start
+
+**Inject brand context into prompts:**
+```bash
+node scripts/inject-brand-context.cjs
+node scripts/inject-brand-context.cjs --json
+```
+
+**Validate an asset:**
+```bash
+node scripts/validate-asset.cjs <asset-path>
+```
+
+**Extract/compare colors:**
+```bash
+node scripts/extract-colors.cjs --palette
+node scripts/extract-colors.cjs <image-path>
+```
+
+## Brand Sync Workflow
+
+```bash
+# 1. Edit docs/brand-guidelines.md (or use /brand update)
+# 2. Sync to design tokens
+node scripts/sync-brand-to-tokens.cjs
+# 3. Verify
+node scripts/inject-brand-context.cjs --json | head -20
+```
+
+**Files synced:**
+- `docs/brand-guidelines.md` → Source of truth
+- `assets/design-tokens.json` → Token definitions
+- `assets/design-tokens.css` → CSS variables
+
+## Subcommands
+
+| Subcommand | Description | Reference |
+|------------|-------------|-----------|
+| `update` | Update brand identity and sync to all design systems | `references/update.md` |
+
+## References
+
+| Topic | File |
+|-------|------|
+| Voice Framework | `references/voice-framework.md` |
+| Visual Identity | `references/visual-identity.md` |
+| Messaging | `references/messaging-framework.md` |
+| Consistency | `references/consistency-checklist.md` |
+| Guidelines Template | `references/brand-guideline-template.md` |
+| Asset Organization | `references/asset-organization.md` |
+| Color Management | `references/color-palette-management.md` |
+| Typography | `references/typography-specifications.md` |
+| Logo Usage | `references/logo-usage-rules.md` |
+| Approval Checklist | `references/approval-checklist.md` |
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/inject-brand-context.cjs` | Extract brand context for prompt injection |
+| `scripts/sync-brand-to-tokens.cjs` | Sync brand-guidelines.md → design-tokens.json/css |
+| `scripts/validate-asset.cjs` | Validate asset naming, size, format |
+| `scripts/extract-colors.cjs` | Extract and compare colors against palette |
+
+## Templates
+
+| Template | Purpose |
+|----------|---------|
+| `templates/brand-guidelines-starter.md` | Complete starter template for new brands |
+
+## Routing
+
+1. Parse subcommand from `$ARGUMENTS` (first word)
+2. Load corresponding `references/{subcommand}.md`
+3. Execute with remaining arguments

package/scaffold/skills/ui-ux-pro-max/skills/design/SKILL.md

@@ -0,0 +1,302 @@
+---
+name: ckm:design
+description: "Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads."
+argument-hint: "[design-type] [context]"
+license: MIT
+metadata:
+  author: claudekit
+  version: "2.1.0"
+---
+
+# Design
+
+Unified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.
+
+## When to Use
+
+- Brand identity, voice, assets
+- Design system tokens and specs
+- UI styling with shadcn/ui + Tailwind
+- Logo design and AI generation
+- Corporate identity program (CIP) deliverables
+- Presentations and pitch decks
+- Banner design for social media, ads, web, print
+- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok
+
+## Sub-skill Routing
+
+| Task | Sub-skill | Details |
+|------|-----------|---------|
+| Brand identity, voice, assets | `brand` | External skill |
+| Tokens, specs, CSS vars | `design-system` | External skill |
+| shadcn/ui, Tailwind, code | `ui-styling` | External skill |
+| Logo creation, AI generation | Logo (built-in) | `references/logo-design.md` |
+| CIP mockups, deliverables | CIP (built-in) | `references/cip-design.md` |
+| Presentations, pitch decks | Slides (built-in) | `references/slides.md` |
+| Banners, covers, headers | Banner (built-in) | `references/banner-sizes-and-styles.md` |
+| Social media images/photos | Social Photos (built-in) | `references/social-photos-design.md` |
+| SVG icons, icon sets | Icon (built-in) | `references/icon-design.md` |
+
+## Logo Design (Built-in)
+
+55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana models.
+
+### Logo: Generate Design Brief
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech startup modern" --design-brief -p "BrandName"
+```
+
+### Logo: Search Styles/Colors/Industries
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/search.py "minimalist clean" --domain style
+python3 ~/.claude/skills/design/scripts/logo/search.py "tech professional" --domain color
+python3 ~/.claude/skills/design/scripts/logo/search.py "healthcare medical" --domain industry
+```
+
+### Logo: Generate with AI
+
+**ALWAYS** generate output logo images with white background.
+
+```bash
+python3 ~/.claude/skills/design/scripts/logo/generate.py --brand "TechFlow" --style minimalist --industry tech
+python3 ~/.claude/skills/design/scripts/logo/generate.py --prompt "coffee shop vintage badge" --style vintage
+```
+
+**IMPORTANT:** When scripts fail, try to fix them directly.
+
+After generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, invoke `/ui-ux-pro-max` for gallery.
+
+## CIP Design (Built-in)
+
+50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash/Pro).
+
+### CIP: Generate Brief
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/search.py "tech startup" --cip-brief -b "BrandName"
+```
+
+### CIP: Search Domains
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/search.py "business card letterhead" --domain deliverable
+python3 ~/.claude/skills/design/scripts/cip/search.py "luxury premium elegant" --domain style
+python3 ~/.claude/skills/design/scripts/cip/search.py "hospitality hotel" --domain industry
+python3 ~/.claude/skills/design/scripts/cip/search.py "office reception" --domain mockup
+```
+
+### CIP: Generate Mockups
+
+```bash
+# With logo (RECOMMENDED)
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --deliverable "business card" --industry "consulting"
+
+# Full CIP set
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo /path/to/logo.png --industry "consulting" --set
+
+# Pro model (4K text)
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TopGroup" --logo logo.png --deliverable "business card" --model pro
+
+# Without logo
+python3 ~/.claude/skills/design/scripts/cip/generate.py --brand "TechFlow" --deliverable "business card" --no-logo-prompt
+```
+
+Models: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image-preview`)
+
+### CIP: Render HTML Presentation
+
+```bash
+python3 ~/.claude/skills/design/scripts/cip/render-html.py --brand "TopGroup" --industry "consulting" --images /path/to/cip-output
+```
+
+**Tip:** If no logo exists, use Logo Design section above first.
+
+## Slides (Built-in)
+
+Strategic HTML presentations with Chart.js, design tokens, copywriting formulas.
+
+Load `references/slides-create.md` for the creation workflow.
+
+### Slides: Knowledge Base
+
+| Topic | File |
+|-------|------|
+| Creation Guide | `references/slides-create.md` |
+| Layout Patterns | `references/slides-layout-patterns.md` |
+| HTML Template | `references/slides-html-template.md` |
+| Copywriting | `references/slides-copywriting-formulas.md` |
+| Strategies | `references/slides-strategies.md` |
+
+## Banner Design (Built-in)
+
+22 art direction styles across social, ads, web, print. Uses `frontend-design`, `ai-artist`, `ai-multimodal`, `chrome-devtools` skills.
+
+Load `references/banner-sizes-and-styles.md` for complete sizes and styles reference.
+
+### Banner: Workflow
+
+1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity
+2. **Research** — Activate `ui-ux-pro-max`, browse Pinterest for references
+3. **Design** — Create HTML/CSS banner with `frontend-design`, generate visuals with `ai-artist`/`ai-multimodal`
+4. **Export** — Screenshot to PNG at exact dimensions via `chrome-devtools`
+5. **Present** — Show all options side-by-side, iterate on feedback
+
+### Banner: Quick Size Reference
+
+| Platform | Type | Size (px) |
+|----------|------|-----------|
+| Facebook | Cover | 820 x 312 |
+| Twitter/X | Header | 1500 x 500 |
+| LinkedIn | Personal | 1584 x 396 |
+| YouTube | Channel art | 2560 x 1440 |
+| Instagram | Story | 1080 x 1920 |
+| Instagram | Post | 1080 x 1080 |
+| Google Ads | Med Rectangle | 300 x 250 |
+| Website | Hero | 1920 x 600-1080 |
+
+### Banner: Top Art Styles
+
+| Style | Best For |
+|-------|----------|
+| Minimalist | SaaS, tech |
+| Bold Typography | Announcements |
+| Gradient | Modern brands |
+| Photo-Based | Lifestyle, e-com |
+| Geometric | Tech, fintech |
+| Glassmorphism | SaaS, apps |
+| Neon/Cyberpunk | Gaming, events |
+
+### Banner: Design Rules
+
+- Safe zones: critical content in central 70-80%
+- One CTA per banner, bottom-right, min 44px height
+- Max 2 fonts, min 16px body, ≥32px headline
+- Text under 20% for ads (Meta penalizes)
+- Print: 300 DPI, CMYK, 3-5mm bleed
+
+## Icon Design (Built-in)
+
+15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.
+
+### Icon: Generate Single Icon
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "settings gear" --style outlined
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "shopping cart" --style filled --color "#6366F1"
+python3 ~/.claude/skills/design/scripts/icon/generate.py --name "dashboard" --category navigation --style duotone
+```
+
+### Icon: Generate Batch Variations
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "cloud upload" --batch 4 --output-dir ./icons
+```
+
+### Icon: Multi-size Export
+
+```bash
+python3 ~/.claude/skills/design/scripts/icon/generate.py --prompt "user profile" --sizes "16,24,32,48" --output-dir ./icons
+```
+
+### Icon: Top Styles
+
+| Style | Best For |
+|-------|----------|
+| outlined | UI interfaces, web apps |
+| filled | Mobile apps, nav bars |
+| duotone | Marketing, landing pages |
+| rounded | Friendly apps, health |
+| sharp | Tech, fintech, enterprise |
+| flat | Material design, Google-style |
+| gradient | Modern brands, SaaS |
+
+**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.
+
+## Social Photos (Built-in)
+
+Multi-platform social image design: HTML/CSS → screenshot export. Uses `ui-ux-pro-max`, `brand`, `design-system`, `chrome-devtools` skills.
+
+Load `references/social-photos-design.md` for sizes, templates, best practices.
+
+### Social Photos: Workflow
+
+1. **Orchestrate** — `project-management` skill for TODO tasks; parallel subagents for independent work
+2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements
+3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`
+4. **Design** — `/ckm:brand` → `/ckm:design-system` → randomly invoke `/ck:ui-ux-pro-max` OR `/ck:frontend-design`; HTML per idea × size
+5. **Export** — `chrome-devtools` or Playwright screenshot at exact px (2x deviceScaleFactor)
+6. **Verify** — Use Chrome MCP or `chrome-devtools` skill to visually inspect exported designs; fix layout/styling issues and re-export
+7. **Report** — Summary to `plans/reports/` with design decisions
+8. **Organize** — Invoke `assets-organizing` skill to sort output files and reports
+
+### Social Photos: Key Sizes
+
+| Platform | Size (px) | Platform | Size (px) |
+|----------|-----------|----------|-----------|
+| IG Post | 1080×1080 | FB Post | 1200×630 |
+| IG Story | 1080×1920 | X Post | 1200×675 |
+| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |
+| YT Thumb | 1280×720 | Pinterest | 1000×1500 |
+
+## Workflows
+
+### Complete Brand Package
+
+1. **Logo** → `scripts/logo/generate.py` → Generate logo variants
+2. **CIP** → `scripts/cip/generate.py --logo ...` → Create deliverable mockups
+3. **Presentation** → Load `references/slides-create.md` → Build pitch deck
+
+### New Design System
+
+1. **Brand** (brand skill) → Define colors, typography, voice
+2. **Tokens** (design-system skill) → Create semantic token layers
+3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn/ui
+
+## References
+
+| Topic | File |
+|-------|------|
+| Design Routing | `references/design-routing.md` |
+| Logo Design Guide | `references/logo-design.md` |
+| Logo Styles | `references/logo-style-guide.md` |
+| Logo Colors | `references/logo-color-psychology.md` |
+| Logo Prompts | `references/logo-prompt-engineering.md` |
+| CIP Design Guide | `references/cip-design.md` |
+| CIP Deliverables | `references/cip-deliverable-guide.md` |
+| CIP Styles | `references/cip-style-guide.md` |
+| CIP Prompts | `references/cip-prompt-engineering.md` |
+| Slides Create | `references/slides-create.md` |
+| Slides Layouts | `references/slides-layout-patterns.md` |
+| Slides Template | `references/slides-html-template.md` |
+| Slides Copy | `references/slides-copywriting-formulas.md` |
+| Slides Strategy | `references/slides-strategies.md` |
+| Banner Sizes & Styles | `references/banner-sizes-and-styles.md` |
+| Social Photos Guide | `references/social-photos-design.md` |
+| Icon Design Guide | `references/icon-design.md` |
+
+## Scripts
+
+| Script | Purpose |
+|--------|---------|
+| `scripts/logo/search.py` | Search logo styles, colors, industries |
+| `scripts/logo/generate.py` | Generate logos with Gemini AI |
+| `scripts/logo/core.py` | BM25 search engine for logo data |
+| `scripts/cip/search.py` | Search CIP deliverables, styles, industries |
+| `scripts/cip/generate.py` | Generate CIP mockups with Gemini |
+| `scripts/cip/render-html.py` | Render HTML presentation from CIP mockups |
+| `scripts/cip/core.py` | BM25 search engine for CIP data |
+| `scripts/icon/generate.py` | Generate SVG icons with Gemini 3.1 Pro |
+
+## Setup
+
+```bash
+export GEMINI_API_KEY="your-key"  # https://aistudio.google.com/apikey
+pip install google-genai pillow
+```
+
+## Integration
+
+**External sub-skills:** brand, design-system, ui-styling
+**Related Skills:** frontend-design, ui-ux-pro-max, ai-multimodal, chrome-devtools