[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70JEXWS548CXH64Q7RAWKVP":3,"skill-same:01M70JEXWS548CXH64Q7RAWKVP":239},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":34,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":63,"commitSha":64,"skillDirectory":65,"forksCount":66,"repositoryHtmlUrl":67,"repositoryHomepageUrl":6,"ownerHtmlUrl":68,"ownerBlogUrl":6,"ownerDescription":69,"updatedAt":70,"install":71,"resources":84},"01M70JEXWS548CXH64Q7RAWKVP","design",null,"Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), 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.","mdnaimul22\u002Fhuman-skills","mdnaimul22","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F64520358?v=4","01M70FH95MH2H796Q01TYSFZ03","Naimul","01M70FH96798CQR4YHA13F17GA",3,"MIT","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002FSKILL.md",[18,23,26,29],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":30,"categoryName":31,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[5,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"youtube","context","identity","ui","muapi","screenshot","atlas cloud","google","presentations","generate","ads","create","chart","logo generation","logo","ui styling","actions","tiktok","Media","2026-11-10 10:12:30",false,"---\nname: design\ndescription: \"Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini, Atlas Cloud, or MuAPI AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), 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.\"\nargument-hint: \"[design-type] [context]\"\nlicense: MIT\nmetadata:\n  author: claudekit\n  version: \"2.1.0\"\n---\n\n# Design\n\nUnified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.\n\n## When to Use\n\n- Brand identity, voice, assets\n- Design system tokens and specs\n- UI styling with shadcn\u002Fui + Tailwind\n- Logo design and AI generation\n- Corporate identity program (CIP) deliverables\n- Presentations and pitch decks\n- Banner design for social media, ads, web, print\n- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok\n\n## Sub-skill Routing\n\n| Task | Sub-skill | Details |\n|------|-----------|---------|\n| Brand identity, voice, assets | `brand` | Bundled sibling skill |\n| Tokens, specs, CSS vars | `design-system` | Bundled sibling skill |\n| shadcn\u002Fui, Tailwind, code | `ui-styling` | Bundled sibling skill |\n| Logo creation, AI generation | Logo (built-in) | `references\u002Flogo-design.md` |\n| CIP mockups, deliverables | CIP (built-in) | `references\u002Fcip-design.md` |\n| Presentations, pitch decks | Slides (built-in) | `references\u002Fslides.md` |\n| Banners, covers, headers | Banner (built-in) | `references\u002Fbanner-sizes-and-styles.md` |\n| Social media images\u002Fphotos | Social Photos (built-in) | `references\u002Fsocial-photos-design.md` |\n| SVG icons, icon sets | Icon (built-in) | `references\u002Ficon-design.md` |\n\n## Script Paths\n\nScript paths in this skill and its `references\u002F` are relative to the directory that contains this SKILL.md, not to the project: `scripts\u002F\u003Cfile>` is this skill's own `scripts\u002F` folder, and `..\u002F\u003Cskill>\u002Fscripts\u002F\u003Cfile>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs\u002Fbrand-guidelines.md`, `assets\u002Fdesign-tokens.json` or `src\u002F` relative to it.\n\n## Logo Design (Built-in)\n\n55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas\nCloud, and MuAPI image generation.\n\n### Logo: Generate Design Brief\n\n```bash\npython3 scripts\u002Flogo\u002Fsearch.py \"tech startup modern\" --design-brief -p \"BrandName\"\n```\n\n### Logo: Search Styles\u002FColors\u002FIndustries\n\n```bash\npython3 scripts\u002Flogo\u002Fsearch.py \"minimalist clean\" --domain style\npython3 scripts\u002Flogo\u002Fsearch.py \"tech professional\" --domain color\npython3 scripts\u002Flogo\u002Fsearch.py \"healthcare medical\" --domain industry\n```\n\n### Logo: Generate with AI\n\n**ALWAYS** generate output logo images with white background.\n\n```bash\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --style minimalist --industry tech\npython3 scripts\u002Flogo\u002Fgenerate.py --prompt \"coffee shop vintage badge\" --style vintage\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider atlas\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider muapi\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider muapi --muapi-model nano-banana-pro\n```\n\n**IMPORTANT:** When scripts fail, try to fix them directly.\n\nAfter generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, use the bundled `ui-ux-pro-max` skill for the gallery.\n\n## CIP Design (Built-in)\n\n50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash\u002FPro).\n\n### CIP: Generate Brief\n\n```bash\npython3 scripts\u002Fcip\u002Fsearch.py \"tech startup\" --cip-brief -b \"BrandName\"\n```\n\n### CIP: Search Domains\n\n```bash\npython3 scripts\u002Fcip\u002Fsearch.py \"business card letterhead\" --domain deliverable\npython3 scripts\u002Fcip\u002Fsearch.py \"luxury premium elegant\" --domain style\npython3 scripts\u002Fcip\u002Fsearch.py \"hospitality hotel\" --domain industry\npython3 scripts\u002Fcip\u002Fsearch.py \"office reception\" --domain mockup\n```\n\n### CIP: Generate Mockups\n\n```bash\n# With logo (RECOMMENDED)\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo \u002Fpath\u002Fto\u002Flogo.png --deliverable \"business card\" --industry \"consulting\"\n\n# Full CIP set\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo \u002Fpath\u002Fto\u002Flogo.png --industry \"consulting\" --set\n\n# Pro model (4K text)\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo logo.png --deliverable \"business card\" --model pro\n\n# Without logo\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TechFlow\" --deliverable \"business card\" --no-logo-prompt\n```\n\nModels: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image`). Override the ids with `GEMINI_FLASH_IMAGE_MODEL` \u002F `GEMINI_PRO_IMAGE_MODEL`.\n\n### CIP: Render HTML Presentation\n\n```bash\npython3 scripts\u002Fcip\u002Frender-html.py --brand \"TopGroup\" --industry \"consulting\" --images \u002Fpath\u002Fto\u002Fcip-output\n```\n\n**Tip:** If no logo exists, use Logo Design section above first.\n\n## Slides (Built-in)\n\nStrategic HTML presentations with Chart.js, design tokens, copywriting formulas.\n\nLoad `references\u002Fslides-create.md` for the creation workflow.\n\n### Slides: Knowledge Base\n\n| Topic | File |\n|-------|------|\n| Creation Guide | `references\u002Fslides-create.md` |\n| Layout Patterns | `references\u002Fslides-layout-patterns.md` |\n| HTML Template | `references\u002Fslides-html-template.md` |\n| Copywriting | `references\u002Fslides-copywriting-formulas.md` |\n| Strategies | `references\u002Fslides-strategies.md` |\n\n## Banner Design (Built-in)\n\n22 art direction styles across social, ads, web, print. This workflow needs nothing outside the bundle: `references\u002Fbanner-sizes-and-styles.md` and the bundled `ui-ux-pro-max` skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.\n\nLoad `references\u002Fbanner-sizes-and-styles.md` for complete sizes and styles reference.\n\n### Banner: Workflow\n\n1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity\n2. **Research** — Read `references\u002Fbanner-sizes-and-styles.md` and use the bundled `ui-ux-pro-max` skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references\n3. **Design** — Create the HTML\u002FCSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one\n4. **Export** — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML\u002FCSS source and mark PNG export as pending\n5. **Present** — Show all options side-by-side, iterate on feedback\n\n### Banner: Quick Size Reference\n\n| Platform | Type | Size (px) |\n|----------|------|-----------|\n| Facebook | Cover | 820 x 312 |\n| Twitter\u002FX | Header | 1500 x 500 |\n| LinkedIn | Personal | 1584 x 396 |\n| YouTube | Channel art | 2560 x 1440 |\n| Instagram | Story | 1080 x 1920 |\n| Instagram | Post | 1080 x 1080 |\n| Google Ads | Med Rectangle | 300 x 250 |\n| Website | Hero | 1920 x 600-1080 |\n\n### Banner: Top Art Styles\n\n| Style | Best For |\n|-------|----------|\n| Minimalist | SaaS, tech |\n| Bold Typography | Announcements |\n| Gradient | Modern brands |\n| Photo-Based | Lifestyle, e-com |\n| Geometric | Tech, fintech |\n| Glassmorphism | SaaS, apps |\n| Neon\u002FCyberpunk | Gaming, events |\n\n### Banner: Design Rules\n\n- Safe zones: critical content in central 70-80%\n- One CTA per banner, bottom-right, min 44px height\n- Max 2 fonts, min 16px body, ≥32px headline\n- Text under 20% for ads (Meta penalizes)\n- Print: 300 DPI, CMYK, 3-5mm bleed\n\n## Icon Design (Built-in)\n\n15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.\n\n### Icon: Generate Single Icon\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"settings gear\" --style outlined\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"shopping cart\" --style filled --color \"#6366F1\"\npython3 scripts\u002Ficon\u002Fgenerate.py --name \"dashboard\" --category navigation --style duotone\n```\n\n### Icon: Generate Batch Variations\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"cloud upload\" --batch 4 --output-dir .\u002Ficons\n```\n\n### Icon: Multi-size Export\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"user profile\" --sizes \"16,24,32,48\" --output-dir .\u002Ficons\n```\n\n### Icon: Top Styles\n\n| Style | Best For |\n|-------|----------|\n| outlined | UI interfaces, web apps |\n| filled | Mobile apps, nav bars |\n| duotone | Marketing, landing pages |\n| rounded | Friendly apps, health |\n| sharp | Tech, fintech, enterprise |\n| flat | Material design, Google-style |\n| gradient | Modern brands, SaaS |\n\n**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.\n\n## Social Photos (Built-in)\n\nMulti-platform social image design: HTML\u002FCSS → screenshot export. Uses the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).\n\nLoad `references\u002Fsocial-photos-design.md` for sizes, templates, best practices.\n\n### Social Photos: Workflow\n\n1. **Orchestrate** — Track the steps below with the runtime's native task list; parallel subagents for independent work\n2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements\n3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`\n4. **Design** — bundled `brand` → `design-system` → `ui-ux-pro-max` skills; HTML per idea × size\n5. **Export** — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)\n6. **Verify** — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout\u002Fstyling issues and re-export\n7. **Report** — Summary to `plans\u002Freports\u002F` with design decisions\n8. **Organize** — Sort output files and reports into the project's asset directories\n\n### Social Photos: Key Sizes\n\n| Platform | Size (px) | Platform | Size (px) |\n|----------|-----------|----------|-----------|\n| IG Post | 1080×1080 | FB Post | 1200×630 |\n| IG Story | 1080×1920 | X Post | 1200×675 |\n| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |\n| YT Thumb | 1280×720 | Pinterest | 1000×1500 |\n\n## Workflows\n\n### Complete Brand Package\n\n1. **Logo** → `scripts\u002Flogo\u002Fgenerate.py` → Generate logo variants\n2. **CIP** → `scripts\u002Fcip\u002Fgenerate.py --logo ...` → Create deliverable mockups\n3. **Presentation** → Load `references\u002Fslides-create.md` → Build pitch deck\n\n### New Design System\n\n1. **Brand** (brand skill) → Define colors, typography, voice\n2. **Tokens** (design-system skill) → Create semantic token layers\n3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn\u002Fui\n\n## References\n\n| Topic | File |\n|-------|------|\n| Design Routing | `references\u002Fdesign-routing.md` |\n| Logo Design Guide | `references\u002Flogo-design.md` |\n| Logo Styles | `references\u002Flogo-style-guide.md` |\n| Logo Colors | `references\u002Flogo-color-psychology.md` |\n| Logo Prompts | `references\u002Flogo-prompt-engineering.md` |\n| CIP Design Guide | `references\u002Fcip-design.md` |\n| CIP Deliverables | `references\u002Fcip-deliverable-guide.md` |\n| CIP Styles | `references\u002Fcip-style-guide.md` |\n| CIP Prompts | `references\u002Fcip-prompt-engineering.md` |\n| Slides Create | `references\u002Fslides-create.md` |\n| Slides Layouts | `references\u002Fslides-layout-patterns.md` |\n| Slides Template | `references\u002Fslides-html-template.md` |\n| Slides Copy | `references\u002Fslides-copywriting-formulas.md` |\n| Slides Strategy | `references\u002Fslides-strategies.md` |\n| Banner Sizes & Styles | `references\u002Fbanner-sizes-and-styles.md` |\n| Social Photos Guide | `references\u002Fsocial-photos-design.md` |\n| Icon Design Guide | `references\u002Ficon-design.md` |\n\n## Scripts\n\n| Script | Purpose |\n|--------|---------|\n| `scripts\u002Flogo\u002Fsearch.py` | Search logo styles, colors, industries |\n| `scripts\u002Flogo\u002Fgenerate.py` | Generate logos with Gemini AI |\n| `scripts\u002Flogo\u002Fcore.py` | BM25 search engine for logo data |\n| `scripts\u002Fcip\u002Fsearch.py` | Search CIP deliverables, styles, industries |\n| `scripts\u002Fcip\u002Fgenerate.py` | Generate CIP mockups with Gemini |\n| `scripts\u002Fcip\u002Frender-html.py` | Render HTML presentation from CIP mockups |\n| `scripts\u002Fcip\u002Fcore.py` | BM25 search engine for CIP data |\n| `scripts\u002Ficon\u002Fgenerate.py` | Generate SVG icons with Gemini 3.1 Pro |\n\n## Prerequisites\n\n**Python:** This skill uses Python scripts. On Windows, use `python` instead of `python3` (e.g., `python scripts\u002Flogo\u002Fsearch.py` instead of `python3 scripts\u002Flogo\u002Fsearch.py`).\n\nCheck if Python is installed:\n```bash\npython3 --version || python --version\n```\n\n## Setup\n\n```bash\nexport GEMINI_API_KEY=\"your-key\"  # https:\u002F\u002Faistudio.google.com\u002Fapikey\npip install google-genai pillow\n\n# Optional MuAPI provider (no extra Python package required)\nexport MUAPI_API_KEY=\"your-key\"\n```\n\nMuAPI uses the asynchronous model endpoint and prediction result API. See the\n[MuAPI API reference](https:\u002F\u002Fmuapi.ai\u002Fdocs\u002Fapi-reference) for authentication\nand the [nano-banana model contract](https:\u002F\u002Fapi.muapi.ai\u002Fapi\u002Fv1\u002Fmodels\u002Fnano-banana)\nor [nano-banana-pro model contract](https:\u002F\u002Fapi.muapi.ai\u002Fapi\u002Fv1\u002Fmodels\u002Fnano-banana-pro)\nfor the current model-specific schemas. The logo generator supports both documented\nmodel slugs and sends their shared required `prompt` plus optional `aspect_ratio`\nfields; the Pro model also accepts an optional `resolution` field that this focused\nlogo workflow leaves at the provider default.\n\n> **Note for Windows:** Use `python` instead of `pip` where needed (e.g., `python -m pip install ...`).\n\n## Integration\n\n**Bundled sub-skills:** brand, design-system, ui-styling\n**Related Skills:** ui-ux-pro-max\n","# Design\n\nUnified design skill: brand, tokens, UI, logo, CIP, slides, banners, social photos, icons.\n\n## When to Use\n\n- Brand identity, voice, assets\n- Design system tokens and specs\n- UI styling with shadcn\u002Fui + Tailwind\n- Logo design and AI generation\n- Corporate identity program (CIP) deliverables\n- Presentations and pitch decks\n- Banner design for social media, ads, web, print\n- Social photos for Instagram, Facebook, LinkedIn, Twitter, Pinterest, TikTok\n\n## Sub-skill Routing\n\n| Task | Sub-skill | Details |\n|------|-----------|---------|\n| Brand identity, voice, assets | `brand` | Bundled sibling skill |\n| Tokens, specs, CSS vars | `design-system` | Bundled sibling skill |\n| shadcn\u002Fui, Tailwind, code | `ui-styling` | Bundled sibling skill |\n| Logo creation, AI generation | Logo (built-in) | `references\u002Flogo-design.md` |\n| CIP mockups, deliverables | CIP (built-in) | `references\u002Fcip-design.md` |\n| Presentations, pitch decks | Slides (built-in) | `references\u002Fslides.md` |\n| Banners, covers, headers | Banner (built-in) | `references\u002Fbanner-sizes-and-styles.md` |\n| Social media images\u002Fphotos | Social Photos (built-in) | `references\u002Fsocial-photos-design.md` |\n| SVG icons, icon sets | Icon (built-in) | `references\u002Ficon-design.md` |\n\n## Script Paths\n\nScript paths in this skill and its `references\u002F` are relative to the directory that contains this SKILL.md, not to the project: `scripts\u002F\u003Cfile>` is this skill's own `scripts\u002F` folder, and `..\u002F\u003Cskill>\u002Fscripts\u002F\u003Cfile>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs\u002Fbrand-guidelines.md`, `assets\u002Fdesign-tokens.json` or `src\u002F` relative to it.\n\n## Logo Design (Built-in)\n\n55+ styles, 30 color palettes, 25 industry guides. Gemini Nano Banana, Atlas\nCloud, and MuAPI image generation.\n\n### Logo: Generate Design Brief\n\n```bash\npython3 scripts\u002Flogo\u002Fsearch.py \"tech startup modern\" --design-brief -p \"BrandName\"\n```\n\n### Logo: Search Styles\u002FColors\u002FIndustries\n\n```bash\npython3 scripts\u002Flogo\u002Fsearch.py \"minimalist clean\" --domain style\npython3 scripts\u002Flogo\u002Fsearch.py \"tech professional\" --domain color\npython3 scripts\u002Flogo\u002Fsearch.py \"healthcare medical\" --domain industry\n```\n\n### Logo: Generate with AI\n\n**ALWAYS** generate output logo images with white background.\n\n```bash\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --style minimalist --industry tech\npython3 scripts\u002Flogo\u002Fgenerate.py --prompt \"coffee shop vintage badge\" --style vintage\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider atlas\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider muapi\npython3 scripts\u002Flogo\u002Fgenerate.py --brand \"TechFlow\" --provider muapi --muapi-model nano-banana-pro\n```\n\n**IMPORTANT:** When scripts fail, try to fix them directly.\n\nAfter generation, **ALWAYS** ask user about HTML preview via `AskUserQuestion`. If yes, use the bundled `ui-ux-pro-max` skill for the gallery.\n\n## CIP Design (Built-in)\n\n50+ deliverables, 20 styles, 20 industries. Gemini Nano Banana (Flash\u002FPro).\n\n### CIP: Generate Brief\n\n```bash\npython3 scripts\u002Fcip\u002Fsearch.py \"tech startup\" --cip-brief -b \"BrandName\"\n```\n\n### CIP: Search Domains\n\n```bash\npython3 scripts\u002Fcip\u002Fsearch.py \"business card letterhead\" --domain deliverable\npython3 scripts\u002Fcip\u002Fsearch.py \"luxury premium elegant\" --domain style\npython3 scripts\u002Fcip\u002Fsearch.py \"hospitality hotel\" --domain industry\npython3 scripts\u002Fcip\u002Fsearch.py \"office reception\" --domain mockup\n```\n\n### CIP: Generate Mockups\n\n```bash\n# With logo (RECOMMENDED)\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo \u002Fpath\u002Fto\u002Flogo.png --deliverable \"business card\" --industry \"consulting\"\n\n# Full CIP set\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo \u002Fpath\u002Fto\u002Flogo.png --industry \"consulting\" --set\n\n# Pro model (4K text)\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TopGroup\" --logo logo.png --deliverable \"business card\" --model pro\n\n# Without logo\npython3 scripts\u002Fcip\u002Fgenerate.py --brand \"TechFlow\" --deliverable \"business card\" --no-logo-prompt\n```\n\nModels: `flash` (default, `gemini-2.5-flash-image`), `pro` (`gemini-3-pro-image`). Override the ids with `GEMINI_FLASH_IMAGE_MODEL` \u002F `GEMINI_PRO_IMAGE_MODEL`.\n\n### CIP: Render HTML Presentation\n\n```bash\npython3 scripts\u002Fcip\u002Frender-html.py --brand \"TopGroup\" --industry \"consulting\" --images \u002Fpath\u002Fto\u002Fcip-output\n```\n\n**Tip:** If no logo exists, use Logo Design section above first.\n\n## Slides (Built-in)\n\nStrategic HTML presentations with Chart.js, design tokens, copywriting formulas.\n\nLoad `references\u002Fslides-create.md` for the creation workflow.\n\n### Slides: Knowledge Base\n\n| Topic | File |\n|-------|------|\n| Creation Guide | `references\u002Fslides-create.md` |\n| Layout Patterns | `references\u002Fslides-layout-patterns.md` |\n| HTML Template | `references\u002Fslides-html-template.md` |\n| Copywriting | `references\u002Fslides-copywriting-formulas.md` |\n| Strategies | `references\u002Fslides-strategies.md` |\n\n## Banner Design (Built-in)\n\n22 art direction styles across social, ads, web, print. This workflow needs nothing outside the bundle: `references\u002Fbanner-sizes-and-styles.md` and the bundled `ui-ux-pro-max` skill for style and palette guidance. Browser research, image generation, and screenshot capture are optional runtime capabilities; when unavailable, use supplied assets, CSS-built visuals, and the runtime's standard preview or capture workflow.\n\nLoad `references\u002Fbanner-sizes-and-styles.md` for complete sizes and styles reference.\n\n### Banner: Workflow\n\n1. **Gather requirements** via `AskUserQuestion` — purpose, platform, content, brand, style, quantity\n2. **Research** — Read `references\u002Fbanner-sizes-and-styles.md` and use the bundled `ui-ux-pro-max` skill for style and palette guidance; if browser research is available and permitted, collect 3–5 references\n3. **Design** — Create the HTML\u002FCSS banner at exact platform dimensions; use supplied assets or CSS-built visuals, or an authorized image-generation capability if the runtime provides one\n4. **Export** — Capture PNG at exact dimensions with the runtime's browser or screenshot capability; if unavailable, deliver the HTML\u002FCSS source and mark PNG export as pending\n5. **Present** — Show all options side-by-side, iterate on feedback\n\n### Banner: Quick Size Reference\n\n| Platform | Type | Size (px) |\n|----------|------|-----------|\n| Facebook | Cover | 820 x 312 |\n| Twitter\u002FX | Header | 1500 x 500 |\n| LinkedIn | Personal | 1584 x 396 |\n| YouTube | Channel art | 2560 x 1440 |\n| Instagram | Story | 1080 x 1920 |\n| Instagram | Post | 1080 x 1080 |\n| Google Ads | Med Rectangle | 300 x 250 |\n| Website | Hero | 1920 x 600-1080 |\n\n### Banner: Top Art Styles\n\n| Style | Best For |\n|-------|----------|\n| Minimalist | SaaS, tech |\n| Bold Typography | Announcements |\n| Gradient | Modern brands |\n| Photo-Based | Lifestyle, e-com |\n| Geometric | Tech, fintech |\n| Glassmorphism | SaaS, apps |\n| Neon\u002FCyberpunk | Gaming, events |\n\n### Banner: Design Rules\n\n- Safe zones: critical content in central 70-80%\n- One CTA per banner, bottom-right, min 44px height\n- Max 2 fonts, min 16px body, ≥32px headline\n- Text under 20% for ads (Meta penalizes)\n- Print: 300 DPI, CMYK, 3-5mm bleed\n\n## Icon Design (Built-in)\n\n15 styles, 12 categories. Gemini 3.1 Pro Preview generates SVG text output.\n\n### Icon: Generate Single Icon\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"settings gear\" --style outlined\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"shopping cart\" --style filled --color \"#6366F1\"\npython3 scripts\u002Ficon\u002Fgenerate.py --name \"dashboard\" --category navigation --style duotone\n```\n\n### Icon: Generate Batch Variations\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"cloud upload\" --batch 4 --output-dir .\u002Ficons\n```\n\n### Icon: Multi-size Export\n\n```bash\npython3 scripts\u002Ficon\u002Fgenerate.py --prompt \"user profile\" --sizes \"16,24,32,48\" --output-dir .\u002Ficons\n```\n\n### Icon: Top Styles\n\n| Style | Best For |\n|-------|----------|\n| outlined | UI interfaces, web apps |\n| filled | Mobile apps, nav bars |\n| duotone | Marketing, landing pages |\n| rounded | Friendly apps, health |\n| sharp | Tech, fintech, enterprise |\n| flat | Material design, Google-style |\n| gradient | Modern brands, SaaS |\n\n**Model:** `gemini-3.1-pro-preview` — text-only output (SVG is XML text). No image generation API needed.\n\n## Social Photos (Built-in)\n\nMulti-platform social image design: HTML\u002FCSS → screenshot export. Uses the bundled `ui-ux-pro-max`, `brand`, and `design-system` skills; screenshot export runs through Chrome headless, Playwright, or Puppeteer (see the reference).\n\nLoad `references\u002Fsocial-photos-design.md` for sizes, templates, best practices.\n\n### Social Photos: Workflow\n\n1. **Orchestrate** — Track the steps below with the runtime's native task list; parallel subagents for independent work\n2. **Analyze** — Parse prompt: subject, platforms, style, brand context, content elements\n3. **Ideate** — 3-5 concepts, present via `AskUserQuestion`\n4. **Design** — bundled `brand` → `design-system` → `ui-ux-pro-max` skills; HTML per idea × size\n5. **Export** — Chrome headless, Playwright, or Puppeteer screenshot at exact px (2x device scale factor where the tool supports it; see the reference)\n6. **Verify** — Open the exported PNGs in an available browser or image viewer and inspect them; fix layout\u002Fstyling issues and re-export\n7. **Report** — Summary to `plans\u002Freports\u002F` with design decisions\n8. **Organize** — Sort output files and reports into the project's asset directories\n\n### Social Photos: Key Sizes\n\n| Platform | Size (px) | Platform | Size (px) |\n|----------|-----------|----------|-----------|\n| IG Post | 1080×1080 | FB Post | 1200×630 |\n| IG Story | 1080×1920 | X Post | 1200×675 |\n| IG Carousel | 1080×1350 | LinkedIn | 1200×627 |\n| YT Thumb | 1280×720 | Pinterest | 1000×1500 |\n\n## Workflows\n\n### Complete Brand Package\n\n1. **Logo** → `scripts\u002Flogo\u002Fgenerate.py` → Generate logo variants\n2. **CIP** → `scripts\u002Fcip\u002Fgenerate.py --logo ...` → Create deliverable mockups\n3. **Presentation** → Load `references\u002Fslides-create.md` → Build pitch deck\n\n### New Design System\n\n1. **Brand** (brand skill) → Define colors, typography, voice\n2. **Tokens** (design-system skill) → Create semantic token layers\n3. **Implement** (ui-styling skill) → Configure Tailwind, shadcn\u002Fui\n\n## References\n\n| Topic | File |\n|-------|------|\n| Design Routing | `references\u002Fdesign-routing.md` |\n| Logo Design Guide | `references\u002Flogo-design.md` |\n| Logo Styles | `references\u002Flogo-style-guide.md` |\n| Logo Colors | `references\u002Flogo-color-psychology.md` |\n| Logo Prompts | `references\u002Flogo-prompt-engineering.md` |\n| CIP Design Guide | `references\u002Fcip-design.md` |\n| CIP Deliverables | `references\u002Fcip-deliverable-guide.md` |\n| CIP Styles | `references\u002Fcip-style-guide.md` |\n| CIP Prompts | `references\u002Fcip-prompt-engineering.md` |\n| Slides Create | `references\u002Fslides-create.md` |\n| Slides Layouts | `references\u002Fslides-layout-patterns.md` |\n| Slides Template | `references\u002Fslides-html-template.md` |\n| Slides Copy | `references\u002Fslides-copywriting-formulas.md` |\n| Slides Strategy | `references\u002Fslides-strategies.md` |\n| Banner Sizes & Styles | `references\u002Fbanner-sizes-and-styles.md` |\n| Social Photos Guide | `references\u002Fsocial-photos-design.md` |\n| Icon Design Guide | `references\u002Ficon-design.md` |\n\n## Scripts\n\n| Script | Purpose |\n|--------|---------|\n| `scripts\u002Flogo\u002Fsearch.py` | Search logo styles, colors, industries |\n| `scripts\u002Flogo\u002Fgenerate.py` | Generate logos with Gemini AI |\n| `scripts\u002Flogo\u002Fcore.py` | BM25 search engine for logo data |\n| `scripts\u002Fcip\u002Fsearch.py` | Search CIP deliverables, styles, industries |\n| `scripts\u002Fcip\u002Fgenerate.py` | Generate CIP mockups with Gemini |\n| `scripts\u002Fcip\u002Frender-html.py` | Render HTML presentation from CIP mockups |\n| `scripts\u002Fcip\u002Fcore.py` | BM25 search engine for CIP data |\n| `scripts\u002Ficon\u002Fgenerate.py` | Generate SVG icons with Gemini 3.1 Pro |\n\n## Prerequisites\n\n**Python:** This skill uses Python scripts. On Windows, use `python` instead of `python3` (e.g., `python scripts\u002Flogo\u002Fsearch.py` instead of `python3 scripts\u002Flogo\u002Fsearch.py`).\n\nCheck if Python is installed:\n```bash\npython3 --version || python --version\n```\n\n## Setup\n\n```bash\nexport GEMINI_API_KEY=\"your-key\"  # https:\u002F\u002Faistudio.google.com\u002Fapikey\npip install google-genai pillow\n\n# Optional MuAPI provider (no extra Python package required)\nexport MUAPI_API_KEY=\"your-key\"\n```\n\nMuAPI uses the asynchronous model endpoint and prediction result API. See the\n[MuAPI API reference](https:\u002F\u002Fmuapi.ai\u002Fdocs\u002Fapi-reference) for authentication\nand the [nano-banana model contract](https:\u002F\u002Fapi.muapi.ai\u002Fapi\u002Fv1\u002Fmodels\u002Fnano-banana)\nor [nano-banana-pro model contract](https:\u002F\u002Fapi.muapi.ai\u002Fapi\u002Fv1\u002Fmodels\u002Fnano-banana-pro)\nfor the current model-specific schemas. The logo generator supports both documented\nmodel slugs and sends their shared required `prompt` plus optional `aspect_ratio`\nfields; the Pro model also accepts an optional `resolution` field that this focused\nlogo workflow leaves at the provider default.\n\n> **Note for Windows:** Use `python` instead of `pip` where needed (e.g., `python -m pip install ...`).\n\n## Integration\n\n**Bundled sub-skills:** brand, design-system, ui-styling\n**Related Skills:** ui-ux-pro-max\n",{"name":5,"license":15,"metadata":59,"description":7,"argument-hint":62},{"author":60,"version":61},"claudekit","2.1.0","[design-type] [context]","main","7092b664627bf326748a6fcbf27fee6a34c4da1d","skills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign",0,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills","https:\u002F\u002Fgithub.com\u002Fmdnaimul22","AI Agents Workflows Automation | Specializing in Python, FastAPI, MCP Agents & Custom ERP.","2026-11-11 21:16:57",{"source":8,"skillName":5,"commands":72,"prompt":82,"zipAvailable":83},[73,76,79],{"tool":74,"command":75},"npx","npx skills add mdnaimul22\u002Fhuman-skills --skill design",{"tool":77,"command":78},"bunx","bunx skills add mdnaimul22\u002Fhuman-skills --skill design",{"tool":80,"command":81},"pnpm","pnpm dlx skills add mdnaimul22\u002Fhuman-skills --skill design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002FSKILL.md",true,[85,91,95,99,103,107,111,115,119,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,199,203,207,211,215,219,223,227,231,235],{"path":86,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":89,"sourceHtmlUrl":90},"data\u002Fcip\u002Fdeliverables.csv","ASSET","资产文件",13385,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Fcip\u002Fdeliverables.csv",{"path":92,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":93,"sourceHtmlUrl":94},"data\u002Fcip\u002Findustries.csv",4935,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Fcip\u002Findustries.csv",{"path":96,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":97,"sourceHtmlUrl":98},"data\u002Fcip\u002Fmockup-contexts.csv",5205,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Fcip\u002Fmockup-contexts.csv",{"path":100,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":101,"sourceHtmlUrl":102},"data\u002Fcip\u002Fstyles.csv",5967,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Fcip\u002Fstyles.csv",{"path":104,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":105,"sourceHtmlUrl":106},"data\u002Ficon\u002Fstyles.csv",2250,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Ficon\u002Fstyles.csv",{"path":108,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":109,"sourceHtmlUrl":110},"data\u002Flogo\u002Fcolors.csv",10674,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Flogo\u002Fcolors.csv",{"path":112,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":113,"sourceHtmlUrl":114},"data\u002Flogo\u002Findustries.csv",13274,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Flogo\u002Findustries.csv",{"path":116,"resourceType":87,"resourceTypeDesc":88,"sizeBytes":117,"sourceHtmlUrl":118},"data\u002Flogo\u002Fstyles.csv",13678,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fdata\u002Flogo\u002Fstyles.csv",{"path":120,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":123,"sourceHtmlUrl":124},"references\u002Fbanner-sizes-and-styles.md","REFERENCE","参考文档",4993,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fbanner-sizes-and-styles.md",{"path":126,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":127,"sourceHtmlUrl":128},"references\u002Fcip-deliverable-guide.md",1735,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fcip-deliverable-guide.md",{"path":130,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":131,"sourceHtmlUrl":132},"references\u002Fcip-design.md",4385,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fcip-design.md",{"path":134,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":135,"sourceHtmlUrl":136},"references\u002Fcip-prompt-engineering.md",2493,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fcip-prompt-engineering.md",{"path":138,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":139,"sourceHtmlUrl":140},"references\u002Fcip-style-guide.md",2357,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fcip-style-guide.md",{"path":142,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":143,"sourceHtmlUrl":144},"references\u002Fdesign-routing.md",5778,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fdesign-routing.md",{"path":146,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":147,"sourceHtmlUrl":148},"references\u002Ficon-design.md",4151,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Ficon-design.md",{"path":150,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":151,"sourceHtmlUrl":152},"references\u002Flogo-color-psychology.md",3341,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Flogo-color-psychology.md",{"path":154,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":155,"sourceHtmlUrl":156},"references\u002Flogo-design.md",4253,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Flogo-design.md",{"path":158,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":159,"sourceHtmlUrl":160},"references\u002Flogo-prompt-engineering.md",4314,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Flogo-prompt-engineering.md",{"path":162,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":163,"sourceHtmlUrl":164},"references\u002Flogo-style-guide.md",3435,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Flogo-style-guide.md",{"path":166,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":167,"sourceHtmlUrl":168},"references\u002Fslides-copywriting-formulas.md",2580,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides-copywriting-formulas.md",{"path":170,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":171,"sourceHtmlUrl":172},"references\u002Fslides-create.md",153,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides-create.md",{"path":174,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":175,"sourceHtmlUrl":176},"references\u002Fslides-html-template.md",9004,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides-html-template.md",{"path":178,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":179,"sourceHtmlUrl":180},"references\u002Fslides-layout-patterns.md",3667,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides-layout-patterns.md",{"path":182,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":183,"sourceHtmlUrl":184},"references\u002Fslides-strategies.md",2691,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides-strategies.md",{"path":186,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":187,"sourceHtmlUrl":188},"references\u002Fslides.md",1742,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fslides.md",{"path":190,"resourceType":121,"resourceTypeDesc":122,"sizeBytes":191,"sourceHtmlUrl":192},"references\u002Fsocial-photos-design.md",11294,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Freferences\u002Fsocial-photos-design.md",{"path":194,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":197,"sourceHtmlUrl":198},"scripts\u002Fcip\u002Fcore.py","SCRIPT","脚本",8062,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Fcip\u002Fcore.py",{"path":200,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":201,"sourceHtmlUrl":202},"scripts\u002Fcip\u002Fgenerate.py",20631,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Fcip\u002Fgenerate.py",{"path":204,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":205,"sourceHtmlUrl":206},"scripts\u002Fcip\u002Frender-html.py",13941,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Fcip\u002Frender-html.py",{"path":208,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":209,"sourceHtmlUrl":210},"scripts\u002Fcip\u002Fsearch.py",4524,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Fcip\u002Fsearch.py",{"path":212,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":213,"sourceHtmlUrl":214},"scripts\u002Ficon\u002Fgenerate.py",18999,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Ficon\u002Fgenerate.py",{"path":216,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":217,"sourceHtmlUrl":218},"scripts\u002Flogo\u002Fcore.py",6023,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Flogo\u002Fcore.py",{"path":220,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":221,"sourceHtmlUrl":222},"scripts\u002Flogo\u002Fgenerate.py",29116,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Flogo\u002Fgenerate.py",{"path":224,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":225,"sourceHtmlUrl":226},"scripts\u002Flogo\u002Fsearch.py",4745,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Flogo\u002Fsearch.py",{"path":228,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":229,"sourceHtmlUrl":230},"scripts\u002Flogo\u002Ftests\u002Ftest_generate.py",16414,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Flogo\u002Ftests\u002Ftest_generate.py",{"path":232,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":233,"sourceHtmlUrl":234},"scripts\u002Ftests\u002Ftest_cip_generate.py",4996,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Ftests\u002Ftest_cip_generate.py",{"path":236,"resourceType":195,"resourceTypeDesc":196,"sizeBytes":237,"sourceHtmlUrl":238},"scripts\u002Ftests\u002Ftest_icon_generate.py",7024,"https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fnextlevelbuilder_ui-ux-pro-max\u002Fdesign\u002Fscripts\u002Ftests\u002Ftest_icon_generate.py",[240,248,274,296,315,330],{"skillNo":241,"name":242,"nameZh":6,"description":243,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":244,"categories":245,"keywords":246,"publishedAt":247},"01M72JT3YP1SQHD0MANGDXQ4RT","higgsfield-websites","Build, edit, and deploy full-stack websites, apps and games via the Higgsfield CLI (`higgsfield website …`). Each is a React 19 + TanStack Start SSR app in one Cloudflare Worker (D1\u002FR2\u002FKV\u002FDO\u002FContainers). THREE product types, picked via `--type` on create: `website` (standalone, no Higgsfield integration — references\u002Fwebsite-flow.md), `app` (Sign in with Higgsfield + fnf SDK, Quanta — references\u002Fapp-flow.md), `game` (realtime multiplayer rooms — references\u002Fgame-flow.md). Routes to the right flow; each carries its own rules and deploy\u002Fpublish gates.\nUse when: \"build me a website\", \"make a landing page\", \"create a web app\", \"build a SaaS dashboard \u002F portfolio\", \"make me a game\", \"deploy this site\", \"publish\". Also owns GAME ART: \"make a spritesheet\", \"tileable texture\", \"animate a 3D character\", game music\u002FSFX — see the game-* references.\nNOT for: single image\u002Fvideo\u002Faudio generation (higgsfield-generate), product photos (higgsfield-product-photoshoot), marketplace cards (higgsfield-marketplace-cards).","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fhiggsfield-ai_skills\u002Fhiggsfield-websites\u002FSKILL.md",[],[],"2026-11-10 22:39:42",{"skillNo":249,"name":250,"nameZh":6,"description":251,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":252,"categories":253,"keywords":264,"publishedAt":54},"01M70JPK8HAXXA85P7Q8NKZZYG","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fwriting-skills\u002FSKILL.md",[254,257,260,261],{"categoryNo":255,"categoryName":256,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":258,"categoryName":259,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000036","内容创作者",{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":262,"categoryName":263,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[265,266,267,268,269,270,271,272,273],"writing","writing skills","editing","deployment","use","Existing","new","when","work",{"skillNo":275,"name":276,"nameZh":6,"description":277,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":278,"categories":279,"keywords":285,"publishedAt":54},"01M70JP4PHBH1CQVVDWZ94W159","writing-plans","Use when you have a spec or requirements for a multi-step task, before touching code","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fwriting-plans\u002FSKILL.md",[280,281,282],{"categoryNo":255,"categoryName":256,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":258,"categoryName":259,"taxonomyType":32,"taxonomyTypeDesc":33},{"categoryNo":283,"categoryName":284,"taxonomyType":32,"taxonomyTypeDesc":33},"01JBSEEDCAT000000000000030","开发工程师",[265,286,287,288,272,289,290,269,291,292,293,294,295],"writing plans","plans","you","code","for","requirements","task","multi","spec","multi-step task",{"skillNo":297,"name":298,"nameZh":6,"description":299,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":300,"categories":301,"keywords":302,"publishedAt":54},"01M70JNTYVGXFZT8PASZ844TH8","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fverification-before-completion\u002FSKILL.md",[],[303,304,305,306,307,308,269,309,310,311,272,312,273,313,314],"verification","verification before completion","complete","about","output","assertions","prs","evidence","claim","claims","commands","running",{"skillNo":316,"name":317,"nameZh":6,"description":318,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":319,"categories":320,"keywords":322,"publishedAt":54},"01M70JNGVSQDESWN0Q5BPJ875V","using-superpowers","Use when starting any conversation - establishes how to find and use skills, requiring skill invocation before ANY response including clarifying questions","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fusing-superpowers\u002FSKILL.md",[321],{"categoryNo":27,"categoryName":28,"taxonomyType":21,"taxonomyTypeDesc":22},[323,324,325,326,269,272,327,328,329],"using superpowers","superpowers","conversation","how to","how","find","questions",{"skillNo":331,"name":332,"nameZh":6,"description":333,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":334,"categories":335,"keywords":336,"publishedAt":54},"01M70JN57CE588NPYPYTWH1DWG","using-git-worktrees","Use when starting feature work that needs isolation from current workspace or before executing implementation plans - ensures an isolated workspace exists via native tools or git worktree fallback","https:\u002F\u002Fgithub.com\u002Fmdnaimul22\u002Fhuman-skills\u002Fblob\u002Fmain\u002Fskills\u002Fstorage\u002Fobra_superpowers\u002Fusing-git-worktrees\u002FSKILL.md",[],[337,338,339,340,341,342,272,273,343,344,345,346,347,348,349,287,269,350,351],"using git worktrees","Using git","git","worktrees","git worktrees","implementation","git worktree","worktree","native","Tools","isolation","fallback","feature","via","workspace"]