[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JCET39AAEVW4WSSZ10JB5J":3,"skill-same:01M6JCET39AAEVW4WSSZ10JB5J":92},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":70,"commitSha":71,"skillDirectory":72,"forksCount":73,"repositoryHtmlUrl":74,"repositoryHomepageUrl":75,"ownerHtmlUrl":76,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":77,"install":78,"resources":91},"01M6JCET39AAEVW4WSSZ10JB5J","baoyu-visual-skills",null,"Generate infographics, knowledge comics, and article illustrations using the baoyu system (by 宝玉\u002FJimLiu). Covers 21 layouts × 21 styles for infographics, 6 art styles × 7 tones for comics, and 6 illustration types. All use image_generate tool with prompt-only workflow.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcreative\u002Fbaoyu-visual-skills\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"baoyu visual skills","visual","Art","for","article illustrations","types","article","illustration","infographic","image-generation","image","only","tool","system","knowledge","generate","windows","workflow","linux","macos","2026-11-10 10:12:30",false,"---\nname: baoyu-visual-skills\ndescription: \"Generate infographics, knowledge comics, and article illustrations using the baoyu system (by 宝玉\u002FJimLiu). Covers 21 layouts × 21 styles for infographics, 6 art styles × 7 tones for comics, and 6 illustration types. All use image_generate tool with prompt-only workflow.\"\nversion: 1.0.0\nauthor: Hermes Agent (adapted from baoyu-skills by JimLiu)\nlicense: MIT\nplatforms: [linux, macos, windows]\nmetadata:\n  hermes:\n    tags: [baoyu, infographic, comic, article-illustration, image-generation, visual-content]\n    related_skills: []\n---\n\n# Baoyu Visual Skills — Infographics, Comics & Article Illustrations\n\nThree visual content generators from the baoyu suite (by 宝玉\u002FJimLiu), all sharing the same `image_generate`-based backend, prompt-only workflow, and file structure conventions.\n\n## Section 1: Infographics (baoyu-infographic)\n\n21 layouts × 21 styles for creating information graphics, data visualizations, and educational diagrams.\n\n### When to Use\nUser asks for infographic, visual summary, information graphic, \"信息图\", \"可视化\", or \"高密度信息大图\".\n\n### Layouts (21)\n\n| Layout | Best For |\n|--------|----------|\n| `linear-progression` | Timelines, processes, tutorials |\n| `binary-comparison` | A vs B, before-after, pros-cons |\n| `comparison-matrix` | Multi-factor comparisons |\n| `hierarchical-layers` | Pyramids, priority levels |\n| `tree-branching` | Categories, taxonomies |\n| `hub-spoke` | Central concept with related items |\n| `structural-breakdown` | Exploded views, cross-sections |\n| `bento-grid` | Multiple topics, overview (default) |\n| `iceberg` | Surface vs hidden aspects |\n| `bridge` | Problem-solution |\n| `funnel` | Conversion, filtering |\n| `isometric-map` | Spatial relationships |\n| `dashboard` | Metrics, KPIs |\n| `periodic-table` | Categorized collections |\n| `comic-strip` | Narratives, sequences |\n| `story-mountain` | Plot structure, tension arcs |\n| `jigsaw` | Interconnected parts |\n| `venn-diagram` | Overlapping concepts |\n| `winding-roadmap` | Journey, milestones |\n| `circular-flow` | Cycles, recurring processes |\n| `dense-modules` | High-density modules, data-rich guides |\n\n### Styles (21)\n\n`craft-handmade` (default), `claymation`, `kawaii`, `storybook-watercolor`, `chalkboard`, `cyberpunk-neon`, `bold-graphic`, `aged-academia`, `corporate-memphis`, `technical-schematic`, `origami`, `pixel-art`, `ui-wireframe`, `subway-map`, `ikea-manual`, `knolling`, `lego-brick`, `pop-laboratory`, `morandi-journal`, `retro-pop-grid`, `hand-drawn-edu`\n\n### Workflow\n1. Analyze content → save source + analysis files\n2. Recommend 3-5 layout × style combinations based on content structure\n3. Confirm with user (combination, aspect ratio, language)\n4. Generate prompt using layout + style definitions → save to `prompts\u002Finfographic.md`\n5. Generate image via `image_generate` → download URL to output directory\n6. Report summary\n\nOutput structure: `infographic\u002F{topic-slug}\u002F` with `source`, `analysis.md`, `structured-content.md`, `prompts\u002F`, and final PNG.\n\n### Keyword Shortcuts\n- `high-density-info` \u002F `高密度信息大图` → auto-select `dense-modules` + `morandi-journal`\u002F`pop-laboratory`\u002F`retro-pop-grid`\n- `infographic` \u002F `信息图` → auto-select `bento-grid` + `craft-handmade`\n\n---\n\n## Section 2: Knowledge Comics (baoyu-comic)\n\nCreate educational\u002Feducational comics with flexible art style × tone combinations.\n\n### When to Use\nUser asks for knowledge comic, 知识漫画, educational comic, biography comic, tutorial comic, or Logicomix-style.\n\n### Art Styles (6)\n\n| Style | Best For |\n|-------|----------|\n| `ligne-claire` (default) | Clear line, Tintin-style, clean storytelling |\n| `manga` | Japanese manga aesthetics |\n| `realistic` | Detailed, lifelike rendering |\n| `ink-brush` | Traditional Chinese ink painting style |\n| `chalk` | Chalkboard\u002Fclassroom feel |\n| `minimalist` | Simple, clean, icon-focused |\n\n### Tones (7)\n`neutral` (default), `warm`, `dramatic`, `romantic`, `energetic`, `vintage`, `action`\n\n### Presets (5)\n| Preset | Art + Tone | Special |\n|--------|-----------|---------|\n| `ohmsha` | manga + neutral | Visual metaphors, no talking heads, gadget reveals |\n| `wuxia` | ink-brush + action | Qi effects, combat visuals, atmospheric |\n| `shoujo` | manga + romantic | Decorative elements, eye details, romantic beats |\n| `concept-story` | manga + warm | Visual symbol system, growth arc |\n| `four-panel` | minimalist + neutral + four-panel layout | 起承转合 structure, B&W + spot color |\n\n### Layouts\n`standard` (default), `cinematic`, `dense`, `splash`, `mixed`, `webtoon`, `four-panel`\n\n### Workflow\n1. Analyze content → save source + analysis\n2. Confirm style, tone, layout, aspect ratio with user\n3. Generate storyboard + character definitions\n4. Generate prompts per page (with character descriptions embedded)\n5. Generate images via `image_generate` → download each to local PNG\n6. Character sheet optional (human review artifact)\n\nOutput structure: `comic\u002F{topic-slug}\u002F` with `source`, `analysis.md`, `storyboard.md`, `characters\u002F`, `prompts\u002F`, and PNG pages.\n\n### Character Consistency\n- Character descriptions in `characters\u002Fcharacters.md` text format\n- Embedded inline in every page's `image_generate` prompt\n- PNG character sheet optional (human-facing, not input to image model)\n\n---\n\n## Section 3: Article Illustrations (baoyu-article-illustrator)\n\nAnalyze articles, identify illustration positions, generate images with Type × Style × Palette consistency.\n\n### When to Use\nUser asks to illustrate an article, add images, generate illustrations for content, \"为文章配图\", or \"illustrate article\".\n\n### Types (6)\n| Type | Best For |\n|------|----------|\n| `infographic` | Data, metrics, technical |\n| `scene` | Narratives, emotional |\n| `flowchart` | Processes, workflows |\n| `comparison` | Side-by-side, options |\n| `framework` | Models, architecture |\n| `timeline` | History, evolution |\n\n### Styles\nCore: `notion-style`, `warm-illustration`, `minimal-flat`, `tech-blueprint`, `watercolor`, `elegant-line`\n\nFull style gallery: `references\u002Fstyles.md`\n\n### Palettes (optional)\n`macaron`, `warm`, `neon` — override style's default colors. Or define custom palette.\n\n### Workflow\n1. Detect reference images (analyze via `vision_analyze` for style traits)\n2. Analyze content (type, purpose, core arguments, positions for illustrations)\n3. Confirm settings (preset\u002Ftype, density, style, palette, language)\n4. Generate outline with per-illustration entries\n5. Generate prompts per illustration\n6. Generate images via `image_generate` → download each\n7. Insert `![](relative\u002Fpath)` into article after corresponding paragraph\n\nOutput structure: `{output-dir}\u002F` with `source`, `analysis.md`, `outline.md`, `prompts\u002F`, and PNGs.\n\n---\n\n## Shared Conventions\n\n### File Structure\n```\n{type}\u002F{topic-slug}\u002F\n├── source-{slug}.{ext}\n├── analysis.md\n├── prompts\u002F\n│   └── NN-{type}-{slug}.md\n└── NN-{type}-{slug}.png\n```\n\n### Aspect Ratio Mapping\n| Storyboard\u002FDesign ratio | image_generate format |\n|------------------------|-----------------------|\n| `16:9`, `4:3`, `3:2` | `landscape` |\n| `9:16`, `3:4`, `2:3` | `portrait` |\n| `1:1` | `square` |\n\n### Core Principles (All Baoyu Skills)\n1. **Data integrity** — never summarize or paraphrase source statistics\n2. **Strip secrets** — scan for API keys, tokens, or credentials before writing any output\n3. **Prompt files are mandatory** — save prompt to disk before every `image_generate` call\n4. **Always download** the URL returned by `image_generate` to a local file (the tool returns a URL, not a file)\n5. **Use absolute paths for curl** — never trust persistent-shell CWD across batches\n6. **Backup before regenerating** — existing files get `-backup-YYYYMMDD-HHMMSS` suffix\n\n### `clarify` Timeout Handling\nWhen `clarify` times out (no user response):\n- Use best judgment for THAT question only\n- Continue asking remaining questions if more are needed\n- Surface the default visibly so user can correct later\n\n---\n\n## Pitfalls\n\n1. **image_generate does not accept images** — it's prompt + aspect ratio only. Reference images must be described textually via `vision_analyze`.\n2. **Always download URLs** — `image_generate` returns a URL, not a local path. Use `curl -fsSL \"\u003Curl>\" -o \u002Fabs\u002Fpath\u002Fto\u002Ffile.png`\n3. **Absolute output paths** — never relative paths for `curl -o`; CWD can drift between batches\n4. **No backend selection** — `image_generate` uses whatever model the user configured; don't write model names into prompts\n5. **One concept per section** — each illustration\u002Fcomic page\u002Finfographic section should convey one clear concept\n6. **Comic Step 2 confirmation required** — don't skip style+tone confirmation\n7. **Metaphors vs concepts** — illustrate the underlying concept, not the literal metaphor\n8. **Character consistency is text-driven** — embed character descriptions in every page prompt","# Baoyu Visual Skills — Infographics, Comics & Article Illustrations\n\nThree visual content generators from the baoyu suite (by 宝玉\u002FJimLiu), all sharing the same `image_generate`-based backend, prompt-only workflow, and file structure conventions.\n\n## Section 1: Infographics (baoyu-infographic)\n\n21 layouts × 21 styles for creating information graphics, data visualizations, and educational diagrams.\n\n### When to Use\nUser asks for infographic, visual summary, information graphic, \"信息图\", \"可视化\", or \"高密度信息大图\".\n\n### Layouts (21)\n\n| Layout | Best For |\n|--------|----------|\n| `linear-progression` | Timelines, processes, tutorials |\n| `binary-comparison` | A vs B, before-after, pros-cons |\n| `comparison-matrix` | Multi-factor comparisons |\n| `hierarchical-layers` | Pyramids, priority levels |\n| `tree-branching` | Categories, taxonomies |\n| `hub-spoke` | Central concept with related items |\n| `structural-breakdown` | Exploded views, cross-sections |\n| `bento-grid` | Multiple topics, overview (default) |\n| `iceberg` | Surface vs hidden aspects |\n| `bridge` | Problem-solution |\n| `funnel` | Conversion, filtering |\n| `isometric-map` | Spatial relationships |\n| `dashboard` | Metrics, KPIs |\n| `periodic-table` | Categorized collections |\n| `comic-strip` | Narratives, sequences |\n| `story-mountain` | Plot structure, tension arcs |\n| `jigsaw` | Interconnected parts |\n| `venn-diagram` | Overlapping concepts |\n| `winding-roadmap` | Journey, milestones |\n| `circular-flow` | Cycles, recurring processes |\n| `dense-modules` | High-density modules, data-rich guides |\n\n### Styles (21)\n\n`craft-handmade` (default), `claymation`, `kawaii`, `storybook-watercolor`, `chalkboard`, `cyberpunk-neon`, `bold-graphic`, `aged-academia`, `corporate-memphis`, `technical-schematic`, `origami`, `pixel-art`, `ui-wireframe`, `subway-map`, `ikea-manual`, `knolling`, `lego-brick`, `pop-laboratory`, `morandi-journal`, `retro-pop-grid`, `hand-drawn-edu`\n\n### Workflow\n1. Analyze content → save source + analysis files\n2. Recommend 3-5 layout × style combinations based on content structure\n3. Confirm with user (combination, aspect ratio, language)\n4. Generate prompt using layout + style definitions → save to `prompts\u002Finfographic.md`\n5. Generate image via `image_generate` → download URL to output directory\n6. Report summary\n\nOutput structure: `infographic\u002F{topic-slug}\u002F` with `source`, `analysis.md`, `structured-content.md`, `prompts\u002F`, and final PNG.\n\n### Keyword Shortcuts\n- `high-density-info` \u002F `高密度信息大图` → auto-select `dense-modules` + `morandi-journal`\u002F`pop-laboratory`\u002F`retro-pop-grid`\n- `infographic` \u002F `信息图` → auto-select `bento-grid` + `craft-handmade`\n\n---\n\n## Section 2: Knowledge Comics (baoyu-comic)\n\nCreate educational\u002Feducational comics with flexible art style × tone combinations.\n\n### When to Use\nUser asks for knowledge comic, 知识漫画, educational comic, biography comic, tutorial comic, or Logicomix-style.\n\n### Art Styles (6)\n\n| Style | Best For |\n|-------|----------|\n| `ligne-claire` (default) | Clear line, Tintin-style, clean storytelling |\n| `manga` | Japanese manga aesthetics |\n| `realistic` | Detailed, lifelike rendering |\n| `ink-brush` | Traditional Chinese ink painting style |\n| `chalk` | Chalkboard\u002Fclassroom feel |\n| `minimalist` | Simple, clean, icon-focused |\n\n### Tones (7)\n`neutral` (default), `warm`, `dramatic`, `romantic`, `energetic`, `vintage`, `action`\n\n### Presets (5)\n| Preset | Art + Tone | Special |\n|--------|-----------|---------|\n| `ohmsha` | manga + neutral | Visual metaphors, no talking heads, gadget reveals |\n| `wuxia` | ink-brush + action | Qi effects, combat visuals, atmospheric |\n| `shoujo` | manga + romantic | Decorative elements, eye details, romantic beats |\n| `concept-story` | manga + warm | Visual symbol system, growth arc |\n| `four-panel` | minimalist + neutral + four-panel layout | 起承转合 structure, B&W + spot color |\n\n### Layouts\n`standard` (default), `cinematic`, `dense`, `splash`, `mixed`, `webtoon`, `four-panel`\n\n### Workflow\n1. Analyze content → save source + analysis\n2. Confirm style, tone, layout, aspect ratio with user\n3. Generate storyboard + character definitions\n4. Generate prompts per page (with character descriptions embedded)\n5. Generate images via `image_generate` → download each to local PNG\n6. Character sheet optional (human review artifact)\n\nOutput structure: `comic\u002F{topic-slug}\u002F` with `source`, `analysis.md`, `storyboard.md`, `characters\u002F`, `prompts\u002F`, and PNG pages.\n\n### Character Consistency\n- Character descriptions in `characters\u002Fcharacters.md` text format\n- Embedded inline in every page's `image_generate` prompt\n- PNG character sheet optional (human-facing, not input to image model)\n\n---\n\n## Section 3: Article Illustrations (baoyu-article-illustrator)\n\nAnalyze articles, identify illustration positions, generate images with Type × Style × Palette consistency.\n\n### When to Use\nUser asks to illustrate an article, add images, generate illustrations for content, \"为文章配图\", or \"illustrate article\".\n\n### Types (6)\n| Type | Best For |\n|------|----------|\n| `infographic` | Data, metrics, technical |\n| `scene` | Narratives, emotional |\n| `flowchart` | Processes, workflows |\n| `comparison` | Side-by-side, options |\n| `framework` | Models, architecture |\n| `timeline` | History, evolution |\n\n### Styles\nCore: `notion-style`, `warm-illustration`, `minimal-flat`, `tech-blueprint`, `watercolor`, `elegant-line`\n\nFull style gallery: `references\u002Fstyles.md`\n\n### Palettes (optional)\n`macaron`, `warm`, `neon` — override style's default colors. Or define custom palette.\n\n### Workflow\n1. Detect reference images (analyze via `vision_analyze` for style traits)\n2. Analyze content (type, purpose, core arguments, positions for illustrations)\n3. Confirm settings (preset\u002Ftype, density, style, palette, language)\n4. Generate outline with per-illustration entries\n5. Generate prompts per illustration\n6. Generate images via `image_generate` → download each\n7. Insert `![](relative\u002Fpath)` into article after corresponding paragraph\n\nOutput structure: `{output-dir}\u002F` with `source`, `analysis.md`, `outline.md`, `prompts\u002F`, and PNGs.\n\n---\n\n## Shared Conventions\n\n### File Structure\n```\n{type}\u002F{topic-slug}\u002F\n├── source-{slug}.{ext}\n├── analysis.md\n├── prompts\u002F\n│   └── NN-{type}-{slug}.md\n└── NN-{type}-{slug}.png\n```\n\n### Aspect Ratio Mapping\n| Storyboard\u002FDesign ratio | image_generate format |\n|------------------------|-----------------------|\n| `16:9`, `4:3`, `3:2` | `landscape` |\n| `9:16`, `3:4`, `2:3` | `portrait` |\n| `1:1` | `square` |\n\n### Core Principles (All Baoyu Skills)\n1. **Data integrity** — never summarize or paraphrase source statistics\n2. **Strip secrets** — scan for API keys, tokens, or credentials before writing any output\n3. **Prompt files are mandatory** — save prompt to disk before every `image_generate` call\n4. **Always download** the URL returned by `image_generate` to a local file (the tool returns a URL, not a file)\n5. **Use absolute paths for curl** — never trust persistent-shell CWD across batches\n6. **Backup before regenerating** — existing files get `-backup-YYYYMMDD-HHMMSS` suffix\n\n### `clarify` Timeout Handling\nWhen `clarify` times out (no user response):\n- Use best judgment for THAT question only\n- Continue asking remaining questions if more are needed\n- Surface the default visibly so user can correct later\n\n---\n\n## Pitfalls\n\n1. **image_generate does not accept images** — it's prompt + aspect ratio only. Reference images must be described textually via `vision_analyze`.\n2. **Always download URLs** — `image_generate` returns a URL, not a local path. Use `curl -fsSL \"\u003Curl>\" -o \u002Fabs\u002Fpath\u002Fto\u002Ffile.png`\n3. **Absolute output paths** — never relative paths for `curl -o`; CWD can drift between batches\n4. **No backend selection** — `image_generate` uses whatever model the user configured; don't write model names into prompts\n5. **One concept per section** — each illustration\u002Fcomic page\u002Finfographic section should convey one clear concept\n6. **Comic Step 2 confirmation required** — don't skip style+tone confirmation\n7. **Metaphors vs concepts** — illustrate the underlying concept, not the literal metaphor\n8. **Character consistency is text-driven** — embed character descriptions in every page prompt",{"name":5,"author":59,"license":14,"version":60,"metadata":61,"platforms":69,"description":7},"Hermes Agent (adapted from baoyu-skills by JimLiu)","1.0.0",{"hermes":62},{"tags":63,"related_skills":68},[64,42,65,66,43,67],"baoyu","comic","article-illustration","visual-content",[],[52,53,50],"master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcreative\u002Fbaoyu-visual-skills",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":79,"prompt":89,"zipAvailable":90},[80,83,86],{"tool":81,"command":82},"npx","npx skills add S3YED\u002Fappie-kit --skill baoyu-visual-skills",{"tool":84,"command":85},"bunx","bunx skills add S3YED\u002Fappie-kit --skill baoyu-visual-skills",{"tool":87,"command":88},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill baoyu-visual-skills","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcreative\u002Fbaoyu-visual-skills\u002FSKILL.md",true,[],[93,123,154,180,208,231],{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":104,"publishedAt":54},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[99,102,103],{"categoryNo":100,"categoryName":101,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":135,"publishedAt":54},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[129,132],{"categoryNo":130,"categoryName":131,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":133,"categoryName":134,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师",[136,137,138,47,139,140,141,142,49,143,144,145,146,147,148,149,150,151,152,153],"design","agentic","design system","ingestion","webdesign","agentic webdesign design system ingestion","components","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":162,"publishedAt":54},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[160,161],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":133,"categoryName":134,"taxonomyType":31,"taxonomyTypeDesc":32},[137,163,140,164,165,166,142,167,168,169,170,171,172,173,174,175,176,177,178,179],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":190,"publishedAt":54},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[186,189],{"categoryNo":187,"categoryName":188,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[191,192,193,53,194,52,50,195,196,197,198,199,200,201,202,203,204,205,206,207],"deployment","vercel deployment","vercel","cli","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":209,"name":210,"nameZh":6,"description":211,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":212,"categories":213,"keywords":215,"publishedAt":54},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[214],{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[216,217,218,219,220,221,51,222,223,224,225,226,227,228,229,230,37],"workflows","quality","software","software quality workflows","review","tdd","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":232,"name":233,"nameZh":6,"description":234,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":235,"categories":236,"keywords":244,"publishedAt":54},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[237,240,243],{"categoryNo":238,"categoryName":239,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":241,"categoryName":242,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[245,246,247,248,249,250,251,252,53,253,254,142,255,50,256,224,257,258,259,260],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]