[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DJ2B96B98NHM7HS7R5BES7":3,"skill-same:01M6DJ2B96B98NHM7HS7R5BES7":55},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":38,"ownerDescription":39,"updatedAt":40,"install":41,"resources":54},"01M6DJ2B96B98NHM7HS7R5BES7","component-docs",null,"mkatogui\u002Funiversal-design-system","mkatogui","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F60530366?v=4","01M6DHY93EKKMDVZVMRK0HNR2G","Marcelo Katogui","01M6DHY98VP1MWVA1SD456FSXG",5,"MIT","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fcomponent-docs\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[23,24,25],"docs","component","component docs","2026-11-10 10:12:30",false,"---\nname: component-docs\ndescription: Component documentation and Storybook: stories, MDX, props tables, usage guidelines from UDS component specs.\nversion: 0.6.0\ntriggers:\n  - storybook\n  - component documentation\n  - document a component\n  - usage guidelines\n  - props table\n  - design system docs\n  - component catalog\n  - MDX\n  - component story\n  - document component\n---\n\n# Component Docs — UDS Skill\n\nUse this skill when the user needs **component documentation**, **Storybook stories**, or **usage guidelines** for the Universal Design System components. UDS has a canonical component database and APG pattern links; use them to generate consistent docs, props tables, and MDX.\n\n## When to Use\n\n- User wants to document a component (usage, props, variants, accessibility).\n- User is setting up or writing Storybook stories or MDX for the design system.\n- User needs a props table or API reference derived from UDS specs.\n- User wants a component catalog or design system documentation site content.\n\n## Core Data\n\n- **Component specs:** `src\u002Fdata\u002Fcomponents.csv` — canonical list. Columns include: `id`, `name`, `slug`, `category`, `variants`, `sizes`, `states`, `props`, `accessibility`, `use_when`, `dont_use_when`, `css_class`, `lifecycle_stage`. Use slug as stable key (e.g. `button`, `modal`, `input`).\n- **APG patterns:** `src\u002Fdata\u002Fapg-patterns.csv` — maps `component_slug` to WAI-ARIA Authoring Practices: `apg_pattern`, `apg_url`, `keyboard_interactions`, `required_aria`, `focus_management`, `live_region`. Link to `apg_url` in docs for accessibility reference.\n- **Roadmap \u002F structure:** `docs\u002FCOMPONENT-ROADMAP.md` — component count by layer (React, Vue, Svelte), categories, and peer comparison. Use for high-level doc structure.\n\n## Documentation Structure per Component\n\nFor each component, include:\n\n1. **Name and purpose** — from `name` and a short summary (e.g. from `use_when`).\n2. **Variants and sizes** — from `variants` and `sizes` (e.g. primary;secondary;ghost and sm;md;lg).\n3. **States** — from `states` (default, hover, focus, disabled, etc.).\n4. **Props \u002F API** — from `props` (comma-separated); format as a table (Prop | Type | Default | Description) for Storybook ArgsTable.\n5. **Accessibility** — from `accessibility`; add link to APG when present in `apg-patterns.csv` (`apg_url`). Include keyboard and ARIA notes from that CSV.\n6. **When to use \u002F when not** — from `use_when` and `dont_use_when`.\n7. **CSS class** — from `css_class` (BEM: `.uds-{component}` or class name used in docs).\n8. **Lifecycle** — from `lifecycle_stage` (e.g. stable, beta) if you expose it in docs.\n\n## Storybook Integration\n\n- **DocsPage \u002F MDX:** Use Doc Blocks: Canvas for live examples, ArgsTable for props, and Markdown for usage guidelines. Pull variant\u002Fsize\u002Fstate lists from components.csv so stories cover the same matrix.\n- **Stories:** One story per variant or a single story with controls for variant, size, and state. Name stories after the component slug or display name for consistency.\n- **Links:** In the docs block, add \"Accessibility\" section with link to the APG pattern URL from apg-patterns.csv when the component_slug matches.\n- **Design asset links:** If Figma or design docs exist, link them in the same doc block or in a \"Design\" section.\n\n## MCP \u002F Scripts\n\nIf the project exposes MCP: `get_component` (by slug) returns component details; use it to fill props tables or generate doc stubs. Otherwise, read `src\u002Fdata\u002Fcomponents.csv` and `src\u002Fdata\u002Fapg-patterns.csv` directly.\n\n## Quick Reference\n\n| Source | Use for |\n|--------|---------|\n| `src\u002Fdata\u002Fcomponents.csv` | Name, slug, category, variants, sizes, states, props, accessibility, use_when, dont_use_when, css_class |\n| `src\u002Fdata\u002Fapg-patterns.csv` | APG pattern name, URL, keyboard, ARIA, focus, live region per component_slug |\n| `docs\u002FCOMPONENT-ROADMAP.md` | Counts, categories, React\u002FVue\u002FSvelte parity, Storybook references |\n\nKeep documentation aligned with the CSV specs so code and docs stay in sync when components change.\n","# Component Docs — UDS Skill\n\nUse this skill when the user needs **component documentation**, **Storybook stories**, or **usage guidelines** for the Universal Design System components. UDS has a canonical component database and APG pattern links; use them to generate consistent docs, props tables, and MDX.\n\n## When to Use\n\n- User wants to document a component (usage, props, variants, accessibility).\n- User is setting up or writing Storybook stories or MDX for the design system.\n- User needs a props table or API reference derived from UDS specs.\n- User wants a component catalog or design system documentation site content.\n\n## Core Data\n\n- **Component specs:** `src\u002Fdata\u002Fcomponents.csv` — canonical list. Columns include: `id`, `name`, `slug`, `category`, `variants`, `sizes`, `states`, `props`, `accessibility`, `use_when`, `dont_use_when`, `css_class`, `lifecycle_stage`. Use slug as stable key (e.g. `button`, `modal`, `input`).\n- **APG patterns:** `src\u002Fdata\u002Fapg-patterns.csv` — maps `component_slug` to WAI-ARIA Authoring Practices: `apg_pattern`, `apg_url`, `keyboard_interactions`, `required_aria`, `focus_management`, `live_region`. Link to `apg_url` in docs for accessibility reference.\n- **Roadmap \u002F structure:** `docs\u002FCOMPONENT-ROADMAP.md` — component count by layer (React, Vue, Svelte), categories, and peer comparison. Use for high-level doc structure.\n\n## Documentation Structure per Component\n\nFor each component, include:\n\n1. **Name and purpose** — from `name` and a short summary (e.g. from `use_when`).\n2. **Variants and sizes** — from `variants` and `sizes` (e.g. primary;secondary;ghost and sm;md;lg).\n3. **States** — from `states` (default, hover, focus, disabled, etc.).\n4. **Props \u002F API** — from `props` (comma-separated); format as a table (Prop | Type | Default | Description) for Storybook ArgsTable.\n5. **Accessibility** — from `accessibility`; add link to APG when present in `apg-patterns.csv` (`apg_url`). Include keyboard and ARIA notes from that CSV.\n6. **When to use \u002F when not** — from `use_when` and `dont_use_when`.\n7. **CSS class** — from `css_class` (BEM: `.uds-{component}` or class name used in docs).\n8. **Lifecycle** — from `lifecycle_stage` (e.g. stable, beta) if you expose it in docs.\n\n## Storybook Integration\n\n- **DocsPage \u002F MDX:** Use Doc Blocks: Canvas for live examples, ArgsTable for props, and Markdown for usage guidelines. Pull variant\u002Fsize\u002Fstate lists from components.csv so stories cover the same matrix.\n- **Stories:** One story per variant or a single story with controls for variant, size, and state. Name stories after the component slug or display name for consistency.\n- **Links:** In the docs block, add \"Accessibility\" section with link to the APG pattern URL from apg-patterns.csv when the component_slug matches.\n- **Design asset links:** If Figma or design docs exist, link them in the same doc block or in a \"Design\" section.\n\n## MCP \u002F Scripts\n\nIf the project exposes MCP: `get_component` (by slug) returns component details; use it to fill props tables or generate doc stubs. Otherwise, read `src\u002Fdata\u002Fcomponents.csv` and `src\u002Fdata\u002Fapg-patterns.csv` directly.\n\n## Quick Reference\n\n| Source | Use for |\n|--------|---------|\n| `src\u002Fdata\u002Fcomponents.csv` | Name, slug, category, variants, sizes, states, props, accessibility, use_when, dont_use_when, css_class |\n| `src\u002Fdata\u002Fapg-patterns.csv` | APG pattern name, URL, keyboard, ARIA, focus, live region per component_slug |\n| `docs\u002FCOMPONENT-ROADMAP.md` | Counts, categories, React\u002FVue\u002FSvelte parity, Storybook references |\n\nKeep documentation aligned with the CSV specs so code and docs stay in sync when components change.\n",{},"main","b1fb0110c763e490dfa11ab763bfec569ee334d5","plugins\u002Funiversal-design-system\u002Fskills\u002Fcomponent-docs",1,"https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system","https:\u002F\u002Fmkatogui.github.io\u002Funiversal-design-system\u002F","https:\u002F\u002Fgithub.com\u002Fmkatogui","katonometrica.com","System Engineer focused on advanced R\u002FShiny architectures, statistical modeling, and production-grade data applications. Trained in Econometrics","2026-05-21 20:04:31",{"source":7,"skillName":5,"commands":42,"prompt":52,"zipAvailable":53},[43,46,49],{"tool":44,"command":45},"npx","npx skills add mkatogui\u002Funiversal-design-system --skill component-docs",{"tool":47,"command":48},"bunx","bunx skills add mkatogui\u002Funiversal-design-system --skill component-docs",{"tool":50,"command":51},"pnpm","pnpm dlx skills add mkatogui\u002Funiversal-design-system --skill component-docs","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fcomponent-docs\u002FSKILL.md",true,[],[56,100,124,138,158,184],{"skillNo":57,"name":58,"nameZh":6,"description":59,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":79,"publishedAt":26},"01M6DJ3R223F6NKTJ63QJCP917","universal-design-system","MAIN skill — Intelligent design system generation. Domain detection, BM25 search, rule engine, palette selection, token resolution, Tailwind\u002FReact\u002FVue\u002FSvelte output. Use when the user wants to build, design, or implement any UI (landing page, dashboard, app, component set, style guide).","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Funiversal-design-system\u002FSKILL.md",[62,65,68,71,76],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":66,"categoryName":67,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":77,"categoryName":78,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000033","数据分析师",[80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],"design","design system","system","universal design system","Tailwind","design audit","bm25","chart","app","hex","selection","react native","css","Animation","search","figma","component library","create","react","components",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":109,"publishedAt":26},"01M6DJ3J205BK44NKF3M5WM71W","ui-styling-assistant","Focused CSS\u002Fstyling helper that answers specific styling questions using Universal Design System tokens. Provides copy-paste CSS snippets with dark mode variants and responsive breakpoints.","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fui-styling\u002FSKILL.md",[106,107,108],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[110,111,112,113,114,115,83,116,117,118,119,120,121,122,84,93,123,81,80,92],"assistant","ui styling","ui","styling","ui styling assistant","hover","input","responsive","snippets","focus","glassmorphism","effect","table","radius",{"skillNo":125,"name":126,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":133,"publishedAt":26},"01M6DJ3E034YW5AQ3B1YMZT6TX","ui-spec-prd","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fui-spec-prd\u002FSKILL.md",[129,132],{"categoryNo":130,"categoryName":131,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[134,135,112,136,137],"ui spec prd","spec","prd","spec prd",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":147,"publishedAt":26},"01M6DJ397AAX8QSST26ASFZJQ8","uds-getting-started","Explains how to use the installed Universal Design System skills, pick which ones to use, and add or customize skills in your project. Use when the user asks about getting started with UDS or which skill to use.","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fuds-getting-started\u002FSKILL.md",[144,145,146],{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[148,149,81,80,150,151,83,152,153,154,155,82,156,157],"getting started","uds getting started","customize","project","use","install","user","pick","how","start",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":169,"publishedAt":26},"01M6DJ34HX2B60T7XM0KF4GGDK","slides-design-system","Generates presentation design systems with consistent slide templates, typography rules, and color schemes mapped to Universal Design System palettes. Use when the user asks for slide design, presentation design, or deck templates.","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fslides-design\u002FSKILL.md",[164,167,168],{"categoryNo":165,"categoryName":166,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":69,"categoryName":70,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[81,170,82,171,80,172,152,83,173,174,175,176,177,154,178,179,180,181,182,183],"slides","slides design system","google","pitch deck","systems","layout","deck","typography","Rules","template","templates","google slides","design systems","powerpoint",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":197,"publishedAt":26},"01M6DJ30F0R15GAQSTP2TXDF6J","pre-pr-review","Performs deep review and testing of all code changes before creating a PR. Catches TypeScript errors, lint regressions, SonarCloud code smells, test failures, and output correctness issues that would fail CI. Use when the user asks for pre-PR review, deep review, or CI simulation.","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fpre-pr-review\u002FSKILL.md",[190,193,194],{"categoryNo":191,"categoryName":192,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":195,"categoryName":196,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000030","开发工程师",[198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,152,216],"review","pr review","pre pr review","pr","code quality","pr readiness","lint","testing","typescript","test","deep","readiness","code","issues","deep review","ci","simulation","check","quality check"]