[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71AY6FEE6RJYR53NE3YYMQE":3,"skill-same:01M71AY6FEE6RJYR53NE3YYMQE":71},{"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":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":54,"ownerHtmlUrl":55,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":56,"install":57,"resources":70},"01M71AY6FEE6RJYR53NE3YYMQE","ui-taxonomy",null,"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.","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-taxonomy\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"ui taxonomy","ui","taxonomy","vocabulary","another skill","classify","naming","component","work","structure","ui structure","when","use","new","element","before building","correct","system","for","shared","2026-11-10 10:12:30",false,"---\nname: ui-taxonomy\ndescription: 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.\n---\n\n# UI Taxonomy\n\nClassify every UI element before you build it. Work down the decision ladder — stop at the first yes.\n\n## Order of decisions\n\n1. Is it just a value? → **Token**\n2. Will multiple components use it? → **Primitive**\n3. Is it a single, indivisible action? → **Component**\n4. Is it one action that needs multiple components working together? → **Pattern**\n5. Can the thing it is about be clearly named, and does it contain multiple patterns, components, or information about that thing? → **Section**\n6. Is it a fixed structural area of the interface regardless of content? → **Region**\n\n---\n\n## Token\n\n**Definition**\n\nA token is a single design value. It is not markup, not behavior, and not a reusable UI unit. It is the lowest level of the system and exists only to provide named values that other layers use.\n\n**Decision rule**\n\nAsk: is this just a value?\n\nIf yes, it is a token.\n\n**Folder** — design values live in `app.css` \u002F Tailwind config. No numbered folder; tokens are not components.\n\n**Examples**\n- `--color-brand` — the brand accent colour\n- `--color-canvas` — the page background\n- `sf-label-sm` — a typography role class\n- `bg-canvas`, `text-fg-dim` — Tailwind token utilities\n\n---\n\n## Primitive — `1_primitives\u002F` · `@primitives`\n\n**Definition**\n\nA primitive is styled HTML or a small UI building block that is used by multiple components. A primitive can contain other primitives. Its reason for existing is reuse across components, not direct use as a meaningful product-level unit.\n\n**Decision rule**\n\nAsk: will this be used by multiple components?\n\nIf yes, make it a primitive.\n\nIf no, it is probably just part of a component rather than its own taxonomy item.\n\n**Examples**\n- `ScrollBody` — `overflow-y-auto` scroll container used inside NoteList, UploadQueue, SettingList\n- `PanelHeader` — top chrome with title + action slots, used in capture, notes detail, settings\n- `PanelFooter` — bottom chrome for primary actions; used in capture, detail pane\n- `Modal` — focus-trap overlay; used by delete confirmation and any future dialog\n- `Chip` — small badge\u002Flabel; used in NavItem, FilterPanel\n- `StatusDot` — pulsing recording-state dot; used in TitleBar and Dictate HUD\n- `TextField` — labelled text input; used in mic name, speaker name fields\n\n---\n\n## Component — `2_components\u002F` · `@components`\n\n**Definition**\n\nA component is a base action. It is a complete, understandable unit that lets a user initiate, record, or view something. It should contain the information needed for the user to understand what it does and how to use it.\n\n**Decision rule**\n\nAsk: is this a single, indivisible action?\n\nIf yes, it is a component.\n\n**Examples**\n- `Button` — one action (primary, destructive, ghost, normal, active)\n- `Toggle` — one on\u002Foff decision\n- `NoteCard` — one note row: user can select, copy, view, or delete it\n- `UploadItem` — one queued file with progress, status, and actions\n- `NavItem` — one navigation destination: icon + label + optional badge\n- `Toast` — one transient notification\n- `Waveform` — one live PCM visualizer\n\n---\n\n## Pattern — `3_patterns\u002F` · `@patterns`\n\n**Definition**\n\nA pattern is a complex action. It combines multiple components into a single interaction flow or coordinated action. A pattern exists when one action needs multiple parts, steps, or controls to work together.\n\n**Decision rule**\n\nAsk: is this still one action, but it needs multiple components working together?\n\nIf yes, it is a pattern.\n\n**Examples**\n- `NoteComposer` — one action (create a note), but needs a TextField + Button working together\n- `NoteList` — one action (browse notes), but needs multiple InlineNote components with shared scroll state\n- `UploadQueue` — one action (manage the import queue), built from multiple UploadItem rows\n- `Accordion` — one expand\u002Fcollapse flow, coordinates multiple AccordionRow children\n\n---\n\n## Section — `4_sections\u002F` · `@sections`\n\n**Definition**\n\nA section is a contained mental model. It groups multiple patterns, components, or information around the same thing. The important boundary is that it is about one coherent object, subject, or area of understanding from the user's perspective.\n\n**Decision rule**\n\nAsk two questions.\n\nFirst: can the object or thing this is about be clearly named?\n\nSecond: does it contain multiple patterns, components, information, or related content about that same thing?\n\nIf both are yes, it is a section.\n\n**Examples**\n- `NoteDetailPane` — about one note: transcript, metadata, actions, all together\n- `FilterPanel` — about the tag vocabulary: filter rows, active count, clear action\n- `SettingsPanel` — about app settings: routes to the correct settings tab\n- `WelcomeStep` \u002F `ModelDownloadStep` — each about one named onboarding moment\n\n---\n\n## Views — `5_views\u002F` · `@views`\n\nViews are not a taxonomy level. They are route-level page compositions — they assemble regions, sections, patterns, and components into a full screen. Each view corresponds to one SvelteKit route or satellite window.\n\n**Examples**\n- `home.svelte` — Home screen (recent notes, stats)\n- `notes.svelte` — Notes screen (list + detail)\n- `capture.svelte` — Scribe capture overlay\n- `dictate.svelte` — Floating dictate HUD (satellite window)\n- `onboarding.svelte` — Onboarding flow (satellite window)\n\n---\n\n## Region — `6_regions\u002F` · `@regions`\n\n**Definition**\n\nA region is a fixed structural area of the layout. It is part of the fundamental frame of the interface, regardless of what content appears inside it. A region is more like the room than the furniture.\n\n**Decision rule**\n\nAsk: is this an area of the interface that is regularly there and stays in the same place regardless of its contents?\n\nIf yes, it is a region.\n\n**Examples**\n- `AppSidebar` — always on the left; its route icons change state but it never moves\n- `SettingsSidebar` — replaces AppSidebar in settings mode; structurally the same slot\n- `TitleBar` — always at the top of the shell; content (recording state, new note button) varies but the bar is always there\n\n---\n","# UI Taxonomy\n\nClassify every UI element before you build it. Work down the decision ladder — stop at the first yes.\n\n## Order of decisions\n\n1. Is it just a value? → **Token**\n2. Will multiple components use it? → **Primitive**\n3. Is it a single, indivisible action? → **Component**\n4. Is it one action that needs multiple components working together? → **Pattern**\n5. Can the thing it is about be clearly named, and does it contain multiple patterns, components, or information about that thing? → **Section**\n6. Is it a fixed structural area of the interface regardless of content? → **Region**\n\n---\n\n## Token\n\n**Definition**\n\nA token is a single design value. It is not markup, not behavior, and not a reusable UI unit. It is the lowest level of the system and exists only to provide named values that other layers use.\n\n**Decision rule**\n\nAsk: is this just a value?\n\nIf yes, it is a token.\n\n**Folder** — design values live in `app.css` \u002F Tailwind config. No numbered folder; tokens are not components.\n\n**Examples**\n- `--color-brand` — the brand accent colour\n- `--color-canvas` — the page background\n- `sf-label-sm` — a typography role class\n- `bg-canvas`, `text-fg-dim` — Tailwind token utilities\n\n---\n\n## Primitive — `1_primitives\u002F` · `@primitives`\n\n**Definition**\n\nA primitive is styled HTML or a small UI building block that is used by multiple components. A primitive can contain other primitives. Its reason for existing is reuse across components, not direct use as a meaningful product-level unit.\n\n**Decision rule**\n\nAsk: will this be used by multiple components?\n\nIf yes, make it a primitive.\n\nIf no, it is probably just part of a component rather than its own taxonomy item.\n\n**Examples**\n- `ScrollBody` — `overflow-y-auto` scroll container used inside NoteList, UploadQueue, SettingList\n- `PanelHeader` — top chrome with title + action slots, used in capture, notes detail, settings\n- `PanelFooter` — bottom chrome for primary actions; used in capture, detail pane\n- `Modal` — focus-trap overlay; used by delete confirmation and any future dialog\n- `Chip` — small badge\u002Flabel; used in NavItem, FilterPanel\n- `StatusDot` — pulsing recording-state dot; used in TitleBar and Dictate HUD\n- `TextField` — labelled text input; used in mic name, speaker name fields\n\n---\n\n## Component — `2_components\u002F` · `@components`\n\n**Definition**\n\nA component is a base action. It is a complete, understandable unit that lets a user initiate, record, or view something. It should contain the information needed for the user to understand what it does and how to use it.\n\n**Decision rule**\n\nAsk: is this a single, indivisible action?\n\nIf yes, it is a component.\n\n**Examples**\n- `Button` — one action (primary, destructive, ghost, normal, active)\n- `Toggle` — one on\u002Foff decision\n- `NoteCard` — one note row: user can select, copy, view, or delete it\n- `UploadItem` — one queued file with progress, status, and actions\n- `NavItem` — one navigation destination: icon + label + optional badge\n- `Toast` — one transient notification\n- `Waveform` — one live PCM visualizer\n\n---\n\n## Pattern — `3_patterns\u002F` · `@patterns`\n\n**Definition**\n\nA pattern is a complex action. It combines multiple components into a single interaction flow or coordinated action. A pattern exists when one action needs multiple parts, steps, or controls to work together.\n\n**Decision rule**\n\nAsk: is this still one action, but it needs multiple components working together?\n\nIf yes, it is a pattern.\n\n**Examples**\n- `NoteComposer` — one action (create a note), but needs a TextField + Button working together\n- `NoteList` — one action (browse notes), but needs multiple InlineNote components with shared scroll state\n- `UploadQueue` — one action (manage the import queue), built from multiple UploadItem rows\n- `Accordion` — one expand\u002Fcollapse flow, coordinates multiple AccordionRow children\n\n---\n\n## Section — `4_sections\u002F` · `@sections`\n\n**Definition**\n\nA section is a contained mental model. It groups multiple patterns, components, or information around the same thing. The important boundary is that it is about one coherent object, subject, or area of understanding from the user's perspective.\n\n**Decision rule**\n\nAsk two questions.\n\nFirst: can the object or thing this is about be clearly named?\n\nSecond: does it contain multiple patterns, components, information, or related content about that same thing?\n\nIf both are yes, it is a section.\n\n**Examples**\n- `NoteDetailPane` — about one note: transcript, metadata, actions, all together\n- `FilterPanel` — about the tag vocabulary: filter rows, active count, clear action\n- `SettingsPanel` — about app settings: routes to the correct settings tab\n- `WelcomeStep` \u002F `ModelDownloadStep` — each about one named onboarding moment\n\n---\n\n## Views — `5_views\u002F` · `@views`\n\nViews are not a taxonomy level. They are route-level page compositions — they assemble regions, sections, patterns, and components into a full screen. Each view corresponds to one SvelteKit route or satellite window.\n\n**Examples**\n- `home.svelte` — Home screen (recent notes, stats)\n- `notes.svelte` — Notes screen (list + detail)\n- `capture.svelte` — Scribe capture overlay\n- `dictate.svelte` — Floating dictate HUD (satellite window)\n- `onboarding.svelte` — Onboarding flow (satellite window)\n\n---\n\n## Region — `6_regions\u002F` · `@regions`\n\n**Definition**\n\nA region is a fixed structural area of the layout. It is part of the fundamental frame of the interface, regardless of what content appears inside it. A region is more like the room than the furniture.\n\n**Decision rule**\n\nAsk: is this an area of the interface that is regularly there and stays in the same place regardless of its contents?\n\nIf yes, it is a region.\n\n**Examples**\n- `AppSidebar` — always on the left; its route icons change state but it never moves\n- `SettingsSidebar` — replaces AppSidebar in settings mode; structurally the same slot\n- `TitleBar` — always at the top of the shell; content (recording state, new note button) varies but the bar is always there\n\n---\n",{"name":5,"description":7},"main","b5ef710132a6cfafb03ebbe3a0640e3c69f533aa","skills\u002Fui-taxonomy",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":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add Lenniott\u002FscribeFloat --skill ui-taxonomy",{"tool":63,"command":64},"bunx","bunx skills add Lenniott\u002FscribeFloat --skill ui-taxonomy",{"tool":66,"command":67},"pnpm","pnpm dlx skills add Lenniott\u002FscribeFloat --skill ui-taxonomy","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-taxonomy\u002FSKILL.md",true,[],[72,96,122,133,139,145],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":79,"publishedAt":44},"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",[78],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[80,81,82,83,84,85,86,87,37,36,35,88,89,90,31,91,92,93,94,95],"principles","ux","ux principles","which","enforcement","just","tokens","design","you","design intent","interaction","intent","screen","why","pattern","flow",{"skillNo":97,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":108,"publishedAt":44},"01M71AY4BPPHPK5NZM9ZPYYKT5","ui-enforcement","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.","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fui-enforcement\u002FSKILL.md",[102,107],{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[84,109,25,110,111,112,113,41,86,114,115,116,117,87,118,119,36,35,120,121],"ui enforcement","css","consistency","Tailwind","editing","panes","labels","sf","frontend","writing","svelte","chrome","code",{"skillNo":123,"name":124,"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":125,"categories":126,"keywords":131,"publishedAt":44},"01M71AY2PPHE695AGDD3KYSPZX","design-skill","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002Fskills\u002Fdesign-skill\u002FSKILL.md",[127,130],{"categoryNo":128,"categoryName":129,"taxonomyType":105,"taxonomyTypeDesc":106},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[132,87],"design skill",{"skillNo":134,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":135,"categories":136,"keywords":138,"publishedAt":44},"01M71AXZZKTMM9YD5AVAVSBM6F","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fux-principles\u002FSKILL.md",[137],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[80,81,82,83,84,85,86,87,37,36,35,88,89,90,31,91,92,93,94,95],{"skillNo":140,"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":141,"categories":142,"keywords":144,"publishedAt":44},"01M71AXXVYX5RT5P37VZH3812S","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fui-taxonomy\u002FSKILL.md",[143],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[24,26,25,43,33,32,31,30,29,42,28,41,40,39,38,37,36,35,34,27],{"skillNo":146,"name":98,"nameZh":6,"description":99,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":147,"categories":148,"keywords":151,"publishedAt":44},"01M71AXW04937ZSAT2J9QN4FQ3","https:\u002F\u002Fgithub.com\u002FLenniott\u002FscribeFloat\u002Fblob\u002Fmain\u002F.cursor\u002Fskills\u002Fui-enforcement\u002FSKILL.md",[149,150],{"categoryNo":103,"categoryName":104,"taxonomyType":105,"taxonomyTypeDesc":106},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[84,109,25,110,111,112,113,41,86,114,115,116,117,87,118,119,36,35,120,121]]