[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6HX8BYZDT28RM9JTHDPAR02":3,"skill-same:01M6HX8BYZDT28RM9JTHDPAR02":78},{"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":28,"publishedAt":45,"linkOnly":46,"markdownContent":47,"markdownBody":48,"frontMatter":49,"refName":50,"commitSha":51,"skillDirectory":52,"forksCount":53,"repositoryHtmlUrl":54,"repositoryHomepageUrl":6,"ownerHtmlUrl":55,"ownerBlogUrl":56,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M6HX8BYZDT28RM9JTHDPAR02","enhance-typescript-ui-components",null,"Add visual features (thumbnails, badges, dynamic styling) to TypeScript components by coordinating TypeScript logic changes with CSS updates","HKUDS\u002FAgentPilot","HKUDS","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F118165258?v=4","01M6HW8VRNZP64G0P4MVJW2KKQ","✨Data Intelligence Lab@HKU✨","01M6HW8VWZVHBRHYH3T330PFWV",8024,"MIT","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fexamples\u002Fmy-daily-monitor\u002Fskills\u002Fenhance-typescript-ui-components\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44],"typescript","components","ui","enhance","ui components","enhance typescript ui components","css","styling","thumbnails","visual","logic","add","with","updates","changes","features","2026-11-10 10:12:30",false,"---\nname: enhance-typescript-ui-components\ndescription: Add visual features (thumbnails, badges, dynamic styling) to TypeScript components by coordinating TypeScript logic changes with CSS updates\n---\n\n# Enhance TypeScript UI Components\n\nA systematic workflow for adding visual enhancements to TypeScript UI components, including thumbnails, color-coded badges, and dynamic styling. This pattern applies to component files that render data items (lists, panels, cards, etc.).\n\n## When to Use This Skill\n\n- Adding visual indicators (badges, labels, icons) to existing components\n- Implementing thumbnail images with fallback placeholders\n- Applying dynamic, data-driven colors or styles\n- Coordinating TypeScript component logic with CSS styling\n\n## Workflow Steps\n\n### 1. Add Constants at File Top\n\nDefine color mappings, size constants, and configuration data near the top of the TypeScript file, after imports but before the class definition.\n\n```typescript\n\u002F\u002F Color mappings for categories\u002Fsources\nconst SOURCE_COLORS: { [key: string]: string } = {\n  'Category A': '#FF6B6B',\n  'Category B': '#4ECDC4',\n  'Category C': '#45B7D1',\n  'default': '#95A5A6'\n};\n\n\u002F\u002F Size constants\nconst THUMBNAIL_SIZE = 48; \u002F\u002F pixels\nconst BADGE_HEIGHT = 20;\n```\n\n**Why**: Centralizes configuration for easy maintenance and avoids magic values scattered throughout code.\n\n### 2. Implement Helper Methods\n\nCreate private helper methods for dynamic style calculations and data transformations. Place these before the main render method.\n\n```typescript\nprivate getColorForItem(item: DataItem): string {\n  return SOURCE_COLORS[item.category] || SOURCE_COLORS['default'];\n}\n\nprivate sortItemsByDate(items: DataItem[]): DataItem[] {\n  return [...items].sort((a, b) => \n    new Date(b.date).getTime() - new Date(a.date).getTime()\n  );\n}\n\nprivate getThumbnailUrl(item: DataItem): string {\n  return item.imageUrl || `https:\u002F\u002Fvia.placeholder.com\u002F${THUMBNAIL_SIZE}`;\n}\n```\n\n**Why**: Separates logic from presentation, makes code testable, and improves readability.\n\n### 3. Sort Data Before Rendering\n\nIf displaying lists, apply sorting transformations before building HTML.\n\n```typescript\npublic render(): void {\n  const sortedItems = this.sortItemsByDate(this.items);\n  const html = sortedItems.map(item => this.renderItem(item)).join('');\n  this.container.innerHTML = html;\n}\n```\n\n**Why**: Ensures consistent presentation order and separates data transformation from rendering.\n\n### 4. Build HTML with Template Literals\n\nUse template literals for HTML construction with conditional rendering for optional fields.\n\n```typescript\nprivate renderItem(item: DataItem): string {\n  const itemColor = this.getColorForItem(item);\n  const thumbnailUrl = this.getThumbnailUrl(item);\n  \n  return `\n    \u003Cdiv class=\"item-card\">\n      ${item.imageUrl ? `\n        \u003Cimg \n          src=\"${thumbnailUrl}\" \n          alt=\"${item.title}\"\n          class=\"item-thumbnail\"\n        \u002F>\n      ` : `\n        \u003Cdiv class=\"item-thumbnail-placeholder\">\u003C\u002Fdiv>\n      `}\n      \n      \u003Cdiv class=\"item-content\">\n        \u003Ch3>${item.title}\u003C\u002Fh3>\n        ${item.category ? `\n          \u003Cspan \n            class=\"item-badge\" \n            style=\"background-color: ${itemColor};\"\n          >\n            ${item.category}\n          \u003C\u002Fspan>\n        ` : ''}\n        \u003Cp>${item.description}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `;\n}\n```\n\n**Why**: Enables conditional rendering and keeps HTML structure clear. Dynamic values can be safely interpolated.\n\n### 5. Apply Inline Styles for Dynamic Values Only\n\nUse inline `style` attributes **only** for data-driven dynamic values (colors, sizes from data). Keep structural\u002Flayout styles in CSS.\n\n```typescript\n\u002F\u002F ✅ Good - dynamic color from data\nstyle=\"background-color: ${this.getColorForItem(item)};\"\n\n\u002F\u002F ❌ Bad - structural styling should be in CSS\nstyle=\"display: flex; padding: 10px; background-color: ${color};\"\n\n\u002F\u002F ✅ Better - split concerns\nclass=\"item-badge\" style=\"background-color: ${color};\"\n```\n\n**Why**: Maintains separation of concerns—data-driven values in TS, structural styles in CSS.\n\n### 6. Create or Update Corresponding CSS\n\nFor each new HTML element or class added in TypeScript, add corresponding CSS rules. Focus on:\n- Layout and positioning\n- Static colors and backgrounds\n- Sizing (when not dynamic)\n- Spacing (margin, padding)\n- Typography\n\n```css\n\u002F* Component container *\u002F\n.item-card {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid #eee;\n}\n\n\u002F* Thumbnail styles *\u002F\n.item-thumbnail {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.item-thumbnail-placeholder {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n  background-color: #e0e0e0;\n  flex-shrink: 0;\n}\n\n\u002F* Badge styles (color applied inline) *\u002F\n.item-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  color: white;\n  text-transform: uppercase;\n}\n```\n\n**Why**: CSS handles layout and static styling efficiently; inline styles only for truly dynamic values.\n\n### 7. Coordinate Changes Across Files\n\n**Checklist for each enhancement**:\n- [ ] TypeScript: Add constants\u002Fconfiguration\n- [ ] TypeScript: Implement helper methods\n- [ ] TypeScript: Update HTML template\n- [ ] TypeScript: Add inline styles for dynamic values\n- [ ] CSS: Add structural styles for new elements\n- [ ] CSS: Ensure responsive behavior if needed\n- [ ] Test with real data and edge cases (missing images, long text, etc.)\n\n## Best Practices\n\n1. **Fallback handling**: Always provide fallbacks for optional data (placeholder images, default colors, etc.)\n2. **Escape user data**: If rendering user-provided content, sanitize\u002Fescape to prevent XSS\n3. **Keep methods focused**: Each helper method should do one thing well\n4. **Use semantic class names**: Prefer `.item-thumbnail` over `.img-48`\n5. **Test edge cases**: Empty lists, missing fields, very long text, special characters\n\n## Example: Adding Source Badges\n\n**Before** (simple list):\n```typescript\nitems.forEach(item => {\n  html += `\u003Cdiv>${item.title}\u003C\u002Fdiv>`;\n});\n```\n\n**After** (enhanced with badges):\n```typescript\n\u002F\u002F 1. Add constants\nconst SOURCE_COLORS = {\n  'TechNews': '#3498db',\n  'default': '#95a5a6'\n};\n\n\u002F\u002F 2. Helper method\nprivate getSourceColor(source: string): string {\n  return SOURCE_COLORS[source] || SOURCE_COLORS['default'];\n}\n\n\u002F\u002F 3. Enhanced template\nitems.forEach(item => {\n  const color = this.getSourceColor(item.source);\n  html += `\n    \u003Cdiv class=\"news-item\">\n      \u003Cspan class=\"source-badge\" style=\"background-color: ${color};\">\n        ${item.source}\n      \u003C\u002Fspan>\n      \u003Cdiv>${item.title}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `;\n});\n\n\u002F\u002F 4. CSS (in stylesheet)\n\u002F\u002F .source-badge {\n\u002F\u002F   padding: 2px 6px;\n\u002F\u002F   border-radius: 3px;\n\u002F\u002F   font-size: 11px;\n\u002F\u002F   color: white;\n\u002F\u002F }\n```\n\n## Common Pitfalls\n\n- **Mixing concerns**: Don't put all layout styles inline; use CSS for structure\n- **Forgetting fallbacks**: Always handle missing\u002Fnull optional fields\n- **Hard-coded values**: Extract magic numbers and colors to constants\n- **Skipping CSS updates**: Every new HTML structure needs corresponding CSS\n- **Not testing edge cases**: Test with missing images, empty strings, special characters","# Enhance TypeScript UI Components\n\nA systematic workflow for adding visual enhancements to TypeScript UI components, including thumbnails, color-coded badges, and dynamic styling. This pattern applies to component files that render data items (lists, panels, cards, etc.).\n\n## When to Use This Skill\n\n- Adding visual indicators (badges, labels, icons) to existing components\n- Implementing thumbnail images with fallback placeholders\n- Applying dynamic, data-driven colors or styles\n- Coordinating TypeScript component logic with CSS styling\n\n## Workflow Steps\n\n### 1. Add Constants at File Top\n\nDefine color mappings, size constants, and configuration data near the top of the TypeScript file, after imports but before the class definition.\n\n```typescript\n\u002F\u002F Color mappings for categories\u002Fsources\nconst SOURCE_COLORS: { [key: string]: string } = {\n  'Category A': '#FF6B6B',\n  'Category B': '#4ECDC4',\n  'Category C': '#45B7D1',\n  'default': '#95A5A6'\n};\n\n\u002F\u002F Size constants\nconst THUMBNAIL_SIZE = 48; \u002F\u002F pixels\nconst BADGE_HEIGHT = 20;\n```\n\n**Why**: Centralizes configuration for easy maintenance and avoids magic values scattered throughout code.\n\n### 2. Implement Helper Methods\n\nCreate private helper methods for dynamic style calculations and data transformations. Place these before the main render method.\n\n```typescript\nprivate getColorForItem(item: DataItem): string {\n  return SOURCE_COLORS[item.category] || SOURCE_COLORS['default'];\n}\n\nprivate sortItemsByDate(items: DataItem[]): DataItem[] {\n  return [...items].sort((a, b) => \n    new Date(b.date).getTime() - new Date(a.date).getTime()\n  );\n}\n\nprivate getThumbnailUrl(item: DataItem): string {\n  return item.imageUrl || `https:\u002F\u002Fvia.placeholder.com\u002F${THUMBNAIL_SIZE}`;\n}\n```\n\n**Why**: Separates logic from presentation, makes code testable, and improves readability.\n\n### 3. Sort Data Before Rendering\n\nIf displaying lists, apply sorting transformations before building HTML.\n\n```typescript\npublic render(): void {\n  const sortedItems = this.sortItemsByDate(this.items);\n  const html = sortedItems.map(item => this.renderItem(item)).join('');\n  this.container.innerHTML = html;\n}\n```\n\n**Why**: Ensures consistent presentation order and separates data transformation from rendering.\n\n### 4. Build HTML with Template Literals\n\nUse template literals for HTML construction with conditional rendering for optional fields.\n\n```typescript\nprivate renderItem(item: DataItem): string {\n  const itemColor = this.getColorForItem(item);\n  const thumbnailUrl = this.getThumbnailUrl(item);\n  \n  return `\n    \u003Cdiv class=\"item-card\">\n      ${item.imageUrl ? `\n        \u003Cimg \n          src=\"${thumbnailUrl}\" \n          alt=\"${item.title}\"\n          class=\"item-thumbnail\"\n        \u002F>\n      ` : `\n        \u003Cdiv class=\"item-thumbnail-placeholder\">\u003C\u002Fdiv>\n      `}\n      \n      \u003Cdiv class=\"item-content\">\n        \u003Ch3>${item.title}\u003C\u002Fh3>\n        ${item.category ? `\n          \u003Cspan \n            class=\"item-badge\" \n            style=\"background-color: ${itemColor};\"\n          >\n            ${item.category}\n          \u003C\u002Fspan>\n        ` : ''}\n        \u003Cp>${item.description}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `;\n}\n```\n\n**Why**: Enables conditional rendering and keeps HTML structure clear. Dynamic values can be safely interpolated.\n\n### 5. Apply Inline Styles for Dynamic Values Only\n\nUse inline `style` attributes **only** for data-driven dynamic values (colors, sizes from data). Keep structural\u002Flayout styles in CSS.\n\n```typescript\n\u002F\u002F ✅ Good - dynamic color from data\nstyle=\"background-color: ${this.getColorForItem(item)};\"\n\n\u002F\u002F ❌ Bad - structural styling should be in CSS\nstyle=\"display: flex; padding: 10px; background-color: ${color};\"\n\n\u002F\u002F ✅ Better - split concerns\nclass=\"item-badge\" style=\"background-color: ${color};\"\n```\n\n**Why**: Maintains separation of concerns—data-driven values in TS, structural styles in CSS.\n\n### 6. Create or Update Corresponding CSS\n\nFor each new HTML element or class added in TypeScript, add corresponding CSS rules. Focus on:\n- Layout and positioning\n- Static colors and backgrounds\n- Sizing (when not dynamic)\n- Spacing (margin, padding)\n- Typography\n\n```css\n\u002F* Component container *\u002F\n.item-card {\n  display: flex;\n  gap: 12px;\n  padding: 16px;\n  border-bottom: 1px solid #eee;\n}\n\n\u002F* Thumbnail styles *\u002F\n.item-thumbnail {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n.item-thumbnail-placeholder {\n  width: 48px;\n  height: 48px;\n  border-radius: 6px;\n  background-color: #e0e0e0;\n  flex-shrink: 0;\n}\n\n\u002F* Badge styles (color applied inline) *\u002F\n.item-badge {\n  display: inline-block;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 12px;\n  font-weight: 600;\n  color: white;\n  text-transform: uppercase;\n}\n```\n\n**Why**: CSS handles layout and static styling efficiently; inline styles only for truly dynamic values.\n\n### 7. Coordinate Changes Across Files\n\n**Checklist for each enhancement**:\n- [ ] TypeScript: Add constants\u002Fconfiguration\n- [ ] TypeScript: Implement helper methods\n- [ ] TypeScript: Update HTML template\n- [ ] TypeScript: Add inline styles for dynamic values\n- [ ] CSS: Add structural styles for new elements\n- [ ] CSS: Ensure responsive behavior if needed\n- [ ] Test with real data and edge cases (missing images, long text, etc.)\n\n## Best Practices\n\n1. **Fallback handling**: Always provide fallbacks for optional data (placeholder images, default colors, etc.)\n2. **Escape user data**: If rendering user-provided content, sanitize\u002Fescape to prevent XSS\n3. **Keep methods focused**: Each helper method should do one thing well\n4. **Use semantic class names**: Prefer `.item-thumbnail` over `.img-48`\n5. **Test edge cases**: Empty lists, missing fields, very long text, special characters\n\n## Example: Adding Source Badges\n\n**Before** (simple list):\n```typescript\nitems.forEach(item => {\n  html += `\u003Cdiv>${item.title}\u003C\u002Fdiv>`;\n});\n```\n\n**After** (enhanced with badges):\n```typescript\n\u002F\u002F 1. Add constants\nconst SOURCE_COLORS = {\n  'TechNews': '#3498db',\n  'default': '#95a5a6'\n};\n\n\u002F\u002F 2. Helper method\nprivate getSourceColor(source: string): string {\n  return SOURCE_COLORS[source] || SOURCE_COLORS['default'];\n}\n\n\u002F\u002F 3. Enhanced template\nitems.forEach(item => {\n  const color = this.getSourceColor(item.source);\n  html += `\n    \u003Cdiv class=\"news-item\">\n      \u003Cspan class=\"source-badge\" style=\"background-color: ${color};\">\n        ${item.source}\n      \u003C\u002Fspan>\n      \u003Cdiv>${item.title}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  `;\n});\n\n\u002F\u002F 4. CSS (in stylesheet)\n\u002F\u002F .source-badge {\n\u002F\u002F   padding: 2px 6px;\n\u002F\u002F   border-radius: 3px;\n\u002F\u002F   font-size: 11px;\n\u002F\u002F   color: white;\n\u002F\u002F }\n```\n\n## Common Pitfalls\n\n- **Mixing concerns**: Don't put all layout styles inline; use CSS for structure\n- **Forgetting fallbacks**: Always handle missing\u002Fnull optional fields\n- **Hard-coded values**: Extract magic numbers and colors to constants\n- **Skipping CSS updates**: Every new HTML structure needs corresponding CSS\n- **Not testing edge cases**: Test with missing images, empty strings, special characters",{"name":5,"description":7},"main","6b84b0689ca0d9e7b1e4061188ff6b60758e0f8a","openspace\u002Fexamples\u002Fmy-daily-monitor\u002Fskills\u002Fenhance-typescript-ui-components",941,"https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot","https:\u002F\u002Fgithub.com\u002FHKUDS","https:\u002F\u002Fsites.google.com\u002Fview\u002Fchaoh","2026-11-12 22:26:39",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add HKUDS\u002FAgentPilot --skill enhance-typescript-ui-components",{"tool":64,"command":65},"bunx","bunx skills add HKUDS\u002FAgentPilot --skill enhance-typescript-ui-components",{"tool":67,"command":68},"pnpm","pnpm dlx skills add HKUDS\u002FAgentPilot --skill enhance-typescript-ui-components","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fexamples\u002Fmy-daily-monitor\u002Fskills\u002Fenhance-typescript-ui-components\u002FSKILL.md",true,[72],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},".skill_id","OTHER","其他",46,"https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fexamples\u002Fmy-daily-monitor\u002Fskills\u002Fenhance-typescript-ui-components\u002F.skill_id",[79,98,116,139,163,185],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":45},"01M6HYB297NDABRERJRVG0K8R0","agentpilot","Set up AgentPilot and use its single entry to prepare missing inputs and run configured RSI experiments. Use when the user requests AgentPilot installation or work with AgentPilot.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fplugins\u002Fagentpilot\u002Fskills\u002Fagentpilot\u002FSKILL.md",[],[81,86,87,41,88,89,90,91,92,93,94,95,96,97],"prepare","requests","missing","installation","rsi","up","use","user","work","SET","run","experiments",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":45},"01M6HYAYWXTTE1J7DJM0MFNQ4H","remember","Review auto-memory entries and propose promotions to OPENSPACE.md, OPENSPACE.local.md, or retained auto-memory topics; detect duplicates, stale facts, conflicts, and ambiguous entries before making changes.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fopenspace\u002Fskills\u002Fremember\u002FSKILL.md",[],[100,105,106,107,108,43,109,110,111,112,113,114,115],"memory","review","auto","openspace","facts","detect","entries","local","conflicts","stale","duplicates",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":125,"publishedAt":45},"01M6HYAVMPM4SBDV60R2B5HPV8","skill-discovery","Search reusable OpenSpace skills locally, and browse cloud packages step by step when a cloud skill may help. Reusing proven skills saves tokens, improves reliability, and extends your capabilities beyond built-in tools.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fopenspace\u002Fhost_skills\u002Fskill-discovery\u002FSKILL.md",[122],{"categoryNo":123,"categoryName":124,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[126,127,128,108,129,130,131,132,133,134,135,136,137,138],"skill discovery","discovery","reusable","step by step","tokens","packages","help","cloud","reliability","capabilities","browse","search","Tools",{"skillNo":140,"name":141,"nameZh":6,"description":142,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":143,"categories":144,"keywords":146,"publishedAt":45},"01M6HYAR811B3RB0M50RBEDGN6","delegate-task","Delegate tasks to OpenSpace — a full-stack autonomous worker for coding, DevOps, web research, and desktop automation, backed by an extensive MCP tool and skill library. Skills auto-improve through use, reducing token consumption over time. A cloud community lets agents share and collectively evolve reusable skills.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Fopenspace\u002Fhost_skills\u002Fdelegate-task\u002FSKILL.md",[145],{"categoryNo":123,"categoryName":124,"taxonomyType":21,"taxonomyTypeDesc":22},[147,148,149,108,150,151,152,153,154,128,107,92,155,156,157,158,159,160,161,162],"delegate","task","delegate task","time","improve","desktop automation","worker","community","autonomous","tool","stack","for","share","tasks","automation","MCP",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":169,"publishedAt":45},"01M6HYAM9FSGV6E52AYENDQXYH","write-special-chars-ts-check","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, plus a reliable TypeScript type-checking step that filters output to only the newly-written files to avoid being misled by pre-existing errors.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Flegacy\u002Fv1\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-ts-check\u002FSKILL.md",[],[170,171,172,173,174,175,176,177,178,179,29,180,181,182,158,183,184],"write special chars ts check","write","check","type","files","filters","only","template","file","python","output","Existing","type-checking","errors","script",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":191,"publishedAt":45},"01M6HYAH05HGV7SVWSVR8PJRQD","write-special-chars-readback","Workaround for write_file failures caused by special characters (apostrophes, backticks, template literals) using a Python heredoc script, with mandatory post-write verification via read_file and cleanup of \u002Ftmp helper scripts.","https:\u002F\u002Fgithub.com\u002FHKUDS\u002FAgentPilot\u002Fblob\u002Fmain\u002Fopenspace\u002Flegacy\u002Fv1\u002Fshowcase\u002Fskills\u002Fwrite-special-chars-readback\u002FSKILL.md",[],[192,193,171,41,158,184,194,195,196,197,198,177,178,199,200,179],"write special chars readback","readback","helper","post","via","scripts","read","verification","cleanup"]