[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2BWS0K71WR0SSTF5SDN6A":3,"skill-same:01M6D2BWS0K71WR0SSTF5SDN6A":88},{"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":23,"publishedAt":32,"linkOnly":33,"markdownContent":34,"markdownBody":35,"frontMatter":36,"refName":37,"commitSha":38,"skillDirectory":39,"forksCount":40,"repositoryHtmlUrl":41,"repositoryHomepageUrl":42,"ownerHtmlUrl":43,"ownerBlogUrl":42,"ownerDescription":44,"updatedAt":45,"install":46,"resources":59},"01M6D2BWS0K71WR0SSTF5SDN6A","ui-part-cta",null,"A closing call-to-action band: when a page needs one, repeating the hero's verb and destination, the heading, one line of context and only true reassurance, the band's surface and measures, an email form inside it, phones and themes. Read before ending a page with a call to action.","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-cta\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通","SCENARIO","使用场景",[24,25,26,27,28,29,30,31],"ui","ui part cta","email","page","read","context","only","call","2026-11-10 10:12:30",false,"---\nname: ui-part-cta\ndescription: \"A closing call-to-action band: when a page needs one, repeating the hero's verb and destination, the heading, one line of context and only true reassurance, the band's surface and measures, an email form inside it, phones and themes. Read before ending a page with a call to action.\"\n---\n\n# Call to action band\n\nThe generated version: \"Ready to get started?\" over a purple gradient with\na glow, two equal buttons, \"Join 10,000+ happy customers\", a countdown\nthat resets on every reload, and a new slogan that appears nowhere else on\nthe page. A closing call to action repeats the page's one primary action\nfor the reader who has scrolled to the end and is ready. One part of an\ninterface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`,\nthe page it closes in `ui-page-landing`.\n\n## 1. When to use it\n\n- For repeating the primary action at the end of a long page: a landing\n  or product page, a service page, a long case study that ends in a way to\n  hire.\n- One per page at most, after the last section and before the footer. Not\n  between every section; not on application screens, docs (they end with\n  the next page to read), short pages, or a page with no primary action.\n- On a personal site a closing line in the owner's voice, with the email as\n  a link, often does this better (`ui-part-footer`); on a local business's\n  page, the phone, the address and the booking link\n  (`ui-page-local-business`).\n\n## 2. What it says\n\n- The same action as the hero's and the header's primary button: the same\n  verb and the same destination (`ui-part-hero`, `ui-part-header`). \"Book a\n  first appointment\"; \"Start a 14-day trial\" only if the trial exists and\n  lasts 14 days; \"Download for macOS\". A different verb here reads as a\n  different offer.\n- A heading that says what acting gets the reader, in the page's voice.\n  Not a new slogan and not a question: a fact from the page (\"A first\n  appointment takes 45 minutes\", when it does), not \"Ready to get\n  started?\".\n- One line on why, or on what happens after the click: the next step, the\n  cost, the time it takes.\n- Reassurance only when true and specific: \"No card needed\", \"Cancel any\n  time\", \"Replies within one working day\". A fact you were not given stays\n  a visible placeholder (\"[Reply time]\") and goes in your report.\n- No fake urgency: no countdowns, \"only 3 spots left\" or \"offer ends\n  tonight\" unless it is true and live. No invented counts of customers or\n  ratings (`ui_check` reports figures like \"10,000+ users\").\n\n## 3. Anatomy and measures\n\n- A band that stands apart from the sections above: a full-bleed surface\n  one step from the page (`--surface-2`), or the page's accent area with\n  `--on-accent` text. The content stays in the page's container.\n- Vertical padding 64 to 96px on wide screens, 48 to 64px on phones; the\n  content at most 640 to 720px wide.\n- The heading at the page's section size (25 to 39px); the line at body\n  size, under 60 characters a line; 12 to 16px between them, 24 to 32px\n  down to the button.\n- One button, the primary, large (44 to 48px). At most a secondary text\n  link beside or under it (\"Or email [address]\", \"See pricing\"), never a\n  second filled button.\n- On an accent band the button inverts (the surface colour with accent\n  text), so it stays the strongest thing in the band and keeps 3:1\n  against it.\n- Centred text is allowed here: it is a short standalone line (`ui-layout`\n  7). Or a split: the words at the left, the button at the right, on the\n  content's edges.\n- No gradient, glow, blobs, grid pattern, stock photograph of a handshake,\n  or illustration that only fills space.\n\n## 4. An email form in the band\n\n- Only when the action is leaving an email (a waitlist, a newsletter that\n  exists): one field and one button on one line, a label (visible, or\n  visually hidden when the heading names the field's purpose),\n  `type=\"email\"`, `autocomplete=\"email\"`.\n- It sends somewhere real, says what will arrive and how often, links the\n  privacy notice, and replaces itself with the result (\"Check your inbox\n  to confirm\") without a reload. A form that sends nothing is removed.\n- Errors under the field, in words (`ui-part-forms`, `frontend-forms`).\n\n## 5. Phones, themes, motion\n\n- One column: heading, line, button. The button may go full width below\n  about 480px; its target 48px.\n- Clear of the back-to-top control and of any bar fixed to the bottom\n  (`ui-part-back-to-top`).\n- Themes: the band's surface and text have a value per theme; on an accent\n  band, `--on-accent` at 4.5:1 and the inverted button at 3:1 in both\n  (`ui-themes`).\n- Motion: none, or the page's own section entrance (`motion-reveal`). No\n  pulsing button, no shine sweeping across it (`motion-interface`).\n\n## 6. A sketch\n\n```html\n\u003Csection class=\"cta\" aria-labelledby=\"cta-title\">\n  \u003Cdiv class=\"cta__inner\">\n    \u003Ch2 id=\"cta-title\">[What acting gets the reader, in the page's voice]\u003C\u002Fh2>\n    \u003Cp>[What happens after the click, and what it costs]\u003C\u002Fp>\n    \u003Ca class=\"btn btn--primary btn--large\" href=\"\u002Fbook\">Book a first appointment\u003C\u002Fa>\n    \u003Cp class=\"cta__note\">[Real reassurance, or remove this line]\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n```\n\n```css\n.cta { background: var(--surface-2); padding-block: clamp(48px, 8vw, 96px); }\n.cta__inner {\n  display: grid; justify-items: center; gap: 16px; text-align: center;\n  max-inline-size: 42rem; margin-inline: auto; padding-inline: 16px;\n}\n.cta__inner .btn { margin-block-start: 8px; }\n.cta__note { font-size: 14px; color: var(--text-muted); }\n@media (max-width: 480px) { .cta__inner .btn { justify-self: stretch; } }\n```\n\nThe button is a link: it goes to the booking page (`ui-part-buttons`).\n\n## Check it\n\n- Compare the verb and the destination with the hero's and the header's\n  primary action: the same.\n- `ui_check`: generic actions (\"Get started\", \"Learn more\"), buzzwords,\n  invented figures, default gradients and glow in the band.\n- `preview`: the band's text at 4.5:1 and the button at 3:1 in both themes,\n  the button 44px or more at 360px, its link not in \"links to nowhere\",\n  nothing under the back-to-top control.\n- Every claim in the band traced to a fact you were given; the rest are\n  visible placeholders listed in the report.\n\n## Avoid\n\nMore than one per page; a new slogan in it; \"Ready to get started?\";\n\"Join thousands of…\" with no count behind it; countdowns and scarcity that\nare not true; two equal buttons; a gradient band with a glow; a verb that\ndiffers from the hero's; a newsletter form with no newsletter; a band on an\napplication screen.\n","# Call to action band\n\nThe generated version: \"Ready to get started?\" over a purple gradient with\na glow, two equal buttons, \"Join 10,000+ happy customers\", a countdown\nthat resets on every reload, and a new slogan that appears nowhere else on\nthe page. A closing call to action repeats the page's one primary action\nfor the reader who has scrolled to the end and is ready. One part of an\ninterface: the principles (direction, spacing, type, colour, icons,\nstates, accessibility) are in the `ui` skill, the measures in `ui-layout`,\nthe page it closes in `ui-page-landing`.\n\n## 1. When to use it\n\n- For repeating the primary action at the end of a long page: a landing\n  or product page, a service page, a long case study that ends in a way to\n  hire.\n- One per page at most, after the last section and before the footer. Not\n  between every section; not on application screens, docs (they end with\n  the next page to read), short pages, or a page with no primary action.\n- On a personal site a closing line in the owner's voice, with the email as\n  a link, often does this better (`ui-part-footer`); on a local business's\n  page, the phone, the address and the booking link\n  (`ui-page-local-business`).\n\n## 2. What it says\n\n- The same action as the hero's and the header's primary button: the same\n  verb and the same destination (`ui-part-hero`, `ui-part-header`). \"Book a\n  first appointment\"; \"Start a 14-day trial\" only if the trial exists and\n  lasts 14 days; \"Download for macOS\". A different verb here reads as a\n  different offer.\n- A heading that says what acting gets the reader, in the page's voice.\n  Not a new slogan and not a question: a fact from the page (\"A first\n  appointment takes 45 minutes\", when it does), not \"Ready to get\n  started?\".\n- One line on why, or on what happens after the click: the next step, the\n  cost, the time it takes.\n- Reassurance only when true and specific: \"No card needed\", \"Cancel any\n  time\", \"Replies within one working day\". A fact you were not given stays\n  a visible placeholder (\"[Reply time]\") and goes in your report.\n- No fake urgency: no countdowns, \"only 3 spots left\" or \"offer ends\n  tonight\" unless it is true and live. No invented counts of customers or\n  ratings (`ui_check` reports figures like \"10,000+ users\").\n\n## 3. Anatomy and measures\n\n- A band that stands apart from the sections above: a full-bleed surface\n  one step from the page (`--surface-2`), or the page's accent area with\n  `--on-accent` text. The content stays in the page's container.\n- Vertical padding 64 to 96px on wide screens, 48 to 64px on phones; the\n  content at most 640 to 720px wide.\n- The heading at the page's section size (25 to 39px); the line at body\n  size, under 60 characters a line; 12 to 16px between them, 24 to 32px\n  down to the button.\n- One button, the primary, large (44 to 48px). At most a secondary text\n  link beside or under it (\"Or email [address]\", \"See pricing\"), never a\n  second filled button.\n- On an accent band the button inverts (the surface colour with accent\n  text), so it stays the strongest thing in the band and keeps 3:1\n  against it.\n- Centred text is allowed here: it is a short standalone line (`ui-layout`\n  7). Or a split: the words at the left, the button at the right, on the\n  content's edges.\n- No gradient, glow, blobs, grid pattern, stock photograph of a handshake,\n  or illustration that only fills space.\n\n## 4. An email form in the band\n\n- Only when the action is leaving an email (a waitlist, a newsletter that\n  exists): one field and one button on one line, a label (visible, or\n  visually hidden when the heading names the field's purpose),\n  `type=\"email\"`, `autocomplete=\"email\"`.\n- It sends somewhere real, says what will arrive and how often, links the\n  privacy notice, and replaces itself with the result (\"Check your inbox\n  to confirm\") without a reload. A form that sends nothing is removed.\n- Errors under the field, in words (`ui-part-forms`, `frontend-forms`).\n\n## 5. Phones, themes, motion\n\n- One column: heading, line, button. The button may go full width below\n  about 480px; its target 48px.\n- Clear of the back-to-top control and of any bar fixed to the bottom\n  (`ui-part-back-to-top`).\n- Themes: the band's surface and text have a value per theme; on an accent\n  band, `--on-accent` at 4.5:1 and the inverted button at 3:1 in both\n  (`ui-themes`).\n- Motion: none, or the page's own section entrance (`motion-reveal`). No\n  pulsing button, no shine sweeping across it (`motion-interface`).\n\n## 6. A sketch\n\n```html\n\u003Csection class=\"cta\" aria-labelledby=\"cta-title\">\n  \u003Cdiv class=\"cta__inner\">\n    \u003Ch2 id=\"cta-title\">[What acting gets the reader, in the page's voice]\u003C\u002Fh2>\n    \u003Cp>[What happens after the click, and what it costs]\u003C\u002Fp>\n    \u003Ca class=\"btn btn--primary btn--large\" href=\"\u002Fbook\">Book a first appointment\u003C\u002Fa>\n    \u003Cp class=\"cta__note\">[Real reassurance, or remove this line]\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Fsection>\n```\n\n```css\n.cta { background: var(--surface-2); padding-block: clamp(48px, 8vw, 96px); }\n.cta__inner {\n  display: grid; justify-items: center; gap: 16px; text-align: center;\n  max-inline-size: 42rem; margin-inline: auto; padding-inline: 16px;\n}\n.cta__inner .btn { margin-block-start: 8px; }\n.cta__note { font-size: 14px; color: var(--text-muted); }\n@media (max-width: 480px) { .cta__inner .btn { justify-self: stretch; } }\n```\n\nThe button is a link: it goes to the booking page (`ui-part-buttons`).\n\n## Check it\n\n- Compare the verb and the destination with the hero's and the header's\n  primary action: the same.\n- `ui_check`: generic actions (\"Get started\", \"Learn more\"), buzzwords,\n  invented figures, default gradients and glow in the band.\n- `preview`: the band's text at 4.5:1 and the button at 3:1 in both themes,\n  the button 44px or more at 360px, its link not in \"links to nowhere\",\n  nothing under the back-to-top control.\n- Every claim in the band traced to a fact you were given; the rest are\n  visible placeholders listed in the report.\n\n## Avoid\n\nMore than one per page; a new slogan in it; \"Ready to get started?\";\n\"Join thousands of…\" with no count behind it; countdowns and scarcity that\nare not true; two equal buttons; a gradient band with a glow; a verb that\ndiffers from the hero's; a newsletter form with no newsletter; a band on an\napplication screen.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-cta",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":47,"prompt":57,"zipAvailable":58},[48,51,54],{"tool":49,"command":50},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-cta",{"tool":52,"command":53},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-cta",{"tool":55,"command":56},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-cta","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-cta\u002FSKILL.md",true,[60,66,70,74,80,84],{"path":61,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":64,"sourceHtmlUrl":65},"references\u002Fdatasets_reference.md","REFERENCE","参考文档",15940,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Freferences\u002Fdatasets_reference.md",{"path":67,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002Flayers_reference.md",17121,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Freferences\u002Flayers_reference.md",{"path":71,"resourceType":62,"resourceTypeDesc":63,"sizeBytes":72,"sourceHtmlUrl":73},"references\u002Ftransforms_reference.md",17950,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Freferences\u002Ftransforms_reference.md",{"path":75,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":78,"sourceHtmlUrl":79},"scripts\u002Fbenchmark_model.py","SCRIPT","脚本",10028,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Fscripts\u002Fbenchmark_model.py",{"path":81,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":82,"sourceHtmlUrl":83},"scripts\u002Fcreate_gnn_template.py",15342,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Fscripts\u002Fcreate_gnn_template.py",{"path":85,"resourceType":76,"resourceTypeDesc":77,"sizeBytes":86,"sourceHtmlUrl":87},"scripts\u002Fvisualize_graph.py",10267,"https:\u002F\u002Fgithub.com\u002Ffadrienne\u002FMyGitHub\u002Fblob\u002Fmain\u002Fopenscience\u002Fbackend\u002Fcli\u002Fskills\u002Fcoding\u002Ftorch_geometric\u002Fscripts\u002Fvisualize_graph.py",[89,103,127,142,169,191],{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":98,"publishedAt":32},"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",[95],{"categoryNo":96,"categoryName":97,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[99,100,101,102,28],"demo skill","demo","tests","project",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":117,"publishedAt":32},"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",[109,112],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":113,"categoryName":114,"taxonomyType":115,"taxonomyTypeDesc":116},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[105,118,119,120,121,122,28,27,123,124,125,126],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":128,"name":24,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":135,"publishedAt":32},"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",[132],{"categoryNo":133,"categoryName":134,"taxonomyType":115,"taxonomyTypeDesc":116},"01JBSEEDCAT000000000000032","设计师",[24,136,137,138,139,27,140,28,141],"icons","components","SET","responsive","layout","before building",{"skillNo":143,"name":144,"nameZh":6,"description":145,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":146,"categories":147,"keywords":154,"publishedAt":32},"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",[148,151],{"categoryNo":149,"categoryName":150,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":152,"categoryName":153,"taxonomyType":115,"taxonomyTypeDesc":116},"01JBSEEDCAT000000000000030","开发工程师",[24,155,156,157,158,159,160,161,162,28,141,163,27,164,165,166,136,167,168],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":170,"name":171,"nameZh":6,"description":172,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":173,"categories":174,"keywords":178,"publishedAt":32},"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",[175,176,177],{"categoryNo":110,"categoryName":111,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":152,"categoryName":153,"taxonomyType":115,"taxonomyTypeDesc":116},{"categoryNo":113,"categoryName":114,"taxonomyType":115,"taxonomyTypeDesc":116},[179,24,180,137,181,182,164,183,184,185,140,158,186,187,188,28,141,27,189,190],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":192,"name":193,"nameZh":6,"description":194,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":195,"categories":196,"keywords":204,"publishedAt":32},"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",[197,200,203],{"categoryNo":198,"categoryName":199,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":201,"categoryName":202,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":133,"categoryName":134,"taxonomyType":115,"taxonomyTypeDesc":116},[24,205,206,207,208,209,210,211,140,102,212,213,28,214,215,216,217,218,219,220],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]