[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DJ2RED59QY0MW62NE5N9H2":3,"skill-same:01M6DJ2RED59QY0MW62NE5N9H2":88},{"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":23,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":63,"ownerHtmlUrl":64,"ownerBlogUrl":65,"ownerDescription":66,"updatedAt":67,"install":68,"resources":81},"01M6DJ2RED59QY0MW62NE5N9H2","i18n-and-rtl",null,"Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir=\"rtl\", text expansion, and RTL mapper for existing CSS.","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\u002Fi18n-and-rtl\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"i18n","i18n and rtl","css","support","ui","start","data","text","margin","properties","multilingual","arabic","internationalization","layout","localization","2026-11-10 10:12:30",false,"---\nname: i18n-and-rtl\ndescription: Internationalization and right-to-left layout using UDS localization data. Logical CSS properties, dir=\"rtl\", text expansion, and RTL mapper for existing CSS.\nversion: 0.6.0\ntriggers:\n  - rtl\n  - right to left\n  - arabic layout\n  - hebrew\n  - i18n\n  - localization\n  - logical properties\n  - margin-inline-start\n  - multilingual ui\n  - l10n\n  - bidirectional\n  - RTL support\n  - logical css\n  - dir rtl\n---\n\n# i18n and RTL — UDS Skill\n\nUse this skill when the user needs **right-to-left (RTL) layout**, **internationalization (i18n)**, or **localization (l10n)** for UI built with or aligned to the Universal Design System. UDS provides a physical→logical CSS mapping and an RTL mapper script.\n\n## When to Use\n\n- User asks for RTL support (Arabic, Hebrew, Persian, Urdu, etc.).\n- User wants to use CSS logical properties instead of physical (left\u002Fright).\n- User needs to convert existing CSS to RTL-safe logical properties.\n- User is planning multilingual UI (text expansion, truncation, locale-aware layout).\n\n## Core Resources\n\n- **Physical → logical mapping:** `src\u002Fdata\u002Flocalization.csv` — maps properties like `margin-left` → `margin-inline-start`, `text-align: left` → `text-align: start`, plus border-radius, float, inset, and size tokens (inline-size, block-size).\n- **RTL mapper script:** `src\u002Fscripts\u002Frtl_mapper.py` — use `map_all(css_text)` to convert a CSS string to logical equivalents; or `map_to_logical(physical_prop)` for a single property. The script reads from the same CSV.\n- **Direction-sensitive list:** `get_direction_sensitive()` returns rows where `direction_sensitive` is true (e.g. margin-inline-start\u002Fend, not block).\n\n## RTL Checklist\n\n1. **Set document direction:** Use `dir=\"rtl\"` on `html` or the root container for RTL; `dir=\"ltr\"` for LTR. Prefer setting at root so one codebase serves both.\n2. **Use logical CSS:** Prefer logical properties so the same CSS works in LTR and RTL:\n   - Margins\u002Fpadding: `margin-inline-start`, `margin-inline-end`, `padding-inline-start`, `padding-inline-end`.\n   - Position: `inset-inline-start`, `inset-inline-end`, `inset-block-start`, `inset-block-end`.\n   - Text: `text-align: start` or `text-align: end`.\n   - Sizing: `inline-size`, `block-size`, `min-inline-size`, `max-inline-size`.\n   - Border radius: `border-start-start-radius`, `border-start-end-radius`, etc.\n3. **Do not mirror:** Numbers, logos, videos, and universal symbols (play, close) should not flip in RTL.\n4. **Convert existing CSS:** Run `python src\u002Fscripts\u002Frtl_mapper.py` (or call `map_all()` on file contents) to replace physical properties with logical ones in bulk.\n5. **Test both directions:** Toggle `dir=\"rtl\"` and `dir=\"ltr\"` and verify layout, navigation order, and focus.\n\n## Text Expansion and Locale\n\n- **Text expansion:** German can be ~30% longer than English; Chinese\u002FJapanese often shorter. Use flexible layouts (min\u002Fmax width, truncation with tooltips), avoid fixed widths for labels.\n- **Character count:** For DB\u002Fvalidation, count characters not bytes (e.g. 4 Chinese characters ≠ 4 bytes).\n- **Pseudo-localization:** Use pseudo-locale strings during development to catch overflow and RTL issues before real translation.\n\n## Quick Reference (from localization.csv)\n\n| Physical | Logical |\n|----------|---------|\n| margin-left \u002F margin-right | margin-inline-start \u002F margin-inline-end |\n| padding-left \u002F padding-right | padding-inline-start \u002F padding-inline-end |\n| left \u002F right | inset-inline-start \u002F inset-inline-end |\n| text-align: left \u002F right | text-align: start \u002F end |\n| float: left \u002F right | float: inline-start \u002F inline-end |\n| width \u002F height | inline-size \u002F block-size |\n| border-top-left-radius (etc.) | border-start-start-radius (etc.) |\n\nUse the full mapping in `src\u002Fdata\u002Flocalization.csv` for any other properties.\n","# i18n and RTL — UDS Skill\n\nUse this skill when the user needs **right-to-left (RTL) layout**, **internationalization (i18n)**, or **localization (l10n)** for UI built with or aligned to the Universal Design System. UDS provides a physical→logical CSS mapping and an RTL mapper script.\n\n## When to Use\n\n- User asks for RTL support (Arabic, Hebrew, Persian, Urdu, etc.).\n- User wants to use CSS logical properties instead of physical (left\u002Fright).\n- User needs to convert existing CSS to RTL-safe logical properties.\n- User is planning multilingual UI (text expansion, truncation, locale-aware layout).\n\n## Core Resources\n\n- **Physical → logical mapping:** `src\u002Fdata\u002Flocalization.csv` — maps properties like `margin-left` → `margin-inline-start`, `text-align: left` → `text-align: start`, plus border-radius, float, inset, and size tokens (inline-size, block-size).\n- **RTL mapper script:** `src\u002Fscripts\u002Frtl_mapper.py` — use `map_all(css_text)` to convert a CSS string to logical equivalents; or `map_to_logical(physical_prop)` for a single property. The script reads from the same CSV.\n- **Direction-sensitive list:** `get_direction_sensitive()` returns rows where `direction_sensitive` is true (e.g. margin-inline-start\u002Fend, not block).\n\n## RTL Checklist\n\n1. **Set document direction:** Use `dir=\"rtl\"` on `html` or the root container for RTL; `dir=\"ltr\"` for LTR. Prefer setting at root so one codebase serves both.\n2. **Use logical CSS:** Prefer logical properties so the same CSS works in LTR and RTL:\n   - Margins\u002Fpadding: `margin-inline-start`, `margin-inline-end`, `padding-inline-start`, `padding-inline-end`.\n   - Position: `inset-inline-start`, `inset-inline-end`, `inset-block-start`, `inset-block-end`.\n   - Text: `text-align: start` or `text-align: end`.\n   - Sizing: `inline-size`, `block-size`, `min-inline-size`, `max-inline-size`.\n   - Border radius: `border-start-start-radius`, `border-start-end-radius`, etc.\n3. **Do not mirror:** Numbers, logos, videos, and universal symbols (play, close) should not flip in RTL.\n4. **Convert existing CSS:** Run `python src\u002Fscripts\u002Frtl_mapper.py` (or call `map_all()` on file contents) to replace physical properties with logical ones in bulk.\n5. **Test both directions:** Toggle `dir=\"rtl\"` and `dir=\"ltr\"` and verify layout, navigation order, and focus.\n\n## Text Expansion and Locale\n\n- **Text expansion:** German can be ~30% longer than English; Chinese\u002FJapanese often shorter. Use flexible layouts (min\u002Fmax width, truncation with tooltips), avoid fixed widths for labels.\n- **Character count:** For DB\u002Fvalidation, count characters not bytes (e.g. 4 Chinese characters ≠ 4 bytes).\n- **Pseudo-localization:** Use pseudo-locale strings during development to catch overflow and RTL issues before real translation.\n\n## Quick Reference (from localization.csv)\n\n| Physical | Logical |\n|----------|---------|\n| margin-left \u002F margin-right | margin-inline-start \u002F margin-inline-end |\n| padding-left \u002F padding-right | padding-inline-start \u002F padding-inline-end |\n| left \u002F right | inset-inline-start \u002F inset-inline-end |\n| text-align: left \u002F right | text-align: start \u002F end |\n| float: left \u002F right | float: inline-start \u002F inline-end |\n| width \u002F height | inline-size \u002F block-size |\n| border-top-left-radius (etc.) | border-start-start-radius (etc.) |\n\nUse the full mapping in `src\u002Fdata\u002Flocalization.csv` for any other properties.\n",{"name":5,"version":44,"triggers":45,"description":7},"0.6.0",[46,47,48,49,24,38,50,51,52,53,54,55,56,57],"rtl","right to left","arabic layout","hebrew","logical properties","margin-inline-start","multilingual ui","l10n","bidirectional","RTL support","logical css","dir rtl","main","b1fb0110c763e490dfa11ab763bfec569ee334d5","plugins\u002Funiversal-design-system\u002Fskills\u002Fi18n-and-rtl",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":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add mkatogui\u002Funiversal-design-system --skill i18n-and-rtl",{"tool":74,"command":75},"bunx","bunx skills add mkatogui\u002Funiversal-design-system --skill i18n-and-rtl",{"tool":77,"command":78},"pnpm","pnpm dlx skills add mkatogui\u002Funiversal-design-system --skill i18n-and-rtl","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fi18n-and-rtl\u002FSKILL.md",true,[82],{"path":83,"resourceType":84,"resourceTypeDesc":85,"sizeBytes":86,"sourceHtmlUrl":87},"index.json","REFERENCE","参考文档",686,"https:\u002F\u002Fgithub.com\u002FDCx7C5\u002Fai-marketplace\u002Fblob\u002Fmain\u002Fskills\u002Fcloud\u002Fdevsecops\u002Fgitleaks\u002Fdetect\u002Findex.json",[89,130,153,167,188,213],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":110,"publishedAt":39},"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",[95,96,99,102,107],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":97,"categoryName":98,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":108,"categoryName":109,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000033","数据分析师",[111,112,113,114,115,116,117,118,119,120,121,122,26,123,124,125,126,127,128,129],"design","design system","system","universal design system","Tailwind","design audit","bm25","chart","app","hex","selection","react native","Animation","search","figma","component library","create","react","components",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":139,"publishedAt":39},"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",[136,137,138],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[140,141,28,142,143,144,114,145,146,147,148,149,150,151,115,123,152,112,111,26],"assistant","ui styling","styling","ui styling assistant","hover","input","responsive","snippets","focus","glassmorphism","effect","table","radius",{"skillNo":154,"name":155,"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":156,"categories":157,"keywords":162,"publishedAt":39},"01M6DJ3E034YW5AQ3B1YMZT6TX","ui-spec-prd","https:\u002F\u002Fgithub.com\u002Fmkatogui\u002Funiversal-design-system\u002Fblob\u002Fmain\u002Fplugins\u002Funiversal-design-system\u002Fskills\u002Fui-spec-prd\u002FSKILL.md",[158,161],{"categoryNo":159,"categoryName":160,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000031","产品经理",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[163,164,28,165,166],"ui spec prd","spec","prd","spec prd",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":178,"publishedAt":39},"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",[173,174,177],{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":175,"categoryName":176,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[179,180,112,111,181,182,114,183,184,185,186,113,187,29],"getting started","uds getting started","customize","project","use","install","user","pick","how",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":199,"publishedAt":39},"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",[194,197,198],{"categoryNo":195,"categoryName":196,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":100,"categoryName":101,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},[112,200,113,201,111,202,183,114,203,204,37,205,206,185,207,208,209,210,211,212],"slides","slides design system","google","pitch deck","systems","deck","typography","Rules","template","templates","google slides","design systems","powerpoint",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":217,"categories":218,"keywords":226,"publishedAt":39},"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",[219,222,223],{"categoryNo":220,"categoryName":221,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":224,"categoryName":225,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000030","开发工程师",[227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,183,245],"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"]