[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2BEBFJTCMRV0KXM55FWWC":3,"skill-same:01M6D2BEBFJTCMRV0KXM55FWWC":63},{"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":35,"linkOnly":36,"markdownContent":37,"markdownBody":38,"frontMatter":39,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":45,"ownerHtmlUrl":46,"ownerBlogUrl":45,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M6D2BEBFJTCMRV0KXM55FWWC","ui-part-charts",null,"Charts and figures: choosing the chart by the question, titles, axes, units and direct labels, colour from tokens with one series highlighted, tooltips, loading, empty and error states, a text and table alternative, libraries, load cost and phones. Read before building a chart, a sparkline or any data figure.","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-charts\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34],"ui","Charts","ui part charts","libraries","data","text","table","direct","before building","question","read","cost","units","empty","tokens","series","2026-11-10 10:12:30",false,"---\nname: ui-part-charts\ndescription: \"Charts and figures: choosing the chart by the question, titles, axes, units and direct labels, colour from tokens with one series highlighted, tooltips, loading, empty and error states, a text and table alternative, libraries, load cost and phones. Read before building a chart, a sparkline or any data figure.\"\n---\n\n# Charts and figures\n\nThe generated version: a donut of two values, a 3D bar, twelve series in a\nrainbow under a legend nobody can match, an axis with no unit, a smooth\ntrend line drawn from numbers nobody measured, and the chart animating\nagain on every hover. A chart answers one question with real data; this is\nhow to choose it, label it, colour it, and make it readable by people who\ncannot see it. One part of an interface: the principles (direction,\nspacing, type, colour, icons, states, accessibility) are in the `ui`\nskill, the measures in `ui-layout`.\n\n## 1. Choose by the question\n\n| Question | Chart | Notes |\n|---|---|---|\n| How did it change over time? | line; columns for a few periods | the period in the title |\n| Which category is biggest? | horizontal bars sorted by value, with values | easier to read than a donut |\n| What is the whole made of? | stacked or 100% bar; a donut only with 5 parts or fewer | never a donut for two values |\n| How is it spread? | histogram, box plot, dot plot | say the bin size |\n| Do two measures move together? | scatter | a trend line only when fitted |\n| Where are we against a target? | the number, its change, a sparkline or bullet bar | with unit and period |\n\n- A single figure is often the best chart: \"412 orders this week, 38 more\n  than last week\", in words, from the data.\n- No chart without a question: no decorative charts, no sample series to\n  fill a dashboard.\n- No 3D; no dual axes unless two units truly share one time line (then\n  each axis labelled in its series' colour); no radar charts to compare.\n\n## 2. Titles, axes, labels\n\n- The title states the question the chart answers, with the measure, the\n  unit and the period: \"Failed jobs per hour, last 24 hours\". A static\n  report may state the finding instead (\"Refunds fell after the size guide\n  shipped\") with the measure beneath; on a live dashboard the finding\n  changes, so the measure is the title.\n- Axes labelled, with units (\"ms\", \"%\", \"Rp\"). Bars start at zero, since\n  their length is the value; a line may start above zero when the change\n  is the point, with the axis clearly numbered.\n- 3 to 6 ticks on a value axis, at round numbers; dates at natural steps\n  (hours, days, months), formatted for the locale with\n  `Intl.DateTimeFormat`, numbers with `Intl.NumberFormat`\n  (`notation: \"compact\"` gives 12K).\n- Direct labels rather than a legend: a line's name at its end, a bar's\n  value at its tip. A legend only past three series, above the chart, in the order\n  the lines end.\n- Gridlines faint or none: horizontal only, at border strength.\n- The source and the time of the data under it (\"Orders database, updated\n  10:15\"), with the time zone when it matters.\n\n## 3. Colour\n\n- Drawn with the tokens: one accent for the series that matters, neutrals\n  for the rest. One highlighted series says more than seven colours.\n- When several series must be told apart: a categorical palette of 6 to 8\n  token colours that differ in lightness as well as hue, safe for colour\n  blindness (the Okabe-Ito set is a good start) and at 3:1 against the\n  background in both themes. Past 8, group the rest as \"Other\".\n- Sequential scales (one hue, light to dark) for amounts, as in a heatmap;\n  diverging scales (two hues round a neutral middle) for above and below a\n  baseline.\n- Colour is never the only key: labels, markers or dashes carry it too.\n  Never red and green alone for bad and good.\n\n## 4. Interaction\n\n- A tooltip on hover and on keyboard focus with the exact value, its unit\n  and its date; it follows the pointer with no delay. On touch, a tap\n  shows it and a tap elsewhere hides it.\n- Points or bars reachable from the keyboard when the values matter (the\n  library's accessibility option, or arrow keys along the series).\n- Ranges (7 days, 30 days, 12 months) as a segmented control above the\n  chart, kept in the URL; while new data loads, the old chart stays,\n  dimmed.\n\n## 5. States\n\n- Loading: the frame at its final size with the title and axes, a quiet\n  skeleton inside; never fake bars.\n- Empty: said in the chart's place (\"No failed jobs in the last 24\n  hours\"). A zero is data: a flat line at zero is right when the series\n  exists.\n- Error: in the chart's place, what failed and a retry.\n- Gaps stay gaps: missing points are not drawn as zero or joined across.\n- Never an invented series, trend or number. A template shows a visible\n  \"[Sample data]\" label until real data is connected.\n\n## 6. For people who cannot see it\n\n- A text alternative: a `figure` whose `figcaption` gives the title and\n  the finding, or `role=\"img\"` with an `aria-label` on a small chart;\n  decorative parts of the SVG `aria-hidden=\"true\"`.\n- The same numbers as a table, next to the chart or behind a \"Show data\"\n  disclosure. A canvas chart (Chart.js, ECharts on canvas) is invisible to\n  a screen reader without it.\n\n## 7. Libraries and cost\n\n- The component library's chart kit first (shadcn's charts are Recharts,\n  themed with CSS variables), or an established library:\n  - Recharts: React, SVG, declarative; dashboards up to a few thousand\n    points.\n  - ECharts: canvas or SVG, large datasets, heatmaps, maps; import from\n    `echarts\u002Fcore` so only the charts used ship.\n  - Chart.js: canvas, any framework, simple charts, small.\n  - visx: low-level React pieces on D3, for a chart you design yourself.\n  - Observable Plot: SVG, concise, good defaults for reports and analysis.\n  - Nivo: React, many chart types, SVG, canvas or HTML.\n  - A sparkline is a `polyline` in an inline SVG; no library.\n- The chart library loads when the chart is on screen (`import()`), not\n  with the page: `React.lazy`, `next\u002Fdynamic`, or an IntersectionObserver.\n- More points than pixels is waste: aggregate on the server, or downsample\n  with LTTB (ECharts: `sampling: \"lttb\"`); SVG slows past a few thousand\n  elements.\n\n## 8. Phones, themes, motion\n\n- Responsive: the chart takes its container's width, with a set height per\n  width (240 to 320px on wide screens, 200 to 240px on a phone), not a\n  ratio that shrinks it to a strip.\n- On a phone it shows its headline number, with the chart below it or\n  behind a tap; 3 or 4 ticks, short date labels (\"Sep\"), horizontal bars\n  for long category names, any legend below.\n- Themes: series colours from tokens, the same hues lighter on dark,\n  labels in the muted text colour. A canvas chart reads the tokens with\n  `getComputedStyle` and redraws when the theme changes (`ui-themes`).\n- Motion: bars grow and lines draw once, on first view; a live update\n  animates only the change; nothing replays on hover; under reduced motion\n  the chart appears finished (`motion-interface` 14).\n\n## 9. A sketch\n\nRecharts: a sorted bar list with values, one bar highlighted.\n\n```tsx\nimport { Bar, BarChart, Cell, LabelList, ResponsiveContainer, XAxis, YAxis } from \"recharts\";\n\ntype Row = { reason: string; count: number };\n\nexport function RefundsByReason({ rows, highlight, reducedMotion }: {\n  rows: Row[]; highlight: string; reducedMotion: boolean;\n}) {\n  const sorted = [...rows].sort((a, b) => b.count - a.count);\n  return (\n    \u003Cfigure>\n      \u003Cfigcaption>Refunds by reason, September\u003C\u002Ffigcaption>\n      \u003Cdiv style={{ height: 40 * sorted.length + 16 }}>\n        \u003CResponsiveContainer>\n          \u003CBarChart data={sorted} layout=\"vertical\" margin={{ right: 48 }}>\n            \u003CXAxis type=\"number\" hide \u002F>\n            \u003CYAxis type=\"category\" dataKey=\"reason\" width={140} tickLine={false}\n              axisLine={false} tick={{ fill: \"var(--text-muted)\" }} \u002F>\n            \u003CBar dataKey=\"count\" radius={2} isAnimationActive={!reducedMotion}>\n              {sorted.map((r) => (\n                \u003CCell key={r.reason}\n                  fill={r.reason === highlight ? \"var(--accent)\" : \"var(--chart-neutral)\"} \u002F>\n              ))}\n              \u003CLabelList dataKey=\"count\" position=\"right\" fill=\"var(--text)\" \u002F>\n            \u003C\u002FBar>\n          \u003C\u002FBarChart>\n        \u003C\u002FResponsiveContainer>\n      \u003C\u002Fdiv>\n      \u003Cdetails>\n        \u003Csummary>Show the data\u003C\u002Fsummary>\n        \u003Ctable>{\u002F* the same rows: reason, count *\u002F}\u003C\u002Ftable>\n      \u003C\u002Fdetails>\n    \u003C\u002Ffigure>\n  );\n}\n```\n\n## Check it\n\n- `preview` in both themes: chart text below 4.5:1, and an SVG chart whose\n  main colour is below 3:1, are reported; a canvas is not measured, so\n  compute its colours yourself. At 360px nothing overflows and labels do\n  not collide.\n- `preview` with `motion: true`: the chart animates once, and not at all in\n  the reduced-motion pass.\n- Read the title alone: what is measured, in what unit, over what period?\n  Cover the legend: can every series still be named?\n- Tab to the chart: tooltips appear on focus; a screen reader reads the\n  caption and reaches the table.\n- Trace every number to its query. Empty the data source: the empty state\n  shows, not a broken axis. `ui_check` flags invented figures around it.\n\n## Avoid\n\nDecorative charts; a donut for two values, or with twelve slices; 3D; dual\naxes for convenience; bars that do not start at zero; a rainbow legend;\nred and green as the only key; axes with no units; a trend line with no\ndata behind it; sample data left in; animation on every hover; the whole\nchart library in the first load; a canvas chart with no table.\n","# Charts and figures\n\nThe generated version: a donut of two values, a 3D bar, twelve series in a\nrainbow under a legend nobody can match, an axis with no unit, a smooth\ntrend line drawn from numbers nobody measured, and the chart animating\nagain on every hover. A chart answers one question with real data; this is\nhow to choose it, label it, colour it, and make it readable by people who\ncannot see it. One part of an interface: the principles (direction,\nspacing, type, colour, icons, states, accessibility) are in the `ui`\nskill, the measures in `ui-layout`.\n\n## 1. Choose by the question\n\n| Question | Chart | Notes |\n|---|---|---|\n| How did it change over time? | line; columns for a few periods | the period in the title |\n| Which category is biggest? | horizontal bars sorted by value, with values | easier to read than a donut |\n| What is the whole made of? | stacked or 100% bar; a donut only with 5 parts or fewer | never a donut for two values |\n| How is it spread? | histogram, box plot, dot plot | say the bin size |\n| Do two measures move together? | scatter | a trend line only when fitted |\n| Where are we against a target? | the number, its change, a sparkline or bullet bar | with unit and period |\n\n- A single figure is often the best chart: \"412 orders this week, 38 more\n  than last week\", in words, from the data.\n- No chart without a question: no decorative charts, no sample series to\n  fill a dashboard.\n- No 3D; no dual axes unless two units truly share one time line (then\n  each axis labelled in its series' colour); no radar charts to compare.\n\n## 2. Titles, axes, labels\n\n- The title states the question the chart answers, with the measure, the\n  unit and the period: \"Failed jobs per hour, last 24 hours\". A static\n  report may state the finding instead (\"Refunds fell after the size guide\n  shipped\") with the measure beneath; on a live dashboard the finding\n  changes, so the measure is the title.\n- Axes labelled, with units (\"ms\", \"%\", \"Rp\"). Bars start at zero, since\n  their length is the value; a line may start above zero when the change\n  is the point, with the axis clearly numbered.\n- 3 to 6 ticks on a value axis, at round numbers; dates at natural steps\n  (hours, days, months), formatted for the locale with\n  `Intl.DateTimeFormat`, numbers with `Intl.NumberFormat`\n  (`notation: \"compact\"` gives 12K).\n- Direct labels rather than a legend: a line's name at its end, a bar's\n  value at its tip. A legend only past three series, above the chart, in the order\n  the lines end.\n- Gridlines faint or none: horizontal only, at border strength.\n- The source and the time of the data under it (\"Orders database, updated\n  10:15\"), with the time zone when it matters.\n\n## 3. Colour\n\n- Drawn with the tokens: one accent for the series that matters, neutrals\n  for the rest. One highlighted series says more than seven colours.\n- When several series must be told apart: a categorical palette of 6 to 8\n  token colours that differ in lightness as well as hue, safe for colour\n  blindness (the Okabe-Ito set is a good start) and at 3:1 against the\n  background in both themes. Past 8, group the rest as \"Other\".\n- Sequential scales (one hue, light to dark) for amounts, as in a heatmap;\n  diverging scales (two hues round a neutral middle) for above and below a\n  baseline.\n- Colour is never the only key: labels, markers or dashes carry it too.\n  Never red and green alone for bad and good.\n\n## 4. Interaction\n\n- A tooltip on hover and on keyboard focus with the exact value, its unit\n  and its date; it follows the pointer with no delay. On touch, a tap\n  shows it and a tap elsewhere hides it.\n- Points or bars reachable from the keyboard when the values matter (the\n  library's accessibility option, or arrow keys along the series).\n- Ranges (7 days, 30 days, 12 months) as a segmented control above the\n  chart, kept in the URL; while new data loads, the old chart stays,\n  dimmed.\n\n## 5. States\n\n- Loading: the frame at its final size with the title and axes, a quiet\n  skeleton inside; never fake bars.\n- Empty: said in the chart's place (\"No failed jobs in the last 24\n  hours\"). A zero is data: a flat line at zero is right when the series\n  exists.\n- Error: in the chart's place, what failed and a retry.\n- Gaps stay gaps: missing points are not drawn as zero or joined across.\n- Never an invented series, trend or number. A template shows a visible\n  \"[Sample data]\" label until real data is connected.\n\n## 6. For people who cannot see it\n\n- A text alternative: a `figure` whose `figcaption` gives the title and\n  the finding, or `role=\"img\"` with an `aria-label` on a small chart;\n  decorative parts of the SVG `aria-hidden=\"true\"`.\n- The same numbers as a table, next to the chart or behind a \"Show data\"\n  disclosure. A canvas chart (Chart.js, ECharts on canvas) is invisible to\n  a screen reader without it.\n\n## 7. Libraries and cost\n\n- The component library's chart kit first (shadcn's charts are Recharts,\n  themed with CSS variables), or an established library:\n  - Recharts: React, SVG, declarative; dashboards up to a few thousand\n    points.\n  - ECharts: canvas or SVG, large datasets, heatmaps, maps; import from\n    `echarts\u002Fcore` so only the charts used ship.\n  - Chart.js: canvas, any framework, simple charts, small.\n  - visx: low-level React pieces on D3, for a chart you design yourself.\n  - Observable Plot: SVG, concise, good defaults for reports and analysis.\n  - Nivo: React, many chart types, SVG, canvas or HTML.\n  - A sparkline is a `polyline` in an inline SVG; no library.\n- The chart library loads when the chart is on screen (`import()`), not\n  with the page: `React.lazy`, `next\u002Fdynamic`, or an IntersectionObserver.\n- More points than pixels is waste: aggregate on the server, or downsample\n  with LTTB (ECharts: `sampling: \"lttb\"`); SVG slows past a few thousand\n  elements.\n\n## 8. Phones, themes, motion\n\n- Responsive: the chart takes its container's width, with a set height per\n  width (240 to 320px on wide screens, 200 to 240px on a phone), not a\n  ratio that shrinks it to a strip.\n- On a phone it shows its headline number, with the chart below it or\n  behind a tap; 3 or 4 ticks, short date labels (\"Sep\"), horizontal bars\n  for long category names, any legend below.\n- Themes: series colours from tokens, the same hues lighter on dark,\n  labels in the muted text colour. A canvas chart reads the tokens with\n  `getComputedStyle` and redraws when the theme changes (`ui-themes`).\n- Motion: bars grow and lines draw once, on first view; a live update\n  animates only the change; nothing replays on hover; under reduced motion\n  the chart appears finished (`motion-interface` 14).\n\n## 9. A sketch\n\nRecharts: a sorted bar list with values, one bar highlighted.\n\n```tsx\nimport { Bar, BarChart, Cell, LabelList, ResponsiveContainer, XAxis, YAxis } from \"recharts\";\n\ntype Row = { reason: string; count: number };\n\nexport function RefundsByReason({ rows, highlight, reducedMotion }: {\n  rows: Row[]; highlight: string; reducedMotion: boolean;\n}) {\n  const sorted = [...rows].sort((a, b) => b.count - a.count);\n  return (\n    \u003Cfigure>\n      \u003Cfigcaption>Refunds by reason, September\u003C\u002Ffigcaption>\n      \u003Cdiv style={{ height: 40 * sorted.length + 16 }}>\n        \u003CResponsiveContainer>\n          \u003CBarChart data={sorted} layout=\"vertical\" margin={{ right: 48 }}>\n            \u003CXAxis type=\"number\" hide \u002F>\n            \u003CYAxis type=\"category\" dataKey=\"reason\" width={140} tickLine={false}\n              axisLine={false} tick={{ fill: \"var(--text-muted)\" }} \u002F>\n            \u003CBar dataKey=\"count\" radius={2} isAnimationActive={!reducedMotion}>\n              {sorted.map((r) => (\n                \u003CCell key={r.reason}\n                  fill={r.reason === highlight ? \"var(--accent)\" : \"var(--chart-neutral)\"} \u002F>\n              ))}\n              \u003CLabelList dataKey=\"count\" position=\"right\" fill=\"var(--text)\" \u002F>\n            \u003C\u002FBar>\n          \u003C\u002FBarChart>\n        \u003C\u002FResponsiveContainer>\n      \u003C\u002Fdiv>\n      \u003Cdetails>\n        \u003Csummary>Show the data\u003C\u002Fsummary>\n        \u003Ctable>{\u002F* the same rows: reason, count *\u002F}\u003C\u002Ftable>\n      \u003C\u002Fdetails>\n    \u003C\u002Ffigure>\n  );\n}\n```\n\n## Check it\n\n- `preview` in both themes: chart text below 4.5:1, and an SVG chart whose\n  main colour is below 3:1, are reported; a canvas is not measured, so\n  compute its colours yourself. At 360px nothing overflows and labels do\n  not collide.\n- `preview` with `motion: true`: the chart animates once, and not at all in\n  the reduced-motion pass.\n- Read the title alone: what is measured, in what unit, over what period?\n  Cover the legend: can every series still be named?\n- Tab to the chart: tooltips appear on focus; a screen reader reads the\n  caption and reaches the table.\n- Trace every number to its query. Empty the data source: the empty state\n  shows, not a broken axis. `ui_check` flags invented figures around it.\n\n## Avoid\n\nDecorative charts; a donut for two values, or with twelve slices; 3D; dual\naxes for convenience; bars that do not start at zero; a rainbow legend;\nred and green as the only key; axes with no units; a trend line with no\ndata behind it; sample data left in; animation on every hover; the whole\nchart library in the first load; a canvas chart with no table.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-charts",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":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-charts",{"tool":55,"command":56},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-charts",{"tool":58,"command":59},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-charts","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-charts\u002FSKILL.md",true,[],[64,80,103,117,142,164],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":75,"publishedAt":35},"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",[70],{"categoryNo":71,"categoryName":72,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[76,77,78,79,29],"demo skill","demo","tests","project",{"skillNo":81,"name":82,"nameZh":6,"description":83,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":84,"categories":85,"keywords":94,"publishedAt":35},"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",[86,89],{"categoryNo":87,"categoryName":88,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[82,24,95,32,96,97,29,98,99,100,101,102],"emails","drop","document","page","voice","notifications","documentation","translate",{"skillNo":104,"name":19,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":111,"publishedAt":35},"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",[108],{"categoryNo":109,"categoryName":110,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000032","设计师",[19,112,113,114,115,98,116,29,27],"icons","components","SET","responsive","layout",{"skillNo":118,"name":119,"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":129,"publishedAt":35},"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",[123,126],{"categoryNo":124,"categoryName":125,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":127,"categoryName":128,"taxonomyType":92,"taxonomyTypeDesc":93},"01JBSEEDCAT000000000000030","开发工程师",[19,130,131,132,33,133,134,135,136,29,27,137,98,138,20,139,112,140,141],"ui themes","switching","photos","drawing","focus","maps","Art","flash","code","content","screenshots","logo",{"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":151,"publishedAt":35},"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",[148,149,150],{"categoryNo":87,"categoryName":88,"taxonomyType":73,"taxonomyTypeDesc":74},{"categoryNo":127,"categoryName":128,"taxonomyType":92,"taxonomyTypeDesc":93},{"categoryNo":90,"categoryName":91,"taxonomyType":92,"taxonomyTypeDesc":93},[152,19,153,113,154,155,138,156,157,158,116,33,159,160,161,29,27,98,162,163],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":177,"publishedAt":35},"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",[170,173,176],{"categoryNo":171,"categoryName":172,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":174,"categoryName":175,"taxonomyType":73,"taxonomyTypeDesc":74},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":109,"categoryName":110,"taxonomyType":92,"taxonomyTypeDesc":93},[19,178,179,180,181,182,183,184,116,79,185,186,29,187,188,189,190,191,192,193],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]