[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MF7S45FPT6F5BVZR7RNG3A":3,"skill-same:01M6MF7S45FPT6F5BVZR7RNG3A":82},{"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":23,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":61,"commitSha":62,"skillDirectory":63,"forksCount":64,"repositoryHtmlUrl":65,"repositoryHomepageUrl":6,"ownerHtmlUrl":66,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":67,"install":68,"resources":81},"01M6MF7S45FPT6F5BVZR7RNG3A","excalidraw",null,"Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.","ibragimov-oasis\u002Fvibe-coder","ibragimov-oasis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240665573?v=4","01M6DF78Y45R8228FHAZ7G6JXM","IBRAGIMOV MUKHAMMADJON","01M6K5ZYR8TDPAFG4R6693E2A6",3,"MIT","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fexcalidraw\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[5,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"maps","sequence","for","concept","at","hand","can","more","links","style","architecture","files","diagrams","format","json","visualization","generate","create","architecture diagrams","2026-11-10 10:12:30",false,"---\nname: excalidraw\ndescription: Create hand-drawn style diagrams using Excalidraw JSON format. Generate .excalidraw files for architecture diagrams, flowcharts, sequence diagrams, concept maps, and more. Files can be opened at excalidraw.com or uploaded for shareable links.\nversion: 1.0.0\nauthor: Hermes Agent\nlicense: MIT\ndependencies: []\nmetadata:\n  hermes:\n    tags: [Excalidraw, Diagrams, Flowcharts, Architecture, Visualization, JSON]\n    related_skills: []\n\n---\n\n# Excalidraw Diagram Skill\n\nCreate diagrams by writing standard Excalidraw element JSON and saving as `.excalidraw` files. These files can be drag-and-dropped onto [excalidraw.com](https:\u002F\u002Fexcalidraw.com) for viewing and editing. No accounts, no API keys, no rendering libraries -- just JSON.\n\n## Workflow\n\n1. **Load this skill** (you already did)\n2. **Write the elements JSON** -- an array of Excalidraw element objects\n3. **Save the file** using `write_file` to create a `.excalidraw` file\n4. **Optionally upload** for a shareable link using `scripts\u002Fupload.py` via `terminal`\n\n### Saving a Diagram\n\nWrap your elements array in the standard `.excalidraw` envelope and save with `write_file`:\n\n```json\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"hermes-agent\",\n  \"elements\": [ ...your elements array here... ],\n  \"appState\": {\n    \"viewBackgroundColor\": \"#ffffff\"\n  }\n}\n```\n\nSave to any path, e.g. `~\u002Fdiagrams\u002Fmy_diagram.excalidraw`.\n\n### Uploading for a Shareable Link\n\nRun the upload script (located in this skill's `scripts\u002F` directory) via terminal:\n\n```bash\npython skills\u002Fdiagramming\u002Fexcalidraw\u002Fscripts\u002Fupload.py ~\u002Fdiagrams\u002Fmy_diagram.excalidraw\n```\n\nThis uploads to excalidraw.com (no account needed) and prints a shareable URL. Requires the `cryptography` pip package (`pip install cryptography`).\n\n---\n\n## Element Format Reference\n\n### Required Fields (all elements)\n`type`, `id` (unique string), `x`, `y`, `width`, `height`\n\n### Defaults (skip these -- they're applied automatically)\n- `strokeColor`: `\"#1e1e1e\"`\n- `backgroundColor`: `\"transparent\"`\n- `fillStyle`: `\"solid\"`\n- `strokeWidth`: `2`\n- `roughness`: `1` (hand-drawn look)\n- `opacity`: `100`\n\nCanvas background is white.\n\n### Element Types\n\n**Rectangle**:\n```json\n{ \"type\": \"rectangle\", \"id\": \"r1\", \"x\": 100, \"y\": 100, \"width\": 200, \"height\": 100 }\n```\n- `roundness: { \"type\": 3 }` for rounded corners\n- `backgroundColor: \"#a5d8ff\"`, `fillStyle: \"solid\"` for filled\n\n**Ellipse**:\n```json\n{ \"type\": \"ellipse\", \"id\": \"e1\", \"x\": 100, \"y\": 100, \"width\": 150, \"height\": 150 }\n```\n\n**Diamond**:\n```json\n{ \"type\": \"diamond\", \"id\": \"d1\", \"x\": 100, \"y\": 100, \"width\": 150, \"height\": 150 }\n```\n\n**Labeled shape (container binding)** -- create a text element bound to the shape:\n\n> **WARNING:** Do NOT use `\"label\": { \"text\": \"...\" }` on shapes. This is NOT a valid\n> Excalidraw property and will be silently ignored, producing blank shapes. You MUST\n> use the container binding approach below.\n\nThe shape needs `boundElements` listing the text, and the text needs `containerId` pointing back:\n```json\n{ \"type\": \"rectangle\", \"id\": \"r1\", \"x\": 100, \"y\": 100, \"width\": 200, \"height\": 80,\n  \"roundness\": { \"type\": 3 }, \"backgroundColor\": \"#a5d8ff\", \"fillStyle\": \"solid\",\n  \"boundElements\": [{ \"id\": \"t_r1\", \"type\": \"text\" }] },\n{ \"type\": \"text\", \"id\": \"t_r1\", \"x\": 105, \"y\": 110, \"width\": 190, \"height\": 25,\n  \"text\": \"Hello\", \"fontSize\": 20, \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\",\n  \"textAlign\": \"center\", \"verticalAlign\": \"middle\",\n  \"containerId\": \"r1\", \"originalText\": \"Hello\", \"autoResize\": true }\n```\n- Works on rectangle, ellipse, diamond\n- Text is auto-centered by Excalidraw when `containerId` is set\n- The text `x`\u002F`y`\u002F`width`\u002F`height` are approximate -- Excalidraw recalculates them on load\n- `originalText` should match `text`\n- Always include `fontFamily: 1` (Virgil\u002Fhand-drawn font)\n\n**Labeled arrow** -- same container binding approach:\n```json\n{ \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 200, \"height\": 0,\n  \"points\": [[0,0],[200,0]], \"endArrowhead\": \"arrow\",\n  \"boundElements\": [{ \"id\": \"t_a1\", \"type\": \"text\" }] },\n{ \"type\": \"text\", \"id\": \"t_a1\", \"x\": 370, \"y\": 130, \"width\": 60, \"height\": 20,\n  \"text\": \"connects\", \"fontSize\": 16, \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\",\n  \"textAlign\": \"center\", \"verticalAlign\": \"middle\",\n  \"containerId\": \"a1\", \"originalText\": \"connects\", \"autoResize\": true }\n```\n\n**Standalone text** (titles and annotations only -- no container):\n```json\n{ \"type\": \"text\", \"id\": \"t1\", \"x\": 150, \"y\": 138, \"text\": \"Hello\", \"fontSize\": 20,\n  \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\", \"originalText\": \"Hello\", \"autoResize\": true }\n```\n- `x` is the LEFT edge. To center at position `cx`: `x = cx - (text.length * fontSize * 0.5) \u002F 2`\n- Do NOT rely on `textAlign` or `width` for positioning\n\n**Arrow**:\n```json\n{ \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 200, \"height\": 0,\n  \"points\": [[0,0],[200,0]], \"endArrowhead\": \"arrow\" }\n```\n- `points`: `[dx, dy]` offsets from element `x`, `y`\n- `endArrowhead`: `null` | `\"arrow\"` | `\"bar\"` | `\"dot\"` | `\"triangle\"`\n- `strokeStyle`: `\"solid\"` (default) | `\"dashed\"` | `\"dotted\"`\n\n### Arrow Bindings (connect arrows to shapes)\n\n```json\n{\n  \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 150, \"height\": 0,\n  \"points\": [[0,0],[150,0]], \"endArrowhead\": \"arrow\",\n  \"startBinding\": { \"elementId\": \"r1\", \"fixedPoint\": [1, 0.5] },\n  \"endBinding\": { \"elementId\": \"r2\", \"fixedPoint\": [0, 0.5] }\n}\n```\n\n`fixedPoint` coordinates: `top=[0.5,0]`, `bottom=[0.5,1]`, `left=[0,0.5]`, `right=[1,0.5]`\n\n### Drawing Order (z-order)\n- Array order = z-order (first = back, last = front)\n- Emit progressively: background zones → shape → its bound text → its arrows → next shape\n- BAD: all rectangles, then all texts, then all arrows\n- GOOD: bg_zone → shape1 → text_for_shape1 → arrow1 → arrow_label_text → shape2 → text_for_shape2 → ...\n- Always place the bound text element immediately after its container shape\n\n### Sizing Guidelines\n\n**Font sizes:**\n- Minimum `fontSize`: **16** for body text, labels, descriptions\n- Minimum `fontSize`: **20** for titles and headings\n- Minimum `fontSize`: **14** for secondary annotations only (sparingly)\n- NEVER use `fontSize` below 14\n\n**Element sizes:**\n- Minimum shape size: 120x60 for labeled rectangles\u002Fellipses\n- Leave 20-30px gaps between elements minimum\n- Prefer fewer, larger elements over many tiny ones\n\n### Color Palette\n\nSee `references\u002Fcolors.md` for full color tables. Quick reference:\n\n| Use | Fill Color | Hex |\n|-----|-----------|-----|\n| Primary \u002F Input | Light Blue | `#a5d8ff` |\n| Success \u002F Output | Light Green | `#b2f2bb` |\n| Warning \u002F External | Light Orange | `#ffd8a8` |\n| Processing \u002F Special | Light Purple | `#d0bfff` |\n| Error \u002F Critical | Light Red | `#ffc9c9` |\n| Notes \u002F Decisions | Light Yellow | `#fff3bf` |\n| Storage \u002F Data | Light Teal | `#c3fae8` |\n\n### Tips\n- Use the color palette consistently across the diagram\n- **Text contrast is CRITICAL** -- never use light gray on white backgrounds. Minimum text color on white: `#757575`\n- Do NOT use emoji in text -- they don't render in Excalidraw's font\n- For dark mode diagrams, see `references\u002Fdark-mode.md`\n- For larger examples, see `references\u002Fexamples.md`\n\n## ? Связи\n\n- [[000 - Map of Maps]] — REPO_DOCS\n- [[000 - Map of Maps]] — Map of Maps\n\n","# Excalidraw Diagram Skill\n\nCreate diagrams by writing standard Excalidraw element JSON and saving as `.excalidraw` files. These files can be drag-and-dropped onto [excalidraw.com](https:\u002F\u002Fexcalidraw.com) for viewing and editing. No accounts, no API keys, no rendering libraries -- just JSON.\n\n## Workflow\n\n1. **Load this skill** (you already did)\n2. **Write the elements JSON** -- an array of Excalidraw element objects\n3. **Save the file** using `write_file` to create a `.excalidraw` file\n4. **Optionally upload** for a shareable link using `scripts\u002Fupload.py` via `terminal`\n\n### Saving a Diagram\n\nWrap your elements array in the standard `.excalidraw` envelope and save with `write_file`:\n\n```json\n{\n  \"type\": \"excalidraw\",\n  \"version\": 2,\n  \"source\": \"hermes-agent\",\n  \"elements\": [ ...your elements array here... ],\n  \"appState\": {\n    \"viewBackgroundColor\": \"#ffffff\"\n  }\n}\n```\n\nSave to any path, e.g. `~\u002Fdiagrams\u002Fmy_diagram.excalidraw`.\n\n### Uploading for a Shareable Link\n\nRun the upload script (located in this skill's `scripts\u002F` directory) via terminal:\n\n```bash\npython skills\u002Fdiagramming\u002Fexcalidraw\u002Fscripts\u002Fupload.py ~\u002Fdiagrams\u002Fmy_diagram.excalidraw\n```\n\nThis uploads to excalidraw.com (no account needed) and prints a shareable URL. Requires the `cryptography` pip package (`pip install cryptography`).\n\n---\n\n## Element Format Reference\n\n### Required Fields (all elements)\n`type`, `id` (unique string), `x`, `y`, `width`, `height`\n\n### Defaults (skip these -- they're applied automatically)\n- `strokeColor`: `\"#1e1e1e\"`\n- `backgroundColor`: `\"transparent\"`\n- `fillStyle`: `\"solid\"`\n- `strokeWidth`: `2`\n- `roughness`: `1` (hand-drawn look)\n- `opacity`: `100`\n\nCanvas background is white.\n\n### Element Types\n\n**Rectangle**:\n```json\n{ \"type\": \"rectangle\", \"id\": \"r1\", \"x\": 100, \"y\": 100, \"width\": 200, \"height\": 100 }\n```\n- `roundness: { \"type\": 3 }` for rounded corners\n- `backgroundColor: \"#a5d8ff\"`, `fillStyle: \"solid\"` for filled\n\n**Ellipse**:\n```json\n{ \"type\": \"ellipse\", \"id\": \"e1\", \"x\": 100, \"y\": 100, \"width\": 150, \"height\": 150 }\n```\n\n**Diamond**:\n```json\n{ \"type\": \"diamond\", \"id\": \"d1\", \"x\": 100, \"y\": 100, \"width\": 150, \"height\": 150 }\n```\n\n**Labeled shape (container binding)** -- create a text element bound to the shape:\n\n> **WARNING:** Do NOT use `\"label\": { \"text\": \"...\" }` on shapes. This is NOT a valid\n> Excalidraw property and will be silently ignored, producing blank shapes. You MUST\n> use the container binding approach below.\n\nThe shape needs `boundElements` listing the text, and the text needs `containerId` pointing back:\n```json\n{ \"type\": \"rectangle\", \"id\": \"r1\", \"x\": 100, \"y\": 100, \"width\": 200, \"height\": 80,\n  \"roundness\": { \"type\": 3 }, \"backgroundColor\": \"#a5d8ff\", \"fillStyle\": \"solid\",\n  \"boundElements\": [{ \"id\": \"t_r1\", \"type\": \"text\" }] },\n{ \"type\": \"text\", \"id\": \"t_r1\", \"x\": 105, \"y\": 110, \"width\": 190, \"height\": 25,\n  \"text\": \"Hello\", \"fontSize\": 20, \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\",\n  \"textAlign\": \"center\", \"verticalAlign\": \"middle\",\n  \"containerId\": \"r1\", \"originalText\": \"Hello\", \"autoResize\": true }\n```\n- Works on rectangle, ellipse, diamond\n- Text is auto-centered by Excalidraw when `containerId` is set\n- The text `x`\u002F`y`\u002F`width`\u002F`height` are approximate -- Excalidraw recalculates them on load\n- `originalText` should match `text`\n- Always include `fontFamily: 1` (Virgil\u002Fhand-drawn font)\n\n**Labeled arrow** -- same container binding approach:\n```json\n{ \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 200, \"height\": 0,\n  \"points\": [[0,0],[200,0]], \"endArrowhead\": \"arrow\",\n  \"boundElements\": [{ \"id\": \"t_a1\", \"type\": \"text\" }] },\n{ \"type\": \"text\", \"id\": \"t_a1\", \"x\": 370, \"y\": 130, \"width\": 60, \"height\": 20,\n  \"text\": \"connects\", \"fontSize\": 16, \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\",\n  \"textAlign\": \"center\", \"verticalAlign\": \"middle\",\n  \"containerId\": \"a1\", \"originalText\": \"connects\", \"autoResize\": true }\n```\n\n**Standalone text** (titles and annotations only -- no container):\n```json\n{ \"type\": \"text\", \"id\": \"t1\", \"x\": 150, \"y\": 138, \"text\": \"Hello\", \"fontSize\": 20,\n  \"fontFamily\": 1, \"strokeColor\": \"#1e1e1e\", \"originalText\": \"Hello\", \"autoResize\": true }\n```\n- `x` is the LEFT edge. To center at position `cx`: `x = cx - (text.length * fontSize * 0.5) \u002F 2`\n- Do NOT rely on `textAlign` or `width` for positioning\n\n**Arrow**:\n```json\n{ \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 200, \"height\": 0,\n  \"points\": [[0,0],[200,0]], \"endArrowhead\": \"arrow\" }\n```\n- `points`: `[dx, dy]` offsets from element `x`, `y`\n- `endArrowhead`: `null` | `\"arrow\"` | `\"bar\"` | `\"dot\"` | `\"triangle\"`\n- `strokeStyle`: `\"solid\"` (default) | `\"dashed\"` | `\"dotted\"`\n\n### Arrow Bindings (connect arrows to shapes)\n\n```json\n{\n  \"type\": \"arrow\", \"id\": \"a1\", \"x\": 300, \"y\": 150, \"width\": 150, \"height\": 0,\n  \"points\": [[0,0],[150,0]], \"endArrowhead\": \"arrow\",\n  \"startBinding\": { \"elementId\": \"r1\", \"fixedPoint\": [1, 0.5] },\n  \"endBinding\": { \"elementId\": \"r2\", \"fixedPoint\": [0, 0.5] }\n}\n```\n\n`fixedPoint` coordinates: `top=[0.5,0]`, `bottom=[0.5,1]`, `left=[0,0.5]`, `right=[1,0.5]`\n\n### Drawing Order (z-order)\n- Array order = z-order (first = back, last = front)\n- Emit progressively: background zones → shape → its bound text → its arrows → next shape\n- BAD: all rectangles, then all texts, then all arrows\n- GOOD: bg_zone → shape1 → text_for_shape1 → arrow1 → arrow_label_text → shape2 → text_for_shape2 → ...\n- Always place the bound text element immediately after its container shape\n\n### Sizing Guidelines\n\n**Font sizes:**\n- Minimum `fontSize`: **16** for body text, labels, descriptions\n- Minimum `fontSize`: **20** for titles and headings\n- Minimum `fontSize`: **14** for secondary annotations only (sparingly)\n- NEVER use `fontSize` below 14\n\n**Element sizes:**\n- Minimum shape size: 120x60 for labeled rectangles\u002Fellipses\n- Leave 20-30px gaps between elements minimum\n- Prefer fewer, larger elements over many tiny ones\n\n### Color Palette\n\nSee `references\u002Fcolors.md` for full color tables. Quick reference:\n\n| Use | Fill Color | Hex |\n|-----|-----------|-----|\n| Primary \u002F Input | Light Blue | `#a5d8ff` |\n| Success \u002F Output | Light Green | `#b2f2bb` |\n| Warning \u002F External | Light Orange | `#ffd8a8` |\n| Processing \u002F Special | Light Purple | `#d0bfff` |\n| Error \u002F Critical | Light Red | `#ffc9c9` |\n| Notes \u002F Decisions | Light Yellow | `#fff3bf` |\n| Storage \u002F Data | Light Teal | `#c3fae8` |\n\n### Tips\n- Use the color palette consistently across the diagram\n- **Text contrast is CRITICAL** -- never use light gray on white backgrounds. Minimum text color on white: `#757575`\n- Do NOT use emoji in text -- they don't render in Excalidraw's font\n- For dark mode diagrams, see `references\u002Fdark-mode.md`\n- For larger examples, see `references\u002Fexamples.md`\n\n## ? Связи\n\n- [[000 - Map of Maps]] — REPO_DOCS\n- [[000 - Map of Maps]] — Map of Maps\n\n",{"name":5,"author":48,"license":15,"version":49,"metadata":50,"description":7,"dependencies":60},"Hermes Agent","1.0.0",{"hermes":51},{"tags":52,"related_skills":59},[53,54,55,56,57,58],"Excalidraw","Diagrams","Flowcharts","Architecture","Visualization","JSON",[],[],"main","bdd9f958d7bb1a0f19b8ad8da020b0bab0f53eb1","vc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fexcalidraw",1,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis","2026-06-24 16:31:18",{"source":8,"skillName":5,"commands":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add ibragimov-oasis\u002Fvibe-coder --skill excalidraw",{"tool":74,"command":75},"bunx","bunx skills add ibragimov-oasis\u002Fvibe-coder --skill excalidraw",{"tool":77,"command":78},"pnpm","pnpm dlx skills add ibragimov-oasis\u002Fvibe-coder --skill excalidraw","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002FREPO_DOCS\u002F02-hermes-agent\u002Fskills\u002Fcreative\u002Fexcalidraw\u002FSKILL.md",true,[],[83,117,141,160,186,217],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":97,"publishedAt":43},"01M6Q4Q22KKKVMJJYA411DQ4ER","ckm:ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fui-styling\u002FSKILL.md",[89,92],{"categoryNo":90,"categoryName":91,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":93,"categoryName":94,"taxonomyType":95,"taxonomyTypeDesc":96},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[98,99,100,101,102,103,104,105,106,107,41,108,109,110,111,112,113,114,115,116],"ui styling","ui","styling","ckm:ui styling","ckm","design","css","canvas","components","component","design systems","Tailwind","across","themes","utility","mode","implementing","artifact\u002Fui-component","source\u002Fui-design",{"skillNo":118,"name":119,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":129,"publishedAt":43},"01M6Q4PQ2NX4NDVWTEHA3MQ2R0","ckm:design","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\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.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign\u002FSKILL.md",[123,126,127,128],{"categoryNo":124,"categoryName":125,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":90,"categoryName":91,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":93,"categoryName":94,"taxonomyType":95,"taxonomyTypeDesc":96},[103,119,102,130,107,98,131,41,40,132,133,134,135,136,137,138,139,140,115,116],"google","presentations","screenshot","actions","Media","logo","ads","youtube","tiktok","artifact","chart",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":149,"publishedAt":43},"01M6Q4PJE27GEA3M0CECEBCZKS","ckm:design-system","Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing\u002Ftypography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign-system\u002FSKILL.md",[147,148],{"categoryNo":90,"categoryName":91,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":93,"categoryName":94,"taxonomyType":95,"taxonomyTypeDesc":96},[103,150,151,152,119,102,104,107,34,131,139,153,154,155,156,157,158,159,115,116],"design system","system","ckm:design system","token","creation","systematic","css variables","Variables","spacing","layer",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":171,"publishedAt":43},"01M6Q4P90JXFYMH2S634QM6SQJ","ckm:banner-design","Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter\u002FX, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fbanner-design\u002FSKILL.md",[166,169,170],{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":90,"categoryName":91,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":93,"categoryName":94,"taxonomyType":95,"taxonomyTypeDesc":96},[103,172,173,174,102,175,133,134,176,177,178,179,180,181,182,183,115,116,184,185],"banner design","ckm:banner design","banner","frontend","3D","generated","Art","social","dimensions","neon","direction","display","frontend-design","hero",{"skillNo":187,"name":188,"nameZh":6,"description":189,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":190,"categories":191,"keywords":198,"publishedAt":43},"01M6Q2RZXBJ9TBE413GXCYQNDB","seo","Comprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection\u002Fvalidation\u002Fgeneration, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: \"SEO\", \"audit\", \"schema\", \"Core Web Vitals\", \"sitemap\", \"E-E-A-T\", \"AI Overviews\", \"GEO\", \"technical SEO\", \"content quality\", \"page speed\", \"structured data\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo\u002FSKILL.md",[192,195],{"categoryNo":193,"categoryName":194,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":196,"categoryName":197,"taxonomyType":95,"taxonomyTypeDesc":96},"01JBSEEDCAT000000000000035","市场营销",[188,199,200,201,202,203,204,139,205,206,207,208,209,210,211,212,213,214,215,216],"image","llms","assessment","deep analysis","Citations","analysis","local","deep","crawlability","seo analysis","2025","commerce","URL","domain\u002Fseo","source\u002Fskills-seo","vitals","generative","publishers",{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":221,"categories":222,"keywords":225,"publishedAt":43},"01M6Q2RVE7VGFCFQKBK468NHVY","seo-technical","Technical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says \"technical SEO\", \"crawl issues\", \"robots.txt\", \"Core Web Vitals\", \"site speed\", or \"security headers\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-technical\u002FSKILL.md",[223,224],{"categoryNo":193,"categoryName":194,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":196,"categoryName":197,"taxonomyType":95,"taxonomyTypeDesc":96},[188,226,227,228,229,230,231,232,233,139,110,207,234,235,211,236,237,212,213,214],"technical","seo technical","issues","audit","data","mobile","crawl","structure","rendering","technical seo audit","headers","categories"]