[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2HB59HZHWG1RYZDV4SJ91":3,"skill-same:01M6D2HB59HZHWG1RYZDV4SJ91":76},{"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":28,"publishedAt":48,"linkOnly":49,"markdownContent":50,"markdownBody":51,"frontMatter":52,"refName":53,"commitSha":54,"skillDirectory":55,"forksCount":56,"repositoryHtmlUrl":57,"repositoryHomepageUrl":58,"ownerHtmlUrl":59,"ownerBlogUrl":58,"ownerDescription":60,"updatedAt":61,"install":62,"resources":75},"01M6D2HB59HZHWG1RYZDV4SJ91","ui-themes",null,"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.","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-themes\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47],"ui themes","ui","before building","switching","tokens","drawing","focus","photos","maps","Art","read","screenshots","flash","page","logo","Charts","content","code","icons","2026-11-10 10:12:30",false,"---\nname: ui-themes\ndescription: \"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.\"\n---\n\n# Light and dark themes\n\nA theme is more than a background colour. Generated dark modes flip the page\nand forget what sits on it: a line drawing in black vanishes, a logo with\nblack lettering on a transparent file disappears, a chart keeps its light\ncolours, card shadows stop showing, the focus ring blends in. Everything\ndrawn on the page is decided for each theme.\n\n## 1. One set of tokens, a value per theme\n\n- Tokens are named by role, never by colour: `--bg`, `--surface`,\n  `--surface-2`, `--text`, `--text-muted`, `--border`, `--border-strong`,\n  `--accent`, `--on-accent` (text on the accent), `--ink` (the colour\n  drawings are made of), `--success`, `--warning`, `--danger`, `--focus`.\n  Not `--black`, `--gray-900`.\n- Light values on `:root`; dark values under the project's switch:\n  `[data-theme=\"dark\"]` or `.dark` (Tailwind's `dark` variant), with\n  `@media (prefers-color-scheme: dark)` for a first visit where nothing is\n  saved yet.\n- Components use tokens only: no raw hex in a component, no per-element\n  `dark:` overrides where a token would do. In Tailwind, map the tokens into\n  the theme (`bg-background`, `text-foreground`) and let the variables\n  switch.\n- Each value is chosen, not inverted. Dark surfaces step up 2 to 4% in\n  lightness per level (the `ui` skill, neutrals). An accent keeps its hue\n  but usually needs a lighter step on dark (for example 38% lightness on\n  light, 62% on dark) to stay at 3:1 as a control and 4.5:1 as text; the\n  status colours likewise.\n- `color-scheme: light` and `color-scheme: dark` on the root of each theme,\n  so scrollbars, date pickers and native form controls follow; a\n  `\u003Cmeta name=\"theme-color\">` per theme.\n\n## 2. Contrast, for everything that carries meaning\n\n- Text 4.5:1, large text 3:1.\n- Icons, the lines and shapes of a drawing that shows something, chart\n  marks, borders that identify a control, and focus rings: 3:1 against what\n  is right behind them. Decoration that carries nothing may be faint; the\n  thing the section is about may not.\n\n## 3. Each kind of content, in both themes\n\n- **Icons**: `currentColor`, inheriting a text token. Never a fixed\n  `fill=\"#000\"` or `stroke=\"black\"`.\n- **SVG drawings and line art** (a technical drawing, a diagram, a mascot):\n  inline the SVG and draw it with tokens: `stroke=\"currentColor\"` on its\n  strokes and `color: var(--ink)` on its wrapper; fills that are surfaces\n  of the drawing from `--surface-2`; the one highlighted part (a flag, a\n  marker) from `--accent`. An SVG in an `\u003Cimg>` cannot read the page's\n  colours: inline it; or, for single-colour art, use it as a mask\n  (`mask: url(ship.svg) center \u002F contain no-repeat;\n  background: var(--ink)`); or ship one file per theme and switch them with\n  the theme class.\n- **Logos**: a version per theme, dark lettering for light and light\n  lettering for dark, switched with the theme, or an inline SVG in\n  `currentColor`. Other companies' logos the same, or on a plate that stays\n  light.\n- **Photos**: as they are; very bright ones may dim slightly on dark\n  (`filter: brightness(.9)`). Never invert a photo.\n- **Screenshots of the product**: the screenshot in the matching theme when\n  the product has both; otherwise framed (a border and a surface around it),\n  so a white screenshot does not sit on a dark page like a hole.\n- **Charts**: series colours from tokens, the same hues lighter on dark;\n  gridlines at border strength; labels in the muted text colour; tooltips\n  on the surface. Re-render or restyle when the theme changes\n  (`ui-part-charts`).\n- **Code**: a syntax theme per mode (a dual theme such as Shiki's\n  `github-light` and `github-dark`), not a dark block on a light page by\n  habit.\n- **Maps and embeds**: the provider's dark style in the dark theme; embeds\n  framed.\n- **Elevation**: on dark a shadow barely shows. Raise a surface by making it\n  lighter and giving it a hairline border; keep soft shadows for light.\n- **Borders and dividers**: 8 to 14% above the background on dark, 8 to 12%\n  below it on light; a border that marks a control reaches 3:1.\n- **States**: hover and selected as surface steps; disabled still legible\n  and still clearly disabled; a focus ring (2px in `--focus`, with an\n  offset) visible in both.\n- **Selection and the caret**: `::selection` and `caret-color` from tokens.\n\n## 4. A worked case\n\nA developer's portfolio with a light and a dark theme. The hero is a\ntechnical line drawing of a ship, and a small dial of the same set sits\nabove a section label. Both files are drawn in `currentColor`, which looks\nright, and both are loaded with `\u003Cimg src=\"\u002Fmedia\u002Fantares.svg\">`. An image\nnever takes the page's colours: inside it, `currentColor` is black. On the\nlight theme the drawings read; on the dark page (about `#08161d`) they are\nblack on near-black, 1.1:1, and the drawing that is the focal point of the\npage disappears. The `preview` tool reports it in the dark pass: `img\nantares.svg 540x180 drawn in #000000 on #08161d, 1.14:1, needs 3:1`.\n\nThree fixes, each keeping one drawing for both themes:\n\n1. Inline it as a component, so it takes the page's colour: in Vite with\n   `vite-plugin-svgr` (`import Ship from \".\u002Fantares.svg?react\"`), in Next.js\n   with `@svgr\u002Fwebpack`, or pasted into a component.\n2. Keep the file and reference it with `\u003Cuse>`, which does inherit the\n   colour: give the drawing's root group an id and write\n   `\u003Csvg viewBox=\"0 0 720 240\" role=\"img\" aria-label=\"...\">\u003Cuse href=\"\u002Fmedia\u002Fantares.svg#drawing\" \u002F>\u003C\u002Fsvg>`.\n3. For a single-colour drawing, use the file as a mask over a token:\n   `mask: url(\u002Fmedia\u002Fantares.svg) center \u002F contain no-repeat;\n   background: var(--ink)`.\n\nThen colour it for each theme:\n\n```css\n:root { --ink: #1a1d21; --accent: #c2410c; }\n[data-theme=\"dark\"] { --ink: #c9ced6; --accent: #f97316; }\n.drawing { color: var(--ink); }\n.drawing .flag { fill: var(--accent); }\n```\n\n`--ink` is near-black on light and a light grey on dark (above 7:1 on the\ndark page); the thin lines of the drawing (the waterline, dimension lines)\nuse `--border-strong`, which still reaches 3:1; the one highlighted part\n(the flag) keeps the accent.\n\n## 5. Switching\n\n- The default follows the system (`prefers-color-scheme`) unless the concept\n  sets one theme, in which case there is no toggle.\n- A toggle is an icon button in the header's right group: the icon set's\n  sun or moon and nothing else. No visible text: not \"Dark mode\", not\n  \"Light\", not a label beside or under the icon, not a switch with words on\n  it. Its name is for assistive technology and the pointer, not the eye:\n  an `aria-label` that says what it does (\"Switch to dark theme\"), the same\n  in a `title`, updated when the theme changes. It is the size of the other\n  icon buttons (a 40px target at least) and shows focus like them. The\n  choice is saved, and applied before the first paint by a small script in\n  `\u003Chead>` that sets the class or attribute, so the wrong theme never\n  flashes (`next-themes` does this in Next.js).\n- No page-wide animation when switching; a short colour transition at most.\n\n## 6. Check both\n\n- Look at every screen in both themes. The `preview` tool renders the page\n  in its first theme at 360, 768 and 1440px, then at 1440px in the other\n  theme, and reports text below 4.5:1 and drawings and icons below 3:1 in\n  each.\n- In the screenshots, look for what disappears or glares: line art, logos,\n  chart lines, borders that shadows used to do the work of, white\n  screenshots on dark.\n\n## Avoid\n\nColours named for how they look; raw hex in components; `fill=\"#000\"` or\n`stroke=\"black\"` in an SVG; one logo file for both themes; an SVG drawing in\nan `\u003Cimg>` on a two-theme page; inverted photos; `filter: invert(1)` on\nanything but single-colour line art; a chart with light colours on dark;\nshadows as the only edge on dark; a theme applied after the page paints; a\ntoggle with no name; a dark theme that is grey (the `ui` skill, neutrals).\n","# Light and dark themes\n\nA theme is more than a background colour. Generated dark modes flip the page\nand forget what sits on it: a line drawing in black vanishes, a logo with\nblack lettering on a transparent file disappears, a chart keeps its light\ncolours, card shadows stop showing, the focus ring blends in. Everything\ndrawn on the page is decided for each theme.\n\n## 1. One set of tokens, a value per theme\n\n- Tokens are named by role, never by colour: `--bg`, `--surface`,\n  `--surface-2`, `--text`, `--text-muted`, `--border`, `--border-strong`,\n  `--accent`, `--on-accent` (text on the accent), `--ink` (the colour\n  drawings are made of), `--success`, `--warning`, `--danger`, `--focus`.\n  Not `--black`, `--gray-900`.\n- Light values on `:root`; dark values under the project's switch:\n  `[data-theme=\"dark\"]` or `.dark` (Tailwind's `dark` variant), with\n  `@media (prefers-color-scheme: dark)` for a first visit where nothing is\n  saved yet.\n- Components use tokens only: no raw hex in a component, no per-element\n  `dark:` overrides where a token would do. In Tailwind, map the tokens into\n  the theme (`bg-background`, `text-foreground`) and let the variables\n  switch.\n- Each value is chosen, not inverted. Dark surfaces step up 2 to 4% in\n  lightness per level (the `ui` skill, neutrals). An accent keeps its hue\n  but usually needs a lighter step on dark (for example 38% lightness on\n  light, 62% on dark) to stay at 3:1 as a control and 4.5:1 as text; the\n  status colours likewise.\n- `color-scheme: light` and `color-scheme: dark` on the root of each theme,\n  so scrollbars, date pickers and native form controls follow; a\n  `\u003Cmeta name=\"theme-color\">` per theme.\n\n## 2. Contrast, for everything that carries meaning\n\n- Text 4.5:1, large text 3:1.\n- Icons, the lines and shapes of a drawing that shows something, chart\n  marks, borders that identify a control, and focus rings: 3:1 against what\n  is right behind them. Decoration that carries nothing may be faint; the\n  thing the section is about may not.\n\n## 3. Each kind of content, in both themes\n\n- **Icons**: `currentColor`, inheriting a text token. Never a fixed\n  `fill=\"#000\"` or `stroke=\"black\"`.\n- **SVG drawings and line art** (a technical drawing, a diagram, a mascot):\n  inline the SVG and draw it with tokens: `stroke=\"currentColor\"` on its\n  strokes and `color: var(--ink)` on its wrapper; fills that are surfaces\n  of the drawing from `--surface-2`; the one highlighted part (a flag, a\n  marker) from `--accent`. An SVG in an `\u003Cimg>` cannot read the page's\n  colours: inline it; or, for single-colour art, use it as a mask\n  (`mask: url(ship.svg) center \u002F contain no-repeat;\n  background: var(--ink)`); or ship one file per theme and switch them with\n  the theme class.\n- **Logos**: a version per theme, dark lettering for light and light\n  lettering for dark, switched with the theme, or an inline SVG in\n  `currentColor`. Other companies' logos the same, or on a plate that stays\n  light.\n- **Photos**: as they are; very bright ones may dim slightly on dark\n  (`filter: brightness(.9)`). Never invert a photo.\n- **Screenshots of the product**: the screenshot in the matching theme when\n  the product has both; otherwise framed (a border and a surface around it),\n  so a white screenshot does not sit on a dark page like a hole.\n- **Charts**: series colours from tokens, the same hues lighter on dark;\n  gridlines at border strength; labels in the muted text colour; tooltips\n  on the surface. Re-render or restyle when the theme changes\n  (`ui-part-charts`).\n- **Code**: a syntax theme per mode (a dual theme such as Shiki's\n  `github-light` and `github-dark`), not a dark block on a light page by\n  habit.\n- **Maps and embeds**: the provider's dark style in the dark theme; embeds\n  framed.\n- **Elevation**: on dark a shadow barely shows. Raise a surface by making it\n  lighter and giving it a hairline border; keep soft shadows for light.\n- **Borders and dividers**: 8 to 14% above the background on dark, 8 to 12%\n  below it on light; a border that marks a control reaches 3:1.\n- **States**: hover and selected as surface steps; disabled still legible\n  and still clearly disabled; a focus ring (2px in `--focus`, with an\n  offset) visible in both.\n- **Selection and the caret**: `::selection` and `caret-color` from tokens.\n\n## 4. A worked case\n\nA developer's portfolio with a light and a dark theme. The hero is a\ntechnical line drawing of a ship, and a small dial of the same set sits\nabove a section label. Both files are drawn in `currentColor`, which looks\nright, and both are loaded with `\u003Cimg src=\"\u002Fmedia\u002Fantares.svg\">`. An image\nnever takes the page's colours: inside it, `currentColor` is black. On the\nlight theme the drawings read; on the dark page (about `#08161d`) they are\nblack on near-black, 1.1:1, and the drawing that is the focal point of the\npage disappears. The `preview` tool reports it in the dark pass: `img\nantares.svg 540x180 drawn in #000000 on #08161d, 1.14:1, needs 3:1`.\n\nThree fixes, each keeping one drawing for both themes:\n\n1. Inline it as a component, so it takes the page's colour: in Vite with\n   `vite-plugin-svgr` (`import Ship from \".\u002Fantares.svg?react\"`), in Next.js\n   with `@svgr\u002Fwebpack`, or pasted into a component.\n2. Keep the file and reference it with `\u003Cuse>`, which does inherit the\n   colour: give the drawing's root group an id and write\n   `\u003Csvg viewBox=\"0 0 720 240\" role=\"img\" aria-label=\"...\">\u003Cuse href=\"\u002Fmedia\u002Fantares.svg#drawing\" \u002F>\u003C\u002Fsvg>`.\n3. For a single-colour drawing, use the file as a mask over a token:\n   `mask: url(\u002Fmedia\u002Fantares.svg) center \u002F contain no-repeat;\n   background: var(--ink)`.\n\nThen colour it for each theme:\n\n```css\n:root { --ink: #1a1d21; --accent: #c2410c; }\n[data-theme=\"dark\"] { --ink: #c9ced6; --accent: #f97316; }\n.drawing { color: var(--ink); }\n.drawing .flag { fill: var(--accent); }\n```\n\n`--ink` is near-black on light and a light grey on dark (above 7:1 on the\ndark page); the thin lines of the drawing (the waterline, dimension lines)\nuse `--border-strong`, which still reaches 3:1; the one highlighted part\n(the flag) keeps the accent.\n\n## 5. Switching\n\n- The default follows the system (`prefers-color-scheme`) unless the concept\n  sets one theme, in which case there is no toggle.\n- A toggle is an icon button in the header's right group: the icon set's\n  sun or moon and nothing else. No visible text: not \"Dark mode\", not\n  \"Light\", not a label beside or under the icon, not a switch with words on\n  it. Its name is for assistive technology and the pointer, not the eye:\n  an `aria-label` that says what it does (\"Switch to dark theme\"), the same\n  in a `title`, updated when the theme changes. It is the size of the other\n  icon buttons (a 40px target at least) and shows focus like them. The\n  choice is saved, and applied before the first paint by a small script in\n  `\u003Chead>` that sets the class or attribute, so the wrong theme never\n  flashes (`next-themes` does this in Next.js).\n- No page-wide animation when switching; a short colour transition at most.\n\n## 6. Check both\n\n- Look at every screen in both themes. The `preview` tool renders the page\n  in its first theme at 360, 768 and 1440px, then at 1440px in the other\n  theme, and reports text below 4.5:1 and drawings and icons below 3:1 in\n  each.\n- In the screenshots, look for what disappears or glares: line art, logos,\n  chart lines, borders that shadows used to do the work of, white\n  screenshots on dark.\n\n## Avoid\n\nColours named for how they look; raw hex in components; `fill=\"#000\"` or\n`stroke=\"black\"` in an SVG; one logo file for both themes; an SVG drawing in\nan `\u003Cimg>` on a two-theme page; inverted photos; `filter: invert(1)` on\nanything but single-colour line art; a chart with light colours on dark;\nshadows as the only edge on dark; a theme applied after the page paints; a\ntoggle with no name; a dark theme that is grey (the `ui` skill, neutrals).\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-themes",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":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-themes",{"tool":68,"command":69},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-themes",{"tool":71,"command":72},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-themes","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-themes\u002FSKILL.md",true,[],[77,91,113,126,148,178],{"skillNo":78,"name":79,"nameZh":6,"description":80,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":81,"categories":82,"keywords":86,"publishedAt":48},"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",[83],{"categoryNo":84,"categoryName":85,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[87,88,89,90,39],"demo","demo skill","tests","project",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":103,"publishedAt":48},"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",[97,100],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":101,"categoryName":102,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000036","内容创作者",[93,104,105,106,107,108,39,42,109,110,111,112],"text","emails","empty","drop","document","voice","notifications","documentation","translate",{"skillNo":114,"name":30,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":121,"publishedAt":48},"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",[118],{"categoryNo":119,"categoryName":120,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师",[30,122,47,123,42,124,125,39,31],"SET","components","layout","responsive",{"skillNo":127,"name":128,"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":48},"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",[132,133,134],{"categoryNo":98,"categoryName":99,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},{"categoryNo":101,"categoryName":102,"taxonomyType":26,"taxonomyTypeDesc":27},[30,136,137,31,138,139,124,33,140,141,142,143,39,46,144,145,123,146,147,42],"ui structure","structure","article","anatomy","Blueprint","styling","primitives","list","why","how","pricing","dashboard",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":161,"publishedAt":48},"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",[154,157,160],{"categoryNo":155,"categoryName":156,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":158,"categoryName":159,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":119,"categoryName":120,"taxonomyType":26,"taxonomyTypeDesc":27},[162,30,163,164,165,166,167,168,124,169,170,171,90,172,173,174,39,175,176,177],"ui stack vue","vue","stack","config","directory","testing","server","pages","watch","runtime","transitions","forms","fetch","pinia","nuxt","template",{"skillNo":179,"name":180,"nameZh":6,"description":181,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":182,"categories":183,"keywords":184,"publishedAt":48},"01M6D2GW10WYJMQ5MP0YWWX00Y","ui-stack-tailwind","Building with Tailwind CSS v4 (and v3) without the Tailwind-default look: setup per framework (Vite, Next.js, Astro, Laravel, monorepos), @theme tokens in OKLCH named by role, dark mode with @custom-variant, the layout system as tokens (one container, section spacing, a type scale, stretched rows) and how to fix each preview layout line with classes, state, aria, data, group, peer, has, motion and container-query variants, component recipes (button, field, card, navigation, table, dialog) with every state, motion with --animate-* and starting:, cn with tailwind-merge, cva, class order, @utility, arbitrary values, typography, v3 to v4 migration, and the generated look. Read when the project uses Tailwind.","https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-stack-tailwind\u002FSKILL.md",[],[185,164,186,30,187,124,90,188,189,190,191,192,193,194,195,145,196,197,198,199],"ui stack tailwind","Tailwind","default","preview","next","query","aria","fix","generated","dialog","laravel","astro","merge","component","css"]