[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DHZ4EP0QVZJRBSFSQAP2HS":3,"skill-same:01M6DHZ4EP0QVZJRBSFSQAP2HS":87},{"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":28,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":60,"repositoryHtmlUrl":61,"repositoryHomepageUrl":62,"ownerHtmlUrl":63,"ownerBlogUrl":64,"ownerDescription":65,"updatedAt":66,"install":67,"resources":80},"01M6DHZ4EP0QVZJRBSFSQAP2HS","figma-handoff",null,"Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.","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\u002F.claude\u002Fskills\u002Ffigma-handoff\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41],"handoff","figma","figma handoff","design","sync","code","dev","design to code","json","align","conventions","token","tokens","2026-11-10 10:12:30",false,"---\nname: figma-handoff\ndescription: Figma to code handoff using UDS tokens. Align Figma variables with design-tokens.json, naming conventions, Dev Mode, and token sync.\nversion: 0.6.0\ntriggers:\n  - figma to code\n  - design handoff\n  - dev mode\n  - figma tokens\n  - design to code\n  - Figma variables\n  - Tokens Studio\n  - design specs\n  - figma handoff\n  - design specs for dev\n---\n\n# Figma Handoff — UDS Skill\n\nUse this skill when the user needs **design-to-code handoff** or **Figma alignment** with the Universal Design System. UDS provides W3C DTCG design tokens, a Figma-compatible token file, and a token writer for custom palettes.\n\n## When to Use\n\n- User wants to sync Figma with code (tokens, variables, Dev Mode).\n- User is setting up Figma Variables or Tokens Studio to match the codebase.\n- User needs naming conventions so developers see token names (e.g. `color.primary`) instead of raw hex in Dev Mode.\n- User wants to keep `tokens\u002Fdesign-tokens.json` and Figma in sync.\n\n## Source of Truth\n\n- **Code\u002Ftokens:** `tokens\u002Fdesign-tokens.json` — W3C DTCG format, 3-tier (primitive → semantic → palette overrides). This is the single source of truth for the build.\n- **Figma:** `tokens\u002Ffigma-tokens.json` — Figma Tokens Studio compatible. Must stay in sync with design-tokens.json for consistent handoff.\n- **Validation:** `scripts\u002Fvalidate-tokens.py` — validates DTCG structure and cross-file sync between design tokens and Figma tokens. Run after any token change.\n\n## Naming Conventions for Handoff\n\nSo developers see token names in Figma Dev Mode (not just raw values):\n\n- **Colors:** Use semantic names, e.g. `color.primary`, `color.background`, `color.text.primary`, with modes for Light\u002FDark.\n- **Spacing:** Align with UDS scale: `space.4`, `space.8`, `space.16`, etc. (4px base).\n- **Typography:** `type.heading.lg`, `type.body.md`, etc., matching UDS typography scale.\n- **Radius:** `radius.sm`, `radius.md`, `radius.lg` — per-palette in UDS.\n- **Collections and modes:** Use Figma variable collections with modes (e.g. Light\u002FDark) so Dev Mode shows the right values per theme.\n\n## Sync Workflow\n\n1. **Change tokens in one place:** Prefer editing `tokens\u002Fdesign-tokens.json` (and running the build) so CSS\u002FJS outputs stay correct.\n2. **Update Figma tokens:** Use `src\u002Fscripts\u002Ftoken_writer.py` to generate Figma token entries for custom palettes; for the core system, ensure `tokens\u002Ffigma-tokens.json` is updated to match design-tokens.json (structure and values).\n3. **Run validation:** `npm run validate` (or `python scripts\u002Fvalidate-tokens.py`) to check DTCG format and cross-file sync.\n4. **Build:** `npm run build` runs Style Dictionary and produces platform outputs (CSS, JS, iOS, Android) from design-tokens.json.\n\n## Figma Dev Mode Tips\n\n- **Designers:** Use Figma Variables (native) or Tokens Studio; avoid local styles for colors\u002Fspacing\u002Ftypography so Dev Mode can show token names.\n- **Dev handoff page:** Include a short note on naming (e.g. \"Colors use semantic tokens; see design-tokens.json\"). Link to component docs or Storybook if available.\n- **Developer notes:** Add annotations in Figma pointing to `design-tokens.json` or the docs so developers know where to read token values and usage.\n\n## Token Writer (Custom Palettes)\n\nFor **custom palettes** derived from UDS (e.g. `palette.py create \"my-palette\" --base corporate`), the token writer can generate Figma token entries matching `tokens\u002Ffigma-tokens.json` format. Use this to keep custom brand tokens in sync with Figma.\n\n## Quick Reference\n\n| Asset | Purpose |\n|-------|---------|\n| `tokens\u002Fdesign-tokens.json` | Source of truth; DTCG format; used by Style Dictionary build |\n| `tokens\u002Ffigma-tokens.json` | Figma Tokens Studio compatible; keep in sync with design-tokens.json |\n| `scripts\u002Fvalidate-tokens.py` | Validates structure and cross-file sync |\n| `src\u002Fscripts\u002Ftoken_writer.py` | Generates Figma token entries for custom palettes |\n| `npm run build` | Builds CSS\u002FJS\u002FiOS\u002FAndroid from design-tokens.json |\n","# Figma Handoff — UDS Skill\n\nUse this skill when the user needs **design-to-code handoff** or **Figma alignment** with the Universal Design System. UDS provides W3C DTCG design tokens, a Figma-compatible token file, and a token writer for custom palettes.\n\n## When to Use\n\n- User wants to sync Figma with code (tokens, variables, Dev Mode).\n- User is setting up Figma Variables or Tokens Studio to match the codebase.\n- User needs naming conventions so developers see token names (e.g. `color.primary`) instead of raw hex in Dev Mode.\n- User wants to keep `tokens\u002Fdesign-tokens.json` and Figma in sync.\n\n## Source of Truth\n\n- **Code\u002Ftokens:** `tokens\u002Fdesign-tokens.json` — W3C DTCG format, 3-tier (primitive → semantic → palette overrides). This is the single source of truth for the build.\n- **Figma:** `tokens\u002Ffigma-tokens.json` — Figma Tokens Studio compatible. Must stay in sync with design-tokens.json for consistent handoff.\n- **Validation:** `scripts\u002Fvalidate-tokens.py` — validates DTCG structure and cross-file sync between design tokens and Figma tokens. Run after any token change.\n\n## Naming Conventions for Handoff\n\nSo developers see token names in Figma Dev Mode (not just raw values):\n\n- **Colors:** Use semantic names, e.g. `color.primary`, `color.background`, `color.text.primary`, with modes for Light\u002FDark.\n- **Spacing:** Align with UDS scale: `space.4`, `space.8`, `space.16`, etc. (4px base).\n- **Typography:** `type.heading.lg`, `type.body.md`, etc., matching UDS typography scale.\n- **Radius:** `radius.sm`, `radius.md`, `radius.lg` — per-palette in UDS.\n- **Collections and modes:** Use Figma variable collections with modes (e.g. Light\u002FDark) so Dev Mode shows the right values per theme.\n\n## Sync Workflow\n\n1. **Change tokens in one place:** Prefer editing `tokens\u002Fdesign-tokens.json` (and running the build) so CSS\u002FJS outputs stay correct.\n2. **Update Figma tokens:** Use `src\u002Fscripts\u002Ftoken_writer.py` to generate Figma token entries for custom palettes; for the core system, ensure `tokens\u002Ffigma-tokens.json` is updated to match design-tokens.json (structure and values).\n3. **Run validation:** `npm run validate` (or `python scripts\u002Fvalidate-tokens.py`) to check DTCG format and cross-file sync.\n4. **Build:** `npm run build` runs Style Dictionary and produces platform outputs (CSS, JS, iOS, Android) from design-tokens.json.\n\n## Figma Dev Mode Tips\n\n- **Designers:** Use Figma Variables (native) or Tokens Studio; avoid local styles for colors\u002Fspacing\u002Ftypography so Dev Mode can show token names.\n- **Dev handoff page:** Include a short note on naming (e.g. \"Colors use semantic tokens; see design-tokens.json\"). Link to component docs or Storybook if available.\n- **Developer notes:** Add annotations in Figma pointing to `design-tokens.json` or the docs so developers know where to read token values and usage.\n\n## Token Writer (Custom Palettes)\n\nFor **custom palettes** derived from UDS (e.g. `palette.py create \"my-palette\" --base corporate`), the token writer can generate Figma token entries matching `tokens\u002Ffigma-tokens.json` format. Use this to keep custom brand tokens in sync with Figma.\n\n## Quick Reference\n\n| Asset | Purpose |\n|-------|---------|\n| `tokens\u002Fdesign-tokens.json` | Source of truth; DTCG format; used by Style Dictionary build |\n| `tokens\u002Ffigma-tokens.json` | Figma Tokens Studio compatible; keep in sync with design-tokens.json |\n| `scripts\u002Fvalidate-tokens.py` | Validates structure and cross-file sync |\n| `src\u002Fscripts\u002Ftoken_writer.py` | Generates Figma token entries for custom palettes |\n| `npm run build` | Builds CSS\u002FJS\u002FiOS\u002FAndroid from design-tokens.json |\n",{"name":5,"version":47,"triggers":48,"description":7},"0.6.0",[49,50,51,52,36,53,54,55,31,56],"figma to code","design handoff","dev mode","figma tokens","Figma variables","Tokens Studio","design specs","design specs for dev","main","b1fb0110c763e490dfa11ab763bfec569ee334d5",".claude\u002Fskills\u002Ffigma-handoff",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":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add mkatogui\u002Funiversal-design-system --skill figma-handoff",{"tool":73,"command":74},"bunx","bunx skills add mkatogui\u002Funiversal-design-system --skill figma-handoff",{"tool":76,"command":77},"pnpm","pnpm dlx skills add mkatogui\u002Funiversal-design-system --skill figma-handoff","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Ffigma-handoff\u002FSKILL.md",true,[81],{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"scripts\u002Fonboard-client.py","SCRIPT","脚本",9365,"https:\u002F\u002Fgithub.com\u002Fchriswestt\u002Fclaude-skills\u002Fblob\u002Fmain\u002Fclient-onboard-pipeline\u002Fscripts\u002Fonboard-client.py",[88,124,148,162,184,210],{"skillNo":89,"name":90,"nameZh":6,"description":91,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":92,"categories":93,"keywords":105,"publishedAt":42},"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",[94,97,100,101,102],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},{"categoryNo":103,"categoryName":104,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000033","数据分析师",[32,106,107,108,109,110,111,112,113,114,115,116,117,118,119,30,120,121,122,123],"design system","system","universal design system","Tailwind","design audit","bm25","chart","app","hex","selection","react native","css","Animation","search","component library","create","react","components",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":133,"publishedAt":42},"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",[130,131,132],{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[134,135,136,137,138,139,108,140,141,142,143,144,145,146,109,118,147,106,32,117],"assistant","ui styling","ui","styling","ui styling assistant","hover","input","responsive","snippets","focus","glassmorphism","effect","table","radius",{"skillNo":149,"name":150,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":157,"publishedAt":42},"01M6DJ3E034YW5AQ3B1YMZT6TX","ui-spec-prd","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fui-spec-prd\u002FSKILL.md",[153,156],{"categoryNo":154,"categoryName":155,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[158,159,136,160,161],"ui spec prd","spec","prd","spec prd",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":173,"publishedAt":42},"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",[168,169,172],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":170,"categoryName":171,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[174,175,106,32,176,177,108,178,179,180,181,107,182,183],"getting started","uds getting started","customize","project","use","install","user","pick","how","start",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":195,"publishedAt":42},"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",[190,193,194],{"categoryNo":191,"categoryName":192,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[106,196,107,197,32,198,178,108,199,200,201,202,203,180,204,205,206,207,208,209],"slides","slides design system","google","pitch deck","systems","layout","deck","typography","Rules","template","templates","google slides","design systems","powerpoint",{"skillNo":211,"name":212,"nameZh":6,"description":213,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":214,"categories":215,"keywords":223,"publishedAt":42},"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",[216,219,220],{"categoryNo":217,"categoryName":218,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":95,"categoryName":96,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":221,"categoryName":222,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师",[224,225,226,227,228,229,230,231,232,233,234,235,34,236,237,238,239,240,178,241],"review","pr review","pre pr review","pr","code quality","pr readiness","lint","testing","typescript","test","deep","readiness","issues","deep review","ci","simulation","check","quality check"]