[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71AY4BPPHPK5NZM9ZPYYKT5":3,"skill-same:01M71AY4BPPHPK5NZM9ZPYYKT5":94},{"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":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":54,"commitSha":55,"skillDirectory":56,"forksCount":57,"repositoryHtmlUrl":58,"repositoryHomepageUrl":59,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M71AY4BPPHPK5NZM9ZPYYKT5","ui-enforcement",null,"Enforces ScribeFloat UI consistency — typography role classes, design tokens, and component primitives. Use when writing or editing Svelte\u002FCSS frontend code, Tailwind classes, forms, labels, screens, onboarding, or when the user mentions design system, typography pass, sf-* classes, scroll layout, chrome\u002Fbody panes, or UI consistency.","Lenniott\u002FscribeFloat","Lenniott","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F78645337?v=4","01M71AXCVAZT0279BTS8NERHQ5","Ben Kanagroo","01M71AXCVXE3QQP6XB9Y307P63",1,"MIT","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"ui enforcement","ui","enforcement","code","chrome","when","use","svelte","writing","design","frontend","sf","labels","panes","tokens","system","editing","Tailwind","consistency","css","2026-11-10 10:12:30",false,"---\nname: ui-enforcement\ndescription: >-\n  Enforces ScribeFloat UI consistency — typography role classes, design tokens, and component primitives. Use when writing or editing Svelte\u002FCSS frontend code, Tailwind classes, forms, labels, screens, onboarding, or when the user mentions design system, typography pass, sf-* classes, scroll layout, chrome\u002Fbody panes, or UI consistency.\n---\n\n# UI enforcement\n\nGate for all frontend work in this repo. **Load the relevant chapter only** — do not read every reference up front.\n\n## When to use\n\n- Adding or editing `.svelte` screens or components\n- Choosing Tailwind classes for text, color, spacing, or surfaces\n- Typography consistency pass or migrating inline styles to role classes\n- List\u002Fdetail\u002Fsettings panes, app shell routes, or fixing scroll clipping\n- Reviewing whether a PR matches the design system\n\n## Workflow\n\n```\n1. Apply the cheat sheet in .cursor\u002Frules\u002Fui-enforcement.mdc (auto-attached on frontend files)\n2. Only if unsure → open the reference chapter for that aspect\n3. Query live specs:  python3 skills\u002Fdesign-skill\u002Fquery.py ds get \u003Cpath>\n4. Extend primitives — do not copy class strings into screens\n5. Before finishing:  npm run check:ds\n```\n\nDo **not** read this skill file on every frontend edit — the rule + preToolUse hook carry the cheat sheet. Open chapters only for non-obvious cases.\n\n## Aspect index (progressive disclosure)\n\n| Aspect | Status | Reference |\n|--------|--------|-----------|\n| **Typography** | Active — refactor in progress | [references\u002Ftypography.md](references\u002Ftypography.md) |\n| **Color** | Active — audit complete, refactor pending | [references\u002Fcolor.md](references\u002Fcolor.md) |\n| **Layout & scroll** | Active | [references\u002Flayout-scroll.md](references\u002Flayout-scroll.md) |\n| Spacing | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Radius & shadows | Partial — `check:ds` rules exist | [references\u002FREADME.md](references\u002FREADME.md) |\n| Surfaces & elevation | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Motion | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Component primitives | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n\nRead **one chapter** for the aspect you are changing. Cross-read a second only when the task clearly spans aspects (e.g. a new form field = typography + spacing; a new list screen = layout-scroll + typography).\n\n## Hard rules (all aspects)\n\n- **Design skill first** for anything not covered in a reference chapter: `skills\u002Fdesign-skill\u002FSKILL.md`\n- **`npm run check:ds`** must pass before committing frontend changes (when rules exist for that aspect)\n- **No off-scale Tailwind defaults** in product UI (`text-base`, `text-sm`, etc.) — see typography chapter\n- **Extend primitives** (`FieldRow`, `Button`, `ScrollBody`, `PanelHeader`, …) — do not paste label\u002Flayout recipes into screens\n- **One scroll body per pane** — chrome `shrink-0`, body `ScrollBody`; screen roots use `h-full`, not bare `flex-1` on a block parent (see layout chapter)\n- **Color at call site** for contextual states (destructive, active, muted); role classes own size\u002Fweight\u002Ftracking\u002Fcase. Use **Option A** semantic fg: `text-fg`, `text-fg-dim`, `text-fg-muted` — not `text-fg\u002FN`.\n\n## Key paths\n\n| Path | Purpose |\n|------|---------|\n| `src\u002Fapp.css` | `sf-*` role classes (`@layer components`) |\n| `docs\u002Ftypography-audit.md` | Migration inventory (what still uses inline styles) |\n| `scripts\u002Fcheck-design-system.mjs` | Automated token violations |\n| `skills\u002Fdesign-skill\u002Fquery.py` | Live design system + UX playbook |\n\n## Refactor status\n\nTypography role classes are **defined** in `app.css`. Most screens still use **inline** tokens — migrating them is a separate pass. When editing a file, move it toward role classes; do not add new inline typography recipes.\n\n## Agent enforcement (rules + hooks)\n\nOptimized for **right-first-run** (fewer retry tokens):\n\n| Layer | Path | When | Effect |\n|-------|------|------|--------|\n| **Cursor rule** | `.cursor\u002Frules\u002Fui-enforcement.mdc` | Frontend files in context | Self-contained cheat sheet |\n| **preToolUse hook** | `.cursor\u002Fhooks\u002Fui-enforcement-check.mjs` | Before `Write` \u002F `StrReplace` | **Denies** if write chunk **or resulting full file** violates |\n| **postToolUse hook** | same | After write | **`additional_context`** listing remaining violations in that file (primary feedback) |\n| **afterFileEdit hook** | same | After `Write` \u002F `StrReplace` | Full-file scan + `check:ds` (stderr log) |\n| **Tests** | `.cursor\u002Fhooks\u002Fui-enforcement.test.mjs` | `npm run test:ui-enforcement` | Smoke tests for deny + follow-up |\n\nTouching a frontend file requires migrating **the whole file** — partial edits that leave `uppercase`, `text-fg\u002FN`, or inline label recipes are denied or flagged in postToolUse.\n\nShared cheat sheet: `.cursor\u002Fhooks\u002Fui-enforcement-lib.mjs` (`CHEAT_SHEET`).\n\n### Token strategy\n\n- Rule carries the decision table → agent gets typography rules when editing `.svelte` without opening skill + reference files.\n- preToolUse blocks `text-base`, `text-sm`, inline label recipes **before** they land → avoids fix-up turns.\n- Read `references\u002Ftypography.md` only for edge cases or migration work.\n\n### Tightening later (post-migration)\n\nAdd deny rules for raw `text-label-*` \u002F `text-body-*` in `ui-enforcement-lib.mjs` and `scripts\u002Fcheck-design-system.mjs` once inline usage is gone.\n","# UI enforcement\n\nGate for all frontend work in this repo. **Load the relevant chapter only** — do not read every reference up front.\n\n## When to use\n\n- Adding or editing `.svelte` screens or components\n- Choosing Tailwind classes for text, color, spacing, or surfaces\n- Typography consistency pass or migrating inline styles to role classes\n- List\u002Fdetail\u002Fsettings panes, app shell routes, or fixing scroll clipping\n- Reviewing whether a PR matches the design system\n\n## Workflow\n\n```\n1. Apply the cheat sheet in .cursor\u002Frules\u002Fui-enforcement.mdc (auto-attached on frontend files)\n2. Only if unsure → open the reference chapter for that aspect\n3. Query live specs:  python3 skills\u002Fdesign-skill\u002Fquery.py ds get \u003Cpath>\n4. Extend primitives — do not copy class strings into screens\n5. Before finishing:  npm run check:ds\n```\n\nDo **not** read this skill file on every frontend edit — the rule + preToolUse hook carry the cheat sheet. Open chapters only for non-obvious cases.\n\n## Aspect index (progressive disclosure)\n\n| Aspect | Status | Reference |\n|--------|--------|-----------|\n| **Typography** | Active — refactor in progress | [references\u002Ftypography.md](references\u002Ftypography.md) |\n| **Color** | Active — audit complete, refactor pending | [references\u002Fcolor.md](references\u002Fcolor.md) |\n| **Layout & scroll** | Active | [references\u002Flayout-scroll.md](references\u002Flayout-scroll.md) |\n| Spacing | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Radius & shadows | Partial — `check:ds` rules exist | [references\u002FREADME.md](references\u002FREADME.md) |\n| Surfaces & elevation | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Motion | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n| Component primitives | Planned | [references\u002FREADME.md](references\u002FREADME.md) |\n\nRead **one chapter** for the aspect you are changing. Cross-read a second only when the task clearly spans aspects (e.g. a new form field = typography + spacing; a new list screen = layout-scroll + typography).\n\n## Hard rules (all aspects)\n\n- **Design skill first** for anything not covered in a reference chapter: `skills\u002Fdesign-skill\u002FSKILL.md`\n- **`npm run check:ds`** must pass before committing frontend changes (when rules exist for that aspect)\n- **No off-scale Tailwind defaults** in product UI (`text-base`, `text-sm`, etc.) — see typography chapter\n- **Extend primitives** (`FieldRow`, `Button`, `ScrollBody`, `PanelHeader`, …) — do not paste label\u002Flayout recipes into screens\n- **One scroll body per pane** — chrome `shrink-0`, body `ScrollBody`; screen roots use `h-full`, not bare `flex-1` on a block parent (see layout chapter)\n- **Color at call site** for contextual states (destructive, active, muted); role classes own size\u002Fweight\u002Ftracking\u002Fcase. Use **Option A** semantic fg: `text-fg`, `text-fg-dim`, `text-fg-muted` — not `text-fg\u002FN`.\n\n## Key paths\n\n| Path | Purpose |\n|------|---------|\n| `src\u002Fapp.css` | `sf-*` role classes (`@layer components`) |\n| `docs\u002Ftypography-audit.md` | Migration inventory (what still uses inline styles) |\n| `scripts\u002Fcheck-design-system.mjs` | Automated token violations |\n| `skills\u002Fdesign-skill\u002Fquery.py` | Live design system + UX playbook |\n\n## Refactor status\n\nTypography role classes are **defined** in `app.css`. Most screens still use **inline** tokens — migrating them is a separate pass. When editing a file, move it toward role classes; do not add new inline typography recipes.\n\n## Agent enforcement (rules + hooks)\n\nOptimized for **right-first-run** (fewer retry tokens):\n\n| Layer | Path | When | Effect |\n|-------|------|------|--------|\n| **Cursor rule** | `.cursor\u002Frules\u002Fui-enforcement.mdc` | Frontend files in context | Self-contained cheat sheet |\n| **preToolUse hook** | `.cursor\u002Fhooks\u002Fui-enforcement-check.mjs` | Before `Write` \u002F `StrReplace` | **Denies** if write chunk **or resulting full file** violates |\n| **postToolUse hook** | same | After write | **`additional_context`** listing remaining violations in that file (primary feedback) |\n| **afterFileEdit hook** | same | After `Write` \u002F `StrReplace` | Full-file scan + `check:ds` (stderr log) |\n| **Tests** | `.cursor\u002Fhooks\u002Fui-enforcement.test.mjs` | `npm run test:ui-enforcement` | Smoke tests for deny + follow-up |\n\nTouching a frontend file requires migrating **the whole file** — partial edits that leave `uppercase`, `text-fg\u002FN`, or inline label recipes are denied or flagged in postToolUse.\n\nShared cheat sheet: `.cursor\u002Fhooks\u002Fui-enforcement-lib.mjs` (`CHEAT_SHEET`).\n\n### Token strategy\n\n- Rule carries the decision table → agent gets typography rules when editing `.svelte` without opening skill + reference files.\n- preToolUse blocks `text-base`, `text-sm`, inline label recipes **before** they land → avoids fix-up turns.\n- Read `references\u002Ftypography.md` only for edge cases or migration work.\n\n### Tightening later (post-migration)\n\nAdd deny rules for raw `text-label-*` \u002F `text-body-*` in `ui-enforcement-lib.mjs` and `scripts\u002Fcheck-design-system.mjs` once inline usage is gone.\n",{"name":5,"description":7},"main","b5ef710132a6cfafb03ebbe3a0640e3c69f533aa","skills\u002Fui-enforcement",0,"https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat","http:\u002F\u002Fwww.scribefloat.com","https:\u002F\u002Fgithub.com\u002FLenniott","2026-11-06 01:05:08",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add Lenniott\u002FscribeFloat --skill ui-enforcement",{"tool":68,"command":69},"bunx","bunx skills add Lenniott\u002FscribeFloat --skill ui-enforcement",{"tool":71,"command":72},"pnpm","pnpm dlx skills add Lenniott\u002FscribeFloat --skill ui-enforcement","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002FSKILL.md",true,[76,82,86,90],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fcolor.md","REFERENCE","参考文档",2937,"https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002Freferences\u002Fcolor.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002Flayout-scroll.md",6936,"https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002Freferences\u002Flayout-scroll.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002FREADME.md",992,"https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002Freferences\u002FREADME.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002Ftypography.md",3644,"https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002Freferences\u002Ftypography.md",[95,118,140,151,157,163],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":102,"publishedAt":49},"01M71AY8D00NZFWDFX81M8MJXV","ux-principles","ScribeFloat UX principles and design intent. Use when designing or reviewing any new screen, component, interaction pattern, or user flow — or when you need to understand WHY a design rule exists, not just what it is. Complements ui-enforcement (which governs tokens and class names).","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fux-principles\u002FSKILL.md",[101],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[103,104,105,106,31,107,43,38,108,35,34,109,110,111,112,113,114,115,116,117],"principles","ux","ux principles","which","just","new","you","design intent","interaction","component","intent","screen","why","pattern","flow",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":125,"publishedAt":49},"01M71AY6FEE6RJYR53NE3YYMQE","ui-taxonomy","Classify UI work into the correct taxonomy level before building. Use when creating a new UI element, naming a component, deciding where something belongs in the system, or when another skill needs a shared vocabulary for UI structure.","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-taxonomy\u002FSKILL.md",[124],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[126,127,30,128,129,44,130,131,132,108,35,34,133,134,135,112,136,137,138,139],"taxonomy","ui taxonomy","shared","for","correct","before building","element","ui structure","structure","work","naming","classify","another skill","vocabulary",{"skillNo":141,"name":142,"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":143,"categories":144,"keywords":149,"publishedAt":49},"01M71AY2PPHE695AGDD3KYSPZX","design-skill","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-skill\u002FSKILL.md",[145,148],{"categoryNo":146,"categoryName":147,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[150,38],"design skill",{"skillNo":152,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":156,"publishedAt":49},"01M71AXZZKTMM9YD5AVAVSBM6F","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fux-principles\u002FSKILL.md",[155],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[103,104,105,106,31,107,43,38,108,35,34,109,110,111,112,113,114,115,116,117],{"skillNo":158,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":162,"publishedAt":49},"01M71AXXVYX5RT5P37VZH3812S","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fui-taxonomy\u002FSKILL.md",[161],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[127,126,30,128,134,135,112,136,137,129,138,44,130,131,132,108,35,34,133,139],{"skillNo":164,"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":165,"categories":166,"keywords":169,"publishedAt":49},"01M71AXW04937ZSAT2J9QN4FQ3","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fui-enforcement\u002FSKILL.md",[167,168],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[31,29,30,48,47,46,45,44,43,42,41,40,39,38,37,36,35,34,33,32]]