[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6D2C0S2GHTT8K9TNTH4A90R":3,"skill-same:01M6D2C0S2GHTT8K9TNTH4A90R":60},{"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":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":36,"ownerHtmlUrl":37,"ownerBlogUrl":36,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M6D2C0S2GHTT8K9TNTH4A90R","ui-part-dates",null,"Dates and times in interfaces: showing them in the reader's locale and time zone, relative times, date and time inputs, calendars and range pickers with presets, disabled dates with reasons, time zones, durations, and the libraries to use. Read before showing or asking for a date or a time.","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-dates\u002FSKILL.md",[],[19,20,21,22,23,24,25],"ui","ui part dates","libraries","reader","read","use","time","2026-11-10 10:12:30",false,"---\nname: ui-part-dates\ndescription: \"Dates and times in interfaces: showing them in the reader's locale and time zone, relative times, date and time inputs, calendars and range pickers with presets, disabled dates with reasons, time zones, durations, and the libraries to use. Read before showing or asking for a date or a time.\"\n---\n\n# Dates and times\n\nThe naive version prints `03\u002F04\u002F26` (March or April?), shows the server's\ntime zone to everyone, stores a birthday as midnight UTC so it appears a day\nearly in America, says \"2 hours ago\" with no way to see when, and asks for a\ndate of birth with a calendar that opens on this month. This skill shows\ndates so nobody misreads them, stores them so they do not shift, and asks\nfor each kind of date the way it is best entered. Words and plurals are in\n`i18n`, the API's date format in `backend-api`.\n\n## 1. Showing a date\n\n- Format with `Intl.DateTimeFormat` in the reader's locale (the app's\n  language, else the browser's) and time zone (their profile's, else\n  `Intl.DateTimeFormat().resolvedOptions().timeZone`).\n- The month as a word: \"12 Mar 2026\" or \"Mar 12, 2026\", as the locale\n  writes it (`dateStyle: \"medium\"`). Never an all-number date where people\n  from more than one country read it; ISO `2026-03-12` only in technical\n  places (logs, exports, file names).\n- The year when it is not the current one; the weekday when people plan\n  with it (\"Thu 12 Mar\"); the time in the locale's own clock, 12 or 24\n  hours, never forced.\n- In tables: right-aligned, tabular numbers, never wrapped\n  (`ui-part-tables`). Build formatters once and reuse them.\n\n```ts\nconst day = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: zone });\nconst at = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\", timeZone: zone });\nconst plan = new Intl.DateTimeFormat(locale, {\n  weekday: \"short\", day: \"numeric\", month: \"short\", timeZone: zone,\n});\nday.format(new Date(\"2026-03-12T09:30:00Z\")); \u002F\u002F en-GB \"12 Mar 2026\", en-US \"Mar 12, 2026\"\n```\n\n- `dateStyle` and `timeStyle` cannot be mixed with fields like `weekday`\n  (the constructor throws); list the fields instead, as in `plan`.\n- Server rendering: a date formatted in the server's zone and again in the\n  reader's does not match, and React reports a hydration error. Format on\n  the server in the user's saved zone, or send the ISO value in a `time`\n  element and format it in the browser.\n\n## 2. Relative times\n\n- For recent events in feeds, comments and activity: \"now\" under a minute,\n  then \"5 minutes ago\", \"3 hours ago\", \"yesterday\", and the date from about\n  a week on.\n- The exact time one step away: a `time` element with the ISO value, and\n  the full date on hover and focus (`ui-part-tooltips`) or in the detail\n  view. A `title` alone never reaches touch or keyboard users.\n- One shared timer updates every relative time every 30 to 60 seconds, not\n  a timer per row, and it pauses while the tab is hidden.\n- Absolute, not relative, in anything kept or compared: emails, exports,\n  audit logs, invoices, print, and deadlines (\"Due Fri 3 Oct, 17:00\", with\n  \"in 2 days\" beside it when that helps).\n\n```ts\nconst rtf = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\nconst units: [Intl.RelativeTimeFormatUnit, number][] = [\n  [\"day\", 86400], [\"hour\", 3600], [\"minute\", 60],\n];\nexport function ago(date: Date, now = Date.now()): string {\n  const s = Math.round((date.getTime() - now) \u002F 1000);\n  for (const [unit, size] of units) {\n    if (Math.abs(s) >= size) return rtf.format(Math.round(s \u002F size), unit);\n  }\n  return rtf.format(0, \"second\"); \u002F\u002F \"now\"\n}\n\u002F\u002F \u003Ctime datetime=\"2026-09-29T08:15:00Z\">{ago(date)}\u003C\u002Ftime>\n```\n\n## 3. Storing dates, and time zones\n\n- An instant (when something happened) is stored in UTC (`timestamptz` in\n  Postgres) and sent as ISO 8601 with its offset: `2026-09-29T08:15:00Z`.\n- A calendar date with no time (a birthday, a due date, a holiday) is a\n  plain date, `\"2026-03-12\"`, never midnight UTC: `new Date(\"2026-03-12\")`\n  is UTC midnight and shows as 11 March west of Greenwich. Keep it a string\n  or a `Temporal.PlainDate`; if it must pass through a `Date`, format it\n  with `timeZone: \"UTC\"`.\n- A future local event (a meeting at 09:00 in Jakarta next year, a weekly\n  class) is stored as the local date and time plus the IANA zone\n  (`Asia\u002FJakarta`): daylight saving rules change, so the instant is worked\n  out when needed.\n- Show the zone whenever people in different places read the time:\n  bookings, meetings, deadlines, live events. \"14:00 WIB\" or \"14:00 Jakarta\n  time\", with the reader's own time beside it when theirs differs. A zone\n  picker lists cities with their offset, searchable, the detected one first.\n- Arithmetic in the zone, not in milliseconds: \"tomorrow\" or \"in a month\"\n  across a daylight saving change is not a multiple of 86,400 seconds away.\n\n## 4. Libraries\n\n- Display: `Intl` alone (`DateTimeFormat`, `RelativeTimeFormat`, and\n  `DurationFormat` where the runtime has it). No library needed.\n- Calculation and zones: Temporal where the runtime ships it (check\n  `typeof Temporal`; `temporal-polyfill` or `@js-temporal\u002Fpolyfill`\n  otherwise); in existing code date-fns with `@date-fns\u002Ftz`, Day.js with\n  its `utc` and `timezone` plugins, or Luxon. Not Moment.js in new code (in\n  maintenance, heavy), and no hand-written date maths.\n- Parsing: only ISO 8601 from machines. What people type is parsed with an\n  explicit format and locale (date-fns `parse(value, \"dd\u002FMM\u002Fyyyy\", new\n  Date())`), or not typed as free text at all (section 5). Never\n  `new Date(\"03\u002F04\u002F2026\")`.\n\n## 5. Asking for a date or a time\n\n| Need | Use |\n|---|---|\n| One near date (a delivery day, a filter) | `input type=\"date\"`, or the design system's date picker |\n| A date people know (birth, passport expiry) | Day, month and year as three text fields with `inputmode=\"numeric\"`; no calendar |\n| A time | `input type=\"time\"` with `step` (900 for 15 minutes), or slot buttons when only some times are free |\n| Ranges, unavailable dates, presets | A library picker: react-day-picker (shadcn\u002Fui's Calendar), React Aria `DatePicker` and `DateRangePicker`, Bits UI (Svelte), Reka UI or PrimeVue (Vue), Ark UI, Mantine Dates, MUI X |\n| Date and time together | Two fields and the zone named; `datetime-local` carries no zone |\n\n- Native inputs work well on phones and with the keyboard, and their value\n  is always `yyyy-mm-dd`. But the display follows the browser, not the\n  page, `min` and `max` are the only limits, and there are no ranges.\n- A custom picker lets people type as well as pick: segmented fields (React\n  Aria's `DateField`) or a text field with the format shown (\"DD\u002FMM\u002FYYYY\"),\n  and a calendar button beside it. The calendar helps; it is not the only\n  way in.\n- The label names the date (\"Delivery date\"), the hint gives an example\n  when typing (\"For example, 27 3 2026\"), and errors say what is wrong\n  (\"Choose a date after today\").\n\n## 6. The calendar grid\n\n- Keys, from the APG date picker dialog: arrows move a day (left, right) or\n  a week (up, down); Home and End go to the start and end of the week;\n  Page Up and Page Down change the month, with Shift the year; Enter or\n  Space selects; Escape closes and returns focus to the field or button.\n- One tab stop in the grid (roving `tabindex`); each day named in full\n  (\"Thursday, 12 March 2026\"); today marked in words as well as with a\n  ring; the selected day `aria-selected=\"true\"`; the month and year as the\n  grid's label, and a change of month announced politely.\n- The week starts on the locale's day (Monday in most of the world, Sunday\n  in the United States and some others); the libraries take it from the\n  locale.\n- Day cells 40 to 44px (44 on touch); one month about 300 to 340px wide;\n  two months side by side for ranges on wide screens, one on phones, where\n  the calendar opens in a bottom sheet or full screen; the popup kept\n  inside the window by the library's positioning.\n- Today and the selection from tokens at 3:1 in both themes (`ui-themes`);\n  the popup fades in over 120 to 160ms and months switch at once\n  (`motion-interface`, section 2).\n\n## 7. Ranges and presets\n\n- Presets beside the calendar (a list above it on phones): Today,\n  Yesterday, Last 7 days, Last 30 days, This month, Last month, This year,\n  Custom. Say whether \"Last 7 days\" includes today, and hold that rule\n  everywhere, the query included.\n- The trigger shows the range in words (\"1 to 28 Sep 2026\", \"Last 30\n  days\"); the URL carries plain dates (`?from=2026-09-01&to=2026-09-28`).\n- After the first click, hovering previews the range; a click before the\n  start restarts it; minimum and maximum lengths are said in the hint.\n- Both ends inclusive, and the data queried by the same rule in the\n  reader's zone.\n\n## 8. Dates that cannot be chosen\n\n- Say why: a legend (booked, closed, too soon to deliver) and the reason in\n  the day's accessible description, as well as the muted style. A greyed\n  day with no reason leaves people guessing.\n- Offer the way out: \"Next available: Tue 14 Oct\" as a button, and open on\n  the first month with free dates, not on a month of greyed days.\n- Times as slot buttons (44px, grouped as Morning, Afternoon, Evening),\n  only the free ones, in the place's zone with the zone named.\n- The server checks the choice again when booking; if the slot has gone,\n  the message offers the nearest free ones.\n\n## 9. Durations and countdowns\n\n- Durations in units people read (\"1 h 30 min\", \"3 days\"), with\n  `Intl.DurationFormat` where available or `Intl.NumberFormat` with\n  `style: \"unit\"` per part; stored as seconds or ISO 8601 (`PT1H30M`).\n- Running timers in tabular numbers (`font-variant-numeric: tabular-nums`)\n  so the digits do not jitter.\n- Countdowns only to a real deadline (a sale that really ends, a session\n  about to time out), from the server's clock, never reset on reload to\n  fake urgency; announced at thresholds (5 minutes, 1 minute), not every\n  second; a session timeout offers more time (WCAG 2.2.1).\n\n## Check it\n\n- Run the tests and the app in another locale and zone: `TZ=America\u002FLos_Angeles`\n  for Node, `locale` and `timezoneId` on a Playwright context, the Sensors\n  panel in Chrome DevTools for the browser.\n- A birthday shows the same day at UTC-8 and at UTC+9; a weekly 09:00\n  event stays at 09:00 across a daylight saving change.\n- The picker by keyboard alone: arrows, Page Up, typing a date, Escape\n  back to the field.\n- `preview` at 360px: the popup fits, day cells are 44px, presets reachable.\n\n## Avoid\n\nAll-number dates like 03\u002F04\u002F26; the server's zone shown to everyone; plain\ndates stored as midnight UTC; relative times with no exact time reachable;\n\"0 seconds ago\"; a timer per row; a calendar as the only way to enter a\nbirth date; greyed days with no reason; date maths in milliseconds across\ndaylight saving; Moment.js in new code; `new Date()` on whatever was typed;\ncountdowns that reset on reload.\n","# Dates and times\n\nThe naive version prints `03\u002F04\u002F26` (March or April?), shows the server's\ntime zone to everyone, stores a birthday as midnight UTC so it appears a day\nearly in America, says \"2 hours ago\" with no way to see when, and asks for a\ndate of birth with a calendar that opens on this month. This skill shows\ndates so nobody misreads them, stores them so they do not shift, and asks\nfor each kind of date the way it is best entered. Words and plurals are in\n`i18n`, the API's date format in `backend-api`.\n\n## 1. Showing a date\n\n- Format with `Intl.DateTimeFormat` in the reader's locale (the app's\n  language, else the browser's) and time zone (their profile's, else\n  `Intl.DateTimeFormat().resolvedOptions().timeZone`).\n- The month as a word: \"12 Mar 2026\" or \"Mar 12, 2026\", as the locale\n  writes it (`dateStyle: \"medium\"`). Never an all-number date where people\n  from more than one country read it; ISO `2026-03-12` only in technical\n  places (logs, exports, file names).\n- The year when it is not the current one; the weekday when people plan\n  with it (\"Thu 12 Mar\"); the time in the locale's own clock, 12 or 24\n  hours, never forced.\n- In tables: right-aligned, tabular numbers, never wrapped\n  (`ui-part-tables`). Build formatters once and reuse them.\n\n```ts\nconst day = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeZone: zone });\nconst at = new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\", timeZone: zone });\nconst plan = new Intl.DateTimeFormat(locale, {\n  weekday: \"short\", day: \"numeric\", month: \"short\", timeZone: zone,\n});\nday.format(new Date(\"2026-03-12T09:30:00Z\")); \u002F\u002F en-GB \"12 Mar 2026\", en-US \"Mar 12, 2026\"\n```\n\n- `dateStyle` and `timeStyle` cannot be mixed with fields like `weekday`\n  (the constructor throws); list the fields instead, as in `plan`.\n- Server rendering: a date formatted in the server's zone and again in the\n  reader's does not match, and React reports a hydration error. Format on\n  the server in the user's saved zone, or send the ISO value in a `time`\n  element and format it in the browser.\n\n## 2. Relative times\n\n- For recent events in feeds, comments and activity: \"now\" under a minute,\n  then \"5 minutes ago\", \"3 hours ago\", \"yesterday\", and the date from about\n  a week on.\n- The exact time one step away: a `time` element with the ISO value, and\n  the full date on hover and focus (`ui-part-tooltips`) or in the detail\n  view. A `title` alone never reaches touch or keyboard users.\n- One shared timer updates every relative time every 30 to 60 seconds, not\n  a timer per row, and it pauses while the tab is hidden.\n- Absolute, not relative, in anything kept or compared: emails, exports,\n  audit logs, invoices, print, and deadlines (\"Due Fri 3 Oct, 17:00\", with\n  \"in 2 days\" beside it when that helps).\n\n```ts\nconst rtf = new Intl.RelativeTimeFormat(locale, { numeric: \"auto\" });\nconst units: [Intl.RelativeTimeFormatUnit, number][] = [\n  [\"day\", 86400], [\"hour\", 3600], [\"minute\", 60],\n];\nexport function ago(date: Date, now = Date.now()): string {\n  const s = Math.round((date.getTime() - now) \u002F 1000);\n  for (const [unit, size] of units) {\n    if (Math.abs(s) >= size) return rtf.format(Math.round(s \u002F size), unit);\n  }\n  return rtf.format(0, \"second\"); \u002F\u002F \"now\"\n}\n\u002F\u002F \u003Ctime datetime=\"2026-09-29T08:15:00Z\">{ago(date)}\u003C\u002Ftime>\n```\n\n## 3. Storing dates, and time zones\n\n- An instant (when something happened) is stored in UTC (`timestamptz` in\n  Postgres) and sent as ISO 8601 with its offset: `2026-09-29T08:15:00Z`.\n- A calendar date with no time (a birthday, a due date, a holiday) is a\n  plain date, `\"2026-03-12\"`, never midnight UTC: `new Date(\"2026-03-12\")`\n  is UTC midnight and shows as 11 March west of Greenwich. Keep it a string\n  or a `Temporal.PlainDate`; if it must pass through a `Date`, format it\n  with `timeZone: \"UTC\"`.\n- A future local event (a meeting at 09:00 in Jakarta next year, a weekly\n  class) is stored as the local date and time plus the IANA zone\n  (`Asia\u002FJakarta`): daylight saving rules change, so the instant is worked\n  out when needed.\n- Show the zone whenever people in different places read the time:\n  bookings, meetings, deadlines, live events. \"14:00 WIB\" or \"14:00 Jakarta\n  time\", with the reader's own time beside it when theirs differs. A zone\n  picker lists cities with their offset, searchable, the detected one first.\n- Arithmetic in the zone, not in milliseconds: \"tomorrow\" or \"in a month\"\n  across a daylight saving change is not a multiple of 86,400 seconds away.\n\n## 4. Libraries\n\n- Display: `Intl` alone (`DateTimeFormat`, `RelativeTimeFormat`, and\n  `DurationFormat` where the runtime has it). No library needed.\n- Calculation and zones: Temporal where the runtime ships it (check\n  `typeof Temporal`; `temporal-polyfill` or `@js-temporal\u002Fpolyfill`\n  otherwise); in existing code date-fns with `@date-fns\u002Ftz`, Day.js with\n  its `utc` and `timezone` plugins, or Luxon. Not Moment.js in new code (in\n  maintenance, heavy), and no hand-written date maths.\n- Parsing: only ISO 8601 from machines. What people type is parsed with an\n  explicit format and locale (date-fns `parse(value, \"dd\u002FMM\u002Fyyyy\", new\n  Date())`), or not typed as free text at all (section 5). Never\n  `new Date(\"03\u002F04\u002F2026\")`.\n\n## 5. Asking for a date or a time\n\n| Need | Use |\n|---|---|\n| One near date (a delivery day, a filter) | `input type=\"date\"`, or the design system's date picker |\n| A date people know (birth, passport expiry) | Day, month and year as three text fields with `inputmode=\"numeric\"`; no calendar |\n| A time | `input type=\"time\"` with `step` (900 for 15 minutes), or slot buttons when only some times are free |\n| Ranges, unavailable dates, presets | A library picker: react-day-picker (shadcn\u002Fui's Calendar), React Aria `DatePicker` and `DateRangePicker`, Bits UI (Svelte), Reka UI or PrimeVue (Vue), Ark UI, Mantine Dates, MUI X |\n| Date and time together | Two fields and the zone named; `datetime-local` carries no zone |\n\n- Native inputs work well on phones and with the keyboard, and their value\n  is always `yyyy-mm-dd`. But the display follows the browser, not the\n  page, `min` and `max` are the only limits, and there are no ranges.\n- A custom picker lets people type as well as pick: segmented fields (React\n  Aria's `DateField`) or a text field with the format shown (\"DD\u002FMM\u002FYYYY\"),\n  and a calendar button beside it. The calendar helps; it is not the only\n  way in.\n- The label names the date (\"Delivery date\"), the hint gives an example\n  when typing (\"For example, 27 3 2026\"), and errors say what is wrong\n  (\"Choose a date after today\").\n\n## 6. The calendar grid\n\n- Keys, from the APG date picker dialog: arrows move a day (left, right) or\n  a week (up, down); Home and End go to the start and end of the week;\n  Page Up and Page Down change the month, with Shift the year; Enter or\n  Space selects; Escape closes and returns focus to the field or button.\n- One tab stop in the grid (roving `tabindex`); each day named in full\n  (\"Thursday, 12 March 2026\"); today marked in words as well as with a\n  ring; the selected day `aria-selected=\"true\"`; the month and year as the\n  grid's label, and a change of month announced politely.\n- The week starts on the locale's day (Monday in most of the world, Sunday\n  in the United States and some others); the libraries take it from the\n  locale.\n- Day cells 40 to 44px (44 on touch); one month about 300 to 340px wide;\n  two months side by side for ranges on wide screens, one on phones, where\n  the calendar opens in a bottom sheet or full screen; the popup kept\n  inside the window by the library's positioning.\n- Today and the selection from tokens at 3:1 in both themes (`ui-themes`);\n  the popup fades in over 120 to 160ms and months switch at once\n  (`motion-interface`, section 2).\n\n## 7. Ranges and presets\n\n- Presets beside the calendar (a list above it on phones): Today,\n  Yesterday, Last 7 days, Last 30 days, This month, Last month, This year,\n  Custom. Say whether \"Last 7 days\" includes today, and hold that rule\n  everywhere, the query included.\n- The trigger shows the range in words (\"1 to 28 Sep 2026\", \"Last 30\n  days\"); the URL carries plain dates (`?from=2026-09-01&to=2026-09-28`).\n- After the first click, hovering previews the range; a click before the\n  start restarts it; minimum and maximum lengths are said in the hint.\n- Both ends inclusive, and the data queried by the same rule in the\n  reader's zone.\n\n## 8. Dates that cannot be chosen\n\n- Say why: a legend (booked, closed, too soon to deliver) and the reason in\n  the day's accessible description, as well as the muted style. A greyed\n  day with no reason leaves people guessing.\n- Offer the way out: \"Next available: Tue 14 Oct\" as a button, and open on\n  the first month with free dates, not on a month of greyed days.\n- Times as slot buttons (44px, grouped as Morning, Afternoon, Evening),\n  only the free ones, in the place's zone with the zone named.\n- The server checks the choice again when booking; if the slot has gone,\n  the message offers the nearest free ones.\n\n## 9. Durations and countdowns\n\n- Durations in units people read (\"1 h 30 min\", \"3 days\"), with\n  `Intl.DurationFormat` where available or `Intl.NumberFormat` with\n  `style: \"unit\"` per part; stored as seconds or ISO 8601 (`PT1H30M`).\n- Running timers in tabular numbers (`font-variant-numeric: tabular-nums`)\n  so the digits do not jitter.\n- Countdowns only to a real deadline (a sale that really ends, a session\n  about to time out), from the server's clock, never reset on reload to\n  fake urgency; announced at thresholds (5 minutes, 1 minute), not every\n  second; a session timeout offers more time (WCAG 2.2.1).\n\n## Check it\n\n- Run the tests and the app in another locale and zone: `TZ=America\u002FLos_Angeles`\n  for Node, `locale` and `timezoneId` on a Playwright context, the Sensors\n  panel in Chrome DevTools for the browser.\n- A birthday shows the same day at UTC-8 and at UTC+9; a weekly 09:00\n  event stays at 09:00 across a daylight saving change.\n- The picker by keyboard alone: arrows, Page Up, typing a date, Escape\n  back to the field.\n- `preview` at 360px: the popup fits, day cells are 44px, presets reachable.\n\n## Avoid\n\nAll-number dates like 03\u002F04\u002F26; the server's zone shown to everyone; plain\ndates stored as midnight UTC; relative times with no exact time reachable;\n\"0 seconds ago\"; a timer per row; a calendar as the only way to enter a\nbirth date; greyed days with no reason; date maths in milliseconds across\ndaylight saving; Moment.js in new code; `new Date()` on whatever was typed;\ncountdowns that reset on reload.\n",{"name":5,"description":7},"main","38293fe1b096e6bf3646c7344c38786ed688f464","crates\u002Fenowx-core\u002Fskills\u002Fui-part-dates",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":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add enowdev\u002Fenowxcli --skill ui-part-dates",{"tool":46,"command":47},"bunx","bunx skills add enowdev\u002Fenowxcli --skill ui-part-dates",{"tool":49,"command":50},"pnpm","pnpm dlx skills add enowdev\u002Fenowxcli --skill ui-part-dates","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fenowdev\u002Fenowxcli\u002Fblob\u002Fmain\u002Fcrates\u002Fenowx-core\u002Fskills\u002Fui-part-dates\u002FSKILL.md",true,[54],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"agents\u002Fopenai.yaml","REFERENCE","参考文档",204,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fsendbird\u002Fcc-plugin-codex\u002Fskills\u002Freview\u002Fagents\u002Fopenai.yaml",[61,77,102,117,144,166],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":65,"categories":66,"keywords":72,"publishedAt":26},"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",[67],{"categoryNo":68,"categoryName":69,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[73,74,75,76,23],"demo skill","demo","tests","project",{"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":91,"publishedAt":26},"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",[83,86],{"categoryNo":84,"categoryName":85,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":87,"categoryName":88,"taxonomyType":89,"taxonomyTypeDesc":90},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[79,92,93,94,95,96,23,97,98,99,100,101],"text","emails","empty","drop","document","page","voice","notifications","documentation","translate",{"skillNo":103,"name":19,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":110,"publishedAt":26},"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",[107],{"categoryNo":108,"categoryName":109,"taxonomyType":89,"taxonomyTypeDesc":90},"01JBSEEDCAT000000000000032","设计师",[19,111,112,113,114,97,115,23,116],"icons","components","SET","responsive","layout","before building",{"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":26},"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":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":127,"categoryName":128,"taxonomyType":89,"taxonomyTypeDesc":90},"01JBSEEDCAT000000000000030","开发工程师",[19,130,131,132,133,134,135,136,137,23,116,138,97,139,140,141,111,142,143],"ui themes","switching","photos","tokens","drawing","focus","maps","Art","flash","code","Charts","content","screenshots","logo",{"skillNo":145,"name":146,"nameZh":6,"description":147,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":148,"categories":149,"keywords":153,"publishedAt":26},"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",[150,151,152],{"categoryNo":84,"categoryName":85,"taxonomyType":70,"taxonomyTypeDesc":71},{"categoryNo":127,"categoryName":128,"taxonomyType":89,"taxonomyTypeDesc":90},{"categoryNo":87,"categoryName":88,"taxonomyType":89,"taxonomyTypeDesc":90},[154,19,155,112,156,157,139,158,159,160,115,133,161,162,163,23,116,97,164,165],"structure","ui structure","pricing","dashboard","Blueprint","article","anatomy","styling","primitives","list","why","how",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":179,"publishedAt":26},"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",[172,175,178],{"categoryNo":173,"categoryName":174,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":176,"categoryName":177,"taxonomyType":70,"taxonomyTypeDesc":71},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":108,"categoryName":109,"taxonomyType":89,"taxonomyTypeDesc":90},[19,180,181,182,183,184,185,186,115,76,187,188,23,189,190,191,192,193,194,195],"vue","stack","ui stack vue","forms","pages","watch","runtime","transitions","fetch","pinia","nuxt","template","server","config","directory","testing"]