[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2989AC8Z2NHEQPKMJSTC4":3,"skill-same:01M6D2989AC8Z2NHEQPKMJSTC4":82},{"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":37,"publishedAt":54,"linkOnly":55,"markdownContent":56,"markdownBody":57,"frontMatter":58,"refName":59,"commitSha":60,"skillDirectory":61,"forksCount":62,"repositoryHtmlUrl":63,"repositoryHomepageUrl":64,"ownerHtmlUrl":65,"ownerBlogUrl":64,"ownerDescription":66,"updatedAt":67,"install":68,"resources":81},"01M6D2989AC8Z2NHEQPKMJSTC4","ui-page-blog",null,"A blog or articles section: the index with titles, dates and excerpts, the article page set for reading (measure, type scale, headings with anchors, table of contents, code blocks, images with captions), author and dates, related posts, RSS, and article SEO. Read before building a blog, a changelog page or any long-form article 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-page-blog\u002FSKILL.md",[18,23,26,31,34],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":32,"categoryName":33,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000035","市场营销",{"categoryNo":35,"categoryName":36,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53],"ui","blog","page","ui page blog","code","changelog","index","SET","seo","Captions","rss","table","before building","read","images","article","2026-11-10 10:12:30",false,"---\nname: ui-page-blog\ndescription: \"A blog or articles section: the index with titles, dates and excerpts, the article page set for reading (measure, type scale, headings with anchors, table of contents, code blocks, images with captions), author and dates, related posts, RSS, and article SEO. Read before building a blog, a changelog page or any long-form article page.\"\n---\n\n# A blog or articles section\n\nThe generated blog is a grid of cards with stock photos and \"5 min read\",\neverything centred, grey 14px text running 120 characters wide, headings\nbarely larger than the text, code blocks with no language or copy button,\nand no dates. People come to a blog to read, and come back when it is worth\nit: set the page for reading, date everything, and make each post findable\nand linkable. The measures are in `ui-layout`, the words in `writing`,\nsearch engines in `frontend-seo`, documentation pages in `ui-page-docs`.\n\n## 1. The index\n\n```\n│ [header]                                                                  │\n│ Blog                                                       RSS · Tags ▾   │\n│ Notes on how we build [product], and what we learn doing it.              │\n│ ───────────────────────────────────────────────────────────────────────── │\n│ 28 Sep 2026   Title of the newest post, as the link                       │\n│               Two lines of excerpt in the post's own words, ending        │\n│               at a sentence.                     Engineering · [Author]   │\n│ ───────────────────────────────────────────────────────────────────────── │\n│ 14 Sep 2026   Title of the post before it                                 │\n│ ...                                                                       │\n│ ‹ Newer posts                                            Older posts ›    │\n```\n\n- Newest first. Each entry: the title as the link and the largest text in\n  the entry, the date in a `time` element, an excerpt of one or two lines\n  (the post's own summary, not its first 160 characters cut mid-word), its\n  tags, and the author when several people write.\n- A list by default: titles scan faster than cards. A grid of cards only\n  when every post has a real cover image of its own.\n- A featured post only when one deserves it (a launch, a long essay), not\n  the newest by default.\n- 10 to 20 posts a page with real URLs (`\u002Fblog\u002Fpage\u002F2`); tag pages\n  (`\u002Fblog\u002Ftag\u002Fengineering`) with their own titles; a search over the archive\n  once it is large (Pagefind for a static site).\n- A changelog uses the same index: entries by date and version, grouped as\n  Added, Changed, Fixed (as in Keep a Changelog), an anchor per entry, and\n  the same feed.\n\n## 2. The article\n\n```\n│ [header]                                                                   │\n│            Engineering · 28 Sep 2026 · Updated 30 Sep 2026                 │\n│            The title in the display face,                                  │\n│            over two lines at most                              (h1)        │\n│            One sentence that says what the reader will get.                │\n│            [photo] [Author name], [role]                                   │\n│ ┌ On this page ┐  Body text at 65ch .................................       │\n│ │ Why          │  A heading                                     #         │\n│ │ How          │  Paragraphs, lists, a quote with a rule at its left.      │\n│ │ Results      │  ┌ ts · retry.ts ───────────────────────── Copy ┐        │\n│ └──────────────┘  │ code                                          │        │\n│  sticky           └───────────────────────────────────────────────┘        │\n│                 [ a figure wider than the text column             ]        │\n│                   Caption, with its source.                                │\n│            Next: [title] ›            Related: [title], [title]            │\n```\n\n## 3. Setting the text\n\n- The text column 60 to 75ch (`max-width: 68ch`), left-aligned; body 17 to\n  20px (18 is a good default) at line height 1.6, paragraphs 1em apart;\n  17 to 18px on phones.\n- A clear heading scale: `h1` 36 to 48px with `clamp()`, `h2` 24 to 30px,\n  `h3` 20 to 22px, each with about twice as much space above as below;\n  `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs\n  where supported.\n- Headings carry stable ids and anchor links (rehype-slug and\n  rehype-autolink-headings in a markdown pipeline): a `#` shown on hover\n  and focus, named \"Link to this section\"; `scroll-margin-top` clears the\n  sticky header.\n- A table of contents for posts with four or more `h2`s: sticky in a side\n  column from about 1200px wide, the current section marked\n  (`motion-reveal`, section 10); a `details` \"On this page\" above the text\n  on narrower screens.\n- Lists, blockquotes (a rule at the left and the source, no giant quote\n  marks), footnotes with links back (remark-gfm), tables in a scroll\n  container, `kbd` for keys, inline code on a quiet background.\n\n## 4. Code blocks\n\n- Highlighted at build time with Shiki (rehype-pretty-code or Expressive\n  Code add titles, line highlights and copy buttons), with a theme per\n  colour scheme: Shiki's dual themes (`themes: { light, dark }`) put the\n  second theme's colours in CSS variables that switch with the page's\n  theme (`ui-themes`).\n- The language or file name shown; a Copy button that copies the code\n  without line numbers or `$` prompts and says \"Copied\"; lines highlighted\n  when the text points at them.\n- 14 to 15px monospace, sideways scroll inside the block rather than\n  wrapping, the full width of the text column; a very long block collapsed\n  behind \"Show all 80 lines\".\n\n## 5. Images and figures\n\n- As wide as the text, or wider for screenshots and diagrams (a breakout\n  column up to about 960 to 1100px), in `figure` with a `figcaption` saying\n  what to look at and where it comes from.\n- `width`, `height` and `srcset` on every image, lazy below the first\n  screen, alt text that says what the image shows in this context\n  (`ui-part-images`); screenshots open larger on click. Diagrams as SVG\n  coloured from the tokens, video as in `ui-part-media`.\n\n```css\n.article {\n  display: grid;\n  grid-template-columns:\n    [full-start] minmax(16px, 1fr)\n    [wide-start] minmax(0, 12rem)\n    [text-start] min(68ch, 100% - 32px) [text-end]\n    minmax(0, 12rem) [wide-end]\n    minmax(16px, 1fr) [full-end];\n}\n.article > * { grid-column: text; }\n.article > .wide { grid-column: wide; }\n.article > .full { grid-column: full; }\n```\n\n## 6. Authors and dates\n\n- The author by name with a short, real bio, a photo only when one is\n  given, and a link to their page; several authors in order.\n- Published and updated dates in `time` elements; \"Updated\" only when the\n  content changed in substance, with a line on what changed in technical\n  posts.\n- Reading time only when computed from the words (about 200 to 250 a\n  minute) and only on long posts. No invented authors, dates or view\n  counts.\n\n## 7. After the article\n\n- Next and previous posts, and 2 or 3 related ones chosen by tag or by\n  hand.\n- The ways to follow that exist: the feed, a newsletter if there is one.\n- Plain share links rather than third-party widgets that load trackers;\n  comments only when someone moderates them.\n\n## 8. The feed\n\n- An RSS or Atom feed (`\u002Frss.xml` or `\u002Ffeed.xml`) with absolute URLs,\n  titles, dates and a summary or the full text, valid in the W3C Feed\n  Validation Service.\n- Announced in every page's head, and linked visibly from the index:\n\n```html\n\u003Clink rel=\"alternate\" type=\"application\u002Frss+xml\" title=\"[Blog name]\" href=\"\u002Frss.xml\">\n```\n\n## 9. SEO\n\n- Static or server-rendered HTML with the full text in it.\n- The title \"[Post title] · [Blog name]\" (50 to 60 characters), the\n  description from the standfirst, one canonical URL per post, and the\n  canonical on cross-posted copies pointing back to it.\n- Open Graph: `og:type` set to `article`, `article:published_time`, and an\n  `og:image` of 1200 by 630 per post (generated with the title when the\n  post has no image of its own).\n- `BlogPosting` (or `Article`) structured data with the headline, both\n  dates, the author (name and url) and the image; BreadcrumbList; the\n  sitemap with `lastmod`.\n\n## 10. Themes, print, phone\n\n- Dark theme: the code theme switches with it, screenshots get a hairline\n  border, diagrams take the tokens (`ui-themes`).\n- Print: hide the chrome, keep the text, show where links go:\n\n```css\n@media print {\n  header, footer, nav, .toc, .share { display: none; }\n  body { color: #000; background: #fff; }\n  .article a[href^=\"http\"]::after { content: \" (\" attr(href) \")\"; }\n  pre, figure { break-inside: avoid; }\n}\n```\n\n- On a phone: side padding 16 to 20px, the table of contents as a\n  `details` above the text, code blocks scrolling inside themselves,\n  figures full width, and a back-to-top control on long posts\n  (`ui-part-back-to-top`).\n\n## Check it\n\n- `preview` at 360, 768 and 1440px on the index and a long post: the text\n  column stays 60 to 75ch, no code block or table widens the page, the\n  table of contents sticks and marks the current section.\n- Copy a heading's anchor link and open it: the heading lands below the\n  sticky header.\n- Copy a code block into a terminal: no prompts, no line numbers.\n- Switch to the dark theme: code, diagrams and screenshots still read.\n- The feed through the W3C validator, a post through the Rich Results Test,\n  and `curl` on a post shows its full text in the HTML.\n- Print preview of a long post.\n\n## Avoid\n\nCards with stock photos for every post; centred body text; grey 14px text\nor lines past 90 characters; headings barely larger than the text; code\nwithout a language or a copy button; images without captions; missing or\ninvented dates and authors; reading time on a 300-word post; share widgets\nthat load trackers; a blog with no feed; posts rendered only in the browser\nthat search engines see empty.\n","# A blog or articles section\n\nThe generated blog is a grid of cards with stock photos and \"5 min read\",\neverything centred, grey 14px text running 120 characters wide, headings\nbarely larger than the text, code blocks with no language or copy button,\nand no dates. People come to a blog to read, and come back when it is worth\nit: set the page for reading, date everything, and make each post findable\nand linkable. The measures are in `ui-layout`, the words in `writing`,\nsearch engines in `frontend-seo`, documentation pages in `ui-page-docs`.\n\n## 1. The index\n\n```\n│ [header]                                                                  │\n│ Blog                                                       RSS · Tags ▾   │\n│ Notes on how we build [product], and what we learn doing it.              │\n│ ───────────────────────────────────────────────────────────────────────── │\n│ 28 Sep 2026   Title of the newest post, as the link                       │\n│               Two lines of excerpt in the post's own words, ending        │\n│               at a sentence.                     Engineering · [Author]   │\n│ ───────────────────────────────────────────────────────────────────────── │\n│ 14 Sep 2026   Title of the post before it                                 │\n│ ...                                                                       │\n│ ‹ Newer posts                                            Older posts ›    │\n```\n\n- Newest first. Each entry: the title as the link and the largest text in\n  the entry, the date in a `time` element, an excerpt of one or two lines\n  (the post's own summary, not its first 160 characters cut mid-word), its\n  tags, and the author when several people write.\n- A list by default: titles scan faster than cards. A grid of cards only\n  when every post has a real cover image of its own.\n- A featured post only when one deserves it (a launch, a long essay), not\n  the newest by default.\n- 10 to 20 posts a page with real URLs (`\u002Fblog\u002Fpage\u002F2`); tag pages\n  (`\u002Fblog\u002Ftag\u002Fengineering`) with their own titles; a search over the archive\n  once it is large (Pagefind for a static site).\n- A changelog uses the same index: entries by date and version, grouped as\n  Added, Changed, Fixed (as in Keep a Changelog), an anchor per entry, and\n  the same feed.\n\n## 2. The article\n\n```\n│ [header]                                                                   │\n│            Engineering · 28 Sep 2026 · Updated 30 Sep 2026                 │\n│            The title in the display face,                                  │\n│            over two lines at most                              (h1)        │\n│            One sentence that says what the reader will get.                │\n│            [photo] [Author name], [role]                                   │\n│ ┌ On this page ┐  Body text at 65ch .................................       │\n│ │ Why          │  A heading                                     #         │\n│ │ How          │  Paragraphs, lists, a quote with a rule at its left.      │\n│ │ Results      │  ┌ ts · retry.ts ───────────────────────── Copy ┐        │\n│ └──────────────┘  │ code                                          │        │\n│  sticky           └───────────────────────────────────────────────┘        │\n│                 [ a figure wider than the text column             ]        │\n│                   Caption, with its source.                                │\n│            Next: [title] ›            Related: [title], [title]            │\n```\n\n## 3. Setting the text\n\n- The text column 60 to 75ch (`max-width: 68ch`), left-aligned; body 17 to\n  20px (18 is a good default) at line height 1.6, paragraphs 1em apart;\n  17 to 18px on phones.\n- A clear heading scale: `h1` 36 to 48px with `clamp()`, `h2` 24 to 30px,\n  `h3` 20 to 22px, each with about twice as much space above as below;\n  `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs\n  where supported.\n- Headings carry stable ids and anchor links (rehype-slug and\n  rehype-autolink-headings in a markdown pipeline): a `#` shown on hover\n  and focus, named \"Link to this section\"; `scroll-margin-top` clears the\n  sticky header.\n- A table of contents for posts with four or more `h2`s: sticky in a side\n  column from about 1200px wide, the current section marked\n  (`motion-reveal`, section 10); a `details` \"On this page\" above the text\n  on narrower screens.\n- Lists, blockquotes (a rule at the left and the source, no giant quote\n  marks), footnotes with links back (remark-gfm), tables in a scroll\n  container, `kbd` for keys, inline code on a quiet background.\n\n## 4. Code blocks\n\n- Highlighted at build time with Shiki (rehype-pretty-code or Expressive\n  Code add titles, line highlights and copy buttons), with a theme per\n  colour scheme: Shiki's dual themes (`themes: { light, dark }`) put the\n  second theme's colours in CSS variables that switch with the page's\n  theme (`ui-themes`).\n- The language or file name shown; a Copy button that copies the code\n  without line numbers or `$` prompts and says \"Copied\"; lines highlighted\n  when the text points at them.\n- 14 to 15px monospace, sideways scroll inside the block rather than\n  wrapping, the full width of the text column; a very long block collapsed\n  behind \"Show all 80 lines\".\n\n## 5. Images and figures\n\n- As wide as the text, or wider for screenshots and diagrams (a breakout\n  column up to about 960 to 1100px), in `figure` with a `figcaption` saying\n  what to look at and where it comes from.\n- `width`, `height` and `srcset` on every image, lazy below the first\n  screen, alt text that says what the image shows in this context\n  (`ui-part-images`); screenshots open larger on click. Diagrams as SVG\n  coloured from the tokens, video as in `ui-part-media`.\n\n```css\n.article {\n  display: grid;\n  grid-template-columns:\n    [full-start] minmax(16px, 1fr)\n    [wide-start] minmax(0, 12rem)\n    [text-start] min(68ch, 100% - 32px) [text-end]\n    minmax(0, 12rem) [wide-end]\n    minmax(16px, 1fr) [full-end];\n}\n.article > * { grid-column: text; }\n.article > .wide { grid-column: wide; }\n.article > .full { grid-column: full; }\n```\n\n## 6. Authors and dates\n\n- The author by name with a short, real bio, a photo only when one is\n  given, and a link to their page; several authors in order.\n- Published and updated dates in `time` elements; \"Updated\" only when the\n  content changed in substance, with a line on what changed in technical\n  posts.\n- Reading time only when computed from the words (about 200 to 250 a\n  minute) and only on long posts. No invented authors, dates or view\n  counts.\n\n## 7. After the article\n\n- Next and previous posts, and 2 or 3 related ones chosen by tag or by\n  hand.\n- The ways to follow that exist: the feed, a newsletter if there is one.\n- Plain share links rather than third-party widgets that load trackers;\n  comments only when someone moderates them.\n\n## 8. The feed\n\n- An RSS or Atom feed (`\u002Frss.xml` or `\u002Ffeed.xml`) with absolute URLs,\n  titles, dates and a summary or the full text, valid in the W3C Feed\n  Validation Service.\n- Announced in every page's head, and linked visibly from the index:\n\n```html\n\u003Clink rel=\"alternate\" type=\"application\u002Frss+xml\" title=\"[Blog name]\" href=\"\u002Frss.xml\">\n```\n\n## 9. SEO\n\n- Static or server-rendered HTML with the full text in it.\n- The title \"[Post title] · [Blog name]\" (50 to 60 characters), the\n  description from the standfirst, one canonical URL per post, and the\n  canonical on cross-posted copies pointing back to it.\n- Open Graph: `og:type` set to `article`, `article:published_time`, and an\n  `og:image` of 1200 by 630 per post (generated with the title when the\n  post has no image of its own).\n- `BlogPosting` (or `Article`) structured data with the headline, both\n  dates, the author (name and url) and the image; BreadcrumbList; the\n  sitemap with `lastmod`.\n\n## 10. Themes, print, phone\n\n- Dark theme: the code theme switches with it, screenshots get a hairline\n  border, diagrams take the tokens (`ui-themes`).\n- Print: hide the chrome, keep the text, show where links go:\n\n```css\n@media print {\n  header, footer, nav, .toc, .share { display: none; }\n  body { color: #000; background: #fff; }\n  .article a[href^=\"http\"]::after { content: \" (\" attr(href) \")\"; }\n  pre, figure { break-inside: avoid; }\n}\n```\n\n- On a phone: side padding 16 to 20px, the table of contents as a\n  `details` above the text, code blocks scrolling inside themselves,\n  figures full width, and a back-to-top control on long posts\n  (`ui-part-back-to-top`).\n\n## Check it\n\n- `preview` at 360, 768 and 1440px on the index and a long post: the text\n  column stays 60 to 75ch, no code block or table widens the page, the\n  table of contents sticks and marks the current section.\n- Copy a heading's anchor link and open it: the heading lands below the\n  sticky header.\n- Copy a code block into a terminal: no prompts, no line numbers.\n- Switch to the dark theme: code, diagrams and screenshots still read.\n- The feed through the W3C validator, a post through the Rich Results Test,\n  and `curl` on a post shows its full text in the HTML.\n- Print preview of a long post.\n\n## Avoid\n\nCards with stock photos for every post; centred body text; grey 14px text\nor lines past 90 characters; headings barely larger than the text; code\nwithout a language or a copy button; images without captions; missing or\ninvented dates and authors; reading time on a 300-word post; share widgets\nthat load trackers; a blog with no feed; posts rendered only in the browser\nthat search engines see empty.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-page-blog",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":69,"prompt":79,"zipAvailable":80},[70,73,76],{"tool":71,"command":72},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-page-blog",{"tool":74,"command":75},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-page-blog",{"tool":77,"command":78},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-page-blog","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-page-blog\u002FSKILL.md",true,[],[83,97,115,128,152,173],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":92,"publishedAt":54},"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",[89],{"categoryNo":90,"categoryName":91,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[93,94,95,96,51],"demo skill","demo","tests","project",{"skillNo":98,"name":99,"nameZh":6,"description":100,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":101,"categories":102,"keywords":105,"publishedAt":54},"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",[103,104],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":35,"categoryName":36,"taxonomyType":29,"taxonomyTypeDesc":30},[99,106,107,108,109,110,51,40,111,112,113,114],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":116,"name":38,"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":123,"publishedAt":54},"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",[120],{"categoryNo":121,"categoryName":122,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师",[38,124,125,45,126,40,127,51,50],"icons","components","responsive","layout",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":138,"publishedAt":54},"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",[134,137],{"categoryNo":135,"categoryName":136,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[38,139,140,141,142,143,144,145,146,51,50,147,40,42,148,149,124,150,151],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","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":54},"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":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},{"categoryNo":35,"categoryName":36,"taxonomyType":29,"taxonomyTypeDesc":30},[162,38,163,125,164,165,42,166,53,167,127,142,168,169,170,51,50,40,171,172],"structure","ui structure","pricing","dashboard","Blueprint","anatomy","styling","primitives","list","why","how",{"skillNo":174,"name":175,"nameZh":6,"description":176,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":177,"categories":178,"keywords":186,"publishedAt":54},"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",[179,182,185],{"categoryNo":180,"categoryName":181,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":183,"categoryName":184,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":121,"categoryName":122,"taxonomyType":29,"taxonomyTypeDesc":30},[38,187,188,189,190,191,192,193,127,96,194,195,51,196,197,198,199,200,201,202],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]