[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2BASX008KFN5REK48Q9YJ":3,"skill-same:01M6D2BASX008KFN5REK48Q9YJ":81},{"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":31,"linkOnly":32,"markdownContent":33,"markdownBody":34,"frontMatter":35,"refName":36,"commitSha":37,"skillDirectory":38,"forksCount":39,"repositoryHtmlUrl":40,"repositoryHomepageUrl":41,"ownerHtmlUrl":42,"ownerBlogUrl":41,"ownerDescription":43,"updatedAt":44,"install":45,"resources":58},"01M6D2BASX008KFN5REK48Q9YJ","ui-part-cards",null,"Cards and feature lists: when a card is the right unit and when a list, a table or nothing is, anatomy and measures, the whole-card link, grids and equal heights, hover, selected, loading, empty and error states, and the phone layout. Read before building cards, a card grid or a feature list.","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-cards\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30],"ui","ui part cards","hover","table","before building","read","list","phone","empty","layout","anatomy","feature","2026-11-10 10:12:30",false,"---\nname: ui-part-cards\ndescription: \"Cards and feature lists: when a card is the right unit and when a list, a table or nothing is, anatomy and measures, the whole-card link, grids and equal heights, hover, selected, loading, empty and error states, and the phone layout. Read before building cards, a card grid or a feature list.\"\n---\n\n# Feature lists and cards\n\nThe generated version: three identical cards, each an icon in a coloured\ncircle over \"Lightning fast\", \"Secure\" and \"Scalable\"; a card around every\nparagraph; cards that scale and tilt under the cursor; a whole card\nwrapped in a link with a button inside it. A card is a unit with its own\naction, or the summary of one record. This is how to tell when that is\ntrue, and how to build one that reads, links and aligns. One part of an\ninterface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`.\n\n## 1. Card, list, table or nothing\n\n- Cards for parallel, self-contained items a user compares or picks from,\n  above all with an image: products, projects, templates, places, people.\n- A list with a short line each is usually clearer: for items scanned by\n  name, and for features (`ui-part-lists`).\n- A table when items are compared on the same fields (`ui-part-tables`).\n- Nothing when the content is a section of a page: a heading, text and a\n  hairline, not a box (`ui-part-sections`). A card around every paragraph\n  is noise, not structure; a card inside a card means one is not needed.\n\n## 2. Features are not cards\n\n- Emphasis follows importance: the main feature larger, or shown with a\n  real screenshot or its output, and the rest listed as rows (a name and\n  one line each) or in a split beside it.\n- An icon only when it helps recognition, from the product's one set, at\n  the size of the text beside it, with no coloured circle behind it.\n- Each feature says the concrete thing (\"Imports bank statements in CSV\n  and OFX\"), not an adjective (\"Lightning fast\", \"Secure\", \"Scalable\").\n\n## 3. Anatomy and measures\n\n- In reading order: media (optional), title, meta, a short text, actions.\n- Media at a fixed ratio with `aspect-ratio` and `object-fit: cover`: 16\u002F9\n  for screenshots, 4\u002F3 or 1\u002F1 for products, 3\u002F2 for photographs; real\n  images only (`ui-part-images`).\n- Title 16 to 20px, weight 600, two lines at most; meta 13 to 14px in the\n  muted colour; the text 14 to 16px, clamped at two or three lines.\n- Padding 16 to 24px (16px on phones), radius from the token set (8 to\n  12px), a 1px border or one surface step from the page, not a heavy border\n  and a large shadow together. A shadow only on a card that floats: being\n  dragged, or over other content.\n- Actions at the bottom, pushed down (`margin-block-start: auto` in a flex\n  column) so they line up across a row; the record's other actions in a\n  menu at the top right (`ui-part-menus`).\n- The title is a heading at the section's next level (an `h3` under an\n  `h2`), so screen reader users can jump from card to card. It comes first\n  in the markup even when the image shows above it (`order: -1` on the\n  media).\n\n## 4. The whole card as a link\n\n- A card that is a link is one link: the title's link, stretched over the\n  card with a pseudo-element, and `position: relative` on the card. The\n  link's name is the title: short and clear.\n- Never the whole card wrapped in `\u003Ca>` (the link reads as everything in\n  it, and nothing inside may be a button), never a button nested inside a\n  link, never a `div` with a click handler that pushes a route (no middle\n  click, no new tab, no keyboard).\n- Other controls inside (a menu, a tag link, a favourite button) sit above\n  the overlay with `position: relative; z-index: 1` and have their own\n  names. Two targets besides the card itself are the limit.\n- The focus ring draws on the overlay, round the whole card.\n- Text under the overlay cannot be selected; when copying matters (an\n  address, a code), link only the title.\n\n## 5. Grids and heights\n\n- `grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr))`\n  with 16 to 24px gaps: 2 to 4 columns on wide screens, one on a phone.\n  `auto-fill` keeps a lone last card as wide as the others; `auto-fit`\n  would stretch it across the row.\n- Equal heights come from the grid, content aligned to the top: items\n  stretch to the tallest in their row by default. `align-self: start` on a\n  card that should keep its own height.\n- Titles, prices and buttons on one line across cards: each card spans the\n  rows it holds and sets `grid-template-rows: subgrid`.\n- Never pad a grid with invented items to fill the last row.\n- One size for the cards of a grid: the width comes from the grid's tracks\n  (never a `width` on the card), and every card has the same padding,\n  radius, border and media box (`aspect-ratio: 16 \u002F 9` or `4 \u002F 3` on the\n  image wrapper, `object-fit: cover` on the image), so a tall photo or a\n  long title never makes one card a different shape.\n- The card is a flex column (`display: flex; flex-direction: column; gap:\n  8px`); its action or price sits at the bottom with `margin-top: auto`, so\n  they line up across the row whatever the text above them.\n- The gap between cards is the grid's `gap`, 16px or 24px, the same both\n  ways; never margins on the cards.\n\n## 6. States\n\n- Hover only when the card is clickable: the border to `--border-strong`\n  or one surface step, at most a 2px lift. A card that is not a link does\n  not react. No scale, no tilt, no glow.\n- Focus-visible: a 2px ring round the card, from the overlay.\n- Selected (picking a plan, a template): the card is the label of a radio\n  or a checkbox, with a 2px accent border and a check icon when chosen,\n  not colour alone (`ui-part-choices`).\n- Unavailable: says why on the card (\"Sold out, back on 12 October\"), not\n  only greyed out.\n- Loading: skeletons the size of the card (the media box at its ratio, two\n  lines of text), after about 200ms, replaced without a jump\n  (`ui-part-loading`).\n- Empty: the grid's place holds one line on why, and the action that fills\n  it: \"No projects yet. Create one to see it here.\"\n- Error: a failed image leaves a surface with the item's initial, not a\n  broken-image icon; failed data shows the error and a retry in the grid's\n  place.\n\n## 7. Phones, themes, motion\n\n- One column at 360px with 16px gaps; or, for a secondary shelf, a row that\n  scrolls sideways (`scroll-snap-type: x mandatory`) with cards at 80 to\n  85% of the width so the next one shows. Never a carousel that advances\n  by itself.\n- The whole card is the target, so it is large; controls inside it still\n  get 44px.\n- Themes: on dark a card is one surface step lighter with a hairline,\n  since shadows barely show (`ui-themes`).\n- Motion: hover and press as in `motion-interface`; cards on an\n  application screen do not fade up one by one.\n\n## 8. A sketch\n\n```html\n\u003Cul class=\"cards\" role=\"list\">\n  \u003Cli class=\"card\">\n    \u003Ch3 class=\"card__title\">\u003Ca class=\"card__link\" href=\"\u002Fwork\u002F[slug]\">[Project name]\u003C\u002Fa>\u003C\u002Fh3>\n    \u003Cimg class=\"card__media\" src=\"\u002Fwork\u002F[slug].webp\" alt=\"\" width=\"640\" height=\"360\">\n    \u003Cp class=\"card__meta\">[Client] · [Year]\u003C\u002Fp>\n    \u003Cp class=\"card__text\">[One or two sentences on what it is and did]\u003C\u002Fp>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n```\n\n```css\n.cards {\n  display: grid; gap: 24px; margin: 0; padding: 0; list-style: none;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));\n}\n.card {\n  position: relative; display: flex; flex-direction: column; gap: 8px;\n  padding: 16px; background: var(--surface);\n  border: 1px solid var(--border); border-radius: var(--radius);\n}\n.card__media {\n  order: -1; inline-size: 100%; block-size: auto; aspect-ratio: 16 \u002F 9;\n  object-fit: cover; border-radius: calc(var(--radius) - 4px);\n}\n.card__link { color: inherit; text-decoration: none; }\n.card__link::after { content: \"\"; position: absolute; inset: 0; border-radius: var(--radius); }\n.card__link:focus-visible { outline: none; }\n.card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }\n@media (hover: hover) {\n  .card:has(.card__link:hover) { border-color: var(--border-strong); }\n}\n.card__text {\n  display: -webkit-box; -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3; overflow: hidden;\n}\n```\n\nThe image is `alt=\"\"` because the title names the item; describe it only\nwhen it shows something the text does not.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: one column on a phone, nothing wider\n  than the screen, text on cards at 4.5:1 in both themes. It reports the\n  same tall block stacked four or more times: expected in a catalogue's\n  grid on a phone, a template when the blocks are the page's features or\n  sections (`ui-part-sections`).\n- `ui_check`: the generic feature icons (sparkles, rocket, lightning),\n  heavy shadows everywhere, glow, and invented figures on cards.\n- Keyboard: Tab reaches each card once, the ring surrounds the whole card,\n  inner controls are separate stops; Enter opens the item.\n- A screen reader lists the cards by their headings and reads each link as\n  the title alone.\n- Middle-click a card: it opens in a new tab.\n\n## Avoid\n\nThree identical cards with an icon in a coloured circle each; a card\naround every paragraph; \"Lightning fast \u002F Secure \u002F Scalable\"; cards that\nscale, tilt or glow on hover; a hover effect on cards that are not links;\na whole card wrapped in a link with buttons inside; a `div` with a click\nhandler for navigation; ragged action rows; skeletons shaped unlike the\ncard; invented items filling a grid; cards inside cards.\n","# Feature lists and cards\n\nThe generated version: three identical cards, each an icon in a coloured\ncircle over \"Lightning fast\", \"Secure\" and \"Scalable\"; a card around every\nparagraph; cards that scale and tilt under the cursor; a whole card\nwrapped in a link with a button inside it. A card is a unit with its own\naction, or the summary of one record. This is how to tell when that is\ntrue, and how to build one that reads, links and aligns. One part of an\ninterface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`.\n\n## 1. Card, list, table or nothing\n\n- Cards for parallel, self-contained items a user compares or picks from,\n  above all with an image: products, projects, templates, places, people.\n- A list with a short line each is usually clearer: for items scanned by\n  name, and for features (`ui-part-lists`).\n- A table when items are compared on the same fields (`ui-part-tables`).\n- Nothing when the content is a section of a page: a heading, text and a\n  hairline, not a box (`ui-part-sections`). A card around every paragraph\n  is noise, not structure; a card inside a card means one is not needed.\n\n## 2. Features are not cards\n\n- Emphasis follows importance: the main feature larger, or shown with a\n  real screenshot or its output, and the rest listed as rows (a name and\n  one line each) or in a split beside it.\n- An icon only when it helps recognition, from the product's one set, at\n  the size of the text beside it, with no coloured circle behind it.\n- Each feature says the concrete thing (\"Imports bank statements in CSV\n  and OFX\"), not an adjective (\"Lightning fast\", \"Secure\", \"Scalable\").\n\n## 3. Anatomy and measures\n\n- In reading order: media (optional), title, meta, a short text, actions.\n- Media at a fixed ratio with `aspect-ratio` and `object-fit: cover`: 16\u002F9\n  for screenshots, 4\u002F3 or 1\u002F1 for products, 3\u002F2 for photographs; real\n  images only (`ui-part-images`).\n- Title 16 to 20px, weight 600, two lines at most; meta 13 to 14px in the\n  muted colour; the text 14 to 16px, clamped at two or three lines.\n- Padding 16 to 24px (16px on phones), radius from the token set (8 to\n  12px), a 1px border or one surface step from the page, not a heavy border\n  and a large shadow together. A shadow only on a card that floats: being\n  dragged, or over other content.\n- Actions at the bottom, pushed down (`margin-block-start: auto` in a flex\n  column) so they line up across a row; the record's other actions in a\n  menu at the top right (`ui-part-menus`).\n- The title is a heading at the section's next level (an `h3` under an\n  `h2`), so screen reader users can jump from card to card. It comes first\n  in the markup even when the image shows above it (`order: -1` on the\n  media).\n\n## 4. The whole card as a link\n\n- A card that is a link is one link: the title's link, stretched over the\n  card with a pseudo-element, and `position: relative` on the card. The\n  link's name is the title: short and clear.\n- Never the whole card wrapped in `\u003Ca>` (the link reads as everything in\n  it, and nothing inside may be a button), never a button nested inside a\n  link, never a `div` with a click handler that pushes a route (no middle\n  click, no new tab, no keyboard).\n- Other controls inside (a menu, a tag link, a favourite button) sit above\n  the overlay with `position: relative; z-index: 1` and have their own\n  names. Two targets besides the card itself are the limit.\n- The focus ring draws on the overlay, round the whole card.\n- Text under the overlay cannot be selected; when copying matters (an\n  address, a code), link only the title.\n\n## 5. Grids and heights\n\n- `grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr))`\n  with 16 to 24px gaps: 2 to 4 columns on wide screens, one on a phone.\n  `auto-fill` keeps a lone last card as wide as the others; `auto-fit`\n  would stretch it across the row.\n- Equal heights come from the grid, content aligned to the top: items\n  stretch to the tallest in their row by default. `align-self: start` on a\n  card that should keep its own height.\n- Titles, prices and buttons on one line across cards: each card spans the\n  rows it holds and sets `grid-template-rows: subgrid`.\n- Never pad a grid with invented items to fill the last row.\n- One size for the cards of a grid: the width comes from the grid's tracks\n  (never a `width` on the card), and every card has the same padding,\n  radius, border and media box (`aspect-ratio: 16 \u002F 9` or `4 \u002F 3` on the\n  image wrapper, `object-fit: cover` on the image), so a tall photo or a\n  long title never makes one card a different shape.\n- The card is a flex column (`display: flex; flex-direction: column; gap:\n  8px`); its action or price sits at the bottom with `margin-top: auto`, so\n  they line up across the row whatever the text above them.\n- The gap between cards is the grid's `gap`, 16px or 24px, the same both\n  ways; never margins on the cards.\n\n## 6. States\n\n- Hover only when the card is clickable: the border to `--border-strong`\n  or one surface step, at most a 2px lift. A card that is not a link does\n  not react. No scale, no tilt, no glow.\n- Focus-visible: a 2px ring round the card, from the overlay.\n- Selected (picking a plan, a template): the card is the label of a radio\n  or a checkbox, with a 2px accent border and a check icon when chosen,\n  not colour alone (`ui-part-choices`).\n- Unavailable: says why on the card (\"Sold out, back on 12 October\"), not\n  only greyed out.\n- Loading: skeletons the size of the card (the media box at its ratio, two\n  lines of text), after about 200ms, replaced without a jump\n  (`ui-part-loading`).\n- Empty: the grid's place holds one line on why, and the action that fills\n  it: \"No projects yet. Create one to see it here.\"\n- Error: a failed image leaves a surface with the item's initial, not a\n  broken-image icon; failed data shows the error and a retry in the grid's\n  place.\n\n## 7. Phones, themes, motion\n\n- One column at 360px with 16px gaps; or, for a secondary shelf, a row that\n  scrolls sideways (`scroll-snap-type: x mandatory`) with cards at 80 to\n  85% of the width so the next one shows. Never a carousel that advances\n  by itself.\n- The whole card is the target, so it is large; controls inside it still\n  get 44px.\n- Themes: on dark a card is one surface step lighter with a hairline,\n  since shadows barely show (`ui-themes`).\n- Motion: hover and press as in `motion-interface`; cards on an\n  application screen do not fade up one by one.\n\n## 8. A sketch\n\n```html\n\u003Cul class=\"cards\" role=\"list\">\n  \u003Cli class=\"card\">\n    \u003Ch3 class=\"card__title\">\u003Ca class=\"card__link\" href=\"\u002Fwork\u002F[slug]\">[Project name]\u003C\u002Fa>\u003C\u002Fh3>\n    \u003Cimg class=\"card__media\" src=\"\u002Fwork\u002F[slug].webp\" alt=\"\" width=\"640\" height=\"360\">\n    \u003Cp class=\"card__meta\">[Client] · [Year]\u003C\u002Fp>\n    \u003Cp class=\"card__text\">[One or two sentences on what it is and did]\u003C\u002Fp>\n  \u003C\u002Fli>\n\u003C\u002Ful>\n```\n\n```css\n.cards {\n  display: grid; gap: 24px; margin: 0; padding: 0; list-style: none;\n  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));\n}\n.card {\n  position: relative; display: flex; flex-direction: column; gap: 8px;\n  padding: 16px; background: var(--surface);\n  border: 1px solid var(--border); border-radius: var(--radius);\n}\n.card__media {\n  order: -1; inline-size: 100%; block-size: auto; aspect-ratio: 16 \u002F 9;\n  object-fit: cover; border-radius: calc(var(--radius) - 4px);\n}\n.card__link { color: inherit; text-decoration: none; }\n.card__link::after { content: \"\"; position: absolute; inset: 0; border-radius: var(--radius); }\n.card__link:focus-visible { outline: none; }\n.card__link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }\n@media (hover: hover) {\n  .card:has(.card__link:hover) { border-color: var(--border-strong); }\n}\n.card__text {\n  display: -webkit-box; -webkit-box-orient: vertical;\n  -webkit-line-clamp: 3; overflow: hidden;\n}\n```\n\nThe image is `alt=\"\"` because the title names the item; describe it only\nwhen it shows something the text does not.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: one column on a phone, nothing wider\n  than the screen, text on cards at 4.5:1 in both themes. It reports the\n  same tall block stacked four or more times: expected in a catalogue's\n  grid on a phone, a template when the blocks are the page's features or\n  sections (`ui-part-sections`).\n- `ui_check`: the generic feature icons (sparkles, rocket, lightning),\n  heavy shadows everywhere, glow, and invented figures on cards.\n- Keyboard: Tab reaches each card once, the ring surrounds the whole card,\n  inner controls are separate stops; Enter opens the item.\n- A screen reader lists the cards by their headings and reads each link as\n  the title alone.\n- Middle-click a card: it opens in a new tab.\n\n## Avoid\n\nThree identical cards with an icon in a coloured circle each; a card\naround every paragraph; \"Lightning fast \u002F Secure \u002F Scalable\"; cards that\nscale, tilt or glow on hover; a hover effect on cards that are not links;\na whole card wrapped in a link with buttons inside; a `div` with a click\nhandler for navigation; ragged action rows; skeletons shaped unlike the\ncard; invented items filling a grid; cards inside cards.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-cards",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":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-cards",{"tool":51,"command":52},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-cards",{"tool":54,"command":55},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-cards","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-cards\u002FSKILL.md",true,[59,65,69,73,77],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"references\u002Fdiscrete_choice.md","REFERENCE","参考文档",17182,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fstatsmodels\u002Freferences\u002Fdiscrete_choice.md",{"path":66,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":67,"sourceHtmlUrl":68},"references\u002Fglm.md",16581,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fstatsmodels\u002Freferences\u002Fglm.md",{"path":70,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Flinear_models.md",12966,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fstatsmodels\u002Freferences\u002Flinear_models.md",{"path":74,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Fstats_diagnostics.md",20526,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fstatsmodels\u002Freferences\u002Fstats_diagnostics.md",{"path":78,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":79,"sourceHtmlUrl":80},"references\u002Ftime_series.md",18934,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fstatsmodels\u002Freferences\u002Ftime_series.md",[82,98,122,135,162,182],{"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":93,"publishedAt":31},"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",[88],{"categoryNo":89,"categoryName":90,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[94,95,96,97,24],"demo skill","demo","tests","project",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":112,"publishedAt":31},"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",[104,107],{"categoryNo":105,"categoryName":106,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":108,"categoryName":109,"taxonomyType":110,"taxonomyTypeDesc":111},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[100,113,114,27,115,116,24,117,118,119,120,121],"text","emails","drop","document","page","voice","notifications","documentation","translate",{"skillNo":123,"name":19,"nameZh":6,"description":124,"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":130,"publishedAt":31},"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",[127],{"categoryNo":128,"categoryName":129,"taxonomyType":110,"taxonomyTypeDesc":111},"01JBSEEDCAT000000000000032","设计师",[19,131,132,133,134,117,28,24,23],"icons","components","SET","responsive",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":147,"publishedAt":31},"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",[141,144],{"categoryNo":142,"categoryName":143,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":145,"categoryName":146,"taxonomyType":110,"taxonomyTypeDesc":111},"01JBSEEDCAT000000000000030","开发工程师",[19,148,149,150,151,152,153,154,155,24,23,156,117,157,158,159,131,160,161],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":163,"name":164,"nameZh":6,"description":165,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":166,"categories":167,"keywords":171,"publishedAt":31},"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",[168,169,170],{"categoryNo":105,"categoryName":106,"taxonomyType":91,"taxonomyTypeDesc":92},{"categoryNo":145,"categoryName":146,"taxonomyType":110,"taxonomyTypeDesc":111},{"categoryNo":108,"categoryName":109,"taxonomyType":110,"taxonomyTypeDesc":111},[172,19,173,132,174,175,157,176,177,29,28,151,178,179,25,24,23,117,180,181],"structure","ui structure","pricing","dashboard","Blueprint","article","styling","primitives","why","how",{"skillNo":183,"name":184,"nameZh":6,"description":185,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":186,"categories":187,"keywords":195,"publishedAt":31},"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",[188,191,194],{"categoryNo":189,"categoryName":190,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":192,"categoryName":193,"taxonomyType":91,"taxonomyTypeDesc":92},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":128,"categoryName":129,"taxonomyType":110,"taxonomyTypeDesc":111},[19,196,197,198,199,200,201,202,28,97,203,204,24,205,206,207,208,209,210,211],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]