[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71V77J9FBATKXBV3SHBXCQ8":3,"skill-same:01M71V77J9FBATKXBV3SHBXCQ8":187},{"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":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":13,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M71V77J9FBATKXBV3SHBXCQ8","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.","Ab0umar\u002Fselrs.cc","Ab0umar","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F250633394?v=4","01M71V4PCQ79M2BC5JWBD2RJSH","01M71V4PDRFXBJKEZM3B7S9MBF",0,"MIT","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-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],"design system","system","design","slide generation","tokens","for","three","brand","typography","layer","spacing","token","systematic","presentations","component","architecture","Variables","creation","css variables","css","2026-11-10 13:02:02",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## 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":53,"description":7,"argument-hint":56},{"author":54,"version":55},"claudekit","1.0.0","[component or token]","main","e3402c2b06ca43d3934b72e7feee0cecac251337",".agents\u002Fskills\u002Fdesign-system","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc","https:\u002F\u002Fgithub.com\u002FAb0umar","2026-11-08 19:10:17",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add Ab0umar\u002Fselrs.cc --skill design-system",{"tool":69,"command":70},"bunx","bunx skills add Ab0umar\u002Fselrs.cc --skill design-system",{"tool":72,"command":73},"pnpm","pnpm dlx skills add Ab0umar\u002Fselrs.cc --skill design-system","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002FSKILL.md",true,[77,83,87,91,95,99,103,107,111,117,121,125,129,133,137,141,147,151,155,159,163,167,171,175,179,183],{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"data\u002Fslide-backgrounds.csv","ASSET","资产文件",1038,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-backgrounds.csv",{"path":84,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":85,"sourceHtmlUrl":86},"data\u002Fslide-charts.csv",8631,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-charts.csv",{"path":88,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":89,"sourceHtmlUrl":90},"data\u002Fslide-color-logic.csv",877,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-color-logic.csv",{"path":92,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":93,"sourceHtmlUrl":94},"data\u002Fslide-copy.csv",6427,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-copy.csv",{"path":96,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":97,"sourceHtmlUrl":98},"data\u002Fslide-layout-logic.csv",981,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-layout-logic.csv",{"path":100,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":101,"sourceHtmlUrl":102},"data\u002Fslide-layouts.csv",8760,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-layouts.csv",{"path":104,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":105,"sourceHtmlUrl":106},"data\u002Fslide-strategies.csv",8232,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-strategies.csv",{"path":108,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":109,"sourceHtmlUrl":110},"data\u002Fslide-typography.csv",735,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fdata\u002Fslide-typography.csv",{"path":112,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":115,"sourceHtmlUrl":116},"references\u002Fcomponent-specs.md","REFERENCE","参考文档",6914,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Fcomponent-specs.md",{"path":118,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":119,"sourceHtmlUrl":120},"references\u002Fcomponent-tokens.md",4986,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Fcomponent-tokens.md",{"path":122,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":123,"sourceHtmlUrl":124},"references\u002Fprimitive-tokens.md",4562,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Fprimitive-tokens.md",{"path":126,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":127,"sourceHtmlUrl":128},"references\u002Fsemantic-tokens.md",4245,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Fsemantic-tokens.md",{"path":130,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":131,"sourceHtmlUrl":132},"references\u002Fstates-and-variants.md",4771,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Fstates-and-variants.md",{"path":134,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":135,"sourceHtmlUrl":136},"references\u002Ftailwind-integration.md",5633,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Ftailwind-integration.md",{"path":138,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":139,"sourceHtmlUrl":140},"references\u002Ftoken-architecture.md",5365,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Freferences\u002Ftoken-architecture.md",{"path":142,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":145,"sourceHtmlUrl":146},"scripts\u002Fembed-tokens.cjs","SCRIPT","脚本",2558,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fembed-tokens.cjs",{"path":148,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":149,"sourceHtmlUrl":150},"scripts\u002Ffetch-background.py",12287,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Ffetch-background.py",{"path":152,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":153,"sourceHtmlUrl":154},"scripts\u002Fgenerate-slide.py",28595,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fgenerate-slide.py",{"path":156,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":157,"sourceHtmlUrl":158},"scripts\u002Fgenerate-tokens.cjs",4968,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fgenerate-tokens.cjs",{"path":160,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":161,"sourceHtmlUrl":162},"scripts\u002Fhtml-token-validator.py",11894,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fhtml-token-validator.py",{"path":164,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":165,"sourceHtmlUrl":166},"scripts\u002Fsearch-slides.py",9210,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fsearch-slides.py",{"path":168,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":169,"sourceHtmlUrl":170},"scripts\u002Fslide_search_core.py",14756,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fslide_search_core.py",{"path":172,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":173,"sourceHtmlUrl":174},"scripts\u002Fslide-token-validator.py",973,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fslide-token-validator.py",{"path":176,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":177,"sourceHtmlUrl":178},"scripts\u002Ftests\u002Ftest_validate_tokens.py",1619,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Ftests\u002Ftest_validate_tokens.py",{"path":180,"resourceType":143,"resourceTypeDesc":144,"sizeBytes":181,"sourceHtmlUrl":182},"scripts\u002Fvalidate-tokens.cjs",5942,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Fscripts\u002Fvalidate-tokens.cjs",{"path":184,"resourceType":113,"resourceTypeDesc":114,"sizeBytes":185,"sourceHtmlUrl":186},"templates\u002Fdesign-tokens-starter.json",7184,"https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fdesign-system\u002Ftemplates\u002Fdesign-tokens-starter.json",[188,218,242,260,288,294],{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":197,"publishedAt":48},"01M71VCQPJ7Z990MBT1FPHDV50","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[194],{"categoryNo":195,"categoryName":196,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217],"react","react best practices","vercel react best practices","vercel","best practices","performance","writing","when","code","tasks","components","data fetching","react components","next","refactoring","data","patterns","Optimization","guidelines","triggers",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":222,"sourceHtmlUrl":223,"categories":224,"keywords":227,"publishedAt":48},"01M71VCDZS7YQ1FPEP29X0YKFJ","ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fui-styling\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fui-styling\u002FSKILL.md",[225,226],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[228,229,230,47,231,232,233,234,30,235,236,237,205,208,238,239,42,240,241,214],"ui styling","styling","ui","Tailwind","mode","canvas","implementing","themes","utility","design systems","across","create","layout","forms",{"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":14,"licenseFileUrl":6,"sourceHtmlUrl":246,"categories":247,"keywords":251,"publishedAt":48},"01M71VBTXHH9ZJVE0JKVEP309P","tailwind-v4-shadcn","| Production-tested setup for Tailwind CSS v4 with shadcn\u002Fui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn\u002Fui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color\u002Ftheming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Ftailwind-v4-shadcn\u002FSKILL.md",[248,249,250],{"categoryNo":195,"categoryName":196,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":23,"categoryName":24,"taxonomyType":25,"taxonomyTypeDesc":26},[231,252,253,254,255,256,47,46,257,232,234,44,208,43,198,258,42,259,241,230],"tailwind v4","shadcn","tailwind v4 shadcn","projects","Composition","tailwindcss","inline","config",{"skillNo":261,"name":262,"nameZh":6,"description":263,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":264,"categories":265,"keywords":272,"publishedAt":48},"01M71VA779W2BHBWQAK36TGCFF","seo","Optimize for search engine visibility and ranking. Use when asked to \"improve SEO\", \"optimize for search\", \"fix meta tags\", \"add structured data\", \"sitemap optimization\", or \"search engine optimization\".","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fseo\u002FSKILL.md",[266,269],{"categoryNo":267,"categoryName":268,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":270,"categoryName":271,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000035","市场营销",[262,273,274,275,276,277,278,205,279,213,280,33,215,281,282,283,284,285,286,287],"search engine","search","Meta","fix","ranking","improve","optimize","add","structured data","use","Meta Tags","tags","engine","web","quality",{"skillNo":289,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":290,"categories":291,"keywords":293,"publishedAt":48},"01M71V9JR7F79SVZY1MRM3XSJY","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Freact-best-practices\u002FSKILL.md",[292],{"categoryNo":195,"categoryName":196,"taxonomyType":20,"taxonomyTypeDesc":21},[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217],{"skillNo":295,"name":296,"nameZh":6,"description":297,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":298,"sourceHtmlUrl":299,"categories":300,"keywords":313,"publishedAt":48},"01M71V99JRRWABQGJ853ZCRB5N","playwright-best-practices","Use when writing Playwright tests, fixing flaky tests, debugging failures, implementing Page Object Model, configuring CI\u002FCD, optimizing performance, mocking APIs, handling authentication or OAuth, testing accessibility (axe-core), file uploads\u002Fdownloads, date\u002Ftime mocking, WebSockets, geolocation, permissions, multi-tab\u002Fpopup flows, mobile\u002Fresponsive layouts, touch gestures, GraphQL, error handling, offline mode, multi-user collaboration, third-party services (payments, email verification), console error monitoring, global setup\u002Fteardown, test annotations (skip, fixme, slow), test tags (@smoke, @fast, @critical, filtering with --grep), project dependencies, security testing (XSS, CSRF, auth), performance budgets (Web Vitals, Lighthouse), iframes, component testing, canvas\u002FWebGL, service workers\u002FPWA, test coverage, i18n\u002Flocalization, Electron apps, or browser extension testing. Covers E2E, component, API, visual, accessibility, security, Electron, and extension testing.","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fplaywright-best-practices\u002FLICENSE.md","https:\u002F\u002Fgithub.com\u002FAb0umar\u002Fselrs.cc\u002Fblob\u002Fmain\u002F.agents\u002Fskills\u002Fplaywright-best-practices\u002FSKILL.md",[301,304,307,310],{"categoryNo":302,"categoryName":303,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":305,"categoryName":306,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":308,"categoryName":309,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":311,"categoryName":312,"taxonomyType":25,"taxonomyTypeDesc":26},"01JBSEEDCAT000000000000036","内容创作者",[202,314,315,316,317,318,319,232,233,320,321,234,322,323,204,324,325,326,327,42],"playwright best practices","playwright","project","teardown","time","authentication","testing","ci","csrf","global setup","apps","monitoring","permissions","i18n"]