[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2EZPC9CKQ2JTY876B40DC":3,"skill-same:01M6D2EZPC9CKQ2JTY876B40DC":69},{"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":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":45,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6D2EZPC9CKQ2JTY876B40DC","ui-part-steps",null,"Multi-step flows and step indicators: when to split a task into steps, the indicator with done, current and error steps, moving back and forward, saving progress, validating each step, a review step, and the compact phone version. Read before building a wizard, a checkout or an onboarding flow.","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-steps\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"ui","ui part steps","review","onboarding","flow","indicator","indicators","wizard","before building","read","version","task","back","phone","compact","done","2026-11-10 10:12:30",false,"---\nname: ui-part-steps\ndescription: \"Multi-step flows and step indicators: when to split a task into steps, the indicator with done, current and error steps, moving back and forward, saving progress, validating each step, a review step, and the compact phone version. Read before building a wizard, a checkout or an onboarding flow.\"\n---\n\n# Steps and multi-step flows\n\nThe generated wizard splits a six-field form over four screens under a row\nof numbered circles, loses the answers when Back is pressed, validates\neverything at the end and then drops people on step one under a red banner,\nand lets the browser's Back button walk straight out of the flow. This skill\nsays when steps help at all, how the indicator shows done, current and\nfailed steps, and how moving, saving, validating, reviewing and confirming\nwork. The look of the fields is `ui-part-forms`, their logic\n`frontend-forms`.\n\n## 1. When steps, and when not\n\n- Use steps when later questions depend on earlier answers (delivery\n  options depend on the address, a plan on the team size), when the task is\n  long enough to tire (more than about 10 fields that fall into groups), or\n  when the order is the real order of the work (a checkout, an application,\n  setting up an account).\n- 3 to 5 steps. Two steps are usually one page with two sections; past\n  five, regroup or cut questions.\n- One topic per step, named in one to three words: Contact, Delivery,\n  Payment, Review.\n- Not for sections people edit in any order (settings are one page with\n  sections, `ui-page-settings`), and never tabs for a sequence: tabs are\n  views of one thing (`ui-part-tabs`).\n\n## 2. The indicator\n\n```\n (✓) Contact ────── (2) Delivery ────── (3) Payment ────── (4) Review\n     done, a link       current              upcoming           upcoming\n```\n\n- Above the form on wide screens, as wide as the form column (480 to\n  640px): markers 24 to 32px, labels 14px beside or under them, a 1 to 2px\n  connector, 24 to 32px above the step's heading.\n- A vertical list in a side column (200 to 260px) for long setup flows\n  where each step has a line of description.\n- States:\n  - Upcoming: the number in the muted colour, not a link until reachable.\n  - Current: the accent marker, the label in bold, `aria-current=\"step\"`.\n  - Done: a check mark, a link back to the step, \"(completed)\" in its\n    accessible name.\n  - Needs attention: a warning icon and those words, when a step already\n    passed has an error (the server rejected a field, or a later change\n    made an earlier answer invalid).\n  - Optional: \"(optional)\" in the label.\n- Colour is never the only signal: the check, the number, the weight and\n  the words carry the state too.\n\n```html\n\u003Cnav aria-label=\"Checkout steps\">\n  \u003Col class=\"steps\">\n    \u003Cli data-state=\"done\">\u003Ca href=\"\u002Fcheckout\u002Fcontact\">\n      \u003Cspan class=\"marker\" aria-hidden=\"true\">✓\u003C\u002Fspan> Contact\n      \u003Cspan class=\"sr-only\">(completed)\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli data-state=\"current\" aria-current=\"step\">\n      \u003Cspan class=\"marker\" aria-hidden=\"true\">2\u003C\u002Fspan> Delivery\u003C\u002Fli>\n    \u003Cli>\u003Cspan class=\"marker\" aria-hidden=\"true\">3\u003C\u002Fspan> Payment\u003C\u002Fli>\n    \u003Cli>\u003Cspan class=\"marker\" aria-hidden=\"true\">4\u003C\u002Fspan> Review\u003C\u002Fli>\n  \u003C\u002Fol>\n\u003C\u002Fnav>\n```\n\nA `nav` with an ordered list, not a `tablist`. The design system's stepper\nis fine when it has one (Mantine `Stepper`, MUI `Stepper`, Chakra `Steps`,\nPrimeVue `Stepper`, Nuxt UI `Stepper`), themed with the tokens; the flow's\nlogic still lives in the form and the router.\n\n## 3. On a phone\n\n```\n Step 2 of 4 · Delivery\n ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░\n```\n\n- Below about 640px the row of labels does not fit: \"Step 2 of 4\" and the\n  step's name as text, a 4px progress bar under it, and the full list in a\n  disclosure (\"All steps\") when going back to a done step matters.\n- Continue full width at the end of the step; Back as a quiet button under\n  it, or as the back arrow with its word in the top bar. One of the two,\n  the same on every step.\n- `enterkeyhint=\"next\"` on fields that lead to another and `\"done\"` on the\n  last, with the right keyboard for each field (`ui-part-forms`).\n\n## 4. Moving back and forward\n\n- Each step ends with Back at the left (secondary) and Continue at the\n  right (primary), on one row aligned with the form's edges.\n- Continue says where it goes (\"Continue to payment\"). The last button\n  says what happens and, when it costs money, how much (\"Pay Rp [total]\",\n  \"Submit application\"). Never \"Next\" or \"Submit\" on the final step.\n- Back never loses answers and never validates: people go back with half a\n  step filled.\n- The first step has no Back. Leaving the flow asks to confirm only when\n  something was entered.\n- Every step has its own URL (`\u002Fcheckout\u002Fdelivery`, or `?step=delivery`):\n  the browser's Back goes to the previous step, reload stays put, and a\n  later step opened before its turn redirects to the first incomplete one.\n- Done steps are links in the indicator. After editing one, the user comes\n  back to where they were (\"Save and return to review\"), not through every\n  step again.\n\n## 5. Keeping progress\n\n- One store for the whole flow, each step rendering its slice: one\n  react-hook-form `useForm` (or TanStack Form, or a small store) across the\n  steps. A step leaving the screen must not clear its fields\n  (`shouldUnregister: false`, react-hook-form's default).\n- Persist by the stakes:\n  - A short flow (a checkout): the server's cart and order draft, or\n    `sessionStorage` for plain fields.\n  - A long one (an application, onboarding): a draft saved on the server\n    at every Continue, resumable on another device, with \"Saved\" shown and\n    a \"Continue where you left off\" way back in.\n  - Never card numbers, passwords or identity documents in browser storage.\n- Warn before leaving only while something is unsaved (`beforeunload` and\n  the router's blocker, `frontend-forms`).\n\n## 6. Validating each step\n\n- On Continue, validate that step's fields only, then move. Fields also\n  validate when left, and on each change once they have shown an error.\n\n  ```tsx\n  import type { Path } from \"react-hook-form\";\n\n  const steps: { id: string; fields: Path\u003CApplication>[] }[] = [\n    { id: \"about-you\", fields: [\"name\", \"email\"] },\n    { id: \"business\", fields: [\"business.name\", \"business.country\"] },\n    { id: \"documents\", fields: [\"documents\"] },\n    { id: \"review\", fields: [\"consent\"] },\n  ];\n\n  async function next() {\n    const ok = await form.trigger(steps[index].fields, { shouldFocus: true });\n    if (ok) router.push(`\u002Fapply\u002F${steps[index + 1].id}`);\n  }\n  ```\n\n- On error: stay, focus the first invalid field, and on a step with more\n  than a few fields put a summary at the top linking to each field.\n- Asynchronous checks (is the name free, can we deliver there) run on the\n  step where the field is, their wait shown on the Continue button.\n- The server validates everything again at the end. An error that belongs\n  to an earlier step opens that step with the message on its field, and\n  the indicator marks it \"Needs attention\".\n- One schema shared with the server where the stack allows (zod, valibot),\n  split per step, so both sides say the same thing.\n\n## 7. Review, submit, confirm\n\n- A review step before anything that costs money or cannot be undone:\n  every answer grouped by step, an \"Edit\" link per group, the totals, the\n  consent the law requires (never pre-ticked), and the final button naming\n  the action.\n- Submitting: the button shows progress and keeps its width, a second click\n  does nothing, and the request carries an idempotency key so a retry\n  cannot create a second order (`backend-api`, section 6).\n- The confirmation is a page, not a toast: that it is done, the reference\n  number, what happens next and when, where the email went. Redirect after\n  the POST so reload and Back cannot submit again, and Back does not\n  re-enter the finished flow.\n\n## 8. Focus, themes, motion\n\n- When the step changes, move focus to its heading (`tabindex=\"-1\"` and\n  `focus()`) and update the title (\"Delivery (step 2 of 4) · Checkout\"),\n  so a screen reader says where the user is.\n- Errors are read with their fields (`aria-describedby`, `aria-invalid`);\n  the summary takes focus when it appears.\n- Markers and connectors from tokens, with 3:1 for the current and done\n  states in both themes (`ui-themes`).\n- The step's content changes at once or with a 150 to 200ms crossfade,\n  never sliding sideways (`motion-interface`, section 7); the phone's bar\n  fills with `scaleX`; nothing moves under reduced motion.\n\n## Check it\n\n- The whole flow by keyboard: each step's heading takes focus, Enter in a\n  field does not skip validation, done steps are links.\n- Browser Back and Forward on every step, reload on every step, a later\n  step's URL opened directly: answers kept, the first incomplete step\n  shown.\n- An invalid step, then a server rejection of a field from an earlier\n  step: the right step opens with the message, marked in the indicator.\n- Double-click the final button on a throttled network: one order.\n- `preview` at 360px: \"Step 2 of 4\", a full-width Continue, nothing\n  overflowing; at 1440px, the indicator as wide as the form.\n\n## Avoid\n\nSteps for a short form; more than five; numbered circles without labels;\nthe current step shown by colour alone; Back that clears or validates; a\nflow the browser's Back button leaves; validation only at the end; \"Next\"\nor \"Submit\" on the final button; a review without Edit links; a toast as\nthe confirmation; tabs used as steps; progress lost on reload.\n","# Steps and multi-step flows\n\nThe generated wizard splits a six-field form over four screens under a row\nof numbered circles, loses the answers when Back is pressed, validates\neverything at the end and then drops people on step one under a red banner,\nand lets the browser's Back button walk straight out of the flow. This skill\nsays when steps help at all, how the indicator shows done, current and\nfailed steps, and how moving, saving, validating, reviewing and confirming\nwork. The look of the fields is `ui-part-forms`, their logic\n`frontend-forms`.\n\n## 1. When steps, and when not\n\n- Use steps when later questions depend on earlier answers (delivery\n  options depend on the address, a plan on the team size), when the task is\n  long enough to tire (more than about 10 fields that fall into groups), or\n  when the order is the real order of the work (a checkout, an application,\n  setting up an account).\n- 3 to 5 steps. Two steps are usually one page with two sections; past\n  five, regroup or cut questions.\n- One topic per step, named in one to three words: Contact, Delivery,\n  Payment, Review.\n- Not for sections people edit in any order (settings are one page with\n  sections, `ui-page-settings`), and never tabs for a sequence: tabs are\n  views of one thing (`ui-part-tabs`).\n\n## 2. The indicator\n\n```\n (✓) Contact ────── (2) Delivery ────── (3) Payment ────── (4) Review\n     done, a link       current              upcoming           upcoming\n```\n\n- Above the form on wide screens, as wide as the form column (480 to\n  640px): markers 24 to 32px, labels 14px beside or under them, a 1 to 2px\n  connector, 24 to 32px above the step's heading.\n- A vertical list in a side column (200 to 260px) for long setup flows\n  where each step has a line of description.\n- States:\n  - Upcoming: the number in the muted colour, not a link until reachable.\n  - Current: the accent marker, the label in bold, `aria-current=\"step\"`.\n  - Done: a check mark, a link back to the step, \"(completed)\" in its\n    accessible name.\n  - Needs attention: a warning icon and those words, when a step already\n    passed has an error (the server rejected a field, or a later change\n    made an earlier answer invalid).\n  - Optional: \"(optional)\" in the label.\n- Colour is never the only signal: the check, the number, the weight and\n  the words carry the state too.\n\n```html\n\u003Cnav aria-label=\"Checkout steps\">\n  \u003Col class=\"steps\">\n    \u003Cli data-state=\"done\">\u003Ca href=\"\u002Fcheckout\u002Fcontact\">\n      \u003Cspan class=\"marker\" aria-hidden=\"true\">✓\u003C\u002Fspan> Contact\n      \u003Cspan class=\"sr-only\">(completed)\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli data-state=\"current\" aria-current=\"step\">\n      \u003Cspan class=\"marker\" aria-hidden=\"true\">2\u003C\u002Fspan> Delivery\u003C\u002Fli>\n    \u003Cli>\u003Cspan class=\"marker\" aria-hidden=\"true\">3\u003C\u002Fspan> Payment\u003C\u002Fli>\n    \u003Cli>\u003Cspan class=\"marker\" aria-hidden=\"true\">4\u003C\u002Fspan> Review\u003C\u002Fli>\n  \u003C\u002Fol>\n\u003C\u002Fnav>\n```\n\nA `nav` with an ordered list, not a `tablist`. The design system's stepper\nis fine when it has one (Mantine `Stepper`, MUI `Stepper`, Chakra `Steps`,\nPrimeVue `Stepper`, Nuxt UI `Stepper`), themed with the tokens; the flow's\nlogic still lives in the form and the router.\n\n## 3. On a phone\n\n```\n Step 2 of 4 · Delivery\n ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░\n```\n\n- Below about 640px the row of labels does not fit: \"Step 2 of 4\" and the\n  step's name as text, a 4px progress bar under it, and the full list in a\n  disclosure (\"All steps\") when going back to a done step matters.\n- Continue full width at the end of the step; Back as a quiet button under\n  it, or as the back arrow with its word in the top bar. One of the two,\n  the same on every step.\n- `enterkeyhint=\"next\"` on fields that lead to another and `\"done\"` on the\n  last, with the right keyboard for each field (`ui-part-forms`).\n\n## 4. Moving back and forward\n\n- Each step ends with Back at the left (secondary) and Continue at the\n  right (primary), on one row aligned with the form's edges.\n- Continue says where it goes (\"Continue to payment\"). The last button\n  says what happens and, when it costs money, how much (\"Pay Rp [total]\",\n  \"Submit application\"). Never \"Next\" or \"Submit\" on the final step.\n- Back never loses answers and never validates: people go back with half a\n  step filled.\n- The first step has no Back. Leaving the flow asks to confirm only when\n  something was entered.\n- Every step has its own URL (`\u002Fcheckout\u002Fdelivery`, or `?step=delivery`):\n  the browser's Back goes to the previous step, reload stays put, and a\n  later step opened before its turn redirects to the first incomplete one.\n- Done steps are links in the indicator. After editing one, the user comes\n  back to where they were (\"Save and return to review\"), not through every\n  step again.\n\n## 5. Keeping progress\n\n- One store for the whole flow, each step rendering its slice: one\n  react-hook-form `useForm` (or TanStack Form, or a small store) across the\n  steps. A step leaving the screen must not clear its fields\n  (`shouldUnregister: false`, react-hook-form's default).\n- Persist by the stakes:\n  - A short flow (a checkout): the server's cart and order draft, or\n    `sessionStorage` for plain fields.\n  - A long one (an application, onboarding): a draft saved on the server\n    at every Continue, resumable on another device, with \"Saved\" shown and\n    a \"Continue where you left off\" way back in.\n  - Never card numbers, passwords or identity documents in browser storage.\n- Warn before leaving only while something is unsaved (`beforeunload` and\n  the router's blocker, `frontend-forms`).\n\n## 6. Validating each step\n\n- On Continue, validate that step's fields only, then move. Fields also\n  validate when left, and on each change once they have shown an error.\n\n  ```tsx\n  import type { Path } from \"react-hook-form\";\n\n  const steps: { id: string; fields: Path\u003CApplication>[] }[] = [\n    { id: \"about-you\", fields: [\"name\", \"email\"] },\n    { id: \"business\", fields: [\"business.name\", \"business.country\"] },\n    { id: \"documents\", fields: [\"documents\"] },\n    { id: \"review\", fields: [\"consent\"] },\n  ];\n\n  async function next() {\n    const ok = await form.trigger(steps[index].fields, { shouldFocus: true });\n    if (ok) router.push(`\u002Fapply\u002F${steps[index + 1].id}`);\n  }\n  ```\n\n- On error: stay, focus the first invalid field, and on a step with more\n  than a few fields put a summary at the top linking to each field.\n- Asynchronous checks (is the name free, can we deliver there) run on the\n  step where the field is, their wait shown on the Continue button.\n- The server validates everything again at the end. An error that belongs\n  to an earlier step opens that step with the message on its field, and\n  the indicator marks it \"Needs attention\".\n- One schema shared with the server where the stack allows (zod, valibot),\n  split per step, so both sides say the same thing.\n\n## 7. Review, submit, confirm\n\n- A review step before anything that costs money or cannot be undone:\n  every answer grouped by step, an \"Edit\" link per group, the totals, the\n  consent the law requires (never pre-ticked), and the final button naming\n  the action.\n- Submitting: the button shows progress and keeps its width, a second click\n  does nothing, and the request carries an idempotency key so a retry\n  cannot create a second order (`backend-api`, section 6).\n- The confirmation is a page, not a toast: that it is done, the reference\n  number, what happens next and when, where the email went. Redirect after\n  the POST so reload and Back cannot submit again, and Back does not\n  re-enter the finished flow.\n\n## 8. Focus, themes, motion\n\n- When the step changes, move focus to its heading (`tabindex=\"-1\"` and\n  `focus()`) and update the title (\"Delivery (step 2 of 4) · Checkout\"),\n  so a screen reader says where the user is.\n- Errors are read with their fields (`aria-describedby`, `aria-invalid`);\n  the summary takes focus when it appears.\n- Markers and connectors from tokens, with 3:1 for the current and done\n  states in both themes (`ui-themes`).\n- The step's content changes at once or with a 150 to 200ms crossfade,\n  never sliding sideways (`motion-interface`, section 7); the phone's bar\n  fills with `scaleX`; nothing moves under reduced motion.\n\n## Check it\n\n- The whole flow by keyboard: each step's heading takes focus, Enter in a\n  field does not skip validation, done steps are links.\n- Browser Back and Forward on every step, reload on every step, a later\n  step's URL opened directly: answers kept, the first incomplete step\n  shown.\n- An invalid step, then a server rejection of a field from an earlier\n  step: the right step opens with the message, marked in the indicator.\n- Double-click the final button on a throttled network: one order.\n- `preview` at 360px: \"Step 2 of 4\", a full-width Continue, nothing\n  overflowing; at 1440px, the indicator as wide as the form.\n\n## Avoid\n\nSteps for a short form; more than five; numbered circles without labels;\nthe current step shown by colour alone; Back that clears or validates; a\nflow the browser's Back button leaves; validation only at the end; \"Next\"\nor \"Submit\" on the final button; a review without Edit links; a toast as\nthe confirmation; tabs used as steps; progress lost on reload.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-steps",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":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-steps",{"tool":55,"command":56},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-steps",{"tool":58,"command":59},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-steps","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-steps\u002FSKILL.md",true,[63],{"path":64,"resourceType":65,"resourceTypeDesc":66,"sizeBytes":67,"sourceHtmlUrl":68},"resources\u002Fimplementation-playbook.md","REFERENCE","参考文档",21125,"https:\u002F\u002Fgithub.com\u002Fsapsapshen\u002Fai-memory-router\u002Fblob\u002Fmain\u002Fskills-store\u002Fcursor\u002Fbacktesting-frameworks\u002Fresources\u002Fimplementation-playbook.md",[70,86,111,125,152,174],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":74,"categories":75,"keywords":81,"publishedAt":35},"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",[76],{"categoryNo":77,"categoryName":78,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[82,83,84,85,28],"demo skill","demo","tests","project",{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":100,"publishedAt":35},"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",[92,95],{"categoryNo":93,"categoryName":94,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[88,101,102,103,104,105,28,106,107,108,109,110],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":112,"name":19,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":119,"publishedAt":35},"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",[116],{"categoryNo":117,"categoryName":118,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000032","设计师",[19,120,121,122,123,106,124,28,27],"icons","components","SET","responsive","layout",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":137,"publishedAt":35},"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",[131,134],{"categoryNo":132,"categoryName":133,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":135,"categoryName":136,"taxonomyType":98,"taxonomyTypeDesc":99},"01JBSEEDCAT000000000000030","开发工程师",[19,138,139,140,141,142,143,144,145,28,27,146,106,147,148,149,120,150,151],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":153,"name":154,"nameZh":6,"description":155,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":156,"categories":157,"keywords":161,"publishedAt":35},"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",[158,159,160],{"categoryNo":93,"categoryName":94,"taxonomyType":79,"taxonomyTypeDesc":80},{"categoryNo":135,"categoryName":136,"taxonomyType":98,"taxonomyTypeDesc":99},{"categoryNo":96,"categoryName":97,"taxonomyType":98,"taxonomyTypeDesc":99},[162,19,163,121,164,165,147,166,167,168,124,141,169,170,171,28,27,106,172,173],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":175,"name":176,"nameZh":6,"description":177,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":178,"categories":179,"keywords":187,"publishedAt":35},"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",[180,183,186],{"categoryNo":181,"categoryName":182,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":184,"categoryName":185,"taxonomyType":79,"taxonomyTypeDesc":80},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":117,"categoryName":118,"taxonomyType":98,"taxonomyTypeDesc":99},[19,188,189,190,191,192,193,194,124,85,195,196,28,197,198,199,200,201,202,203],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]