[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6H5B0PZJ83AFX93J3D9V9XV":3,"skill-same:01M6H5B0PZJ83AFX93J3D9V9XV":184},{"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":27,"publishedAt":50,"linkOnly":51,"markdownContent":52,"markdownBody":53,"frontMatter":54,"refName":59,"commitSha":60,"skillDirectory":5,"forksCount":13,"repositoryHtmlUrl":61,"repositoryHomepageUrl":6,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M6H5B0PZJ83AFX93J3D9V9XV","ckm-design-system",null,"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.","cookeyholder\u002Fusing-ai-skills","cookeyholder","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F75561931?v=4","01M6H58KRK3MSWHTTB1Y7Q82A1","01M6H58KX5T98CH5KGFGG3K0WJ",0,"MIT","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"ckm","ckm design","ckm design system","design system","system","design","tokens","for","layer","spacing","Variables","css variables","systematic","creation","token","three","typography","brand","presentations","architecture","component","css","2026-11-10 10:12:30",false,"---\nname: ckm-design-system\ndescription: 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.\nargument-hint: \"[component or token]\"\nlicense: MIT\nmetadata:\n  author: claudekit\n  version: \"1.0.0\"\n---\n\n# Design System\n\nToken architecture, component specifications, systematic design, slide generation.\n\n## When to Use\n\n- Design token creation\n- Component state definitions\n- CSS variable systems\n- Spacing\u002Ftypography scales\n- Design-to-code handoff\n- Tailwind theme configuration\n- **Slide\u002Fpresentation generation**\n\n## Token Architecture\n\nLoad: `references\u002Ftoken-architecture.md`\n\n### Three-Layer Structure\n\n```\nPrimitive (raw values)\n       ↓\nSemantic (purpose aliases)\n       ↓\nComponent (component-specific)\n```\n\n**Example:**\n```css\n\u002F* Primitive *\u002F\n--color-blue-600: #2563EB;\n\n\u002F* Semantic *\u002F\n--color-primary: var(--color-blue-600);\n\n\u002F* Component *\u002F\n--button-bg: var(--color-primary);\n```\n\n## Quick Start\n\n**Generate tokens:**\n```bash\nnode scripts\u002Fgenerate-tokens.cjs --config tokens.json -o tokens.css\n```\n\n**Validate usage:**\n```bash\nnode scripts\u002Fvalidate-tokens.cjs --dir src\u002F\n```\n\n## References\n\n| Topic | File |\n|-------|------|\n| Token Architecture | `references\u002Ftoken-architecture.md` |\n| Primitive Tokens | `references\u002Fprimitive-tokens.md` |\n| Semantic Tokens | `references\u002Fsemantic-tokens.md` |\n| Component Tokens | `references\u002Fcomponent-tokens.md` |\n| Component Specs | `references\u002Fcomponent-specs.md` |\n| States & Variants | `references\u002Fstates-and-variants.md` |\n| Tailwind Integration | `references\u002Ftailwind-integration.md` |\n\n## Component Spec Pattern\n\n| Property | Default | Hover | Active | Disabled |\n|----------|---------|-------|--------|----------|\n| Background | primary | primary-dark | primary-darker | muted |\n| Text | white | white | white | muted-fg |\n| Border | none | none | none | muted-border |\n| Shadow | sm | md | none | none |\n\n## Scripts\n\n| Script | Purpose |\n|--------|---------|\n| `generate-tokens.cjs` | Generate CSS from JSON token config |\n| `validate-tokens.cjs` | Check for hardcoded values in code |\n| `search-slides.py` | BM25 search + contextual recommendations |\n| `slide-token-validator.py` | Validate slide HTML for token compliance |\n| `fetch-background.py` | Fetch images from Pexels\u002FUnsplash |\n\n## Templates\n\n| Template | Purpose |\n|----------|---------|\n| `design-tokens-starter.json` | Starter JSON with three-layer structure |\n\n## Integration\n\n**With brand:** Extract primitives from brand colors\u002Ftypography\n**With ui-styling:** Component tokens → Tailwind config\n\n**Skill Dependencies:** brand, ui-styling\n**Primary Agents:** ui-ux-designer, frontend-developer\n\n## Slide System\n\nBrand-compliant presentations using design tokens + Chart.js + contextual decision system.\n\n### Source of Truth\n\n| File | Purpose |\n|------|---------|\n| `docs\u002Fbrand-guidelines.md` | Brand identity, voice, colors |\n| `assets\u002Fdesign-tokens.json` | Token definitions (primitive→semantic→component) |\n| `assets\u002Fdesign-tokens.css` | CSS variables (import in slides) |\n| `assets\u002Fcss\u002Fslide-animations.css` | CSS animation library |\n\n### Slide Search (BM25)\n\n```bash\n# Basic search (auto-detect domain)\npython scripts\u002Fsearch-slides.py \"investor pitch\"\n\n# Domain-specific search\npython scripts\u002Fsearch-slides.py \"problem agitation\" -d copy\npython scripts\u002Fsearch-slides.py \"revenue growth\" -d chart\n\n# Contextual search (Premium System)\npython scripts\u002Fsearch-slides.py \"problem slide\" --context --position 2 --total 9\npython scripts\u002Fsearch-slides.py \"cta\" --context --position 9 --prev-emotion frustration\n```\n\n### Decision System CSVs\n\n| File | Purpose |\n|------|---------|\n| `data\u002Fslide-strategies.csv` | 15 deck structures + emotion arcs + sparkline beats |\n| `data\u002Fslide-layouts.csv` | 25 layouts + component variants + animations |\n| `data\u002Fslide-layout-logic.csv` | Goal → Layout + break_pattern flag |\n| `data\u002Fslide-typography.csv` | Content type → Typography scale |\n| `data\u002Fslide-color-logic.csv` | Emotion → Color treatment |\n| `data\u002Fslide-backgrounds.csv` | Slide type → Image category (Pexels\u002FUnsplash) |\n| `data\u002Fslide-copy.csv` | 25 copywriting formulas (PAS, AIDA, FAB) |\n| `data\u002Fslide-charts.csv` | 25 chart types with Chart.js config |\n\n### Contextual Decision Flow\n\n```\n1. Parse goal\u002Fcontext\n        ↓\n2. Search slide-strategies.csv → Get strategy + emotion beats\n        ↓\n3. For each slide:\n   a. Query slide-layout-logic.csv → layout + break_pattern\n   b. Query slide-typography.csv → type scale\n   c. Query slide-color-logic.csv → color treatment\n   d. Query slide-backgrounds.csv → image if needed\n   e. Apply animation class from slide-animations.css\n        ↓\n4. Generate HTML with design tokens\n        ↓\n5. Validate with slide-token-validator.py\n```\n\n### Pattern Breaking (Duarte Sparkline)\n\nPremium decks alternate between emotions for engagement:\n```\n\"What Is\" (frustration) ↔ \"What Could Be\" (hope)\n```\n\nSystem calculates pattern breaks at 1\u002F3 and 2\u002F3 positions.\n\n### Slide Requirements\n\n**ALL slides MUST:**\n1. Import `assets\u002Fdesign-tokens.css` - single source of truth\n2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.\n3. Use Chart.js for charts (NOT CSS-only bars)\n4. Include navigation (keyboard arrows, click, progress bar)\n5. Center align content\n6. Focus on persuasion\u002Fconversion\n\n### Chart.js Integration\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fchart.js@4.4.1\u002Fdist\u002Fchart.umd.min.js\">\u003C\u002Fscript>\n\n\u003Ccanvas id=\"revenueChart\">\u003C\u002Fcanvas>\n\u003Cscript>\nnew Chart(document.getElementById('revenueChart'), {\n    type: 'line',\n    data: {\n        labels: ['Sep', 'Oct', 'Nov', 'Dec'],\n        datasets: [{\n            data: [5, 12, 28, 45],\n            borderColor: '#FF6B6B',  \u002F\u002F Use brand coral\n            backgroundColor: 'rgba(255, 107, 107, 0.1)',\n            fill: true,\n            tension: 0.4\n        }]\n    }\n});\n\u003C\u002Fscript>\n```\n\n### Token Compliance\n\n```css\n\u002F* CORRECT - uses token *\u002F\nbackground: var(--slide-bg);\ncolor: var(--color-primary);\nfont-family: var(--typography-font-heading);\n\n\u002F* WRONG - hardcoded *\u002F\nbackground: #0D0D0D;\ncolor: #FF6B6B;\nfont-family: 'Space Grotesk';\n```\n\n### Reference Implementation\n\nWorking example with all features:\n```\nassets\u002Fdesigns\u002Fslides\u002Fclaudekit-pitch-251223.html\n```\n\n### Command\n\n```bash\n\u002Fslides:create \"10-slide investor pitch for ClaudeKit Marketing\"\n```\n\n## Best Practices\n\n1. Never use raw hex in components - always reference tokens\n2. Semantic layer enables theme switching (light\u002Fdark)\n3. Component tokens enable per-component customization\n4. Use HSL format for opacity control\n5. Document every token's purpose\n6. **Slides must import design-tokens.css and use var() exclusively**\n","# Design System\n\nToken architecture, component specifications, systematic design, slide generation.\n\n## When to Use\n\n- Design token creation\n- Component state definitions\n- CSS variable systems\n- Spacing\u002Ftypography scales\n- Design-to-code handoff\n- Tailwind theme configuration\n- **Slide\u002Fpresentation generation**\n\n## Token Architecture\n\nLoad: `references\u002Ftoken-architecture.md`\n\n### Three-Layer Structure\n\n```\nPrimitive (raw values)\n       ↓\nSemantic (purpose aliases)\n       ↓\nComponent (component-specific)\n```\n\n**Example:**\n```css\n\u002F* Primitive *\u002F\n--color-blue-600: #2563EB;\n\n\u002F* Semantic *\u002F\n--color-primary: var(--color-blue-600);\n\n\u002F* Component *\u002F\n--button-bg: var(--color-primary);\n```\n\n## Quick Start\n\n**Generate tokens:**\n```bash\nnode scripts\u002Fgenerate-tokens.cjs --config tokens.json -o tokens.css\n```\n\n**Validate usage:**\n```bash\nnode scripts\u002Fvalidate-tokens.cjs --dir src\u002F\n```\n\n## References\n\n| Topic | File |\n|-------|------|\n| Token Architecture | `references\u002Ftoken-architecture.md` |\n| Primitive Tokens | `references\u002Fprimitive-tokens.md` |\n| Semantic Tokens | `references\u002Fsemantic-tokens.md` |\n| Component Tokens | `references\u002Fcomponent-tokens.md` |\n| Component Specs | `references\u002Fcomponent-specs.md` |\n| States & Variants | `references\u002Fstates-and-variants.md` |\n| Tailwind Integration | `references\u002Ftailwind-integration.md` |\n\n## Component Spec Pattern\n\n| Property | Default | Hover | Active | Disabled |\n|----------|---------|-------|--------|----------|\n| Background | primary | primary-dark | primary-darker | muted |\n| Text | white | white | white | muted-fg |\n| Border | none | none | none | muted-border |\n| Shadow | sm | md | none | none |\n\n## Scripts\n\n| Script | Purpose |\n|--------|---------|\n| `generate-tokens.cjs` | Generate CSS from JSON token config |\n| `validate-tokens.cjs` | Check for hardcoded values in code |\n| `search-slides.py` | BM25 search + contextual recommendations |\n| `slide-token-validator.py` | Validate slide HTML for token compliance |\n| `fetch-background.py` | Fetch images from Pexels\u002FUnsplash |\n\n## Templates\n\n| Template | Purpose |\n|----------|---------|\n| `design-tokens-starter.json` | Starter JSON with three-layer structure |\n\n## Integration\n\n**With brand:** Extract primitives from brand colors\u002Ftypography\n**With ui-styling:** Component tokens → Tailwind config\n\n**Skill Dependencies:** brand, ui-styling\n**Primary Agents:** ui-ux-designer, frontend-developer\n\n## Slide System\n\nBrand-compliant presentations using design tokens + Chart.js + contextual decision system.\n\n### Source of Truth\n\n| File | Purpose |\n|------|---------|\n| `docs\u002Fbrand-guidelines.md` | Brand identity, voice, colors |\n| `assets\u002Fdesign-tokens.json` | Token definitions (primitive→semantic→component) |\n| `assets\u002Fdesign-tokens.css` | CSS variables (import in slides) |\n| `assets\u002Fcss\u002Fslide-animations.css` | CSS animation library |\n\n### Slide Search (BM25)\n\n```bash\n# Basic search (auto-detect domain)\npython scripts\u002Fsearch-slides.py \"investor pitch\"\n\n# Domain-specific search\npython scripts\u002Fsearch-slides.py \"problem agitation\" -d copy\npython scripts\u002Fsearch-slides.py \"revenue growth\" -d chart\n\n# Contextual search (Premium System)\npython scripts\u002Fsearch-slides.py \"problem slide\" --context --position 2 --total 9\npython scripts\u002Fsearch-slides.py \"cta\" --context --position 9 --prev-emotion frustration\n```\n\n### Decision System CSVs\n\n| File | Purpose |\n|------|---------|\n| `data\u002Fslide-strategies.csv` | 15 deck structures + emotion arcs + sparkline beats |\n| `data\u002Fslide-layouts.csv` | 25 layouts + component variants + animations |\n| `data\u002Fslide-layout-logic.csv` | Goal → Layout + break_pattern flag |\n| `data\u002Fslide-typography.csv` | Content type → Typography scale |\n| `data\u002Fslide-color-logic.csv` | Emotion → Color treatment |\n| `data\u002Fslide-backgrounds.csv` | Slide type → Image category (Pexels\u002FUnsplash) |\n| `data\u002Fslide-copy.csv` | 25 copywriting formulas (PAS, AIDA, FAB) |\n| `data\u002Fslide-charts.csv` | 25 chart types with Chart.js config |\n\n### Contextual Decision Flow\n\n```\n1. Parse goal\u002Fcontext\n        ↓\n2. Search slide-strategies.csv → Get strategy + emotion beats\n        ↓\n3. For each slide:\n   a. Query slide-layout-logic.csv → layout + break_pattern\n   b. Query slide-typography.csv → type scale\n   c. Query slide-color-logic.csv → color treatment\n   d. Query slide-backgrounds.csv → image if needed\n   e. Apply animation class from slide-animations.css\n        ↓\n4. Generate HTML with design tokens\n        ↓\n5. Validate with slide-token-validator.py\n```\n\n### Pattern Breaking (Duarte Sparkline)\n\nPremium decks alternate between emotions for engagement:\n```\n\"What Is\" (frustration) ↔ \"What Could Be\" (hope)\n```\n\nSystem calculates pattern breaks at 1\u002F3 and 2\u002F3 positions.\n\n### Slide Requirements\n\n**ALL slides MUST:**\n1. Import `assets\u002Fdesign-tokens.css` - single source of truth\n2. Use CSS variables: `var(--color-primary)`, `var(--slide-bg)`, etc.\n3. Use Chart.js for charts (NOT CSS-only bars)\n4. Include navigation (keyboard arrows, click, progress bar)\n5. Center align content\n6. Focus on persuasion\u002Fconversion\n\n### Chart.js Integration\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fchart.js@4.4.1\u002Fdist\u002Fchart.umd.min.js\">\u003C\u002Fscript>\n\n\u003Ccanvas id=\"revenueChart\">\u003C\u002Fcanvas>\n\u003Cscript>\nnew Chart(document.getElementById('revenueChart'), {\n    type: 'line',\n    data: {\n        labels: ['Sep', 'Oct', 'Nov', 'Dec'],\n        datasets: [{\n            data: [5, 12, 28, 45],\n            borderColor: '#FF6B6B',  \u002F\u002F Use brand coral\n            backgroundColor: 'rgba(255, 107, 107, 0.1)',\n            fill: true,\n            tension: 0.4\n        }]\n    }\n});\n\u003C\u002Fscript>\n```\n\n### Token Compliance\n\n```css\n\u002F* CORRECT - uses token *\u002F\nbackground: var(--slide-bg);\ncolor: var(--color-primary);\nfont-family: var(--typography-font-heading);\n\n\u002F* WRONG - hardcoded *\u002F\nbackground: #0D0D0D;\ncolor: #FF6B6B;\nfont-family: 'Space Grotesk';\n```\n\n### Reference Implementation\n\nWorking example with all features:\n```\nassets\u002Fdesigns\u002Fslides\u002Fclaudekit-pitch-251223.html\n```\n\n### Command\n\n```bash\n\u002Fslides:create \"10-slide investor pitch for ClaudeKit Marketing\"\n```\n\n## Best Practices\n\n1. Never use raw hex in components - always reference tokens\n2. Semantic layer enables theme switching (light\u002Fdark)\n3. Component tokens enable per-component customization\n4. Use HSL format for opacity control\n5. Document every token's purpose\n6. **Slides must import design-tokens.css and use var() exclusively**\n",{"name":5,"license":14,"metadata":55,"description":7,"argument-hint":58},{"author":56,"version":57},"claudekit","1.0.0","[component or token]","main","9cec288199a31b49d95245753d0eb94ebc3f099b","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills","https:\u002F\u002Fgithub.com\u002Fcookeyholder","2026-11-09 23:14:08",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add cookeyholder\u002Fusing-ai-skills --skill ckm-design-system",{"tool":70,"command":71},"bunx","bunx skills add cookeyholder\u002Fusing-ai-skills --skill ckm-design-system",{"tool":73,"command":74},"pnpm","pnpm dlx skills add cookeyholder\u002Fusing-ai-skills --skill ckm-design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002FSKILL.md",true,[78,84,88,92,96,100,104,108,112,118,122,126,130,134,138,142,148,152,156,160,164,168,172,176,180],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"data\u002Fslide-backgrounds.csv","ASSET","资产文件",1038,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-backgrounds.csv",{"path":85,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":86,"sourceHtmlUrl":87},"data\u002Fslide-charts.csv",8631,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-charts.csv",{"path":89,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":90,"sourceHtmlUrl":91},"data\u002Fslide-color-logic.csv",877,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-color-logic.csv",{"path":93,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":94,"sourceHtmlUrl":95},"data\u002Fslide-copy.csv",6427,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-copy.csv",{"path":97,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":98,"sourceHtmlUrl":99},"data\u002Fslide-layout-logic.csv",981,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-layout-logic.csv",{"path":101,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":102,"sourceHtmlUrl":103},"data\u002Fslide-layouts.csv",8760,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-layouts.csv",{"path":105,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":106,"sourceHtmlUrl":107},"data\u002Fslide-strategies.csv",8232,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-strategies.csv",{"path":109,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":110,"sourceHtmlUrl":111},"data\u002Fslide-typography.csv",735,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fdata\u002Fslide-typography.csv",{"path":113,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":116,"sourceHtmlUrl":117},"references\u002Fcomponent-specs.md","REFERENCE","参考文档",6914,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Fcomponent-specs.md",{"path":119,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":120,"sourceHtmlUrl":121},"references\u002Fcomponent-tokens.md",4986,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Fcomponent-tokens.md",{"path":123,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":124,"sourceHtmlUrl":125},"references\u002Fprimitive-tokens.md",4562,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Fprimitive-tokens.md",{"path":127,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":128,"sourceHtmlUrl":129},"references\u002Fsemantic-tokens.md",4245,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Fsemantic-tokens.md",{"path":131,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":132,"sourceHtmlUrl":133},"references\u002Fstates-and-variants.md",4771,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Fstates-and-variants.md",{"path":135,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":136,"sourceHtmlUrl":137},"references\u002Ftailwind-integration.md",5633,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Ftailwind-integration.md",{"path":139,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":140,"sourceHtmlUrl":141},"references\u002Ftoken-architecture.md",5365,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Freferences\u002Ftoken-architecture.md",{"path":143,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":146,"sourceHtmlUrl":147},"scripts\u002Fembed-tokens.cjs","SCRIPT","脚本",2558,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fembed-tokens.cjs",{"path":149,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":150,"sourceHtmlUrl":151},"scripts\u002Ffetch-background.py",12335,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Ffetch-background.py",{"path":153,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":154,"sourceHtmlUrl":155},"scripts\u002Fgenerate-slide.py",28036,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fgenerate-slide.py",{"path":157,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":158,"sourceHtmlUrl":159},"scripts\u002Fgenerate-tokens.cjs",4968,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fgenerate-tokens.cjs",{"path":161,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":162,"sourceHtmlUrl":163},"scripts\u002Fhtml-token-validator.py",12007,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fhtml-token-validator.py",{"path":165,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":166,"sourceHtmlUrl":167},"scripts\u002Fsearch-slides.py",9131,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fsearch-slides.py",{"path":169,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":170,"sourceHtmlUrl":171},"scripts\u002Fslide_search_core.py",16100,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fslide_search_core.py",{"path":173,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":174,"sourceHtmlUrl":175},"scripts\u002Fslide-token-validator.py",973,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fslide-token-validator.py",{"path":177,"resourceType":144,"resourceTypeDesc":145,"sizeBytes":178,"sourceHtmlUrl":179},"scripts\u002Fvalidate-tokens.cjs",6047,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Fscripts\u002Fvalidate-tokens.cjs",{"path":181,"resourceType":114,"resourceTypeDesc":115,"sizeBytes":182,"sourceHtmlUrl":183},"templates\u002Fdesign-tokens-starter.json",7184,"https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fckm-design-system\u002Ftemplates\u002Fdesign-tokens-starter.json",[185,216,242,269,299,327],{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":190,"sourceHtmlUrl":191,"categories":192,"keywords":199,"publishedAt":50},"01M6H5RCXCG2J10DQJZEXG5YD5","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","Apache-2.0","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fwebapp-testing\u002FSKILL.md",[193,196],{"categoryNo":194,"categoryName":195,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":197,"categoryName":198,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,35],"testing","webapp testing","webapp","frontend","screenshots","playwright","web","debugging","toolkit","browser","ui","logs","applications","behavior","local","with",{"skillNo":217,"name":218,"nameZh":6,"description":219,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":220,"sourceHtmlUrl":221,"categories":222,"keywords":224,"publishedAt":50},"01M6H5R995MJ6KTH5RA7P0ZJTW","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fweb-artifacts-builder\u002FSKILL.md",[223],{"categoryNo":197,"categoryName":198,"taxonomyType":20,"taxonomyTypeDesc":21},[225,206,226,227,228,203,49,229,230,231,232,233,234,235,236,237,238,239,240,35,241],"web artifacts builder","artifacts","artifacts builder","builder","components","react","routing","state management","state","file","Tailwind","use","single-file","simple","ui components","multi","single",{"skillNo":243,"name":244,"nameZh":6,"description":245,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":246,"sourceHtmlUrl":247,"categories":248,"keywords":250,"publishedAt":50},"01M6H5P8JRJQ89YNEJ0XPPRYBW","theme-factory","Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors\u002Ffonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Ftheme-factory\u002FSKILL.md",[249],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[251,252,253,254,208,255,226,256,257,258,259,260,261,262,263,215,264,265,266,35,267,268],"theme factory","factory","theme","docs","generate","SET","fly","slides","landing","styling","artifact","pages","themes","you","fonts","can","apply","new",{"skillNo":270,"name":271,"nameZh":6,"description":272,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":273,"sourceHtmlUrl":274,"categories":275,"keywords":282,"publishedAt":50},"01M6H5NB01PC5BCQR35K20M489","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fslack-gif-creator\u002FSKILL.md",[276,279],{"categoryNo":277,"categoryName":278,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":280,"categoryName":281,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[283,284,285,286,287,288,289,290,291,236,292,293,294,295,296,35,297,298],"slack gif creator","slack","gif","creator","validation","Tools","constraints","Animation","knowledge","me","users","make","Utilities","concepts","request","when",{"skillNo":300,"name":301,"nameZh":6,"description":302,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":303,"sourceHtmlUrl":304,"categories":305,"keywords":309,"publishedAt":50},"01M6H5N5RHSENZ03TFAB956J4V","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fskill-creator\u002FSKILL.md",[306],{"categoryNo":307,"categoryName":308,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[310,286,311,312,313,314,315,316,317,318,319,236,320,321,322,293,323,35,324,325,326,298,268],"skill creator","performance","run evals","variance analysis","create","run","benchmark","analysis","improve","edit","evals","optimize","existing skill","From Scratch","accuracy","Existing","scratch",{"skillNo":328,"name":329,"nameZh":6,"description":330,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":189,"licenseFileUrl":331,"sourceHtmlUrl":332,"categories":333,"keywords":335,"publishedAt":50},"01M6H5GMG092AS5HM45XEQ68H4","mcp-builder","Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node\u002FTypeScript (MCP SDK).","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fmcp-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fcookeyholder\u002Fusing-ai-skills\u002Fblob\u002Fmain\u002Fmcp-builder\u002FSKILL.md",[334],{"categoryNo":307,"categoryName":308,"taxonomyType":20,"taxonomyTypeDesc":21},[336,337,228,338,339,340,341,342,343,288,344,345,346,347,236,348,349,350,215,35,298],"MCP","mcp builder","typescript","python","llms","model context protocol","fastmcp","services","model","node","context","guide","integrate","mcp sdk","building mcp servers"]