[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7CT9SSGNCMS4FHR01WNKF08":3,"skill-same:01M7CT9SSGNCMS4FHR01WNKF08":160},{"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":18,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":28,"commitSha":29,"skillDirectory":30,"forksCount":14,"repositoryHtmlUrl":31,"repositoryHomepageUrl":6,"ownerHtmlUrl":32,"ownerBlogUrl":33,"ownerDescription":34,"updatedAt":35,"install":36,"resources":49},"01M7CT9SSGNCMS4FHR01WNKF08","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.","Henrique1601\u002FSkiilsToIAs","Henrique1601","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F92006691?v=4","01M7CRXVT0GVXVK80JT1GR687S","Henrique Bezerra Dos Santos","01M7CRXVTN5Y8TMWJ1MDSKCQ1T",0,"MIT","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: 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## Script Paths\n\nScript paths in this skill and its `references\u002F` are relative to the directory that contains this SKILL.md, not to the project: `scripts\u002F\u003Cfile>` is this skill's own `scripts\u002F` folder, and `..\u002F\u003Cskill>\u002Fscripts\u002F\u003Cfile>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs\u002Fbrand-guidelines.md`, `assets\u002Fdesign-tokens.json` or `src\u002F` relative to it.\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## Script Paths\n\nScript paths in this skill and its `references\u002F` are relative to the directory that contains this SKILL.md, not to the project: `scripts\u002F\u003Cfile>` is this skill's own `scripts\u002F` folder, and `..\u002F\u003Cskill>\u002Fscripts\u002F\u003Cfile>` is a sibling sub-skill installed alongside it. Build the full path from that directory (Claude Code reports it as the skill's base directory when the skill loads) and keep the working directory at the project root — the scripts read and write project files such as `docs\u002Fbrand-guidelines.md`, `assets\u002Fdesign-tokens.json` or `src\u002F` relative to it.\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":15,"metadata":24,"description":7,"argument-hint":27},{"author":25,"version":26},"claudekit","1.0.0","[component or token]","main","a73152352c0612252131e5cf84e91312a6cf17dc","design\u002Fclaudekit-design-system","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs","https:\u002F\u002Fgithub.com\u002FHenrique1601","https:\u002F\u002Fbezerraportifolio.netlify.app\u002F","Full Stack Developer | React, Next.js, TypeScript, Node.js & IA | Construindo produtos digitais e soluções SaaS","2026-11-15 02:56:04",{"source":8,"skillName":5,"commands":37,"prompt":47,"zipAvailable":48},[38,41,44],{"tool":39,"command":40},"npx","npx skills add Henrique1601\u002FSkiilsToIAs --skill design-system",{"tool":42,"command":43},"bunx","bunx skills add Henrique1601\u002FSkiilsToIAs --skill design-system",{"tool":45,"command":46},"pnpm","pnpm dlx skills add Henrique1601\u002FSkiilsToIAs --skill design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002FSKILL.md",true,[50,56,60,64,68,72,76,80,84,90,94,98,102,106,110,114,120,124,128,132,136,140,144,148,152,156],{"path":51,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":54,"sourceHtmlUrl":55},"data\u002Fslide-backgrounds.csv","ASSET","资产文件",1038,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-backgrounds.csv",{"path":57,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":58,"sourceHtmlUrl":59},"data\u002Fslide-charts.csv",8631,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-charts.csv",{"path":61,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":62,"sourceHtmlUrl":63},"data\u002Fslide-color-logic.csv",877,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-color-logic.csv",{"path":65,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":66,"sourceHtmlUrl":67},"data\u002Fslide-copy.csv",6427,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-copy.csv",{"path":69,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":70,"sourceHtmlUrl":71},"data\u002Fslide-layout-logic.csv",981,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-layout-logic.csv",{"path":73,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":74,"sourceHtmlUrl":75},"data\u002Fslide-layouts.csv",8760,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-layouts.csv",{"path":77,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":78,"sourceHtmlUrl":79},"data\u002Fslide-strategies.csv",8232,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-strategies.csv",{"path":81,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":82,"sourceHtmlUrl":83},"data\u002Fslide-typography.csv",735,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fdata\u002Fslide-typography.csv",{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002Fcomponent-specs.md","REFERENCE","参考文档",6914,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Fcomponent-specs.md",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Fcomponent-tokens.md",4986,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Fcomponent-tokens.md",{"path":95,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002Fprimitive-tokens.md",4562,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Fprimitive-tokens.md",{"path":99,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002Fsemantic-tokens.md",4245,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Fsemantic-tokens.md",{"path":103,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":104,"sourceHtmlUrl":105},"references\u002Fstates-and-variants.md",4771,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Fstates-and-variants.md",{"path":107,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":108,"sourceHtmlUrl":109},"references\u002Ftailwind-integration.md",5633,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Ftailwind-integration.md",{"path":111,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":112,"sourceHtmlUrl":113},"references\u002Ftoken-architecture.md",5365,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Freferences\u002Ftoken-architecture.md",{"path":115,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":118,"sourceHtmlUrl":119},"scripts\u002Fembed-tokens.cjs","SCRIPT","脚本",2726,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fembed-tokens.cjs",{"path":121,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":122,"sourceHtmlUrl":123},"scripts\u002Ffetch-background.py",13116,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Ffetch-background.py",{"path":125,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":126,"sourceHtmlUrl":127},"scripts\u002Fgenerate-slide.py",28595,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fgenerate-slide.py",{"path":129,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":130,"sourceHtmlUrl":131},"scripts\u002Fgenerate-tokens.cjs",4968,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fgenerate-tokens.cjs",{"path":133,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":134,"sourceHtmlUrl":135},"scripts\u002Fhtml-token-validator.py",13187,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fhtml-token-validator.py",{"path":137,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":138,"sourceHtmlUrl":139},"scripts\u002Fsearch-slides.py",9674,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fsearch-slides.py",{"path":141,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":142,"sourceHtmlUrl":143},"scripts\u002Fslide_search_core.py",14756,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fslide_search_core.py",{"path":145,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":146,"sourceHtmlUrl":147},"scripts\u002Fslide-token-validator.py",973,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fslide-token-validator.py",{"path":149,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":150,"sourceHtmlUrl":151},"scripts\u002Ftests\u002Ftest_validate_tokens.py",1895,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Ftests\u002Ftest_validate_tokens.py",{"path":153,"resourceType":116,"resourceTypeDesc":117,"sizeBytes":154,"sourceHtmlUrl":155},"scripts\u002Fvalidate-tokens.cjs",5942,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Fscripts\u002Fvalidate-tokens.cjs",{"path":157,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":158,"sourceHtmlUrl":159},"templates\u002Fdesign-tokens-starter.json",7184,"https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fdesign\u002Fclaudekit-design-system\u002Ftemplates\u002Fdesign-tokens-starter.json",[161,168,175,183,190,197],{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":167,"publishedAt":19},"01M7E2ANBW9V6AVX5JXNCEAWF8","rag-architect-agent","Agente Arquiteto de RAG, Embeddings & Busca Vetorial. Especialista em design e implementação de pipelines de Retrieval-Augmented Generation de alta fidelidade: chunking semântico, modelagem pgvector no PostgreSQL (Neon\u002FSupabase), busca híbrida (cosseno + BM25), reranking, validação via TypeSafe AI e filosofia Ponytail (anti-overengineering).","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fcustom-agents\u002Frag-architect-agent\u002FSKILL.md",[],[],{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":19},"01M7E29KKF8R02ZRGYE2MJM67G","rag-architecture-patterns","Padrões arquiteturais e implementação de pipelines RAG (Retrieval-Augmented Generation) de alta fidelidade para qualquer projeto ou sistema. Cobre chunking semântico, embeddings, busca híbrida (pgvector + BM25), reranking, validação via TypeSafe AI e filosofia Ponytail (anti-overengineering).","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Fai-agents\u002Frag-architecture-patterns\u002FSKILL.md",[],[],{"skillNo":176,"name":177,"nameZh":6,"description":178,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":179,"licenseFileUrl":6,"sourceHtmlUrl":180,"categories":181,"keywords":182,"publishedAt":19},"01M7CWRA8E3BJ7CPY8N8EG28J1","skill-repair","Use this to fix and re-install agent skills that have failed installation.\nThis skill provides the necessary context and permissions to surgically update\nthe `manifest.json` after a fix has been applied.","Apache-2.0","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fskill-repair\u002FSKILL.md",[],[],{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":189,"publishedAt":19},"01M7CWR66FZP8FA47WVZ4Z2EXC","security-scan","Scan your Claude Code configuration (.claude\u002F directory) for security vulnerabilities, misconfigurations, and injection risks using AgentShield. Checks CLAUDE.md, settings.json, MCP servers, hooks, and agent definitions.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-scan\u002FSKILL.md",[],[],{"skillNo":191,"name":192,"nameZh":6,"description":193,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":194,"categories":195,"keywords":196,"publishedAt":19},"01M7CWR0QPY58QPTR1P759TFNG","security-review","Use this skill when adding authentication, handling user input, working with secrets, creating API endpoints, or implementing payment\u002Fsensitive features. Provides comprehensive security checklist and patterns.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-review\u002FSKILL.md",[],[],{"skillNo":198,"name":199,"nameZh":6,"description":200,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":201,"categories":202,"keywords":203,"publishedAt":19},"01M7CWQXCE40XWT4FZ3VWZFGDP","security-bounty-hunter","Hunt for exploitable, bounty-worthy security issues in repositories. Focuses on remotely reachable vulnerabilities that qualify for real reports instead of noisy local-only findings.","https:\u002F\u002Fgithub.com\u002FHenrique1601\u002FSkiilsToIAs\u002Fblob\u002Fmain\u002Futilities\u002Fsecurity-bounty-hunter\u002FSKILL.md",[],[]]