[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JC3QEZ3ZTTJNAAFDCS58ZC":3,"skill-same:01M6JC3QEZ3ZTTJNAAFDCS58ZC":70},{"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":30,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":48,"commitSha":49,"skillDirectory":50,"forksCount":51,"repositoryHtmlUrl":52,"repositoryHomepageUrl":53,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6JC3QEZ3ZTTJNAAFDCS58ZC","canvas",null,"Display generated HTML content on connected Appie or OpenClaw canvas nodes for dashboards, demos, games, and visualizations.","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\u002Fcontent\u002Fcanvas\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[5,31,32,33,34,35,36,37,38,39,40,41],"openclaw","content","dashboards","visualizations","generated","html","Nodes","demos","games","display","for","2026-11-10 10:12:30",false,"---\nname: canvas\ndescription: \"Display generated HTML content on connected Appie or OpenClaw canvas nodes for dashboards, demos, games, and visualizations.\"\nversion: 1.0.0\ncategory: content\n---\n\n# Canvas Skill\n\nDisplay HTML content on connected OpenClaw nodes (Mac app, iOS, Android).\n\n## Overview\n\nThe canvas tool lets you present web content on any connected node's canvas view. Great for:\n\n- Displaying games, visualizations, dashboards\n- Showing generated HTML content\n- Interactive demos\n\n## How It Works\n\n### Architecture\n\n```\n┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐\n│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │\n│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac\u002FiOS\u002F   │\n│  Port 18793     │     │  Port 18790      │     │  Android)   │\n└─────────────────┘     └──────────────────┘     └─────────────┘\n```\n\n1. **Canvas Host Server**: Serves static HTML\u002FCSS\u002FJS files from `canvasHost.root` directory\n2. **Node Bridge**: Communicates canvas URLs to connected nodes\n3. **Node Apps**: Render the content in a WebView\n\n### Tailscale Integration\n\nThe canvas host server binds based on `gateway.bind` setting:\n\n| Bind Mode  | Server Binds To     | Canvas URL Uses            |\n| ---------- | ------------------- | -------------------------- |\n| `loopback` | 127.0.0.1           | localhost (local only)     |\n| `lan`      | LAN interface       | LAN IP address             |\n| `tailnet`  | Tailscale interface | Tailscale hostname         |\n| `auto`     | Best available      | Tailscale > LAN > loopback |\n\n**Key insight:** The `canvasHostHostForBridge` is derived from `bridgeHost`. When bound to Tailscale, nodes receive URLs like:\n\n```\nhttp:\u002F\u002F\u003Ctailscale-hostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html\n```\n\nThis is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!\n\n## Actions\n\n| Action     | Description                          |\n| ---------- | ------------------------------------ |\n| `present`  | Show canvas with optional target URL |\n| `hide`     | Hide the canvas                      |\n| `navigate` | Navigate to a new URL                |\n| `eval`     | Execute JavaScript in the canvas     |\n| `snapshot` | Capture screenshot of canvas         |\n\n## Configuration\n\nIn the active OpenClaw config file (`$OPENCLAW_CONFIG_PATH`, default `~\u002F.openclaw\u002Fopenclaw.json`):\n\n```json\n{\n  \"canvasHost\": {\n    \"enabled\": true,\n    \"port\": 18793,\n    \"root\": \"$CANVAS_ROOT\",\n    \"liveReload\": true\n  },\n  \"gateway\": {\n    \"bind\": \"auto\"\n  }\n}\n```\n\n### Live Reload\n\nWhen `liveReload: true` (default), the canvas host:\n\n- Watches the root directory for changes (via chokidar)\n- Injects a WebSocket client into HTML files\n- Automatically reloads connected canvases when files change\n\nGreat for development!\n\n## Workflow\n\n### 1. Create HTML content\n\nPlace files in the canvas root directory (default `~\u002Fopenclaw-canvas\u002F`):\n\n```bash\ncat > ~\u002Fopenclaw-canvas\u002Fmy-game.html \u003C\u003C 'HTML'\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\u003Ctitle>My Game\u003C\u002Ftitle>\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Hello Canvas!\u003C\u002Fh1>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\nHTML\n```\n\n### 2. Find your canvas host URL\n\nCheck how your gateway is bound:\n\n```bash\nCONFIG_PATH=\"${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME\u002F.openclaw}\u002Fopenclaw.json}\"\ncat \"$CONFIG_PATH\" | jq '.gateway.bind'\n```\n\nThen construct the URL:\n\n- **loopback**: `http:\u002F\u002F127.0.0.1:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n- **lan\u002Ftailnet\u002Fauto**: `http:\u002F\u002F\u003Chostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n\nFind your Tailscale hostname:\n\n```bash\ntailscale status --json | jq -r '.Self.DNSName' | sed 's\u002F\\.$\u002F\u002F'\n```\n\n### 3. Find connected nodes\n\n```bash\nopenclaw nodes list\n```\n\nLook for Mac\u002FiOS\u002FAndroid nodes with canvas capability.\n\n### 4. Present content\n\n```\ncanvas action:present node:\u003Cnode-id> target:\u003Cfull-url>\n```\n\n**Example:**\n\n```\ncanvas action:present node:\u003Cnode-id> target:http:\u002F\u002F\u003Cagent-host>\u002F__openclaw__\u002Fcanvas\u002Fsnake.html\n```\n\n### 5. Navigate, snapshot, or hide\n\n```\ncanvas action:navigate node:\u003Cnode-id> url:\u003Cnew-url>\ncanvas action:snapshot node:\u003Cnode-id>\ncanvas action:hide node:\u003Cnode-id>\n```\n\n## Debugging\n\n### White screen \u002F content not loading\n\n**Cause:** URL mismatch between server bind and node expectation.\n\n**Debug steps:**\n\n1. Check server bind: `CONFIG_PATH=\"${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME\u002F.openclaw}\u002Fopenclaw.json}\"; cat \"$CONFIG_PATH\" | jq '.gateway.bind'`\n2. Check what port canvas is on: `lsof -i :18793`\n3. Test URL directly: `curl http:\u002F\u002F\u003Chostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n\n**Solution:** Use the full hostname matching your bind mode, not localhost.\n\n### \"node required\" error\n\nAlways specify `node:\u003Cnode-id>` parameter.\n\n### \"node not connected\" error\n\nNode is offline. Use `openclaw nodes list` to find online nodes.\n\n### Content not updating\n\nIf live reload isn't working:\n\n1. Check `liveReload: true` in config\n2. Ensure file is in the canvas root directory\n3. Check for watcher errors in logs\n\n## URL Path Structure\n\nThe canvas host serves from `\u002F__openclaw__\u002Fcanvas\u002F` prefix:\n\n```\nhttp:\u002F\u002F\u003Chost>:18793\u002F__openclaw__\u002Fcanvas\u002Findex.html  → ~\u002Fopenclaw-canvas\u002Findex.html\nhttp:\u002F\u002F\u003Chost>:18793\u002F__openclaw__\u002Fcanvas\u002Fgames\u002Fsnake.html → ~\u002Fopenclaw-canvas\u002Fgames\u002Fsnake.html\n```\n\nThe `\u002F__openclaw__\u002Fcanvas\u002F` prefix is defined by `CANVAS_HOST_PATH` constant.\n\n## Tips\n\n- Keep HTML self-contained (inline CSS\u002FJS) for best results\n- Use the default index.html as a test page (has bridge diagnostics)\n- The canvas persists until you `hide` it or navigate away\n- Live reload makes development fast - just save and it updates!\n- A2UI JSON push is WIP - use HTML files for now\n","# Canvas Skill\n\nDisplay HTML content on connected OpenClaw nodes (Mac app, iOS, Android).\n\n## Overview\n\nThe canvas tool lets you present web content on any connected node's canvas view. Great for:\n\n- Displaying games, visualizations, dashboards\n- Showing generated HTML content\n- Interactive demos\n\n## How It Works\n\n### Architecture\n\n```\n┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐\n│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │\n│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac\u002FiOS\u002F   │\n│  Port 18793     │     │  Port 18790      │     │  Android)   │\n└─────────────────┘     └──────────────────┘     └─────────────┘\n```\n\n1. **Canvas Host Server**: Serves static HTML\u002FCSS\u002FJS files from `canvasHost.root` directory\n2. **Node Bridge**: Communicates canvas URLs to connected nodes\n3. **Node Apps**: Render the content in a WebView\n\n### Tailscale Integration\n\nThe canvas host server binds based on `gateway.bind` setting:\n\n| Bind Mode  | Server Binds To     | Canvas URL Uses            |\n| ---------- | ------------------- | -------------------------- |\n| `loopback` | 127.0.0.1           | localhost (local only)     |\n| `lan`      | LAN interface       | LAN IP address             |\n| `tailnet`  | Tailscale interface | Tailscale hostname         |\n| `auto`     | Best available      | Tailscale > LAN > loopback |\n\n**Key insight:** The `canvasHostHostForBridge` is derived from `bridgeHost`. When bound to Tailscale, nodes receive URLs like:\n\n```\nhttp:\u002F\u002F\u003Ctailscale-hostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html\n```\n\nThis is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!\n\n## Actions\n\n| Action     | Description                          |\n| ---------- | ------------------------------------ |\n| `present`  | Show canvas with optional target URL |\n| `hide`     | Hide the canvas                      |\n| `navigate` | Navigate to a new URL                |\n| `eval`     | Execute JavaScript in the canvas     |\n| `snapshot` | Capture screenshot of canvas         |\n\n## Configuration\n\nIn the active OpenClaw config file (`$OPENCLAW_CONFIG_PATH`, default `~\u002F.openclaw\u002Fopenclaw.json`):\n\n```json\n{\n  \"canvasHost\": {\n    \"enabled\": true,\n    \"port\": 18793,\n    \"root\": \"$CANVAS_ROOT\",\n    \"liveReload\": true\n  },\n  \"gateway\": {\n    \"bind\": \"auto\"\n  }\n}\n```\n\n### Live Reload\n\nWhen `liveReload: true` (default), the canvas host:\n\n- Watches the root directory for changes (via chokidar)\n- Injects a WebSocket client into HTML files\n- Automatically reloads connected canvases when files change\n\nGreat for development!\n\n## Workflow\n\n### 1. Create HTML content\n\nPlace files in the canvas root directory (default `~\u002Fopenclaw-canvas\u002F`):\n\n```bash\ncat > ~\u002Fopenclaw-canvas\u002Fmy-game.html \u003C\u003C 'HTML'\n\u003C!DOCTYPE html>\n\u003Chtml>\n\u003Chead>\u003Ctitle>My Game\u003C\u002Ftitle>\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Hello Canvas!\u003C\u002Fh1>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\nHTML\n```\n\n### 2. Find your canvas host URL\n\nCheck how your gateway is bound:\n\n```bash\nCONFIG_PATH=\"${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME\u002F.openclaw}\u002Fopenclaw.json}\"\ncat \"$CONFIG_PATH\" | jq '.gateway.bind'\n```\n\nThen construct the URL:\n\n- **loopback**: `http:\u002F\u002F127.0.0.1:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n- **lan\u002Ftailnet\u002Fauto**: `http:\u002F\u002F\u003Chostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n\nFind your Tailscale hostname:\n\n```bash\ntailscale status --json | jq -r '.Self.DNSName' | sed 's\u002F\\.$\u002F\u002F'\n```\n\n### 3. Find connected nodes\n\n```bash\nopenclaw nodes list\n```\n\nLook for Mac\u002FiOS\u002FAndroid nodes with canvas capability.\n\n### 4. Present content\n\n```\ncanvas action:present node:\u003Cnode-id> target:\u003Cfull-url>\n```\n\n**Example:**\n\n```\ncanvas action:present node:\u003Cnode-id> target:http:\u002F\u002F\u003Cagent-host>\u002F__openclaw__\u002Fcanvas\u002Fsnake.html\n```\n\n### 5. Navigate, snapshot, or hide\n\n```\ncanvas action:navigate node:\u003Cnode-id> url:\u003Cnew-url>\ncanvas action:snapshot node:\u003Cnode-id>\ncanvas action:hide node:\u003Cnode-id>\n```\n\n## Debugging\n\n### White screen \u002F content not loading\n\n**Cause:** URL mismatch between server bind and node expectation.\n\n**Debug steps:**\n\n1. Check server bind: `CONFIG_PATH=\"${OPENCLAW_CONFIG_PATH:-${OPENCLAW_STATE_DIR:-$HOME\u002F.openclaw}\u002Fopenclaw.json}\"; cat \"$CONFIG_PATH\" | jq '.gateway.bind'`\n2. Check what port canvas is on: `lsof -i :18793`\n3. Test URL directly: `curl http:\u002F\u002F\u003Chostname>:18793\u002F__openclaw__\u002Fcanvas\u002F\u003Cfile>.html`\n\n**Solution:** Use the full hostname matching your bind mode, not localhost.\n\n### \"node required\" error\n\nAlways specify `node:\u003Cnode-id>` parameter.\n\n### \"node not connected\" error\n\nNode is offline. Use `openclaw nodes list` to find online nodes.\n\n### Content not updating\n\nIf live reload isn't working:\n\n1. Check `liveReload: true` in config\n2. Ensure file is in the canvas root directory\n3. Check for watcher errors in logs\n\n## URL Path Structure\n\nThe canvas host serves from `\u002F__openclaw__\u002Fcanvas\u002F` prefix:\n\n```\nhttp:\u002F\u002F\u003Chost>:18793\u002F__openclaw__\u002Fcanvas\u002Findex.html  → ~\u002Fopenclaw-canvas\u002Findex.html\nhttp:\u002F\u002F\u003Chost>:18793\u002F__openclaw__\u002Fcanvas\u002Fgames\u002Fsnake.html → ~\u002Fopenclaw-canvas\u002Fgames\u002Fsnake.html\n```\n\nThe `\u002F__openclaw__\u002Fcanvas\u002F` prefix is defined by `CANVAS_HOST_PATH` constant.\n\n## Tips\n\n- Keep HTML self-contained (inline CSS\u002FJS) for best results\n- Use the default index.html as a test page (has bridge diagnostics)\n- The canvas persists until you `hide` it or navigate away\n- Live reload makes development fast - just save and it updates!\n- A2UI JSON push is WIP - use HTML files for now\n",{"name":5,"version":47,"category":32,"description":7},"1.0.0","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcontent\u002Fcanvas",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":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add S3YED\u002Fappie-kit --skill canvas",{"tool":62,"command":63},"bunx","bunx skills add S3YED\u002Fappie-kit --skill canvas",{"tool":65,"command":66},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill canvas","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fcanvas\u002FSKILL.md",true,[],[71,103,134,160,191,215],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":84,"publishedAt":42},"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",[77,80,83],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":113,"publishedAt":42},"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",[109,110],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":111,"categoryName":112,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师",[114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","generate","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":142,"publishedAt":42},"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",[140,141],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":111,"categoryName":112,"taxonomyType":28,"taxonomyTypeDesc":29},[115,143,119,144,145,146,121,147,148,149,150,151,152,153,154,155,156,157,158,159],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":170,"publishedAt":42},"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",[166,169],{"categoryNo":167,"categoryName":168,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":198,"publishedAt":42},"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",[197],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,41],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification",{"skillNo":216,"name":217,"nameZh":6,"description":218,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":219,"categories":220,"keywords":228,"publishedAt":42},"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",[221,224,227],{"categoryNo":222,"categoryName":223,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":225,"categoryName":226,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[229,230,231,232,233,234,235,236,174,237,238,121,239,177,240,208,241,242,243,244],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]