[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2B7C1H8PSSENQDC1ZFASG":3,"skill-same:01M6D2B7C1H8PSSENQDC1ZFASG":57},{"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":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":39,"ownerHtmlUrl":40,"ownerBlogUrl":39,"ownerDescription":41,"updatedAt":42,"install":43,"resources":56},"01M6D2B7C1H8PSSENQDC1ZFASG","ui-part-buttons",null,"Buttons: hierarchy and variants, sizes and spacing, labels, icons and icon-only buttons, every state (hover, focus, pressed, toggled, loading, disabled), button or link, groups and split buttons, destructive actions, placement and phones. Read before building or restyling any button.","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-buttons\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28],"ui","ui part buttons","hover","icons","state","actions","before building","read","only","focus","2026-11-10 10:12:30",false,"---\nname: ui-part-buttons\ndescription: \"Buttons: hierarchy and variants, sizes and spacing, labels, icons and icon-only buttons, every state (hover, focus, pressed, toggled, loading, disabled), button or link, groups and split buttons, destructive actions, placement and phones. Read before building or restyling any button.\"\n---\n\n# Buttons\n\nThe generated version: every button a gradient pill with a glow and an\narrow, two filled buttons side by side, \"Submit\" and \"Get started\", a\nspinner that makes the button shrink, a greyed-out button with no reason,\nand a `div` with a click handler. A button is a promise of one action;\nthis is how to rank it, word it, size it and give it every state. One part\nof an interface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`.\n\n## 1. Hierarchy\n\n- One primary button per view (a screen, a dialog, a card with its own\n  task): the action most people take next. Secondary and text buttons sit\n  below it in weight. Never two primaries side by side.\n- Primary: filled with the accent, `--on-accent` text at 4.5:1.\n- Secondary: the surface with a 1px border that reaches 3:1, or a tinted\n  surface, for the second most likely action.\n- Tertiary (ghost): the text colour, no border, a surface on hover; for\n  toolbars, table rows and dismissive actions. Cancel is ghost or\n  secondary, never filled.\n- Text button: looks like a link, is a `button`, for inline actions\n  (\"Undo\", \"Edit\").\n- Destructive: looks it, in the danger colour. The entry point is a quiet\n  button or a menu item in danger text; the filled danger button appears\n  in the confirming step.\n- `preview` counts filled buttons: five or more in one saturated colour on\n  a screen means rows carry primaries; make them quiet\n  (`ui-page-dashboard`).\n\n## 2. Sizes and anatomy\n\n| Size | Height | Side padding | Text | Icon | Where |\n|---|---|---|---|---|---|\n| Compact | 32px | 12px | 13 to 14px | 16px | table rows, toolbars, dense panels |\n| Default | 36 to 40px | 16px | 14 to 15px | 16 to 20px | application screens, forms, dialogs |\n| Large | 44 to 48px | 20 to 24px | 16px | 20px | pages, the hero, phones |\n\n- At least 44px tall to the touch: compact and default buttons grow to\n  44px on phones (`preview` lists anything smaller at 360px).\n- Padding from the spacing scale; 8px between icon and label; 8px between\n  neighbouring buttons, 12px on touch.\n- Weight 500 to 600, sentence case, one line (`white-space: nowrap`), a\n  radius from the token set (4 to 8px). Fully round only when the design\n  language is round everywhere, not as the default look.\n- A minimum width (about 80px) so \"Save\" is not a stamp beside \"Save and\n  send\".\n\n## 3. Labels and icons\n\n- The label is a verb and an object that says the outcome: \"Create\n  invoice\", \"Send reminder\", \"Book a first appointment\". Not \"Submit\",\n  \"OK\", \"Yes\", \"Click here\", \"Get started\" or \"Learn more\" (`ui_check`\n  flags them), and never one word on two buttons that do different things.\n- A confirming button repeats the verb of its question: \"Delete project?\"\n  is answered by \"Delete project\", not \"Yes\" (`writing`).\n- A trailing \"…\" when the action asks for more before it happens\n  (\"Rename…\", \"Export…\"), the desktop convention; not on actions that\n  complete at once.\n- An icon beside the label when the product's set has a clear one for the\n  action (plus, download, trash): leading, 16 to 20px, `currentColor`,\n  `aria-hidden=\"true\"`.\n- A trailing chevron only on a button that opens a menu; a trailing arrow\n  only on \"Next\" or a link that goes somewhere. Not an arrow on every\n  button.\n- Icon-only buttons in dense toolbars and rows: 36 to 40px square (44px on\n  touch), an `aria-label` that names the action (\"Delete invoice\"), and a\n  tooltip with the same name on hover and focus (`ui-part-tooltips`).\n\n## 4. States\n\n| State | Look | Behaviour |\n|---|---|---|\n| Hover | a background step of 4 to 8%, over 160ms | only under `(hover: hover)` |\n| Focus-visible | a 2px ring in `--focus`, 2px offset, no transition | reached by Tab in visual order |\n| Pressed | `scale(0.97)` for 100ms, or a darker step | none under reduced motion |\n| Toggled | a filled surface and weight, `aria-pressed=\"true\"` | the label stays the same |\n| Loading | a spinner over the label, the width kept | `aria-busy=\"true\"`, clicks ignored |\n| Disabled | legible but clearly off, no hover | the reason stated nearby |\n\n- Loading: `aria-busy` set after about 300ms of waiting, so quick work\n  shows no spinner; the label stays in place under it (transparent), so\n  the width and the accessible name hold; clicks are ignored from the\n  first one, so the form is sent once; \"Saving\", then \"Saved\" or the\n  error, announced through a `role=\"status\"` region. Keep the button\n  focusable: making the pressed button `disabled` drops the keyboard\n  focus, and a screen reader loses its place.\n- Disabled: say why near it (\"Add a payment method to publish\"), or leave\n  it enabled and explain on click. A submit button stays enabled and the\n  form shows what is missing (`frontend-forms`). Where it must look\n  disabled, `aria-disabled=\"true\"` keeps it focusable and readable, with\n  the click stopped in script.\n- After the action the result shows: the new row, or a toast (\"Invoice\n  sent\", with Undo, `ui-part-notifications`). A button that reads \"Saved\"\n  goes back to \"Save\" after 2 to 3 seconds or when the form changes.\n\n## 5. Button or link\n\n- `a href` navigates: to a page, a section, a file, another site. It opens\n  in a new tab with a middle click, shows its URL, works before the script\n  loads.\n- A `button` element acts: saves, sends, opens a dialog or a menu,\n  toggles. `type=\"button\"` unless it submits: inside a `form` the default\n  is submit, which sends the form by accident.\n- The look follows the rank, the element follows the behaviour: \"Book a\n  session\" leading to the booking page is a link that looks like a primary\n  button. Never a `div` or `span` with a click handler.\n\n## 6. Groups, split buttons, placement\n\n- In footers and dialogs the primary sits at the end of the reading\n  direction (the right on desktop, in left-to-right languages), Cancel\n  beside it; the project's own convention wins (`ui-layout` 4).\n- Past two secondary actions, the rest go into a \"More\" menu button\n  (`aria-haspopup=\"menu\"`, `aria-expanded`, `ui-part-menus`).\n- A split button: the main action, and beside it a chevron button with\n  `aria-label=\"More save options\"` opening a menu (\"Save as draft\", \"Save\n  and send\"). Both halves are real buttons.\n- Segmented controls pick a view or a filter: they are choices, not\n  buttons (`ui-part-choices`).\n- Destructive actions stand apart from Save (a \"Danger zone\" at the end, or\n  a menu). They confirm, in a dialog naming the object\n  (`ui-part-dialogs`), when the loss is large and permanent; they offer\n  Undo instead when the action is frequent and reversible.\n\n## 7. Phones\n\n- Full width only on phone forms and sheets: stacked, the primary on top,\n  Cancel below it. Elsewhere buttons keep their width.\n- The screen's primary action stays in reach: in the top bar with its\n  word, at the end of the content, or in a bar fixed to the bottom above\n  the safe area (`ui-layout` 9).\n- Labels may shorten (\"Add\" for \"Add product\") but never become an\n  unnamed icon. Rows of buttons wrap or fold into a menu; never off the\n  edge.\n\n## 8. Themes and motion\n\n- The accent takes a lighter step on dark to keep 3:1 against the page and\n  4.5:1 for its label; the focus ring shows in both themes (`ui-themes`).\n- Hover, press and focus as in `motion-interface`: colour over 160ms,\n  press at 100ms, no bounce, no shine sweeping across, no pulse.\n\n## 9. A sketch\n\n```css\n.btn {\n  display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n  min-block-size: 40px; min-inline-size: 80px; padding-inline: 16px;\n  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;\n  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;\n  transition: background-color var(--m-fast) var(--m-ease-out),\n    border-color var(--m-fast) var(--m-ease-out), transform var(--m-instant) var(--m-ease-out);\n}\n.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }\n.btn--primary { background: var(--accent); color: var(--on-accent); }\n.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }\n.btn--ghost { background: transparent; color: var(--text); }\n.btn--danger { background: var(--danger); color: var(--on-danger); }\n@media (hover: hover) {\n  .btn--primary:hover { background: var(--accent-hover); }\n  .btn--secondary:hover, .btn--ghost:hover { background: var(--surface-2); }\n}\n.btn:not([aria-disabled=\"true\"], [aria-busy=\"true\"]):active { transform: scale(0.97); }\n.btn[aria-disabled=\"true\"], .btn:disabled {\n  background: var(--surface-2); color: var(--text-muted);\n  border-color: var(--border); cursor: not-allowed;\n}\n.btn[aria-busy=\"true\"] { position: relative; }\n.btn[aria-busy=\"true\"] > * { color: transparent; } \u002F* keeps the width and the name *\u002F\n.btn[aria-busy=\"true\"]::after {\n  content: \"\"; position: absolute; inset: 0; margin: auto;\n  inline-size: 16px; block-size: 16px; border-radius: 50%;\n  border: 2px solid currentColor; border-inline-end-color: transparent;\n  animation: spin 0.9s linear infinite;\n}\n@keyframes spin { to { rotate: 1turn; } }\n@media (max-width: 640px) { .btn { min-block-size: 44px; } }\n@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }\n```\n\n```html\n\u003Cbutton class=\"btn btn--primary\" type=\"submit\" aria-busy=\"true\">\n  \u003Cspan>Save changes\u003C\u002Fspan>\n\u003C\u002Fbutton>\n\u003Cp class=\"visually-hidden\" role=\"status\">Saving changes\u003C\u002Fp>\n```\n\nWith shadcn, the same variants live in the Button's `cva` definition\n(`variant`, `size`), used by name (`ui-stack-shadcn`).\n\n## Check it\n\n- `preview` at 360px: no button in \"touch targets under 44px\" or\n  \"controls without a name\"; no report of five or more filled buttons in\n  one colour; labels at 4.5:1 in both themes.\n- `ui_check`: generic actions, glow, default gradients, pills everywhere,\n  empty click handlers and `href=\"#\"`.\n- Keyboard only: Tab reaches every button in visual order with a visible\n  ring; Enter and Space act; after a submit, focus has not jumped away.\n- Double-click a submit on a slow network: one request is sent.\n- Search for `div` and `span` with click handlers, and `a` elements that\n  act without navigating.\n\n## Avoid\n\nAn arrow on every button; pill plus gradient plus glow as the default\nlook; \"Submit\", \"Click here\", \"Get started\"; two primaries side by side; a\nprimary on every row; a greyed-out button with no reason; a spinner that\nchanges the button's width; `disabled` on the button that was just\npressed; a `div` that acts as a button; a link that acts, or a button that\nnavigates; a destructive action next to Save; full-width buttons on wide\nscreens.\n","# Buttons\n\nThe generated version: every button a gradient pill with a glow and an\narrow, two filled buttons side by side, \"Submit\" and \"Get started\", a\nspinner that makes the button shrink, a greyed-out button with no reason,\nand a `div` with a click handler. A button is a promise of one action;\nthis is how to rank it, word it, size it and give it every state. One part\nof an interface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`.\n\n## 1. Hierarchy\n\n- One primary button per view (a screen, a dialog, a card with its own\n  task): the action most people take next. Secondary and text buttons sit\n  below it in weight. Never two primaries side by side.\n- Primary: filled with the accent, `--on-accent` text at 4.5:1.\n- Secondary: the surface with a 1px border that reaches 3:1, or a tinted\n  surface, for the second most likely action.\n- Tertiary (ghost): the text colour, no border, a surface on hover; for\n  toolbars, table rows and dismissive actions. Cancel is ghost or\n  secondary, never filled.\n- Text button: looks like a link, is a `button`, for inline actions\n  (\"Undo\", \"Edit\").\n- Destructive: looks it, in the danger colour. The entry point is a quiet\n  button or a menu item in danger text; the filled danger button appears\n  in the confirming step.\n- `preview` counts filled buttons: five or more in one saturated colour on\n  a screen means rows carry primaries; make them quiet\n  (`ui-page-dashboard`).\n\n## 2. Sizes and anatomy\n\n| Size | Height | Side padding | Text | Icon | Where |\n|---|---|---|---|---|---|\n| Compact | 32px | 12px | 13 to 14px | 16px | table rows, toolbars, dense panels |\n| Default | 36 to 40px | 16px | 14 to 15px | 16 to 20px | application screens, forms, dialogs |\n| Large | 44 to 48px | 20 to 24px | 16px | 20px | pages, the hero, phones |\n\n- At least 44px tall to the touch: compact and default buttons grow to\n  44px on phones (`preview` lists anything smaller at 360px).\n- Padding from the spacing scale; 8px between icon and label; 8px between\n  neighbouring buttons, 12px on touch.\n- Weight 500 to 600, sentence case, one line (`white-space: nowrap`), a\n  radius from the token set (4 to 8px). Fully round only when the design\n  language is round everywhere, not as the default look.\n- A minimum width (about 80px) so \"Save\" is not a stamp beside \"Save and\n  send\".\n\n## 3. Labels and icons\n\n- The label is a verb and an object that says the outcome: \"Create\n  invoice\", \"Send reminder\", \"Book a first appointment\". Not \"Submit\",\n  \"OK\", \"Yes\", \"Click here\", \"Get started\" or \"Learn more\" (`ui_check`\n  flags them), and never one word on two buttons that do different things.\n- A confirming button repeats the verb of its question: \"Delete project?\"\n  is answered by \"Delete project\", not \"Yes\" (`writing`).\n- A trailing \"…\" when the action asks for more before it happens\n  (\"Rename…\", \"Export…\"), the desktop convention; not on actions that\n  complete at once.\n- An icon beside the label when the product's set has a clear one for the\n  action (plus, download, trash): leading, 16 to 20px, `currentColor`,\n  `aria-hidden=\"true\"`.\n- A trailing chevron only on a button that opens a menu; a trailing arrow\n  only on \"Next\" or a link that goes somewhere. Not an arrow on every\n  button.\n- Icon-only buttons in dense toolbars and rows: 36 to 40px square (44px on\n  touch), an `aria-label` that names the action (\"Delete invoice\"), and a\n  tooltip with the same name on hover and focus (`ui-part-tooltips`).\n\n## 4. States\n\n| State | Look | Behaviour |\n|---|---|---|\n| Hover | a background step of 4 to 8%, over 160ms | only under `(hover: hover)` |\n| Focus-visible | a 2px ring in `--focus`, 2px offset, no transition | reached by Tab in visual order |\n| Pressed | `scale(0.97)` for 100ms, or a darker step | none under reduced motion |\n| Toggled | a filled surface and weight, `aria-pressed=\"true\"` | the label stays the same |\n| Loading | a spinner over the label, the width kept | `aria-busy=\"true\"`, clicks ignored |\n| Disabled | legible but clearly off, no hover | the reason stated nearby |\n\n- Loading: `aria-busy` set after about 300ms of waiting, so quick work\n  shows no spinner; the label stays in place under it (transparent), so\n  the width and the accessible name hold; clicks are ignored from the\n  first one, so the form is sent once; \"Saving\", then \"Saved\" or the\n  error, announced through a `role=\"status\"` region. Keep the button\n  focusable: making the pressed button `disabled` drops the keyboard\n  focus, and a screen reader loses its place.\n- Disabled: say why near it (\"Add a payment method to publish\"), or leave\n  it enabled and explain on click. A submit button stays enabled and the\n  form shows what is missing (`frontend-forms`). Where it must look\n  disabled, `aria-disabled=\"true\"` keeps it focusable and readable, with\n  the click stopped in script.\n- After the action the result shows: the new row, or a toast (\"Invoice\n  sent\", with Undo, `ui-part-notifications`). A button that reads \"Saved\"\n  goes back to \"Save\" after 2 to 3 seconds or when the form changes.\n\n## 5. Button or link\n\n- `a href` navigates: to a page, a section, a file, another site. It opens\n  in a new tab with a middle click, shows its URL, works before the script\n  loads.\n- A `button` element acts: saves, sends, opens a dialog or a menu,\n  toggles. `type=\"button\"` unless it submits: inside a `form` the default\n  is submit, which sends the form by accident.\n- The look follows the rank, the element follows the behaviour: \"Book a\n  session\" leading to the booking page is a link that looks like a primary\n  button. Never a `div` or `span` with a click handler.\n\n## 6. Groups, split buttons, placement\n\n- In footers and dialogs the primary sits at the end of the reading\n  direction (the right on desktop, in left-to-right languages), Cancel\n  beside it; the project's own convention wins (`ui-layout` 4).\n- Past two secondary actions, the rest go into a \"More\" menu button\n  (`aria-haspopup=\"menu\"`, `aria-expanded`, `ui-part-menus`).\n- A split button: the main action, and beside it a chevron button with\n  `aria-label=\"More save options\"` opening a menu (\"Save as draft\", \"Save\n  and send\"). Both halves are real buttons.\n- Segmented controls pick a view or a filter: they are choices, not\n  buttons (`ui-part-choices`).\n- Destructive actions stand apart from Save (a \"Danger zone\" at the end, or\n  a menu). They confirm, in a dialog naming the object\n  (`ui-part-dialogs`), when the loss is large and permanent; they offer\n  Undo instead when the action is frequent and reversible.\n\n## 7. Phones\n\n- Full width only on phone forms and sheets: stacked, the primary on top,\n  Cancel below it. Elsewhere buttons keep their width.\n- The screen's primary action stays in reach: in the top bar with its\n  word, at the end of the content, or in a bar fixed to the bottom above\n  the safe area (`ui-layout` 9).\n- Labels may shorten (\"Add\" for \"Add product\") but never become an\n  unnamed icon. Rows of buttons wrap or fold into a menu; never off the\n  edge.\n\n## 8. Themes and motion\n\n- The accent takes a lighter step on dark to keep 3:1 against the page and\n  4.5:1 for its label; the focus ring shows in both themes (`ui-themes`).\n- Hover, press and focus as in `motion-interface`: colour over 160ms,\n  press at 100ms, no bounce, no shine sweeping across, no pulse.\n\n## 9. A sketch\n\n```css\n.btn {\n  display: inline-flex; align-items: center; justify-content: center; gap: 8px;\n  min-block-size: 40px; min-inline-size: 80px; padding-inline: 16px;\n  font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;\n  border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;\n  transition: background-color var(--m-fast) var(--m-ease-out),\n    border-color var(--m-fast) var(--m-ease-out), transform var(--m-instant) var(--m-ease-out);\n}\n.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }\n.btn--primary { background: var(--accent); color: var(--on-accent); }\n.btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }\n.btn--ghost { background: transparent; color: var(--text); }\n.btn--danger { background: var(--danger); color: var(--on-danger); }\n@media (hover: hover) {\n  .btn--primary:hover { background: var(--accent-hover); }\n  .btn--secondary:hover, .btn--ghost:hover { background: var(--surface-2); }\n}\n.btn:not([aria-disabled=\"true\"], [aria-busy=\"true\"]):active { transform: scale(0.97); }\n.btn[aria-disabled=\"true\"], .btn:disabled {\n  background: var(--surface-2); color: var(--text-muted);\n  border-color: var(--border); cursor: not-allowed;\n}\n.btn[aria-busy=\"true\"] { position: relative; }\n.btn[aria-busy=\"true\"] > * { color: transparent; } \u002F* keeps the width and the name *\u002F\n.btn[aria-busy=\"true\"]::after {\n  content: \"\"; position: absolute; inset: 0; margin: auto;\n  inline-size: 16px; block-size: 16px; border-radius: 50%;\n  border: 2px solid currentColor; border-inline-end-color: transparent;\n  animation: spin 0.9s linear infinite;\n}\n@keyframes spin { to { rotate: 1turn; } }\n@media (max-width: 640px) { .btn { min-block-size: 44px; } }\n@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }\n```\n\n```html\n\u003Cbutton class=\"btn btn--primary\" type=\"submit\" aria-busy=\"true\">\n  \u003Cspan>Save changes\u003C\u002Fspan>\n\u003C\u002Fbutton>\n\u003Cp class=\"visually-hidden\" role=\"status\">Saving changes\u003C\u002Fp>\n```\n\nWith shadcn, the same variants live in the Button's `cva` definition\n(`variant`, `size`), used by name (`ui-stack-shadcn`).\n\n## Check it\n\n- `preview` at 360px: no button in \"touch targets under 44px\" or\n  \"controls without a name\"; no report of five or more filled buttons in\n  one colour; labels at 4.5:1 in both themes.\n- `ui_check`: generic actions, glow, default gradients, pills everywhere,\n  empty click handlers and `href=\"#\"`.\n- Keyboard only: Tab reaches every button in visual order with a visible\n  ring; Enter and Space act; after a submit, focus has not jumped away.\n- Double-click a submit on a slow network: one request is sent.\n- Search for `div` and `span` with click handlers, and `a` elements that\n  act without navigating.\n\n## Avoid\n\nAn arrow on every button; pill plus gradient plus glow as the default\nlook; \"Submit\", \"Click here\", \"Get started\"; two primaries side by side; a\nprimary on every row; a greyed-out button with no reason; a spinner that\nchanges the button's width; `disabled` on the button that was just\npressed; a `div` that acts as a button; a link that acts, or a button that\nnavigates; a destructive action next to Save; full-width buttons on wide\nscreens.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-buttons",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":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-buttons",{"tool":49,"command":50},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-buttons",{"tool":52,"command":53},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-buttons","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-buttons\u002FSKILL.md",true,[],[58,74,99,112,138,160],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":69,"publishedAt":29},"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",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[70,71,72,73,26],"demo skill","demo","tests","project",{"skillNo":75,"name":76,"nameZh":6,"description":77,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":78,"categories":79,"keywords":88,"publishedAt":29},"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",[80,83],{"categoryNo":81,"categoryName":82,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[76,89,90,91,92,93,26,94,95,96,97,98],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":100,"name":19,"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":107,"publishedAt":29},"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",[104],{"categoryNo":105,"categoryName":106,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000032","设计师",[19,22,108,109,110,94,111,26,25],"components","SET","responsive","layout",{"skillNo":113,"name":114,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":124,"publishedAt":29},"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",[118,121],{"categoryNo":119,"categoryName":120,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":122,"categoryName":123,"taxonomyType":86,"taxonomyTypeDesc":87},"01JBSEEDCAT000000000000030","开发工程师",[19,125,126,127,128,129,28,130,131,26,25,132,94,133,134,135,22,136,137],"ui themes","switching","photos","tokens","drawing","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":147,"publishedAt":29},"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",[144,145,146],{"categoryNo":81,"categoryName":82,"taxonomyType":67,"taxonomyTypeDesc":68},{"categoryNo":122,"categoryName":123,"taxonomyType":86,"taxonomyTypeDesc":87},{"categoryNo":84,"categoryName":85,"taxonomyType":86,"taxonomyTypeDesc":87},[148,19,149,108,150,151,133,152,153,154,111,128,155,156,157,26,25,94,158,159],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":173,"publishedAt":29},"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",[166,169,172],{"categoryNo":167,"categoryName":168,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":170,"categoryName":171,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":105,"categoryName":106,"taxonomyType":86,"taxonomyTypeDesc":87},[19,174,175,176,177,178,179,180,111,73,181,182,26,183,184,185,186,187,188,189],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]