[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QBGKSSBY2F1HB9NF42RSYK":3,"skill-same:01M6QBGKSSBY2F1HB9NF42RSYK":104},{"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":33,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":84,"commitSha":85,"skillDirectory":86,"forksCount":87,"repositoryHtmlUrl":88,"repositoryHomepageUrl":6,"ownerHtmlUrl":89,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":90,"install":91,"resources":103},"01M6QBGKSSBY2F1HB9NF42RSYK","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.","thiagofernandes1987-create\u002FAPEX","thiagofernandes1987-create","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F235012278?v=4","01M6P9ZPHGVWK0SDZAHH74GN45","01M6P9ZPP1XQV60N6JES70PT75",2,"MIT","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fdesign\u002Fdesign-system\u002FSKILL.md",[17,22,25,28],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"design","ckm","ckm:design","ckm:design system","system","design system","architecture","code","plan","component","never","creation","workflow","css","false","css variables","next steps","Variables","strategic plan","frontend","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\"\nskill_id: design.design_system\nexecutor: HYBRID\nstatus: ADOPTED\nsecurity: { level: standard, pii: false, approval_required: false }\nanchors:\n  - design\n  - frontend\n  - engineering\ntier: 2\ninput_schema:\n  - name: code_or_task\n    type: string\n    description: \"Code snippet, script, or task description to process\"\n    required: true\noutput_schema:\n  - name: plan\n    type: string\n    description: \"Strategic plan or design document\"\n  - name: next_steps\n    type: array\n    description: \"List of recommended next steps\"\nwhat_if_fails: >\n  FALLBACK: If Ckm:Design System cannot complete, provide partial results with\n  explicit gaps noted. Never block workflow silently.\n  ESCALATE: If core capability is unavailable, suggest nearest alternative skill.\n  RULE: Always explain what failed and what manual steps can substitute.\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\n## Why This Skill Exists\n\u003C!-- TODO: describe why this skill was created and what problem it solves -->\nProvides specialized `design-system` capability to the APEX system.\n\n## When to Use\n\u003C!-- TODO: describe when to invoke this skill vs alternatives -->\nUse this skill when working with `design-system` tasks in the `design` domain.\n\n## What If Fails\n\u003C!-- TODO: describe fallback behavior -->\nFALLBACK: Use a related skill in the `design` domain.\nRULE: Never block workflow — always suggest manual alternative.\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\n## Why This Skill Exists\n\u003C!-- TODO: describe why this skill was created and what problem it solves -->\nProvides specialized `design-system` capability to the APEX system.\n\n## When to Use\n\u003C!-- TODO: describe when to invoke this skill vs alternatives -->\nUse this skill when working with `design-system` tasks in the `design` domain.\n\n## What If Fails\n\u003C!-- TODO: describe fallback behavior -->\nFALLBACK: Use a related skill in the `design` domain.\nRULE: Never block workflow — always suggest manual alternative.\n",{"name":5,"tier":13,"status":59,"anchors":60,"license":14,"executor":62,"metadata":63,"security":66,"skill_id":68,"description":7,"input_schema":69,"argument-hint":75,"output_schema":76,"what_if_fails":83},"ADOPTED",[34,53,61],"engineering","HYBRID",{"author":64,"version":65},"claudekit","1.0.0",{"pii":55,"level":67,"approval_required":55},"standard","design.design_system",[70],{"name":71,"type":72,"required":73,"description":74},"code_or_task","string",true,"Code snippet, script, or task description to process","[component or token]",[77,79],{"name":42,"type":72,"description":78},"Strategic plan or design document",{"name":80,"type":81,"description":82},"next_steps","array","List of recommended next steps","FALLBACK: If Ckm:Design System cannot complete, provide partial results with explicit gaps noted. Never block workflow silently. ESCALATE: If core capability is unavailable, suggest nearest alternative skill. RULE: Always explain what failed and what manual steps can substitute.","main","19b1e9f092771d7e208f036df866ef2350da1fc8","skills\u002Fdesign\u002Fdesign-system",0,"https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create","2026-09-19 19:19:54",{"source":8,"skillName":5,"commands":92,"prompt":102,"zipAvailable":73},[93,96,99],{"tool":94,"command":95},"npx","npx skills add thiagofernandes1987-create\u002FAPEX --skill \"ckm:design-system\"",{"tool":97,"command":98},"bunx","bunx skills add thiagofernandes1987-create\u002FAPEX --skill \"ckm:design-system\"",{"tool":100,"command":101},"pnpm","pnpm dlx skills add thiagofernandes1987-create\u002FAPEX --skill \"ckm:design-system\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fdesign\u002Fdesign-system\u002FSKILL.md",[],[105,132,154,189,213,242],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":113,"publishedAt":54},"01M6QGYATP9FFBSH598CZGB9GX","vercel-react-view-transitions","Guide for implementing smooth, native-feeling animations using React's View Transition API (`\u003CViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter\u002Fexit of components, animate list reorder, implement directional (forward\u002Fback) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering_agentops\u002Freact-view-transitions\u002FSKILL.md",[111,112],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[114,115,116,117,118,119,47,120,43,121,122,123,124,125,126,127,128,129,130,131],"react","view","vercel","vercel react view transitions","react view transitions","transitions","components","create","ui","Animation","list","guide","integrate","fallback","shared","element","implementing","capability",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":140,"publishedAt":54},"01M6QGXZ0BNVMKNZNQVZ3VKDRS","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\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering_agentops\u002Freact-best-practices\u002FSKILL.md",[138,139],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[114,141,142,143,116,144,145,146,46,120,147,148,41,149,150,151,44,152,48,153],"vercel react best practices","best practices","react best practices","writing","performance","orchestration","react components","tasks","data","analysis","refactoring","next","data fetching",{"skillNo":155,"name":156,"nameZh":6,"description":157,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":158,"categories":159,"keywords":169,"publishedAt":54},"01M6QE9XVT956E57Y5FK89AWCK","terraform-patterns","Implement — Terraform infrastructure-as-code agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw. Covers module design patterns, state management strategies, provider c","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Fcs-engineering\u002Fterraform-patterns\u002FSKILL.md",[160,163,164,165,168],{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":166,"categoryName":167,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000030","开发工程师",{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},[170,171,172,34,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188],"terraform","terraform patterns","patterns","openclaw","gemini","gemini cli","implement","infrastructure","infrastructure-as-code","decisions","provider","strategies","agent skill","module","terraform infrastructure","as","infrastructure-as","for","hybrid",{"skillNo":190,"name":191,"nameZh":6,"description":192,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":193,"categories":194,"keywords":198,"publishedAt":54},"01M6QE892KYHW8BXFCWR89318K","self-eval","Implement — Honestly evaluate AI work quality using a two-axis scoring system. Use after completing a task, code review, or work session to get an unbiased assessment. Detects score inflation,","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Fcs-engineering\u002Fself-eval\u002FSKILL.md",[195],{"categoryNo":196,"categoryName":197,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",[199,200,201,202,203,176,204,41,150,38,205,206,207,208,209,210,48,211,212,67],"eval","self eval","self","code review","review","assessment","work","session","use","work session","scoring","get","STRING","true",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":217,"categories":218,"keywords":228,"publishedAt":54},"01M6QE5P6GMPHEYPANZZ6ETD01","helm-chart-builder","Implement — Helm chart development agent skill and plugin for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw — chart scaffolding, values design, template patterns, dependency management, sec","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Fcs-engineering\u002Fhelm-chart-builder\u002FSKILL.md",[219,222,223,224,225],{"categoryNo":220,"categoryName":221,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":29,"categoryName":30,"taxonomyType":31,"taxonomyTypeDesc":32},{"categoryNo":226,"categoryName":227,"taxonomyType":31,"taxonomyTypeDesc":32},"01JBSEEDCAT000000000000033","数据分析师",[229,230,231,232,233,34,173,234,175,235,41,236,237,238,239,172,240,182,48,241],"chart builder","helm","helm chart builder","builder","chart","cli","visualization","template","generated","dependency","helm chart development","scaffolding","result",{"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":250,"publishedAt":54},"01M6QE506QW2YTHXYDN5CP7KVM","docker-development","Implement — Docker and container development agent skill and plugin for Dockerfile optimization, docker-compose orchestration, multi-stage builds, and container security hardening. Use when: u","https:\u002F\u002Fgithub.com\u002Fthiagofernandes1987-create\u002FAPEX\u002Fblob\u002Fmain\u002Fskills\u002Fengineering\u002Fcs-engineering\u002Fdocker-development\u002FSKILL.md",[248,249],{"categoryNo":161,"categoryName":162,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":26,"categoryName":27,"taxonomyType":20,"taxonomyTypeDesc":21},[251,252,253,34,254,146,255,41,256,257,258,259,260,182,48,211,261,187,188,241],"docker","development","docker development","security","dockerfile","Optimization","compose","container development","container security","docker-compose","container security hardening"]