[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2DM0QKS88M3R6CCC275H1":3,"skill-same:01M6D2DM0QKS88M3R6CCC275H1":67},{"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":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":43,"ownerHtmlUrl":44,"ownerBlogUrl":43,"ownerDescription":45,"updatedAt":46,"install":47,"resources":60},"01M6D2DM0QKS88M3R6CCC275H1","ui-part-lists",null,"Lists of items: list, table or cards, the row's anatomy and measures, dividers or spacing, clickable rows, selection and bulk actions, sorting and grouping, listbox and grid keyboard patterns, drag to reorder, empty, loading and error states, and very long lists. Read before building or reworking a list of records, files, messages or people.","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-part-lists\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32],"ui","ui part lists","actions","messages","table","before building","read","list","files","selection","patterns","grouping","empty","anatomy","2026-11-10 10:12:30",false,"---\nname: ui-part-lists\ndescription: \"Lists of items: list, table or cards, the row's anatomy and measures, dividers or spacing, clickable rows, selection and bulk actions, sorting and grouping, listbox and grid keyboard patterns, drag to reorder, empty, loading and error states, and very long lists. Read before building or reworking a list of records, files, messages or people.\"\n---\n\n# Lists\n\nThe generated version: every row a card with a shadow, a divider and an\navatar circle; a green \"Active\" pill on each; three buttons at the end of\nevery row; the whole row a `div` with an `onClick`. A list is for scanning:\nconsistent rows with the most important field first, secondary details\nquieter, and the one action where the eye ends. The principles are in the\n`ui` skill, the measures in `ui-layout`, tables in `ui-part-tables`, cards\nin `ui-part-cards`.\n\n## 1. List, table or cards\n\n| The items | Use |\n|---|---|\n| are compared on three or more fields (amounts, dates, statuses) | a table (`ui-part-tables`) |\n| are recognised by their picture (products, places, photographs) | cards in a grid (`ui-part-cards`) |\n| have a name and a line of detail (messages, clients, files, tasks) | a list |\n| are pairs of label and value about one record | a description list, `dl` |\n| have a rank or a sequence | an ordered list, `ol` |\n\n- A list reflows at every width without effort, so on a phone it often\n  replaces a table (`ui-part-tables`, narrow screens).\n- Markup: `ul` or `ol` with `li`. With `list-style: none`, add\n  `role=\"list\"`: Safari drops the list semantics otherwise, and a screen\n  reader stops saying \"list, 24 items\", which is how a listener learns the\n  size.\n\n## 2. The row\n\n- Four slots: an optional leading visual, the title, one line of meta, and\n  a trailing value or action.\n- **Leading visual** only when it tells rows apart: a person's avatar in a\n  list of people (32 to 40px, `ui-part-avatars`), a file type icon (20 to\n  24px), a product thumbnail (40 to 48px, 1:1). Never the same icon on\n  every row.\n- **Title**: the identifying field (a name, a subject, an invoice number),\n  14 to 16px, weight 500 to 600, one line, truncated with an ellipsis\n  (`min-width: 0` on its container) and the full text reachable in the\n  detail or a `title`.\n- **Meta**: one line, 13 to 14px, in the muted colour: the one to three\n  facts that help decide (a date, an amount, an exception), joined by a\n  middle dot.\n- **Trailing**: a value right-aligned in `tabular-nums`, or one quiet\n  action, or a labelled menu (`ui-part-menus`); a chevron only where the\n  row opens a page on a phone.\n- **Height**: 48px for one line, 56 to 64px for two, 64 to 72px with an\n  avatar; 36 to 40px with 14px text in a dense tool. 12 to 16px of side\n  padding, 12px between the visual and the text.\n- **Separation**: hairline dividers (1px `--border`, inset to the text when\n  rows have a leading visual) or 8 to 12px of space between rows, not both\n  heavy. Never dividers and cards and shadows on every row at once.\n- Every row the same structure, the same field always in the same place.\n\n## 3. States\n\n- **Hover**: a surface step (`--surface-2`), only on clickable rows, under\n  `@media (hover: hover)`.\n- **Focus-visible**: the ring around the whole row while its link has focus.\n- **Selected**: the checkbox checked and a tinted background, never colour\n  alone.\n- **Current** (its detail is open beside the list): `aria-current=\"true\"`\n  and a 2 to 3px bar at the start or a surface step.\n- **Unread or new**: weight 600 on the title and a dot with visually hidden\n  text (\"Unread\").\n- **Unavailable**: muted, with the reason in the meta (\"Archived 3 Oct\").\n- **Loading**: skeleton rows at the real row height, as many as usually\n  arrive; never twenty grey bars for a list that holds three\n  (`ui-part-loading`).\n- **Empty**: in the list's place, why it is empty and the action that\n  fills it (`ui-part-empty-states`).\n- **Error**: in the list's place, what failed and a Retry button; rows\n  already shown stay.\n- **Loading more**: a \"Show more\" button or a spinner row at the end\n  (`ui-part-pagination`).\n\n## 4. Behaviour and keyboard\n\n- **Clickable rows**: one real link on the title, stretched over the row by\n  a pseudo-element; the row's other controls sit above it\n  (`position: relative; z-index: 1`). Never an `li` or `div` with an\n  `onClick`, never a link or a button nested inside a link.\n- **Selection**: a checkbox at the start of each row (a 44px hit area on\n  touch); \"Select all\" in the list's header, indeterminate for a partial\n  selection; Shift+click selects a range. Once rows are selected, a bulk\n  bar takes the toolbar's place: \"3 selected\", the bulk actions, \"Clear\n  selection\" (`ui-layout`, section 4), the count announced with\n  `role=\"status\"`.\n- **Sorting and grouping**: a Sort menu in the toolbar (Newest, Name,\n  Amount). Groups under headings (\"Today\", \"Earlier this week\", or by\n  status), each group a `section` with its heading and its own list; on\n  long lists the group heading sticks below the top bar with a solid\n  background.\n- **Plain lists of links** need no ARIA and no arrow keys: Tab moves through\n  the links.\n- **Lists people choose from** (a select that stays open): the listbox\n  pattern, `role=\"listbox\"` and `option` with `aria-selected`, one Tab\n  stop, arrow keys, Home and End, typeahead. **Rows holding several\n  controls** that should move with arrow keys (a mail client): the grid\n  pattern. Build both with React Aria's `ListBox` and `GridList` rather\n  than by hand.\n- **Drag to reorder**: a visible handle (a grip icon, a 44px target on\n  touch, named \"Reorder\" plus the item) and a keyboard way: dnd-kit's\n  `KeyboardSensor` with `sortableKeyboardCoordinates` and its screen reader\n  announcements, or Move up and Move down in the row's menu. Pragmatic drag\n  and drop or SortableJS outside React. The order saves at once and can be\n  undone.\n- **Swipe actions** on phones only as a shortcut to actions that are also in\n  the row's menu.\n\n## 5. Very long lists\n\n- Paginate on the server first (`ui-part-pagination`). More than a few\n  hundred rows on screen at once are virtualised: TanStack Virtual\n  (`useVirtualizer` with `count`, `getScrollElement`, `estimateSize` and\n  `overscan`; `measureElement` when heights vary).\n- Virtualised rows are missing from find in page and from the screen\n  reader's count: set `aria-setsize` and `aria-posinset` on each item, and\n  offer search or filters.\n- Scroll restoration: back to the list lands on the same row. Keep the\n  loaded pages in the query cache and the offset per URL (the virtualiser's\n  `initialOffset`), never a jump to the top.\n- For a few hundred rows, `content-visibility: auto` with\n  `contain-intrinsic-size: auto 56px` on each row skips rendering what is\n  off screen and keeps find in page working.\n\n## 6. Content\n\n- The identifying field first, then what decides; secondary details\n  quieter.\n- Meta states the exception, not the norm: no \"Active\" on every row;\n  \"Overdue · 2 days\" where it applies, in words as well as colour.\n- Recent dates relative (\"2 hours ago\") with the exact time in a\n  `\u003Ctime datetime>` (`ui-part-dates`); amounts with their currency.\n- No label repeated on every row (\"Email: …\"): the value says what it is.\n- Real rows, or the empty state; never \"John Doe\" and \"Acme Inc\" left in.\n\n## 7. Phones, themes and motion\n\n- Rows stay rows: the trailing value moves under the title, row actions\n  fold into the menu, targets reach 44px, nothing appears on hover only.\n- Themes: hover, selected and current are surface steps from tokens,\n  visible in both themes (`ui-themes`).\n- Motion: an added item fades in while its height opens, a removed one\n  fades and closes, a reorder moves with FLIP (`motion-interface`, section\n  9). No staggered entrance on every load, no per-row animation on long\n  lists.\n\n## 8. A sketch (React)\n\n```tsx\n\u003Cul role=\"list\" className=\"rows\">\n  {clients.map((client) => (\n    \u003Cli key={client.id} className=\"row\">\n      \u003CAvatar person={client} size={40} \u002F>\n      \u003Cdiv className=\"row-text\">\n        \u003Ca className=\"row-link\" href={`\u002Fclients\u002F${client.id}`}>{client.name}\u003C\u002Fa>\n        \u003Cp className=\"row-meta\">{client.summary}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cspan className=\"row-value\">{formatMoney(client.balance)}\u003C\u002Fspan>\n      \u003CRowMenu label={`Actions for ${client.name}`} client={client} \u002F>\n    \u003C\u002Fli>\n  ))}\n\u003C\u002Ful>\n```\n\n```css\n.row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-height: 56px;\n  padding: var(--space-2) var(--space-4);\n}\n.row + .row { border-top: 1px solid var(--border); }\n.row-text { flex: 1; min-width: 0; }\n.row-link, .row-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.row-link { font-weight: 600; color: var(--text); text-decoration: none; }\n.row-link::after { content: \"\"; position: absolute; inset: 0; } \u002F* the row opens the record *\u002F\n.row-link:focus-visible { outline: none; }\n.row:has(.row-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }\n.row-meta { color: var(--text-muted); font-size: var(--font-sm); }\n.row-value { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.row :is(button, input) { position: relative; z-index: 1; }\n@media (hover: hover) { .row:hover { background: var(--surface-2); } }\n```\n\n## Check it\n\n- Keyboard: Tab reaches each row once (its link), then its menu; a listbox\n  or grid is one Tab stop driven by the arrows; Space toggles a focused\n  checkbox.\n- A screen reader says \"list, N items\", and each row's name once: the\n  link's name is the title, not the whole row read out.\n- Try 0, 1, 3 and 500 items, an 80-character name and a throttled network:\n  the empty state, an ellipsis rather than an overflow, skeleton rows\n  replaced without a jump (`preview` with `motion: true` reports layout\n  shift).\n- `preview` at 360px: no overflow, row menus named, targets at 44px.\n  `ui_check` flags \"John Doe\" and \"Acme Inc\" rows left in.\n\n## Avoid\n\nDividers and cards and shadows on every row at once; an avatar or icon\nthat is the same on every row; the same badge on every row; three buttons\nrepeated on every row; clickable `div`s; links nested in links; rows of\ndifferent heights for the same content; truncation with no way to read the\nrest; twenty skeleton bars for a list of three; drag to reorder with no\nkeyboard way; a long list that loses its place on back.\n","# Lists\n\nThe generated version: every row a card with a shadow, a divider and an\navatar circle; a green \"Active\" pill on each; three buttons at the end of\nevery row; the whole row a `div` with an `onClick`. A list is for scanning:\nconsistent rows with the most important field first, secondary details\nquieter, and the one action where the eye ends. The principles are in the\n`ui` skill, the measures in `ui-layout`, tables in `ui-part-tables`, cards\nin `ui-part-cards`.\n\n## 1. List, table or cards\n\n| The items | Use |\n|---|---|\n| are compared on three or more fields (amounts, dates, statuses) | a table (`ui-part-tables`) |\n| are recognised by their picture (products, places, photographs) | cards in a grid (`ui-part-cards`) |\n| have a name and a line of detail (messages, clients, files, tasks) | a list |\n| are pairs of label and value about one record | a description list, `dl` |\n| have a rank or a sequence | an ordered list, `ol` |\n\n- A list reflows at every width without effort, so on a phone it often\n  replaces a table (`ui-part-tables`, narrow screens).\n- Markup: `ul` or `ol` with `li`. With `list-style: none`, add\n  `role=\"list\"`: Safari drops the list semantics otherwise, and a screen\n  reader stops saying \"list, 24 items\", which is how a listener learns the\n  size.\n\n## 2. The row\n\n- Four slots: an optional leading visual, the title, one line of meta, and\n  a trailing value or action.\n- **Leading visual** only when it tells rows apart: a person's avatar in a\n  list of people (32 to 40px, `ui-part-avatars`), a file type icon (20 to\n  24px), a product thumbnail (40 to 48px, 1:1). Never the same icon on\n  every row.\n- **Title**: the identifying field (a name, a subject, an invoice number),\n  14 to 16px, weight 500 to 600, one line, truncated with an ellipsis\n  (`min-width: 0` on its container) and the full text reachable in the\n  detail or a `title`.\n- **Meta**: one line, 13 to 14px, in the muted colour: the one to three\n  facts that help decide (a date, an amount, an exception), joined by a\n  middle dot.\n- **Trailing**: a value right-aligned in `tabular-nums`, or one quiet\n  action, or a labelled menu (`ui-part-menus`); a chevron only where the\n  row opens a page on a phone.\n- **Height**: 48px for one line, 56 to 64px for two, 64 to 72px with an\n  avatar; 36 to 40px with 14px text in a dense tool. 12 to 16px of side\n  padding, 12px between the visual and the text.\n- **Separation**: hairline dividers (1px `--border`, inset to the text when\n  rows have a leading visual) or 8 to 12px of space between rows, not both\n  heavy. Never dividers and cards and shadows on every row at once.\n- Every row the same structure, the same field always in the same place.\n\n## 3. States\n\n- **Hover**: a surface step (`--surface-2`), only on clickable rows, under\n  `@media (hover: hover)`.\n- **Focus-visible**: the ring around the whole row while its link has focus.\n- **Selected**: the checkbox checked and a tinted background, never colour\n  alone.\n- **Current** (its detail is open beside the list): `aria-current=\"true\"`\n  and a 2 to 3px bar at the start or a surface step.\n- **Unread or new**: weight 600 on the title and a dot with visually hidden\n  text (\"Unread\").\n- **Unavailable**: muted, with the reason in the meta (\"Archived 3 Oct\").\n- **Loading**: skeleton rows at the real row height, as many as usually\n  arrive; never twenty grey bars for a list that holds three\n  (`ui-part-loading`).\n- **Empty**: in the list's place, why it is empty and the action that\n  fills it (`ui-part-empty-states`).\n- **Error**: in the list's place, what failed and a Retry button; rows\n  already shown stay.\n- **Loading more**: a \"Show more\" button or a spinner row at the end\n  (`ui-part-pagination`).\n\n## 4. Behaviour and keyboard\n\n- **Clickable rows**: one real link on the title, stretched over the row by\n  a pseudo-element; the row's other controls sit above it\n  (`position: relative; z-index: 1`). Never an `li` or `div` with an\n  `onClick`, never a link or a button nested inside a link.\n- **Selection**: a checkbox at the start of each row (a 44px hit area on\n  touch); \"Select all\" in the list's header, indeterminate for a partial\n  selection; Shift+click selects a range. Once rows are selected, a bulk\n  bar takes the toolbar's place: \"3 selected\", the bulk actions, \"Clear\n  selection\" (`ui-layout`, section 4), the count announced with\n  `role=\"status\"`.\n- **Sorting and grouping**: a Sort menu in the toolbar (Newest, Name,\n  Amount). Groups under headings (\"Today\", \"Earlier this week\", or by\n  status), each group a `section` with its heading and its own list; on\n  long lists the group heading sticks below the top bar with a solid\n  background.\n- **Plain lists of links** need no ARIA and no arrow keys: Tab moves through\n  the links.\n- **Lists people choose from** (a select that stays open): the listbox\n  pattern, `role=\"listbox\"` and `option` with `aria-selected`, one Tab\n  stop, arrow keys, Home and End, typeahead. **Rows holding several\n  controls** that should move with arrow keys (a mail client): the grid\n  pattern. Build both with React Aria's `ListBox` and `GridList` rather\n  than by hand.\n- **Drag to reorder**: a visible handle (a grip icon, a 44px target on\n  touch, named \"Reorder\" plus the item) and a keyboard way: dnd-kit's\n  `KeyboardSensor` with `sortableKeyboardCoordinates` and its screen reader\n  announcements, or Move up and Move down in the row's menu. Pragmatic drag\n  and drop or SortableJS outside React. The order saves at once and can be\n  undone.\n- **Swipe actions** on phones only as a shortcut to actions that are also in\n  the row's menu.\n\n## 5. Very long lists\n\n- Paginate on the server first (`ui-part-pagination`). More than a few\n  hundred rows on screen at once are virtualised: TanStack Virtual\n  (`useVirtualizer` with `count`, `getScrollElement`, `estimateSize` and\n  `overscan`; `measureElement` when heights vary).\n- Virtualised rows are missing from find in page and from the screen\n  reader's count: set `aria-setsize` and `aria-posinset` on each item, and\n  offer search or filters.\n- Scroll restoration: back to the list lands on the same row. Keep the\n  loaded pages in the query cache and the offset per URL (the virtualiser's\n  `initialOffset`), never a jump to the top.\n- For a few hundred rows, `content-visibility: auto` with\n  `contain-intrinsic-size: auto 56px` on each row skips rendering what is\n  off screen and keeps find in page working.\n\n## 6. Content\n\n- The identifying field first, then what decides; secondary details\n  quieter.\n- Meta states the exception, not the norm: no \"Active\" on every row;\n  \"Overdue · 2 days\" where it applies, in words as well as colour.\n- Recent dates relative (\"2 hours ago\") with the exact time in a\n  `\u003Ctime datetime>` (`ui-part-dates`); amounts with their currency.\n- No label repeated on every row (\"Email: …\"): the value says what it is.\n- Real rows, or the empty state; never \"John Doe\" and \"Acme Inc\" left in.\n\n## 7. Phones, themes and motion\n\n- Rows stay rows: the trailing value moves under the title, row actions\n  fold into the menu, targets reach 44px, nothing appears on hover only.\n- Themes: hover, selected and current are surface steps from tokens,\n  visible in both themes (`ui-themes`).\n- Motion: an added item fades in while its height opens, a removed one\n  fades and closes, a reorder moves with FLIP (`motion-interface`, section\n  9). No staggered entrance on every load, no per-row animation on long\n  lists.\n\n## 8. A sketch (React)\n\n```tsx\n\u003Cul role=\"list\" className=\"rows\">\n  {clients.map((client) => (\n    \u003Cli key={client.id} className=\"row\">\n      \u003CAvatar person={client} size={40} \u002F>\n      \u003Cdiv className=\"row-text\">\n        \u003Ca className=\"row-link\" href={`\u002Fclients\u002F${client.id}`}>{client.name}\u003C\u002Fa>\n        \u003Cp className=\"row-meta\">{client.summary}\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cspan className=\"row-value\">{formatMoney(client.balance)}\u003C\u002Fspan>\n      \u003CRowMenu label={`Actions for ${client.name}`} client={client} \u002F>\n    \u003C\u002Fli>\n  ))}\n\u003C\u002Ful>\n```\n\n```css\n.row {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-height: 56px;\n  padding: var(--space-2) var(--space-4);\n}\n.row + .row { border-top: 1px solid var(--border); }\n.row-text { flex: 1; min-width: 0; }\n.row-link, .row-meta { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.row-link { font-weight: 600; color: var(--text); text-decoration: none; }\n.row-link::after { content: \"\"; position: absolute; inset: 0; } \u002F* the row opens the record *\u002F\n.row-link:focus-visible { outline: none; }\n.row:has(.row-link:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }\n.row-meta { color: var(--text-muted); font-size: var(--font-sm); }\n.row-value { font-variant-numeric: tabular-nums; white-space: nowrap; }\n.row :is(button, input) { position: relative; z-index: 1; }\n@media (hover: hover) { .row:hover { background: var(--surface-2); } }\n```\n\n## Check it\n\n- Keyboard: Tab reaches each row once (its link), then its menu; a listbox\n  or grid is one Tab stop driven by the arrows; Space toggles a focused\n  checkbox.\n- A screen reader says \"list, N items\", and each row's name once: the\n  link's name is the title, not the whole row read out.\n- Try 0, 1, 3 and 500 items, an 80-character name and a throttled network:\n  the empty state, an ellipsis rather than an overflow, skeleton rows\n  replaced without a jump (`preview` with `motion: true` reports layout\n  shift).\n- `preview` at 360px: no overflow, row menus named, targets at 44px.\n  `ui_check` flags \"John Doe\" and \"Acme Inc\" rows left in.\n\n## Avoid\n\nDividers and cards and shadows on every row at once; an avatar or icon\nthat is the same on every row; the same badge on every row; three buttons\nrepeated on every row; clickable `div`s; links nested in links; rows of\ndifferent heights for the same content; truncation with no way to read the\nrest; twenty skeleton bars for a list of three; drag to reorder with no\nkeyboard way; a long list that loses its place on back.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-lists",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":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-lists",{"tool":53,"command":54},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-lists",{"tool":56,"command":57},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-lists","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-lists\u002FSKILL.md",true,[61],{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"scripts\u002Fvalidate-pipeline.js","SCRIPT","脚本",5059,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fpower-platform-skills\u002Fblob\u002Fmain\u002Fplugins\u002Fpower-pages\u002Fskills\u002Fsetup-pipeline\u002Fscripts\u002Fvalidate-pipeline.js",[68,84,108,122,149,169],{"skillNo":69,"name":70,"nameZh":6,"description":71,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":79,"publishedAt":33},"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",[74],{"categoryNo":75,"categoryName":76,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[80,81,82,83,25],"demo skill","demo","tests","project",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":98,"publishedAt":33},"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",[90,93],{"categoryNo":91,"categoryName":92,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":94,"categoryName":95,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[86,99,100,31,101,102,25,103,104,105,106,107],"text","emails","drop","document","page","voice","notifications","documentation","translate",{"skillNo":109,"name":19,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":116,"publishedAt":33},"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",[113],{"categoryNo":114,"categoryName":115,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000032","设计师",[19,117,118,119,120,103,121,25,24],"icons","components","SET","responsive","layout",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":134,"publishedAt":33},"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",[128,131],{"categoryNo":129,"categoryName":130,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":132,"categoryName":133,"taxonomyType":96,"taxonomyTypeDesc":97},"01JBSEEDCAT000000000000030","开发工程师",[19,135,136,137,138,139,140,141,142,25,24,143,103,144,145,146,117,147,148],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":150,"name":151,"nameZh":6,"description":152,"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":158,"publishedAt":33},"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",[155,156,157],{"categoryNo":91,"categoryName":92,"taxonomyType":77,"taxonomyTypeDesc":78},{"categoryNo":132,"categoryName":133,"taxonomyType":96,"taxonomyTypeDesc":97},{"categoryNo":94,"categoryName":95,"taxonomyType":96,"taxonomyTypeDesc":97},[159,19,160,118,161,162,144,163,164,32,121,138,165,166,26,25,24,103,167,168],"structure","ui structure","pricing","dashboard","Blueprint","article","styling","primitives","why","how",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":182,"publishedAt":33},"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",[175,178,181],{"categoryNo":176,"categoryName":177,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":179,"categoryName":180,"taxonomyType":77,"taxonomyTypeDesc":78},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":114,"categoryName":115,"taxonomyType":96,"taxonomyTypeDesc":97},[19,183,184,185,186,187,188,189,121,83,190,191,25,192,193,194,195,196,197,198],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]