[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2AWW17T2TJC45Q1DFM4CP":3,"skill-same:01M6D2AWW17T2TJC45Q1DFM4CP":77},{"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":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":49,"ownerHtmlUrl":50,"ownerBlogUrl":49,"ownerDescription":51,"updatedAt":52,"install":53,"resources":66},"01M6D2AWW17T2TJC45Q1DFM4CP","ui-part-back-to-top",null,"The back-to-top control every long page has: when it appears (after the first screen, on pages over about three screens on a phone), a real link to #top that works without a script, its name and icon, its size and place above bottom bars, chat buttons and the safe area, showing and hiding, smooth scrolling only without reduced motion, focus and the keyboard, app shells that scroll a container, alternatives such as a footer link or a sticky table of contents, and the preview check. Read before building a page longer than about three screens (count them on a phone).","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-back-to-top\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"ui","ui part back to top","back","first","safe","pages","control","focus","chat","preview","three","phone","table","motion","container","only","read","before building","check","page","2026-11-10 10:12:30",false,"---\nname: ui-part-back-to-top\ndescription: \"The back-to-top control every long page has: when it appears (after the first screen, on pages over about three screens on a phone), a real link to #top that works without a script, its name and icon, its size and place above bottom bars, chat buttons and the safe area, showing and hiding, smooth scrolling only without reduced motion, focus and the keyboard, app shells that scroll a container, alternatives such as a footer link or a sticky table of contents, and the preview check. Read before building a page longer than about three screens (count them on a phone).\"\n---\n\n# Back to top\n\nThe generated version: a glowing gradient circle with a bouncing arrow on\nevery page whatever its length, a `div` that calls `scrollTo` and leaves\nthe keyboard's focus at the bottom, parked over the footer's last link or\nthe chat button. This is a small real link that takes a reader from far\ndown a long page back to its start, works before any script loads, and\nkeeps clear of everything else fixed to the screen. 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. When a page has one\n\n- Use it for: getting back to the navigation from far down a long page.\n  Every page longer than about three screens has one. Count the screens on\n  a phone, where a page runs three to four times as tall as on a laptop, so\n  nearly every landing page, article, portfolio and long list has one. A\n  page of one or two screens does not.\n- The sticky header already keeps the links in reach (`ui-part-header`);\n  this takes the reader back to the start: the claim, the article's title,\n  the filters above a long list.\n- It shows after the first screen, never at the top, where there is\n  nowhere to go back to (section 4).\n\n## 2. The link and its name\n\n- A link, not a script: `\u003Ca href=\"#top\">`, with `id=\"top\"` on `\u003Cbody>` or\n  on the first element of the page, never on the sticky header, which\n  never leaves the screen and so is never scrolled back to. The link works\n  without JavaScript, and it moves the keyboard's starting point to the\n  top, so the next Tab reaches the skip link and the navigation.\n- A plain `\u003Ca>`, not the router's link component, which may treat the hash\n  as a route. Following it adds `#top` to the address, and the browser's\n  Back button returns the reader to where they were.\n- A name: an up arrow from the product's icon set with\n  `aria-label=\"Back to top\"`, or the words, in the page's language\n  (\"Kembali ke atas\").\n- The arrow: arrow-up or chevron-up from the one set, 20 to 24px, in\n  `currentColor`, `aria-hidden=\"true\"`; the word beside it (\"Top\") when the\n  page's other buttons carry words. Never an emoji, never capitals.\n\n## 3. Size and place\n\n- Fixed at the bottom right, 16 to 24px from the edges plus the safe area,\n  44 to 48px square, on the surface colour with a 1px line and the same\n  radius as the other buttons; above the content, below menus and dialogs\n  (`--z-to-top: 20` in the stacking order of `ui-part-header` section 8).\n- Clear of everything else fixed at the bottom: a bottom tab bar, a chat\n  button, a cookie notice, a sticky \"Book\" button on a phone. Stack above\n  them or take the other side; never cover a control or the footer's last\n  line.\n- In numbers: 12 to 16px above a bottom tab bar (56 to 64px plus the safe\n  area, `ui-part-navigation` section 5) or a phone's sticky action bar;\n  above a chat button by its height plus 12px, or on the bottom left when\n  the chat owns the right; above a cookie notice until it is answered.\n- Keep that offset in one custom property (`--fixed-bottom`), set where the\n  bars are (`body:has(.tab-bar)`, or by the script that shows them) and\n  added to the sketch's `bottom`, so the control and the toasts share it.\n- In a right-to-left page it takes the bottom left: `inset-inline-end`\n  rather than `right`.\n- In the markup after the main content (the end of `body`, or just before\n  the footer), so the keyboard reaches it last, not first. Hidden in print:\n  `@media print { .to-top { display: none; } }`.\n\n## 4. Showing and hiding\n\n- Hidden at the top, shown after the first screen: a passive scroll\n  listener sets `hidden` while `scrollY \u003C innerHeight`, and runs once on\n  load. Without JavaScript it simply stays visible.\n- Or with no scroll listener: an IntersectionObserver on a marker that\n  covers the first screen, hiding the control while the marker is in view\n  (the second script in section 8).\n- It appears at once, or fades in over 150 to 200ms; no bounce, no pulse,\n  no spin; under reduced motion it simply appears (`motion-interface`).\n- Past the first screen it stays: it does not hide on scroll down and come\n  back on scroll up, which moves it under the reader's thumb.\n\n## 5. Scrolling, focus and the keyboard\n\n- Smooth scrolling only for those who have not asked for less motion: the\n  CSS in the sketch; in script, `behavior: prefersReducedMotion() ? \"auto\"\n  : \"smooth\"` (`motion-reveal` section 11).\n- Following the link moves the keyboard's starting point and a screen\n  reader's reading position to the top: the next Tab reaches the skip link,\n  then the navigation.\n- Where a button must scroll by script, it then moves focus to the page's\n  `h1` (given `tabindex=\"-1\"`) with `focus({ preventScroll: true })`;\n  otherwise the keyboard stays at the bottom of the page.\n- Reached by Tab while shown, followed with Enter, with the same focus ring\n  as every other control (2px, offset 2px).\n\n## 6. In an app shell\n\n- In an app shell whose content area scrolls on its own, the control sits\n  in that area and returns it to the top (`main.scrollTo({ top: 0 })`),\n  then moves focus to the area's heading.\n- It listens to the area, not the window (`main.scrollTop \u003C\n  main.clientHeight`), and sits at the area's bottom corner, clear of a\n  side panel.\n- Or with no script: a link to the area's heading (an `id` and\n  `tabindex=\"-1\"` on its `h1`); following it scrolls the area and focuses\n  the heading.\n\n## 7. Alternatives, and together\n\n- A \"Back to top\" link at the end of the footer is a good addition, never\n  the only one: it is out of reach from halfway down, and `preview` says so.\n- On a wide screen, the sticky table of contents of a long article or docs\n  page, with \"Back to top\" at its end, can stand in for the floating\n  control (`ui-page-blog`, `ui-page-docs`); on a phone, where the table\n  folds away, the floating control stays.\n- A feed that loads more as it scrolls needs it most: its footer may never\n  come. A paged list already returns the reader to its top on each page\n  (`ui-part-pagination`).\n\n## 8. A sketch in plain HTML, CSS and JavaScript\n\n```html\n\u003Cbody id=\"top\">\n  …\n  \u003Ca class=\"to-top\" href=\"#top\" aria-label=\"Back to top\">\n    \u003Csvg aria-hidden=\"true\" …>…\u003C\u002Fsvg>\n  \u003C\u002Fa>\n\u003C\u002Fbody>\n```\n\n```css\n@media (prefers-reduced-motion: no-preference) {\n  html { scroll-behavior: smooth; }\n}\n.to-top {\n  position: fixed;\n  right: calc(var(--space-4) + env(safe-area-inset-right));\n  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));\n  z-index: 20;\n  display: grid;\n  place-items: center;\n  inline-size: 48px;\n  block-size: 48px;\n  color: var(--ink);\n  background: var(--surface);\n  border: 1px solid var(--line);\n  border-radius: var(--radius);\n}\n\u002F* `display: grid` would override the attribute's own display: none. *\u002F\n.to-top[hidden] { display: none; }\n```\n\n```js\nconst toTop = document.querySelector(\".to-top\");\nconst place = () => { toTop.hidden = scrollY \u003C innerHeight; };\naddEventListener(\"scroll\", place, { passive: true });\nplace();\n```\n\nOr, in place of the listener, a marker over the first screen:\n\n```js\nconst marker = document.createElement(\"div\");\nmarker.style.cssText = \"position:absolute;top:0;width:1px;height:100svh;pointer-events:none\";\ndocument.body.prepend(marker);\nnew IntersectionObserver(([entry]) => { toTop.hidden = entry.isIntersecting; })\n  .observe(marker);\n```\n\nIn React, Vue or Svelte: the same link as a small component, the listener\nadded on mount and removed on unmount.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: on a page more than three screens long\n  it scrolls halfway down, waits a moment, and looks within the screen for\n  a link to `#top`, a link to an element at the top of the page (not inside\n  the header), or a control named like \"Back to top\", \"Top\" or \"Kembali ke\n  atas\"; finding none it reports \"N screens long, and halfway down there is\n  no way back to the top: add a back-to-top control (ui-part-back-to-top)\".\n  A control still under 10% opacity counts as hidden; `href=\"#top\"` is\n  found in any language.\n- In the same report: `href=\"#\"` under \"links to nowhere\", an arrow with no\n  label under \"controls without a name\", a control under 44px at 360px.\n- With `motion: true`: the reduced-motion pass says \"smooth scrolling is\n  still on\" if it is; the scroll listener shows in its list, passive.\n- By hand at 360px, with the cookie notice, the chat button and any bottom\n  bar showing: nothing overlaps the control or the footer's last line.\n  Follow it, then press Tab: the skip link appears.\n\n## Avoid\n\nA glowing gradient circle with a bouncing arrow; `href=\"#\"`, which reads as\na link to nowhere; a button that calls `scrollTo` and leaves the keyboard's\nfocus at the bottom of the page; one on a page of two screens; one that\ncovers the footer's links or a cookie banner's buttons; \"SCROLL TO TOP\" in\ncapitals; one showing at the very top; `id=\"top\"` on the sticky header; a\nfooter link as the only way back; smooth scrolling for someone who asked\nfor less motion.\n","# Back to top\n\nThe generated version: a glowing gradient circle with a bouncing arrow on\nevery page whatever its length, a `div` that calls `scrollTo` and leaves\nthe keyboard's focus at the bottom, parked over the footer's last link or\nthe chat button. This is a small real link that takes a reader from far\ndown a long page back to its start, works before any script loads, and\nkeeps clear of everything else fixed to the screen. 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. When a page has one\n\n- Use it for: getting back to the navigation from far down a long page.\n  Every page longer than about three screens has one. Count the screens on\n  a phone, where a page runs three to four times as tall as on a laptop, so\n  nearly every landing page, article, portfolio and long list has one. A\n  page of one or two screens does not.\n- The sticky header already keeps the links in reach (`ui-part-header`);\n  this takes the reader back to the start: the claim, the article's title,\n  the filters above a long list.\n- It shows after the first screen, never at the top, where there is\n  nowhere to go back to (section 4).\n\n## 2. The link and its name\n\n- A link, not a script: `\u003Ca href=\"#top\">`, with `id=\"top\"` on `\u003Cbody>` or\n  on the first element of the page, never on the sticky header, which\n  never leaves the screen and so is never scrolled back to. The link works\n  without JavaScript, and it moves the keyboard's starting point to the\n  top, so the next Tab reaches the skip link and the navigation.\n- A plain `\u003Ca>`, not the router's link component, which may treat the hash\n  as a route. Following it adds `#top` to the address, and the browser's\n  Back button returns the reader to where they were.\n- A name: an up arrow from the product's icon set with\n  `aria-label=\"Back to top\"`, or the words, in the page's language\n  (\"Kembali ke atas\").\n- The arrow: arrow-up or chevron-up from the one set, 20 to 24px, in\n  `currentColor`, `aria-hidden=\"true\"`; the word beside it (\"Top\") when the\n  page's other buttons carry words. Never an emoji, never capitals.\n\n## 3. Size and place\n\n- Fixed at the bottom right, 16 to 24px from the edges plus the safe area,\n  44 to 48px square, on the surface colour with a 1px line and the same\n  radius as the other buttons; above the content, below menus and dialogs\n  (`--z-to-top: 20` in the stacking order of `ui-part-header` section 8).\n- Clear of everything else fixed at the bottom: a bottom tab bar, a chat\n  button, a cookie notice, a sticky \"Book\" button on a phone. Stack above\n  them or take the other side; never cover a control or the footer's last\n  line.\n- In numbers: 12 to 16px above a bottom tab bar (56 to 64px plus the safe\n  area, `ui-part-navigation` section 5) or a phone's sticky action bar;\n  above a chat button by its height plus 12px, or on the bottom left when\n  the chat owns the right; above a cookie notice until it is answered.\n- Keep that offset in one custom property (`--fixed-bottom`), set where the\n  bars are (`body:has(.tab-bar)`, or by the script that shows them) and\n  added to the sketch's `bottom`, so the control and the toasts share it.\n- In a right-to-left page it takes the bottom left: `inset-inline-end`\n  rather than `right`.\n- In the markup after the main content (the end of `body`, or just before\n  the footer), so the keyboard reaches it last, not first. Hidden in print:\n  `@media print { .to-top { display: none; } }`.\n\n## 4. Showing and hiding\n\n- Hidden at the top, shown after the first screen: a passive scroll\n  listener sets `hidden` while `scrollY \u003C innerHeight`, and runs once on\n  load. Without JavaScript it simply stays visible.\n- Or with no scroll listener: an IntersectionObserver on a marker that\n  covers the first screen, hiding the control while the marker is in view\n  (the second script in section 8).\n- It appears at once, or fades in over 150 to 200ms; no bounce, no pulse,\n  no spin; under reduced motion it simply appears (`motion-interface`).\n- Past the first screen it stays: it does not hide on scroll down and come\n  back on scroll up, which moves it under the reader's thumb.\n\n## 5. Scrolling, focus and the keyboard\n\n- Smooth scrolling only for those who have not asked for less motion: the\n  CSS in the sketch; in script, `behavior: prefersReducedMotion() ? \"auto\"\n  : \"smooth\"` (`motion-reveal` section 11).\n- Following the link moves the keyboard's starting point and a screen\n  reader's reading position to the top: the next Tab reaches the skip link,\n  then the navigation.\n- Where a button must scroll by script, it then moves focus to the page's\n  `h1` (given `tabindex=\"-1\"`) with `focus({ preventScroll: true })`;\n  otherwise the keyboard stays at the bottom of the page.\n- Reached by Tab while shown, followed with Enter, with the same focus ring\n  as every other control (2px, offset 2px).\n\n## 6. In an app shell\n\n- In an app shell whose content area scrolls on its own, the control sits\n  in that area and returns it to the top (`main.scrollTo({ top: 0 })`),\n  then moves focus to the area's heading.\n- It listens to the area, not the window (`main.scrollTop \u003C\n  main.clientHeight`), and sits at the area's bottom corner, clear of a\n  side panel.\n- Or with no script: a link to the area's heading (an `id` and\n  `tabindex=\"-1\"` on its `h1`); following it scrolls the area and focuses\n  the heading.\n\n## 7. Alternatives, and together\n\n- A \"Back to top\" link at the end of the footer is a good addition, never\n  the only one: it is out of reach from halfway down, and `preview` says so.\n- On a wide screen, the sticky table of contents of a long article or docs\n  page, with \"Back to top\" at its end, can stand in for the floating\n  control (`ui-page-blog`, `ui-page-docs`); on a phone, where the table\n  folds away, the floating control stays.\n- A feed that loads more as it scrolls needs it most: its footer may never\n  come. A paged list already returns the reader to its top on each page\n  (`ui-part-pagination`).\n\n## 8. A sketch in plain HTML, CSS and JavaScript\n\n```html\n\u003Cbody id=\"top\">\n  …\n  \u003Ca class=\"to-top\" href=\"#top\" aria-label=\"Back to top\">\n    \u003Csvg aria-hidden=\"true\" …>…\u003C\u002Fsvg>\n  \u003C\u002Fa>\n\u003C\u002Fbody>\n```\n\n```css\n@media (prefers-reduced-motion: no-preference) {\n  html { scroll-behavior: smooth; }\n}\n.to-top {\n  position: fixed;\n  right: calc(var(--space-4) + env(safe-area-inset-right));\n  bottom: calc(var(--space-4) + env(safe-area-inset-bottom));\n  z-index: 20;\n  display: grid;\n  place-items: center;\n  inline-size: 48px;\n  block-size: 48px;\n  color: var(--ink);\n  background: var(--surface);\n  border: 1px solid var(--line);\n  border-radius: var(--radius);\n}\n\u002F* `display: grid` would override the attribute's own display: none. *\u002F\n.to-top[hidden] { display: none; }\n```\n\n```js\nconst toTop = document.querySelector(\".to-top\");\nconst place = () => { toTop.hidden = scrollY \u003C innerHeight; };\naddEventListener(\"scroll\", place, { passive: true });\nplace();\n```\n\nOr, in place of the listener, a marker over the first screen:\n\n```js\nconst marker = document.createElement(\"div\");\nmarker.style.cssText = \"position:absolute;top:0;width:1px;height:100svh;pointer-events:none\";\ndocument.body.prepend(marker);\nnew IntersectionObserver(([entry]) => { toTop.hidden = entry.isIntersecting; })\n  .observe(marker);\n```\n\nIn React, Vue or Svelte: the same link as a small component, the listener\nadded on mount and removed on unmount.\n\n## Check it\n\n- `preview` at 360, 768 and 1440px: on a page more than three screens long\n  it scrolls halfway down, waits a moment, and looks within the screen for\n  a link to `#top`, a link to an element at the top of the page (not inside\n  the header), or a control named like \"Back to top\", \"Top\" or \"Kembali ke\n  atas\"; finding none it reports \"N screens long, and halfway down there is\n  no way back to the top: add a back-to-top control (ui-part-back-to-top)\".\n  A control still under 10% opacity counts as hidden; `href=\"#top\"` is\n  found in any language.\n- In the same report: `href=\"#\"` under \"links to nowhere\", an arrow with no\n  label under \"controls without a name\", a control under 44px at 360px.\n- With `motion: true`: the reduced-motion pass says \"smooth scrolling is\n  still on\" if it is; the scroll listener shows in its list, passive.\n- By hand at 360px, with the cookie notice, the chat button and any bottom\n  bar showing: nothing overlaps the control or the footer's last line.\n  Follow it, then press Tab: the skip link appears.\n\n## Avoid\n\nA glowing gradient circle with a bouncing arrow; `href=\"#\"`, which reads as\na link to nowhere; a button that calls `scrollTo` and leaves the keyboard's\nfocus at the bottom of the page; one on a page of two screens; one that\ncovers the footer's links or a cookie banner's buttons; \"SCROLL TO TOP\" in\ncapitals; one showing at the very top; `id=\"top\"` on the sticky header; a\nfooter link as the only way back; smooth scrolling for someone who asked\nfor less motion.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-back-to-top",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":54,"prompt":64,"zipAvailable":65},[55,58,61],{"tool":56,"command":57},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-back-to-top",{"tool":59,"command":60},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-back-to-top",{"tool":62,"command":63},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-back-to-top","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-back-to-top\u002FSKILL.md",true,[67,73],{"path":68,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":71,"sourceHtmlUrl":72},"references\u002Fapi-reference.md","REFERENCE","参考文档",11907,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fslime\u002Freferences\u002Fapi-reference.md",{"path":74,"resourceType":69,"resourceTypeDesc":70,"sizeBytes":75,"sourceHtmlUrl":76},"references\u002Ftroubleshooting.md",7221,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Fslime\u002Freferences\u002Ftroubleshooting.md",[78,94,118,132,158,180],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":89,"publishedAt":39},"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",[84],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[90,91,92,93,35],"demo skill","demo","tests","project",{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":98,"categories":99,"keywords":108,"publishedAt":39},"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",[100,103],{"categoryNo":101,"categoryName":102,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":104,"categoryName":105,"taxonomyType":106,"taxonomyTypeDesc":107},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[96,109,110,111,112,113,35,38,114,115,116,117],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":119,"name":19,"nameZh":6,"description":120,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":121,"categories":122,"keywords":126,"publishedAt":39},"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",[123],{"categoryNo":124,"categoryName":125,"taxonomyType":106,"taxonomyTypeDesc":107},"01JBSEEDCAT000000000000032","设计师",[19,127,128,129,130,38,131,35,36],"icons","components","SET","responsive","layout",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":144,"publishedAt":39},"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",[138,141],{"categoryNo":139,"categoryName":140,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":142,"categoryName":143,"taxonomyType":106,"taxonomyTypeDesc":107},"01JBSEEDCAT000000000000030","开发工程师",[19,145,146,147,148,149,26,150,151,35,36,152,38,153,154,155,127,156,157],"ui themes","switching","photos","tokens","drawing","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":159,"name":160,"nameZh":6,"description":161,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":162,"categories":163,"keywords":167,"publishedAt":39},"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",[164,165,166],{"categoryNo":101,"categoryName":102,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":142,"categoryName":143,"taxonomyType":106,"taxonomyTypeDesc":107},{"categoryNo":104,"categoryName":105,"taxonomyType":106,"taxonomyTypeDesc":107},[168,19,169,128,170,171,153,172,173,174,131,148,175,176,177,35,36,38,178,179],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":193,"publishedAt":39},"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",[186,189,192],{"categoryNo":187,"categoryName":188,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":190,"categoryName":191,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":124,"categoryName":125,"taxonomyType":106,"taxonomyTypeDesc":107},[19,194,195,196,197,24,198,199,131,93,200,201,35,202,203,204,205,206,207,208],"vue","stack","ui stack vue","forms","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]