[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2EK271A664PET657PQSS7":3,"skill-same:01M6D2EK271A664PET657PQSS7":58},{"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":30,"linkOnly":31,"markdownContent":32,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":40,"ownerHtmlUrl":41,"ownerBlogUrl":40,"ownerDescription":42,"updatedAt":43,"install":44,"resources":57},"01M6D2EK271A664PET657PQSS7","ui-part-search",null,"Search: which kind to build, the labelled field and its shortcut, submitted or instant results with debouncing and cancelling, suggestions with the combobox pattern, the results page and its URL, filters with counts, the no-results state, engines for static sites and servers, and search on phones. Read before adding a search field, suggestions or a results page.","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-search\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29],"search","ui","ui part search","state","page","instant","read","results","filters","build","pattern","2026-11-10 10:12:30",false,"---\nname: ui-part-search\ndescription: \"Search: which kind to build, the labelled field and its shortcut, submitted or instant results with debouncing and cancelling, suggestions with the combobox pattern, the results page and its URL, filters with counts, the no-results state, engines for static sites and servers, and search on phones. Read before adding a search field, suggestions or a results page.\"\n---\n\n# Search\n\nThe generated version: a rounded field with a magnifier and \"Search...\" in\ngrey, no label, a ⌘K badge that opens nothing, results fired on every\nkeystroke that arrive out of order, and \"No results\" alone on a blank\npage. Search is a short conversation: the field says what can be found,\nthe results say how many were found for what, and a failed search says\nwhat to try next. The principles are in the `ui` skill, the measures in\n`ui-layout`; an app's jump-to-anything is `ui-part-command-palette`.\n\n## 1. Which search\n\n- **Site search** (docs, a shop, a blog): a field or a named button in the\n  header, and a results page with the query in its URL.\n- **Filtering a list in place**: the field first in the list's toolbar, 240\n  to 400px wide, results instant (`ui-layout`, section 4).\n- **Suggestions while typing**: a combobox under the field (section 4).\n- **An application's places and actions**: a command palette\n  (`ui-part-command-palette`), not a site search in disguise.\n- A search box that searches nothing yet is left out, and so is a shortcut\n  hint for a search that does not exist.\n\n## 2. The field\n\n- A labelled input with a button or Enter to search: `\u003Csearch>` (or a `form`\n  with `role=\"search\"`), `\u003Cinput type=\"search\" name=\"q\">` with a `\u003Clabel>`\n  (visible, or visually hidden when the icon and the button make it\n  plain), and a submit button named \"Search\".\n- A placeholder that is a real example query from the content (\"Try:\n  rotate an API key\"), never the only label.\n- `enterkeyhint=\"search\"` so a phone's keyboard shows Search; 16px text on\n  phones so iOS does not zoom; `autocomplete=\"off\"` when your own\n  suggestions replace the browser's.\n- 40px tall on desktop, 44px on touch; a clear button named \"Clear search\"\n  once there is text; Escape clears.\n- A keyboard shortcut shown in the field as a `\u003Ckbd>` hint: `\u002F` for a\n  site's search, Cmd or Ctrl+K for a command palette. Hidden on touch\n  devices, and ignored while the user types in another field.\n\n## 3. Submitted or instant\n\n- **Submitted** (Enter or the button) when the results are a page of their\n  own, or each search costs a request to a large index.\n- **Instant** when the data is local or cheap: debounce 150 to 300ms, start\n  at 2 characters, cancel the stale request (`AbortController`) and ignore\n  any answer to an old query, keep the previous results on screen while\n  the new ones load, and show a small spinner in the field after 300ms.\n- Either way the query is kept in the URL (`?q=`), so back, reload and a\n  shared link return the same results.\n\n## 4. Suggestions: the combobox pattern\n\n- The input has `role=\"combobox\"`, `aria-expanded`, `aria-controls` naming a\n  `role=\"listbox\"`, and `aria-autocomplete=\"list\"`. Focus stays in the\n  input; `aria-activedescendant` names the highlighted option.\n- Down Arrow opens the list and moves, Up moves back, Enter takes the\n  highlighted option (or searches the typed text when none is highlighted),\n  Escape closes the list and a second Escape clears, Tab leaves.\n- 8 to 10 suggestions at most, the matching part in `\u003Cmark>`, grouped when\n  it helps (Recent, Pages, Products) under group labels; the count\n  announced politely (\"6 suggestions\").\n- Recent searches when the empty field gets focus: the last five, kept on\n  the device, each removable, and \"Clear recent searches\".\n- Use a library: React Aria `ComboBox`, Downshift's `useCombobox`, Headless\n  UI or Ariakit `Combobox`, Ark UI or Bits UI in other stacks.\n\n## 5. The results page\n\n- The query stays in the field, and the results say how many were found\n  for what, above the list: `24 results for “invoice template”`. The count\n  is real; an engine's estimate says \"About 1,200\".\n- The page's `\u003Ctitle>` holds the query (\"invoice template: 24 results\"), so\n  history and screen readers say where the user is.\n- Each result: the title as the link, where it lives (\"Guides › Billing\"),\n  a snippet with the matched words in `\u003Cmark>`, a date when recency\n  matters.\n- Filters and facets with counts (\"PDF (12)\"): beside the results on wide\n  screens; on phones in a sheet behind a \"Filters\" button that shows how\n  many are on. Sorting (Relevance, Newest). Pagination\n  (`ui-part-pagination`).\n- New results announce their count politely; focus stays in the field for\n  instant search and moves to the results heading after a submitted one.\n- Results pages carry `noindex` (`frontend-seo`).\n\n## 6. No results\n\n- A no-results state that suggests what to try: it says so with the query\n  (`No results for “invioce”`), offers the spelling the engine suggests\n  (\"Did you mean invoice?\"), lists the filters that are on with a way to\n  clear them, and offers other ways in: categories, the most visited\n  pages, a contact route (`ui-part-empty-states`). Never a blank region.\n- Log the queries that found nothing, without personal data: they show\n  which pages or synonyms are missing.\n\n## 7. Engines\n\n- **A static site**: Pagefind (indexes the built site, searches in the\n  browser, ships a UI), or Algolia DocSearch for documentation.\n- **A small list in the browser** (up to a few thousand items): MiniSearch\n  or FlexSearch, Fuse.js for fuzzy matching.\n- **On the server**: PostgreSQL full-text search (`tsvector` with\n  `websearch_to_tsquery`) and `pg_trgm` for typos; Meilisearch or Typesense\n  when relevance, typo tolerance and facets matter; Elasticsearch or\n  OpenSearch at a large scale.\n- Search checks access like any other read: a result never shows what the\n  user may not open.\n\n## 8. Phones, themes and motion\n\n- On phones a named search button in the header opens a full-screen\n  search: the field focused at once (call `focus()` inside the tap's\n  handler, or iOS will not raise the keyboard), a Cancel button, recent\n  searches, the results in the same view; Back closes it.\n- Themes: the `\u003Cmark>` colour is a token per theme with its text at 4.5:1;\n  the browser's default yellow glares on dark (`ui-themes`).\n- Motion: suggestions appear without sliding and the highlight moves\n  instantly; the full-screen view fades or slides in over 200ms, not at all\n  under reduced motion (`motion-interface`, section 2).\n\n## 9. A sketch\n\n```html\n\u003Csearch>\n  \u003Cform action=\"\u002Fsearch\" method=\"get\">\n    \u003Clabel for=\"q\" class=\"visually-hidden\">Search the documentation\u003C\u002Flabel>\n    \u003Cinput id=\"q\" name=\"q\" type=\"search\" placeholder=\"Try: rotate an API key\"\n           enterkeyhint=\"search\" autocomplete=\"off\">\n    \u003Cbutton type=\"submit\">Search\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Fsearch>\n```\n\n```ts\n\u002F\u002F Instant results: debounced, stale requests cancelled, the query in the URL.\nlet controller: AbortController | undefined;\nlet timer: number | undefined;\n\ninput.addEventListener(\"input\", () => {\n  window.clearTimeout(timer);\n  timer = window.setTimeout(async () => {\n    const q = input.value.trim();\n    controller?.abort();\n    history.replaceState(null, \"\", q ? `?q=${encodeURIComponent(q)}` : location.pathname);\n    if (q.length \u003C 2) return showRecent();\n    controller = new AbortController();\n    try {\n      const res = await fetch(`\u002Fapi\u002Fsearch?q=${encodeURIComponent(q)}`, {\n        signal: controller.signal,\n      });\n      if (!res.ok) throw new Error(`search failed: ${res.status}`);\n      showResults(q, await res.json());\n    } catch (error) {\n      if ((error as Error).name !== \"AbortError\") showError(q);\n    }\n  }, 200);\n});\n```\n\n## Check it\n\n- Keyboard: `\u002F` (or Cmd+K) focuses the field, but not while typing\n  elsewhere; the arrows move through suggestions, Enter takes one, Escape\n  closes and then clears. A screen reader hears the field's name, the\n  number of suggestions and the number of results.\n- Type fast, then slowly: one request per pause, and no old results\n  replacing new ones.\n- Reload a results URL: the same query, filters and page. Search for\n  nonsense and for a misspelling: the no-results state helps.\n- `preview` at 360px: the field and its button fit, an icon-only button\n  shows up in \"controls without a name\", targets reach 44px.\n\n## Avoid\n\nA search box that searches nothing yet; a ⌘K hint with nothing behind it;\na placeholder as the only label; a request on every keystroke with nothing\ncancelled; results that lose the query on reload; \"No results\" and\nnothing else; counts that are guesses; suggestions the keyboard cannot\nreach; a highlight colour that fails contrast on dark; results the user\nhas no right to see.\n","# Search\n\nThe generated version: a rounded field with a magnifier and \"Search...\" in\ngrey, no label, a ⌘K badge that opens nothing, results fired on every\nkeystroke that arrive out of order, and \"No results\" alone on a blank\npage. Search is a short conversation: the field says what can be found,\nthe results say how many were found for what, and a failed search says\nwhat to try next. The principles are in the `ui` skill, the measures in\n`ui-layout`; an app's jump-to-anything is `ui-part-command-palette`.\n\n## 1. Which search\n\n- **Site search** (docs, a shop, a blog): a field or a named button in the\n  header, and a results page with the query in its URL.\n- **Filtering a list in place**: the field first in the list's toolbar, 240\n  to 400px wide, results instant (`ui-layout`, section 4).\n- **Suggestions while typing**: a combobox under the field (section 4).\n- **An application's places and actions**: a command palette\n  (`ui-part-command-palette`), not a site search in disguise.\n- A search box that searches nothing yet is left out, and so is a shortcut\n  hint for a search that does not exist.\n\n## 2. The field\n\n- A labelled input with a button or Enter to search: `\u003Csearch>` (or a `form`\n  with `role=\"search\"`), `\u003Cinput type=\"search\" name=\"q\">` with a `\u003Clabel>`\n  (visible, or visually hidden when the icon and the button make it\n  plain), and a submit button named \"Search\".\n- A placeholder that is a real example query from the content (\"Try:\n  rotate an API key\"), never the only label.\n- `enterkeyhint=\"search\"` so a phone's keyboard shows Search; 16px text on\n  phones so iOS does not zoom; `autocomplete=\"off\"` when your own\n  suggestions replace the browser's.\n- 40px tall on desktop, 44px on touch; a clear button named \"Clear search\"\n  once there is text; Escape clears.\n- A keyboard shortcut shown in the field as a `\u003Ckbd>` hint: `\u002F` for a\n  site's search, Cmd or Ctrl+K for a command palette. Hidden on touch\n  devices, and ignored while the user types in another field.\n\n## 3. Submitted or instant\n\n- **Submitted** (Enter or the button) when the results are a page of their\n  own, or each search costs a request to a large index.\n- **Instant** when the data is local or cheap: debounce 150 to 300ms, start\n  at 2 characters, cancel the stale request (`AbortController`) and ignore\n  any answer to an old query, keep the previous results on screen while\n  the new ones load, and show a small spinner in the field after 300ms.\n- Either way the query is kept in the URL (`?q=`), so back, reload and a\n  shared link return the same results.\n\n## 4. Suggestions: the combobox pattern\n\n- The input has `role=\"combobox\"`, `aria-expanded`, `aria-controls` naming a\n  `role=\"listbox\"`, and `aria-autocomplete=\"list\"`. Focus stays in the\n  input; `aria-activedescendant` names the highlighted option.\n- Down Arrow opens the list and moves, Up moves back, Enter takes the\n  highlighted option (or searches the typed text when none is highlighted),\n  Escape closes the list and a second Escape clears, Tab leaves.\n- 8 to 10 suggestions at most, the matching part in `\u003Cmark>`, grouped when\n  it helps (Recent, Pages, Products) under group labels; the count\n  announced politely (\"6 suggestions\").\n- Recent searches when the empty field gets focus: the last five, kept on\n  the device, each removable, and \"Clear recent searches\".\n- Use a library: React Aria `ComboBox`, Downshift's `useCombobox`, Headless\n  UI or Ariakit `Combobox`, Ark UI or Bits UI in other stacks.\n\n## 5. The results page\n\n- The query stays in the field, and the results say how many were found\n  for what, above the list: `24 results for “invoice template”`. The count\n  is real; an engine's estimate says \"About 1,200\".\n- The page's `\u003Ctitle>` holds the query (\"invoice template: 24 results\"), so\n  history and screen readers say where the user is.\n- Each result: the title as the link, where it lives (\"Guides › Billing\"),\n  a snippet with the matched words in `\u003Cmark>`, a date when recency\n  matters.\n- Filters and facets with counts (\"PDF (12)\"): beside the results on wide\n  screens; on phones in a sheet behind a \"Filters\" button that shows how\n  many are on. Sorting (Relevance, Newest). Pagination\n  (`ui-part-pagination`).\n- New results announce their count politely; focus stays in the field for\n  instant search and moves to the results heading after a submitted one.\n- Results pages carry `noindex` (`frontend-seo`).\n\n## 6. No results\n\n- A no-results state that suggests what to try: it says so with the query\n  (`No results for “invioce”`), offers the spelling the engine suggests\n  (\"Did you mean invoice?\"), lists the filters that are on with a way to\n  clear them, and offers other ways in: categories, the most visited\n  pages, a contact route (`ui-part-empty-states`). Never a blank region.\n- Log the queries that found nothing, without personal data: they show\n  which pages or synonyms are missing.\n\n## 7. Engines\n\n- **A static site**: Pagefind (indexes the built site, searches in the\n  browser, ships a UI), or Algolia DocSearch for documentation.\n- **A small list in the browser** (up to a few thousand items): MiniSearch\n  or FlexSearch, Fuse.js for fuzzy matching.\n- **On the server**: PostgreSQL full-text search (`tsvector` with\n  `websearch_to_tsquery`) and `pg_trgm` for typos; Meilisearch or Typesense\n  when relevance, typo tolerance and facets matter; Elasticsearch or\n  OpenSearch at a large scale.\n- Search checks access like any other read: a result never shows what the\n  user may not open.\n\n## 8. Phones, themes and motion\n\n- On phones a named search button in the header opens a full-screen\n  search: the field focused at once (call `focus()` inside the tap's\n  handler, or iOS will not raise the keyboard), a Cancel button, recent\n  searches, the results in the same view; Back closes it.\n- Themes: the `\u003Cmark>` colour is a token per theme with its text at 4.5:1;\n  the browser's default yellow glares on dark (`ui-themes`).\n- Motion: suggestions appear without sliding and the highlight moves\n  instantly; the full-screen view fades or slides in over 200ms, not at all\n  under reduced motion (`motion-interface`, section 2).\n\n## 9. A sketch\n\n```html\n\u003Csearch>\n  \u003Cform action=\"\u002Fsearch\" method=\"get\">\n    \u003Clabel for=\"q\" class=\"visually-hidden\">Search the documentation\u003C\u002Flabel>\n    \u003Cinput id=\"q\" name=\"q\" type=\"search\" placeholder=\"Try: rotate an API key\"\n           enterkeyhint=\"search\" autocomplete=\"off\">\n    \u003Cbutton type=\"submit\">Search\u003C\u002Fbutton>\n  \u003C\u002Fform>\n\u003C\u002Fsearch>\n```\n\n```ts\n\u002F\u002F Instant results: debounced, stale requests cancelled, the query in the URL.\nlet controller: AbortController | undefined;\nlet timer: number | undefined;\n\ninput.addEventListener(\"input\", () => {\n  window.clearTimeout(timer);\n  timer = window.setTimeout(async () => {\n    const q = input.value.trim();\n    controller?.abort();\n    history.replaceState(null, \"\", q ? `?q=${encodeURIComponent(q)}` : location.pathname);\n    if (q.length \u003C 2) return showRecent();\n    controller = new AbortController();\n    try {\n      const res = await fetch(`\u002Fapi\u002Fsearch?q=${encodeURIComponent(q)}`, {\n        signal: controller.signal,\n      });\n      if (!res.ok) throw new Error(`search failed: ${res.status}`);\n      showResults(q, await res.json());\n    } catch (error) {\n      if ((error as Error).name !== \"AbortError\") showError(q);\n    }\n  }, 200);\n});\n```\n\n## Check it\n\n- Keyboard: `\u002F` (or Cmd+K) focuses the field, but not while typing\n  elsewhere; the arrows move through suggestions, Enter takes one, Escape\n  closes and then clears. A screen reader hears the field's name, the\n  number of suggestions and the number of results.\n- Type fast, then slowly: one request per pause, and no old results\n  replacing new ones.\n- Reload a results URL: the same query, filters and page. Search for\n  nonsense and for a misspelling: the no-results state helps.\n- `preview` at 360px: the field and its button fit, an icon-only button\n  shows up in \"controls without a name\", targets reach 44px.\n\n## Avoid\n\nA search box that searches nothing yet; a ⌘K hint with nothing behind it;\na placeholder as the only label; a request on every keystroke with nothing\ncancelled; results that lose the query on reload; \"No results\" and\nnothing else; counts that are guesses; suggestions the keyboard cannot\nreach; a highlight colour that fails contrast on dark; results the user\nhas no right to see.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-search",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":45,"prompt":55,"zipAvailable":56},[46,49,52],{"tool":47,"command":48},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-search",{"tool":50,"command":51},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-search",{"tool":53,"command":54},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-search","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-search\u002FSKILL.md",true,[],[59,75,99,114,141,163],{"skillNo":60,"name":61,"nameZh":6,"description":62,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":70,"publishedAt":30},"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",[65],{"categoryNo":66,"categoryName":67,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[71,72,73,74,25],"demo skill","demo","tests","project",{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":89,"publishedAt":30},"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",[81,84],{"categoryNo":82,"categoryName":83,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[77,90,91,92,93,94,25,23,95,96,97,98],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":100,"name":20,"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":30},"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":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000032","设计师",[20,108,109,110,111,23,112,25,113],"icons","components","SET","responsive","layout","before building",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":126,"publishedAt":30},"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",[120,123],{"categoryNo":121,"categoryName":122,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":124,"categoryName":125,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000030","开发工程师",[20,127,128,129,130,131,132,133,134,25,113,135,23,136,137,138,108,139,140],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":150,"publishedAt":30},"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",[147,148,149],{"categoryNo":82,"categoryName":83,"taxonomyType":68,"taxonomyTypeDesc":69},{"categoryNo":124,"categoryName":125,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},[151,20,152,109,153,154,136,155,156,157,112,130,158,159,160,25,113,23,161,162],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":176,"publishedAt":30},"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",[169,172,175],{"categoryNo":170,"categoryName":171,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":173,"categoryName":174,"taxonomyType":68,"taxonomyTypeDesc":69},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":105,"categoryName":106,"taxonomyType":87,"taxonomyTypeDesc":88},[20,177,178,179,180,181,182,183,112,74,184,185,25,186,187,188,189,190,191,192],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]