[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D28QCTQ96SXMFHSBC537PZ":3,"skill-same:01M6D28QCTQ96SXMFHSBC537PZ":65},{"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":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":47,"ownerDescription":49,"updatedAt":50,"install":51,"resources":64},"01M6D28QCTQ96SXMFHSBC537PZ","ui-anatomy",null,"The contract of each interface component, decided by structure and logic rather than by eye: its parts, variants and when each is used, sizes, every state, keyboard behaviour, content rules and the usual mistakes, for buttons, icon buttons, links, segmented controls, tabs, navigation, breadcrumbs, cards, stats, tables, form fields, selects, checkboxes, radios, switches, badges, alerts, toasts, dialogs, drawers, menus, tooltips, pagination, search, empty states, avatars and the theme toggle. Read before building any of them.","enowdev\u002Fenowxcli","enowdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F179420349?v=4","01M6D1MVX2KC0X3Z9NESE7P22K","Enow Dev.","01M6D1MW1FMZGBDKWAJY4GQX81",67,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-anatomy\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"ui anatomy","anatomy","ui","navigation","contract","logic","empty","alerts","structure","pagination","component","read","before building","Rules","stats","content","search","state","2026-11-10 10:12:30",false,"---\nname: ui-anatomy\ndescription: \"The contract of each interface component, decided by structure and logic rather than by eye: its parts, variants and when each is used, sizes, every state, keyboard behaviour, content rules and the usual mistakes, for buttons, icon buttons, links, segmented controls, tabs, navigation, breadcrumbs, cards, stats, tables, form fields, selects, checkboxes, radios, switches, badges, alerts, toasts, dialogs, drawers, menus, tooltips, pagination, search, empty states, avatars and the theme toggle. Read before building any of them.\"\n---\n\n# Component anatomy\n\nA component built by eye has whatever parts the moment suggested: a button\nwith no disabled state, a tab row whose selected tab differs only by a\nshade, a toggle with a label in front, a stat with no period. Each\ncomponent below is a contract: what it is made of, which variant when,\nwhich sizes, which states it must show, how the keyboard drives it, what\nits words must be, and the mistakes to avoid. Build every instance to it.\nThe `ui-part-*` skills go deeper on each; `ui-structure` says where they go.\n\nShared rules for every interactive component:\n- **States**: default, hover, focus-visible (a 2px ring in the accent with\n  offset, never removed), active (pressed), disabled (not just faded: no\n  pointer, `aria-disabled` or `disabled`), and where it applies selected,\n  loading and error.\n- **Sizes** come from one control-height scale: sm 32, md 40 (default),\n  lg 48. Touch targets 44px on touch screens (padding may extend it).\n- **Names**: every control has an accessible name; an icon-only control\n  has `aria-label` (and a `title` tooltip).\n- **Colour** never carries meaning alone: selected also has weight, a\n  mark, a fill or an underline; an error also has text.\n\n## Button\n\n- **Parts**: label (verb first: \"Save changes\", \"Create invoice\"),\n  optional leading icon, optional trailing icon for direction or menus.\n- **Variants**: *primary* (filled accent; one per screen or per card in a\n  set of choices), *secondary* (outline or tinted), *ghost* (text only, for\n  low-weight actions in toolbars), *danger* (destructive, always confirmed),\n  *link* (inline navigation that looks like a link). Use a link (`\u003Ca>`) to\n  go somewhere and a button to do something.\n- **Sizes**: sm 32 \u002F md 40 \u002F lg 48; horizontal padding about 1.5x the\n  font size; a button next to an input shares its height.\n- **States**: all shared states plus *loading* (spinner replaces the\n  leading icon or sits before the label, width stays the same, disabled\n  while loading).\n- **Content**: 1 to 3 words; the same action has the same word everywhere;\n  no \"Click here\", no \"Submit\" when you can say what is submitted.\n- **Mistakes**: three primary buttons side by side; buttons of different\n  heights in one row; an arrow on every button; a disabled button with no\n  reason given nearby.\n\n## Icon button\n\nSquare, the control height on each side, one icon at 16 to 20px, a\nvisible hover surface, `aria-label` and `title`. Used for well-known\nactions only (close, menu, more, copy, theme). If people would not know\nthe icon, use a labelled button.\n\n**Theme toggle** is an icon button: sun or moon, no visible text, its\n`aria-label` says what it switches to (\"Switch to dark theme\"), updated on\neach switch, placed in the header's right group.\n\n## Link\n\nInline in text: underlined or clearly coloured, visited state where it\nhelps. Standalone: the destination as the words (\"Pricing\", \"View all\ninvoices\"). An external link says so (an icon with a label).\n\n## Segmented control\n\nA small set (2 to 5) of mutually exclusive options that switch a view in\nplace: a time range, Buy or Sell, List or Grid.\n\n- **Parts**: a track (a filled or outlined container, the control\n  height), segments of equal height, the selected segment as a raised or\n  filled block with stronger text.\n- **States**: selected is unmistakable (filled block plus weight), hover on\n  the others, focus-visible on the segment, disabled segments greyed and\n  skipped.\n- **Keyboard**: a radio group: Tab into the selected one, arrows move and\n  select. `role=\"radiogroup\"`\u002F`radio` or native radios.\n- **Mistakes**: segments with no track so they read as loose words;\n  selected shown by a slightly lighter grey; segments of different widths\n  for no reason; used for navigation between pages (that is tabs or\n  links).\n\n## Tabs\n\nSwitch between views of the same object, content below.\n\n- **Parts**: a tab list on one baseline, tabs with labels (and an optional\n  count), an indicator under the selected tab (2px, accent), a divider\n  under the list, the panel.\n- **States**: selected (indicator plus text colour), hover, focus-visible,\n  disabled.\n- **Keyboard**: arrows move between tabs, Home\u002FEnd, Tab enters the panel.\n  `role=\"tablist\"`, `tab`, `tabpanel`, `aria-selected`, `aria-controls`.\n- **Behaviour**: on a phone, the list scrolls sideways inside itself; the\n  page never does. Deep-linkable when a tab is a page section.\n- **Mistakes**: tabs used as actions; more than 7 tabs; the selected tab\n  differing by colour alone; the tab list wider than the screen with\n  nothing to scroll it.\n\n## Navigation\n\n- **Top bar** (3 to 6 destinations): logo left, links centre or left\n  after the logo, actions right; the current page marked (weight plus\n  indicator, `aria-current=\"page\"`). Below 768: a menu button that opens a\n  full-height panel with the same links in the same order.\n- **Sidebar** (5 to 9 sections, app screens): sections with icons and\n  labels, grouped with small headings, the current item filled, collapsed\n  to icons with tooltips on medium widths, a drawer on a phone. Account\n  and settings at the bottom.\n- **Mistakes**: dead links; a different order on mobile; the current page\n  not marked; icon-only navigation without labels.\n\n## Breadcrumbs\n\nThe path from a top level to the current page, for hierarchies three or\nmore deep. Parts: links for each ancestor, a separator (`\u002F` or chevron,\n`aria-hidden`), the current page as plain text with `aria-current=\"page\"`,\ninside `\u003Cnav aria-label=\"Breadcrumb\">`. On a phone show the parent only\n(\"\u003C Projects\"). Not on a homepage or a flat site.\n\n## Card\n\nA container for one thing (an item, a summary, a group of related\ncontrols). Parts: optional media, title, supporting text or data, meta,\nactions (one primary at most). Padding from the spacing scale (16 to 24),\none radius, either a border or a shadow, not both loud. Cards in one row\nshare height and inner alignment. A whole card is clickable only if it has\none destination, and then it is one link, not nested buttons.\n\n## Stat (KPI)\n\nLabel (what it measures), value (large, tabular figures, unit), change\nagainst a named period with direction (\"+12.4% vs last week\", coloured\nand with an arrow), optional sparkline, optional link to the detail. The\nvalue is the largest text in the card. Without a period, a change means\nnothing; without a label, a number means nothing.\n\n## Table\n\n- **Parts**: header row (column labels, sortable ones with a sort\n  indicator and `aria-sort`), rows, cells aligned by type (text left,\n  numbers right with tabular figures, actions right), optional selection\n  column, footer or pagination.\n- **States**: row hover, selected, loading (skeleton rows), empty (a\n  message in the table's place with an action).\n- **Responsive**: below 768, either scroll inside its own container with\n  the first column sticky, or become a list of rows with label: value\n  pairs. The page never scrolls sideways.\n- **Mistakes**: centred numbers; different decimals in one column; ten\n  columns where four matter; action buttons in every row instead of a row\n  menu.\n\n## Form field\n\n- **Parts**: label (always visible, above the input), the input, optional\n  help text below, error text below in the danger colour with an icon,\n  optional unit or prefix inside the input (\"BTC\", \"$\"), required or\n  optional marked (mark the rarer one).\n- **Input**: the control height, a placeholder that shows the format\n  (\"0.00\"), never the label. Number inputs show their unit and step;\n  amounts allow a \"Max\" shortcut when there is a ceiling.\n- **States**: focus (ring), filled, error (border plus message, set after\n  the user leaves the field or submits), disabled, read-only.\n- **Behaviour**: validate on blur and submit, not on every keystroke; the\n  submit button explains why it is disabled, or stays enabled and shows\n  errors on submit.\n- **Mistakes**: placeholder as label; error only in red; help text that\n  repeats the label.\n\n## Select and combobox\n\nA closed control showing the current value and a chevron; opens a list\nwith the selected option marked (check) and keyboard support (arrows,\ntype to jump, Enter, Escape). A custom one (the native select looks\ndifferent on every OS) is built to the listbox pattern (`ui-part-choices`).\nMore than 10 options: a combobox with search.\n\n## Checkbox, radio, switch\n\n- **Checkbox**: independent yes\u002Fno choices, or many of a list; label to\n  the right, the whole row clickable; indeterminate for \"some\".\n- **Radio**: one of a few (2 to 5) shown all at once; a group label.\n- **Switch**: a setting that takes effect immediately (on\u002Foff), label on\n  the left, state readable without colour (\"On\"). Not for choices that\n  need a Save button: that is a checkbox.\n\n## Badge and tag\n\nA short status or category: 1 to 2 words, small (20 to 24px tall),\nsemantic colour (neutral, info, success, warning, danger) from tokens,\nwith text that says the status (\"Paid\", \"Overdue\"). Not a button; a\nremovable tag has its own close button with a label.\n\n## Alert, banner, toast\n\n- **Alert** (inline, in the page): icon, title, text, optional action;\n  semantic colour; stays until resolved.\n- **Banner** (whole app, top): system-wide state (trial ends, outage);\n  dismissible if not critical.\n- **Toast** (temporary, corner): confirmation of an action the user took\n  (\"Invoice sent\", with Undo); 4 to 6 seconds, paused on hover; errors that\n  need action are not toasts.\n\n## Dialog and drawer\n\nA dialog asks for a decision or a short task: title, content, actions\nright (primary last, or first by platform convention; consistent\neverywhere), close button, Escape closes, focus moves in and is trapped,\nreturns to the trigger after. Destructive confirmation names the thing\n(\"Delete 3 invoices?\") and the button says the action (\"Delete\"). A drawer\nis for longer tasks beside the page (details, filters).\n\n## Menu (dropdown menu)\n\nA list of actions from a trigger (the \"more\" icon button, an account\navatar): items with optional icons and shortcuts, groups with dividers,\ndestructive items last in the danger colour. Keyboard: arrows, Enter,\nEscape, type-ahead. Not for navigation of the whole site.\n\n## Tooltip\n\nShort help on hover and focus for an icon button or an abbreviation; never\nthe only place important information lives; never on a disabled button\nthat cannot receive focus (put the reason beside it).\n\n## Pagination\n\nPrevious and next with labels, page numbers with the current marked, the\ntotal (\"1-20 of 312\"), page size where people need it. For feeds, \"Load\nmore\" or infinite scroll with a stable position.\n\n## Search\n\nAn input with a search icon, a placeholder that says what it searches\n(\"Search invoices\"), a clear button when filled, `Cmd\u002FCtrl+K` for a global\none, results as you type for small sets, on Enter for large ones, and a\n\"no results\" state that suggests what to do.\n\n## Empty state\n\nWhere content will be: what goes here, why it is empty now, and the one\naction that fills it (\"No invoices yet. Create your first invoice.\").\nA simple illustration or icon only if it helps. Different from \"no\nresults\" (offer clearing filters) and from an error (offer retry).\n\n## Avatar\n\nA circle or rounded square of a fixed size scale (24, 32, 40), the\nperson's image or initials on a neutral or derived colour, an `alt` or a\nname beside it, a status dot when presence matters.\n","# Component anatomy\n\nA component built by eye has whatever parts the moment suggested: a button\nwith no disabled state, a tab row whose selected tab differs only by a\nshade, a toggle with a label in front, a stat with no period. Each\ncomponent below is a contract: what it is made of, which variant when,\nwhich sizes, which states it must show, how the keyboard drives it, what\nits words must be, and the mistakes to avoid. Build every instance to it.\nThe `ui-part-*` skills go deeper on each; `ui-structure` says where they go.\n\nShared rules for every interactive component:\n- **States**: default, hover, focus-visible (a 2px ring in the accent with\n  offset, never removed), active (pressed), disabled (not just faded: no\n  pointer, `aria-disabled` or `disabled`), and where it applies selected,\n  loading and error.\n- **Sizes** come from one control-height scale: sm 32, md 40 (default),\n  lg 48. Touch targets 44px on touch screens (padding may extend it).\n- **Names**: every control has an accessible name; an icon-only control\n  has `aria-label` (and a `title` tooltip).\n- **Colour** never carries meaning alone: selected also has weight, a\n  mark, a fill or an underline; an error also has text.\n\n## Button\n\n- **Parts**: label (verb first: \"Save changes\", \"Create invoice\"),\n  optional leading icon, optional trailing icon for direction or menus.\n- **Variants**: *primary* (filled accent; one per screen or per card in a\n  set of choices), *secondary* (outline or tinted), *ghost* (text only, for\n  low-weight actions in toolbars), *danger* (destructive, always confirmed),\n  *link* (inline navigation that looks like a link). Use a link (`\u003Ca>`) to\n  go somewhere and a button to do something.\n- **Sizes**: sm 32 \u002F md 40 \u002F lg 48; horizontal padding about 1.5x the\n  font size; a button next to an input shares its height.\n- **States**: all shared states plus *loading* (spinner replaces the\n  leading icon or sits before the label, width stays the same, disabled\n  while loading).\n- **Content**: 1 to 3 words; the same action has the same word everywhere;\n  no \"Click here\", no \"Submit\" when you can say what is submitted.\n- **Mistakes**: three primary buttons side by side; buttons of different\n  heights in one row; an arrow on every button; a disabled button with no\n  reason given nearby.\n\n## Icon button\n\nSquare, the control height on each side, one icon at 16 to 20px, a\nvisible hover surface, `aria-label` and `title`. Used for well-known\nactions only (close, menu, more, copy, theme). If people would not know\nthe icon, use a labelled button.\n\n**Theme toggle** is an icon button: sun or moon, no visible text, its\n`aria-label` says what it switches to (\"Switch to dark theme\"), updated on\neach switch, placed in the header's right group.\n\n## Link\n\nInline in text: underlined or clearly coloured, visited state where it\nhelps. Standalone: the destination as the words (\"Pricing\", \"View all\ninvoices\"). An external link says so (an icon with a label).\n\n## Segmented control\n\nA small set (2 to 5) of mutually exclusive options that switch a view in\nplace: a time range, Buy or Sell, List or Grid.\n\n- **Parts**: a track (a filled or outlined container, the control\n  height), segments of equal height, the selected segment as a raised or\n  filled block with stronger text.\n- **States**: selected is unmistakable (filled block plus weight), hover on\n  the others, focus-visible on the segment, disabled segments greyed and\n  skipped.\n- **Keyboard**: a radio group: Tab into the selected one, arrows move and\n  select. `role=\"radiogroup\"`\u002F`radio` or native radios.\n- **Mistakes**: segments with no track so they read as loose words;\n  selected shown by a slightly lighter grey; segments of different widths\n  for no reason; used for navigation between pages (that is tabs or\n  links).\n\n## Tabs\n\nSwitch between views of the same object, content below.\n\n- **Parts**: a tab list on one baseline, tabs with labels (and an optional\n  count), an indicator under the selected tab (2px, accent), a divider\n  under the list, the panel.\n- **States**: selected (indicator plus text colour), hover, focus-visible,\n  disabled.\n- **Keyboard**: arrows move between tabs, Home\u002FEnd, Tab enters the panel.\n  `role=\"tablist\"`, `tab`, `tabpanel`, `aria-selected`, `aria-controls`.\n- **Behaviour**: on a phone, the list scrolls sideways inside itself; the\n  page never does. Deep-linkable when a tab is a page section.\n- **Mistakes**: tabs used as actions; more than 7 tabs; the selected tab\n  differing by colour alone; the tab list wider than the screen with\n  nothing to scroll it.\n\n## Navigation\n\n- **Top bar** (3 to 6 destinations): logo left, links centre or left\n  after the logo, actions right; the current page marked (weight plus\n  indicator, `aria-current=\"page\"`). Below 768: a menu button that opens a\n  full-height panel with the same links in the same order.\n- **Sidebar** (5 to 9 sections, app screens): sections with icons and\n  labels, grouped with small headings, the current item filled, collapsed\n  to icons with tooltips on medium widths, a drawer on a phone. Account\n  and settings at the bottom.\n- **Mistakes**: dead links; a different order on mobile; the current page\n  not marked; icon-only navigation without labels.\n\n## Breadcrumbs\n\nThe path from a top level to the current page, for hierarchies three or\nmore deep. Parts: links for each ancestor, a separator (`\u002F` or chevron,\n`aria-hidden`), the current page as plain text with `aria-current=\"page\"`,\ninside `\u003Cnav aria-label=\"Breadcrumb\">`. On a phone show the parent only\n(\"\u003C Projects\"). Not on a homepage or a flat site.\n\n## Card\n\nA container for one thing (an item, a summary, a group of related\ncontrols). Parts: optional media, title, supporting text or data, meta,\nactions (one primary at most). Padding from the spacing scale (16 to 24),\none radius, either a border or a shadow, not both loud. Cards in one row\nshare height and inner alignment. A whole card is clickable only if it has\none destination, and then it is one link, not nested buttons.\n\n## Stat (KPI)\n\nLabel (what it measures), value (large, tabular figures, unit), change\nagainst a named period with direction (\"+12.4% vs last week\", coloured\nand with an arrow), optional sparkline, optional link to the detail. The\nvalue is the largest text in the card. Without a period, a change means\nnothing; without a label, a number means nothing.\n\n## Table\n\n- **Parts**: header row (column labels, sortable ones with a sort\n  indicator and `aria-sort`), rows, cells aligned by type (text left,\n  numbers right with tabular figures, actions right), optional selection\n  column, footer or pagination.\n- **States**: row hover, selected, loading (skeleton rows), empty (a\n  message in the table's place with an action).\n- **Responsive**: below 768, either scroll inside its own container with\n  the first column sticky, or become a list of rows with label: value\n  pairs. The page never scrolls sideways.\n- **Mistakes**: centred numbers; different decimals in one column; ten\n  columns where four matter; action buttons in every row instead of a row\n  menu.\n\n## Form field\n\n- **Parts**: label (always visible, above the input), the input, optional\n  help text below, error text below in the danger colour with an icon,\n  optional unit or prefix inside the input (\"BTC\", \"$\"), required or\n  optional marked (mark the rarer one).\n- **Input**: the control height, a placeholder that shows the format\n  (\"0.00\"), never the label. Number inputs show their unit and step;\n  amounts allow a \"Max\" shortcut when there is a ceiling.\n- **States**: focus (ring), filled, error (border plus message, set after\n  the user leaves the field or submits), disabled, read-only.\n- **Behaviour**: validate on blur and submit, not on every keystroke; the\n  submit button explains why it is disabled, or stays enabled and shows\n  errors on submit.\n- **Mistakes**: placeholder as label; error only in red; help text that\n  repeats the label.\n\n## Select and combobox\n\nA closed control showing the current value and a chevron; opens a list\nwith the selected option marked (check) and keyboard support (arrows,\ntype to jump, Enter, Escape). A custom one (the native select looks\ndifferent on every OS) is built to the listbox pattern (`ui-part-choices`).\nMore than 10 options: a combobox with search.\n\n## Checkbox, radio, switch\n\n- **Checkbox**: independent yes\u002Fno choices, or many of a list; label to\n  the right, the whole row clickable; indeterminate for \"some\".\n- **Radio**: one of a few (2 to 5) shown all at once; a group label.\n- **Switch**: a setting that takes effect immediately (on\u002Foff), label on\n  the left, state readable without colour (\"On\"). Not for choices that\n  need a Save button: that is a checkbox.\n\n## Badge and tag\n\nA short status or category: 1 to 2 words, small (20 to 24px tall),\nsemantic colour (neutral, info, success, warning, danger) from tokens,\nwith text that says the status (\"Paid\", \"Overdue\"). Not a button; a\nremovable tag has its own close button with a label.\n\n## Alert, banner, toast\n\n- **Alert** (inline, in the page): icon, title, text, optional action;\n  semantic colour; stays until resolved.\n- **Banner** (whole app, top): system-wide state (trial ends, outage);\n  dismissible if not critical.\n- **Toast** (temporary, corner): confirmation of an action the user took\n  (\"Invoice sent\", with Undo); 4 to 6 seconds, paused on hover; errors that\n  need action are not toasts.\n\n## Dialog and drawer\n\nA dialog asks for a decision or a short task: title, content, actions\nright (primary last, or first by platform convention; consistent\neverywhere), close button, Escape closes, focus moves in and is trapped,\nreturns to the trigger after. Destructive confirmation names the thing\n(\"Delete 3 invoices?\") and the button says the action (\"Delete\"). A drawer\nis for longer tasks beside the page (details, filters).\n\n## Menu (dropdown menu)\n\nA list of actions from a trigger (the \"more\" icon button, an account\navatar): items with optional icons and shortcuts, groups with dividers,\ndestructive items last in the danger colour. Keyboard: arrows, Enter,\nEscape, type-ahead. Not for navigation of the whole site.\n\n## Tooltip\n\nShort help on hover and focus for an icon button or an abbreviation; never\nthe only place important information lives; never on a disabled button\nthat cannot receive focus (put the reason beside it).\n\n## Pagination\n\nPrevious and next with labels, page numbers with the current marked, the\ntotal (\"1-20 of 312\"), page size where people need it. For feeds, \"Load\nmore\" or infinite scroll with a stable position.\n\n## Search\n\nAn input with a search icon, a placeholder that says what it searches\n(\"Search invoices\"), a clear button when filled, `Cmd\u002FCtrl+K` for a global\none, results as you type for small sets, on Enter for large ones, and a\n\"no results\" state that suggests what to do.\n\n## Empty state\n\nWhere content will be: what goes here, why it is empty now, and the one\naction that fills it (\"No invoices yet. Create your first invoice.\").\nA simple illustration or icon only if it helps. Different from \"no\nresults\" (offer clearing filters) and from an error (offer retry).\n\n## Avatar\n\nA circle or rounded square of a fixed size scale (24, 32, 40), the\nperson's image or initials on a neutral or derived colour, an `alt` or a\nname beside it, a status dot when presence matters.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-anatomy",21,"https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli","https:\u002F\u002Fenowx.ai","https:\u002F\u002Fgithub.com\u002Fenowdev","Pretending to be a Developer","2026-10-06 02:05:35",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-anatomy",{"tool":57,"command":58},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-anatomy",{"tool":60,"command":61},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-anatomy","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-anatomy\u002FSKILL.md",true,[],[66,82,106,120,146,166],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":77,"publishedAt":37},"01M6D2HQYSQD9N7MTNDT4A7CBM","demo-skill","Project-scope demo skill for tests.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fworkspace\u002F.agents\u002Fskills\u002Fdemo-skill\u002FSKILL.md",[72],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[78,79,80,81,30],"demo skill","demo","tests","project",{"skillNo":83,"name":84,"nameZh":6,"description":85,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":86,"categories":87,"keywords":96,"publishedAt":37},"01M6D2HM0GCPM0TM2HPG9HHR2R","writing","Writing words people read: the specific thing instead of claims, words to drop, sentences, interface copy (buttons, labels, errors, empty states, confirmations), page copy, notifications and emails, alt text and link text, numbers and dates, words that translate well, documentation and voice. Read before writing a page's copy, an interface's text or a document.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fwriting\u002FSKILL.md",[88,91],{"categoryNo":89,"categoryName":90,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[84,97,98,25,99,100,30,101,102,103,104,105],"text","emails","drop","document","page","voice","notifications","documentation","translate",{"skillNo":107,"name":21,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":114,"publishedAt":37},"01M6D2HG07YS49NM196Q0R3AZ8","Designing or restyling an interface: direction, layout, type, colour, icons, components, states, responsive behaviour. Read before building a page, a screen or a set of components.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui\u002FSKILL.md",[111],{"categoryNo":112,"categoryName":113,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000032","设计师",[21,115,116,117,118,101,119,30,31],"icons","components","SET","responsive","layout",{"skillNo":121,"name":122,"nameZh":6,"description":123,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":124,"categories":125,"keywords":132,"publishedAt":37},"01M6D2HB59HZHWG1RYZDV4SJ91","ui-themes","Light and dark themes, and colour that holds in both: tokens with a value per theme, and what each kind of content needs to stay visible (icons, SVG drawings and line art, logos, photos, screenshots, charts, code, maps, borders, shadows, focus, form controls), switching without a flash, and checking both. Read before building a second theme or a theme toggle, and before any drawing, logo or chart on a page that has two themes.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-themes\u002FSKILL.md",[126,129],{"categoryNo":127,"categoryName":128,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":130,"categoryName":131,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000030","开发工程师",[21,133,134,135,136,137,138,139,140,30,31,141,101,142,143,34,115,144,145],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","screenshots","logo",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":155,"publishedAt":37},"01M6D2H5R5KRAE524C8QX0T7Q0","ui-structure","Structure before styling: the blueprint written before any interface code (the screen's job, the regions its kind of page needs, their order and why, the layout skeleton in numbers, the components and their states), the anatomy and order of a homepage, a dashboard, a list, a detail page, settings, a form, sign-in, pricing, docs, an article and a checkout, and how to turn the blueprint into code (tokens, layout primitives, components, sections, page). Read first, before building or rebuilding any page or screen.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-structure\u002FSKILL.md",[152,153,154],{"categoryNo":89,"categoryName":90,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":130,"categoryName":131,"taxonomyType":94,"taxonomyTypeDesc":95},{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},[27,21,156,116,157,158,142,159,160,20,119,136,161,162,163,30,31,101,164,165],"ui structure","pricing","dashboard","Blueprint","article","styling","primitives","list","why","how",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":179,"publishedAt":37},"01M6D2H0ZZBJG77MBGPZHA6MWD","ui-stack-vue","Building interfaces in Vue 3 and Nuxt: project layout, script setup with typed defineProps, defineEmits and defineModel, attribute fallthrough, slots and scoped slots, template refs, ref, reactive and computed, watch versus watchEffect, composables and VueUse, provide and inject, Pinia, keyed v-for, transitions, Nuxt 4 (app directory, pages, layouts, useFetch and useAsyncData keys, $fetch in handlers, server routes, runtime config, useSeoMeta, NuxtImg, middleware), VeeValidate forms, Reka UI and Nuxt UI, testing, vue-tsc, and the traps. Read when the project uses Vue or Nuxt.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-stack-vue\u002FSKILL.md",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":176,"categoryName":177,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":112,"categoryName":113,"taxonomyType":94,"taxonomyTypeDesc":95},[21,180,181,182,183,184,185,186,119,81,187,188,30,189,190,191,192,193,194,195],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]