npm - @nerdev/skillset - Versions diffs - 0.2.1 - Mend

@nerdev/skillset 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (567) hide show

package/skills/ui/ui-core/references/copy.md ADDED Viewed

@@ -0,0 +1,70 @@
+# Copy and UX writing
+Banning em dashes and Lorem Ipsum is not a copy standard, it is two
+prohibitions. This is the standard.
+## Voice and mood
+- CTAs and instructions: imperative mood. "Save changes", "Add member".
+  Not "You can save your changes" or "Saving changes".
+- Sentence case for everything: buttons, headings, labels, menu items.
+  Title Case only for proper nouns. No ALL CAPS except the eyebrow
+  style already defined in system.md (11px uppercase tracking).
+- One register for the whole product: pick plain-and-direct or
+  warm-and-conversational, not both. A confirm dialog that says
+  "Oops! Something went sideways" next to a button that says
+  "Terminate session" is two products.
+## CTAs and labels
+- Verb + object, specific to the action: "Delete project", not
+  "Delete" alone when ambiguous, not "Yes" for a destructive confirm.
+- Never label a button with what it is ("Submit button"). Label it
+  with what happens ("Create account").
+- Max about 3 words for standard actions, but never truncate to
+  ambiguity. "Send" beats "Send inv." every time. Fix the button width
+  instead.
+## Error messages
+Structure: what happened + what to do. Both parts, every time.
+- Bad: "Error." / "Something went wrong." / "Invalid input."
+- Good: "Couldn't save. Check your connection and try again."
+  "Email already in use. Sign in instead or use a different address."
+- Name the field for form errors: "Password must be 8+ characters",
+  not "Invalid field" pointing vaguely at the form.
+- Never expose raw technical detail (stack traces, status codes) in
+  user-facing copy. Log it. Show the human version. A "Show details"
+  disclosure is fine for power users, collapsed by default.
+- Recovery action is a real next step (retry button, link to fix,
+  contact support). Not just restating the problem.
+## Label brevity
+- Form labels: 1-3 words, no trailing colon, no "Please enter your...".
+  "Email" not "Please enter your email address:".
+- Nav items: single words or short noun phrases, consistent part of
+  speech across the set (all nouns, not "Dashboard / Analyzing / Team").
+- Tooltips and hints: one short sentence. If it needs two, it's not a
+  tooltip, it's a help panel.
+## Micro-copy tone
+- Empty states: say what the user can do next (system.md already sets
+  this), in one line, imperative. "Add your first project" not
+  "No projects yet." alone.
+- Success confirmations: quiet and brief. A saved indicator or a toast
+  under about 6 words. Save the words for things that need them.
+- Placeholders inside inputs show a format example, never the label
+  itself (no placeholder-as-label, per system.md). "you@company.com",
+  not "Email".
+- Loading copy, if any text is shown at all beyond a skeleton: describe
+  what's happening, not a generic "Loading...". Prefer no text over a
+  spinner-plus-vague-label when the skeleton already communicates it.
+## Verify additions
+Add to the Phase 5 gate: every error state has a what-happened and a
+what-to-do [dom], one copy register audited across the full page
+[code], no placeholder-as-label anywhere [dom].

package/skills/ui/ui-core/references/dark-mode.md ADDED Viewed

@@ -0,0 +1,76 @@
+# Dark mode
+"Dark mode works" is not a spec. This is the spec.
+## CSS variable architecture
+- Semantic tokens, not raw colors, at every call site:
+  `bg-canvas`, `bg-surface`, `text-primary`, `text-muted`, `border`,
+  not `bg-white` / `bg-black` / `text-gray-900` anywhere in components.
+- Two value sets behind the same token names, swapped by a `.dark`
+  class or `data-theme` attribute on `<html>`. Never per-component
+  `dark:` overrides scattered through the codebase for anything that's
+  a reusable token (page-specific one-offs are the only exception).
+- Define the tokens once, in one file (`globals.css` or the design
+  system entry point). Components consume tokens; they don't define
+  colors.
+## Tailwind dark: strategy
+- `darkMode: 'class'` (or `'selector'` in v4), not `'media'`. The
+  toggle needs to be user-controlled, not OS-only.
+- Prefer semantic utility classes (`bg-surface`) over `dark:` variants
+  (`bg-white dark:bg-gray-900`) wherever the token system covers it.
+  Use `dark:` only for the token definitions themselves or genuine
+  one-offs.
+## System preference detection
+- Default to `prefers-color-scheme` on first load (no flash of wrong
+  theme. Set the class before paint, for example inline script or SSR
+  cookie, not after hydration).
+- Persist an explicit user choice (localStorage or cookie) once they
+  toggle it. That choice overrides the system preference until they
+  clear it or pick "system" again.
+- Offer three states where a toggle exists: light, dark, system. Not
+  just a binary switch, unless the product genuinely has no system-sync
+  need.
+## Color adjustment rules
+- Don't invert. Redesign each token. A light `canvas` (#fff) does not
+  become dark `canvas` (#000). It becomes a tinted near-black
+  (#0a0a0b to #121214 range), matching system.md's "no pure black"
+  rule in both themes.
+- Reduce saturation on accents in dark mode. The same saturated hue
+  reads as glowing/neon against a dark background. Drop 10-20% and
+  usually lighten slightly.
+- Text: dark mode primary text is off-white (#e8e8ea range), not pure
+  white. Pure white on dark surfaces creates halation/glare.
+- Borders: light-mode borders are often a light gray. The dark-mode
+  equivalent is usually a lighter value than you'd guess (a border
+  needs contrast against a dark surface too), not just "the dark
+  version of the same gray."
+## Edge cases
+- Shadows: box-shadows tuned for light mode disappear or look wrong on
+  dark surfaces. Use a lighter border or a subtle inset highlight
+  instead of a shadow for elevation in dark mode, or tint the shadow
+  color to something other than black (system.md already says tint
+  shadows to background hue. This applies doubly in dark mode).
+- Images and logos: photos may need a slight brightness/contrast
+  reduction on dark backgrounds. Logos with dark-only ink need a light
+  variant swapped in, not just displayed as-is.
+- Illustrations with transparent backgrounds: check they don't assume
+  a white canvas behind them (visible white halos or boxes).
+- Code blocks / syntax highlighting: needs its own light/dark theme
+  pair, not the page's generic tokens.
+- Charts: data-viz palettes need contrast-checked dark variants, not
+  the same hues dimmed uniformly.
+## Verify additions
+Add to the Phase 5 gate: both themes hit AA contrast [dom], no
+literal white/black utility classes in component code [code], theme
+persists across reload and matches system on first load [dom].

package/skills/ui/ui-core/references/direction.md ADDED Viewed

@@ -0,0 +1,99 @@
+# Direction
+## Context questions (max 3 per round, one word each where possible)
+1. What is it: landing, SaaS, dashboard, internal tool, portfolio,
+   e-commerce, dev tool, CLI wrapper, blog, mobile-first app.
+2. Who is it for: consumers, developers, enterprise, portfolio viewers.
+3. The vibe in one word. If they cannot say it, infer it and state it
+   back before proceeding.
+4. Constraints: brand color, logo, light, dark, both, none.
+5. The motion dial: 1 static, 5 a few signature moments, 10 cinematic.
+   Ask explicitly, never assume.
+6. The density dial only when not obvious: 1 airy, 5 normal app,
+   10 cockpit.
+## Style families
+Shortlist 2-3, never one, never all. The default is always clean SaaS
+(house-style).
+| Family | Feel | Anchor |
+|---|---|---|
+| Clean SaaS | Apple/Google calm, bought not generated | Linear, Vercel, Stripe |
+| Minimalist | warm monochrome, editorial quiet | recipes in styles.md |
+| Brutalist | raw grids, military terminal | recipes in styles.md |
+Match on project type, audience, and the vibe word. Enterprise
+dashboards almost never get brutalism. Consumers and enterprise want
+whitespace and polish.
+## Present options
+For each: name, one-line feel, why it fits this project, one concrete
+visual anchor. Tight, a few lines.
+## Token output
+1. Palette hexes: background, surface, border, text, primary, accent.
+   Light and dark.
+2. Type pairing: real font names plus the scale.
+3. Spacing and radius.
+4. Shadows or the explicit line "no shadows".
+5. Motion character in one line.
+6. Ready to paste: Tailwind v4 @theme in globals.css, or v3
+   theme.extend. Diff against existing tokens, never replace
+   everything.
+7. Semantics: bg-background text-foreground border-border. No raw hex
+   in JSX.
+## Refine-existing mode
+- Audit first: list current primitives and duplicated one-offs.
+- Extract principles, not pixels.
+- Protect: brand colors, logo, layout, copy. State the user's non-goals
+  as hard constraints.
+- Output a token diff.
+## Tailwind strictness
+- Tailwind is the only styling output. No raw CSS leakage, no
+  module.css, no style props except dynamic runtime values.
+- Detect v4 vs v3 and wire it before coding.
+- Existing tokens are the source of truth. Extend, do not duplicate.
+- In monorepos, shared tokens live in packages/ui.
+- Keyframes live in @theme for v4, not in separate CSS files.
+## Signature interaction
+Pick one product-native interaction and do it exceptionally well:
+command palette for tools, direct manipulation for canvas, inline
+editing for docs. Hand-buildable code by default; name a library only
+when it is genuinely better (3D, particles).
+## Productization pass (when the ask is a product, not a page)
+1. Identity: one distinctive visual idea that comes from the product's
+   purpose.
+2. Information architecture: the most important thing is dominant and
+   understood in seconds.
+3. Interaction model: every action has an obvious model and a visible
+   state.
+4. Component language: one small grammar, same behavior everywhere.
+5. Density: one intentional level.
+6. Hierarchy before decoration: structure first, effects last.
+7. Signature interaction: one memorable, product-appropriate moment.
+8. Micro-polish: focus rings, pressed states, tooltips, cursors,
+   truncation as one system.
+9. Remove generic AI UI: cards everywhere, rounded containers, gradient
+   backgrounds, oversized heroes, badges, decorative icons, default
+   3-column grids.
+10. Screenshot test: it must look like a shipped product with no
+    context.
+## Reference products (study the why, never copy the pixels)
+Excalidraw: direct manipulation, forgiving. Linear: dense but calm.
+Raycast: finished utility. Vercel: restrained system. Figma: complex
+coherence. Notion: approachable scale. Stripe: typography and density.
+Arc: intentional weirdness.

package/skills/ui/ui-core/references/redesign.md ADDED Viewed

@@ -0,0 +1,74 @@
+# Redesign or audit
+## The workflow
+1. Scan: read the codebase, find the framework, the styling method, the
+   current patterns.
+2. Diagnose: run the audit below, list every generic pattern and weak
+   point.
+3. Fix: targeted upgrades on the existing stack. Never rewrite from
+   scratch.
+Preserve: information architecture, slugs, nav labels, copy voice,
+accessibility, analytics.
+## The feel contract (write first, 3-5 lines)
+1. Temperament in one word: calm, playful, precise, rugged.
+2. What the product believes: one sentence.
+3. Anti-goals: what it refuses to be.
+4. Two reference products and why they feel good.
+5. Where the feel lives: 2-3 contact points, like stroke language,
+   spring feel, or selection behavior.
+Test: would a user who loves the reference recognize this as the same
+product?
+## The audit
+- Typography: font swap, display presence, 65ch body, weights 500/600,
+  tabular figures, text-wrap balance.
+- Color: no pure black, accent under 80% saturation, one gray family,
+  no AI gradients, tinted shadows.
+- Layout: break symmetry, kill the three equal cards, 100dvh, grid over
+  flex, 1400px max.
+- Interactivity: hover, pressed, focus rings, skeletons, composed empty
+  states, inline errors, no dead links.
+- Content: real names, organic numbers, banned cliches, sentence case,
+  no exclamation marks.
+- Components: cards only with elevation, tertiary buttons, no pill
+  badges, side-by-side FAQ entries.
+- Icons: non-cliche metaphors, one stroke weight, branded favicon.
+- Code: semantic HTML, z-index scale, no dead code, meta tags.
+## Priority order
+P0 broken or confusing. P1 visibly unfinished. P2 major quality.
+P3 polish. Fix all P0 before any P2.
+Upgrade levers in order: typography, spacing, color, motion, hero,
+then the full block.
+## Product-quality pass (for app-like surfaces)
+- Full-state audit: instant operations have no loader, short operations
+  a subtle indicator, long operations progress plus context. Empty
+  states say what to do. Errors say what happened and how to recover.
+- Feedback mechanism: direct manipulation gets a visual state on the
+  thing itself; completed work gets a small contextual status;
+  destructive gets confirm only when dangerous; undoable gets undo
+  over confirm.
+- Keyboard-first: tool activation, undo redo, Escape exits, no focus
+  traps, no mouse-only controls.
+- First-run: lightweight guidance that self-disappears.
+- Finish details: no layout jump, consistent panel directions, selected
+  controls stay selected, no clipped shadows, no hover-caused movement,
+  no dead controls.
+- The 10-minute test: walk the core journey and ask at each step:
+  understood, feedback, unfinished, slow. Then describe the feeling of
+  each interaction.
+## Do not overdesign
+Must not become a copy of Linear, Notion, Figma, or a glassmorphism
+dashboard. When in doubt, remove.

package/skills/ui/ui-core/references/responsive.md ADDED Viewed

@@ -0,0 +1,77 @@
+# Responsive design
+The seven verify viewports (1440, 1280, 1024, 768, 640, 390, 375) tell
+you where to check. This file tells you what should change at each
+stop and why.
+## Breakpoint scale
+Tailwind defaults, used as-is unless the brief specifies devices:
+- `sm` 640: large phone / small phone landscape.
+- `md` 768: tablet portrait.
+- `lg` 1024: tablet landscape / small laptop.
+- `xl` 1280: laptop.
+- `2xl` 1536: desktop.
+Don't invent custom breakpoints for one component. If a card wraps
+badly at 810px, that's a component fix (min-width, flex-wrap), not a
+new breakpoint.
+## Reflow vs resize
+- Resize (same layout, smaller): fine down to the point text or targets
+  break. Most spacing scales this way (clamp(), fluid type).
+- Reflow (structure changes) happens at these tiers, matching Phase 5's
+  hierarchy rule:
+  - Desktop (1024+): full chrome. Sidebar visible, multi-column,
+    secondary actions inline.
+  - Tablet (768–1023): reduced secondary chrome. Sidebar collapses to
+    icon rail or drawer, 2-column becomes stacked where content needs
+    the width.
+  - Mobile (<768): one column, primary action first, secondary actions
+    behind a menu or moved below the fold.
+- A "squeezed desktop" (same layout, everything just smaller and
+  cramped) at any tier fails verify.
+## Container queries vs media queries
+- Use a container query when a component's layout depends on the space
+  it has, not the viewport (a card that's sometimes in a 3-column
+  grid, sometimes a sidebar).
+- Use a media query for page-level structure: nav, page grid, whether a
+  sidebar exists at all.
+- Don't container-query something that only ever appears full-width.
+  That's a media query with extra steps.
+## Touch targets
+- 44x44px minimum hit area (per verify.md), including padding. A 24px
+  icon with 10px padding on each side clears it. A bare 24px icon does
+  not.
+- Adjacent tappable targets (list row actions, toolbar icons): 8px
+  minimum gap so mis-taps don't fire the neighbor.
+- Targets near screen edges or in a bottom bar get extra margin. Thumb
+  reach is worse at the very edge.
+- Desktop-only affordances (small close buttons, drag handles) can stay
+  small only if they never render on a touch viewport.
+## Density shifts per viewport
+- Desktop: information density can be higher. More columns, inline
+  metadata, hover-revealed actions.
+- Mobile: density drops. One primary value per row, secondary info
+  becomes a second line, hover actions become always-visible or
+  swipe/long-press.
+- Tables: desktop keeps the table. Mobile becomes stacked cards (label:
+  value pairs) once columns can't fit at 16px min column width.
+  Never horizontal-scroll a data table as the only mobile treatment
+  unless the data is genuinely tabular-only (for example, a
+  spreadsheet-like tool).
+## Verify additions
+Per class (already in verify.md) plus: container-queried components
+tested at their narrowest realistic container, not just narrowest
+viewport; bottom-bar/thumb-zone targets checked with extra edge margin
+on mobile.

package/skills/ui/ui-core/references/styles.md ADDED Viewed

@@ -0,0 +1,42 @@
+# Style recipes
+Only when explicitly asked. The default is always the clean Apple/Google
+look from the main skill.
+## Minimalist
+- Type: SF Pro Display, Geist, or Helvetica Neue for body. Editorial
+  serif for heroes and quotes with tracking -0.02em to -0.04em, leading
+  1.1. Mono for labels.
+- Colors: white or warm off-white canvas, near-black text, 1px light
+  dividers. Pastel accents only: pale red, pale blue, pale green, pale
+  yellow, each with dark readable text.
+- Radius: 8px max, 12px for cards. No pill containers.
+- Buttons: near-black fill, white text, radius 4-6px, no shadow, hover
+  darkens or scales to 0.98.
+- Borders: 1px solid #EAEAEA everywhere. No shadow-md and above.
+- Layout: asymmetric grid, bento, generous py-24 to py-32 whitespace.
+- Motion: fade-up 12px over 600ms with ease-out spring, stagger 80ms,
+  hover shadow at 2px 8px and 0.04 opacity.
+- Bans: gradients, neon, glassmorphism, rounded-full containers, emojis,
+  cliche copy.
+## Brutalist
+Two archetypes, pick one, never mix.
+Swiss Industrial Print: off-white substrate, heavy sans uppercase
+(Archivo Black, Monument Extended), visible 1px grid lines,
+viewport-bleeding numerals, one harvest red accent. Zero radius.
+clamp() type at extreme scale.
+Tactical Telemetry: dark exclusive, mono dominance (JetBrains Mono, IBM
+Plex Mono), tabular data, ASCII framing, crosshairs, phosphor glow,
+scanlines, low bit depth. Terminal green for one element max.
+- Color: one substrate. Light: #F4F4F0 canvas with near-black text and
+  red accent. Dark: #0A0A0A or #121212, never pure black.
+- Layout: strict grid anchoring, 1px or 2px solid borders, full-width
+  rules, bimodal density, zero border radius.
+- Effects: halftone and dithering, CRT scanlines, low-opacity noise.
+- Bans: gradients, shadows, translucency.

package/skills/ui/ui-core/references/system.md ADDED Viewed

@@ -0,0 +1,190 @@
+# Design system
+## Constraint budget
+One accent, one gray family, one radius scale, one icon family, one
+stroke weight, one motion curve family, one surface language. Every
+addition needs a reason tied to the product.
+## Color
+- Max one accent, saturation under 80%.
+- One gray family: warm or cool, not both.
+- No pure black: use tinted near-blacks.
+- Neutral roles: canvas, surface, text, muted text, border.
+- Pastel accents with dark text for tags and badges.
+- One palette per project. Accent identical across the page.
+- No purple or blue AI gradients anywhere.
+- Semantic colors: success, warning, danger, info. Each gets one hue,
+  used only in that role. Warning never borrows from accent. Danger never
+  borrows from warning.
+- Dark mode: invert the neutral scale, keep the accent hue, reduce
+  saturation by 10-20%. See Dark mode in build.md.
+## Type
+- Sans body candidates: Geist, Outfit, Cabinet Grotesk, Satoshi. Inter
+  and Roboto are the AI default; banned unless the brand names one.
+- Display: tight tracking, leading near 1.1, negative letter spacing.
+- Body: 16px base, line-height 1.6, max width 65ch.
+- Data: tabular figures (font-variant-numeric).
+- One family. Italic or bold of the same family for emphasis.
+- Serif only when the brand asks or the brief is editorial.
+- Modular scale: major third (1.25), perfect fourth (1.333), or golden
+  ratio (1.618). See Type scale in build.md.
+## Scale
+- Three levels: headline, sentence, hint. Never five sizes of bold.
+- Headline under 8 words. Subtext under 25 words.
+- Tighter tracking as size grows.
+- text-wrap balance and pretty for headers.
+- Weight ladder: 400 for body, 500 for emphasis, 600 for labels, 700
+  for display. No 800 or 900 in UI text.
+- Leading: display at 1.05 to 1.1, body at 1.5 to 1.6, caption at 1.4.
+- Mono for data only: JetBrains Mono, IBM Plex Mono, or Geist Mono.
+  Never mono for body copy.
+## Spacing
+- Macro whitespace first: py-24 to py-40 for sections.
+- Section gaps: clamp(3rem, 8vw, 6rem).
+- Content max width 1400px or max-w-7xl.
+- Component padding: p-6 to p-8 for cards, p-4 for compact controls.
+  Inconsistent padding is a visual error.
+- Density ladder: hero is sparse, feature section is medium, data table
+  is dense. One density per section.
+- Minimum section padding: py-12 on mobile, py-16 on tablet, py-24 on
+  desktop. Never drop below py-12 between distinct sections.
+## Radius
+- One radius language per page: sharp 0, all-soft 12-16px, or all-pill.
+  Mixed only with a documented rule.
+- The bought-not-generated band: 12 to 30px. Skip the 40px outliers.
+## Shadows
+- Tint shadows to the background hue.
+- Diffuse, low opacity. shadow-md and above are banned as defaults.
+- High density: 1px lines instead of cards.
+- Dark mode: eliminate shadows or use very subtle diffused shadows.
+  Borders replace shadows for separation.
+## Components
+- Buttons: flat or barely rounded, solid contrast, no glow, no gradient.
+  Pressed state: scale 0.98. One CTA per intent, no duplicated labels.
+- Cards: only when elevation is hierarchy. No cards in cards. High
+  density: border-top instead.
+- Inputs: label above, error below, accent focus ring. No
+  placeholder-as-label, no floating labels.
+- Badges: pastel, pill, tiny. Max one per metadata line.
+- Skeleton loaders shaped like the content, not spinners.
+- Empty states that say what the user can do next.
+- Icon system: stroke weight 1.5px for data-dense, 2px for marketing.
+  16px inline, 20px section headers, 24px standalone, 32px+ feature.
+  See Icon system in build.md.
+- Form design: label above, validate on blur, error below input, submit
+  button shows loading state. See Form design in build.md.
+- Component state matrix: every interactive component defines Default,
+  Hover, Focus, Active, Disabled, Loading, Error, Empty, Selected.
+  See Component state matrix in build.md.
+## Dark mode
+- CSS variable architecture: all colors via CSS variables. Light and
+  dark variants in :root and .dark.
+- Tailwind strategy: use dark: prefix. Never hardcode colors in JSX.
+- System preference: default to system. Allow manual override with
+  localStorage. Respect prefers-color-scheme.
+- Color adjustments: reduce saturation 10-20% in dark mode. Dark
+  backgrounds need lighter text, not darker.
+- Accent: keep same hue, increase lightness 5-10% in dark mode.
+- Shadows: eliminate in dark mode. Borders replace shadows.
+- Images: don't invert. Use opacity adjustments if needed. SVG icons
+  with currentColor adapt automatically.
+- Text: never pure white on pure black. Use gray-50 to gray-100 on
+  gray-900 to gray-950. Minimum 4.5:1 contrast.
+- Testing: verify every screen in both light and dark mode.
+## Responsive
+- Breakpoint scale: sm 640, md 768, lg 1024, xl 1280, 2xl 1536.
+  Mobile first.
+- Reflow before resize: at each breakpoint, ask if layout should reflow
+  or resize. Reflow wins.
+- Container queries: use when component width depends on parent, not
+  viewport.
+- Touch targets: 44x44px minimum on touch devices. 8px minimum gap
+  between targets.
+- Density shifts: mobile gets larger targets and less dense content.
+  Desktop gets more columns and tighter spacing.
+- Horizontal scroll banned: no element overflows container on any
+  viewport.
+- Typography: use clamp() for font sizes. Scale with viewport.
+- Navigation: hamburger on mobile, full nav on desktop.
+- Tables: horizontal scroll on mobile, full table on desktop.
+- Modals: full-screen on mobile, centered on desktop.
+- Forms: single column on mobile, multi-column on desktop.
+## Accessibility
+- Color contrast: 4.5:1 for body, 3:1 for large text and UI.
+- Focus management: every interactive element keyboard reachable. Focus
+  order follows visual order.
+- Focus visible: 2px minimum, high contrast, visible on light and dark.
+- ARIA: semantic HTML first. ARIA only when HTML falls short.
+- Screen reader: decorative icons aria-hidden. Status messages
+  aria-live="polite". Errors aria-live="assertive".
+- Touch targets: 44x44px on mobile, 32x32px on desktop.
+- Forms: every input has label. Error linked with aria-describedby.
+  Required uses required attribute.
+- Landmarks: header, main, nav, footer, aside. One main per page. Skip
+  links for keyboard users.
+- Error prevention: destructive actions have confirmation. Validation
+  before submission.
+## Motion
+- Spring curves: cubic-bezier(0.16, 1, 0.3, 1). No ease-in-out.
+- Durations: 200ms in, 150ms out. Micro means micro.
+- Animate transform and opacity only. Layout animations stutter.
+- One motion per event. Two springs competing reads as glitch.
+- Exits exist. No one-frame vanishes.
+- State lands first. Motion is polish on top.
+- Interruptible: next event cancels current. Nobody waits.
+- Reduced motion: all states instant. No springs, no entrances.
+- Animation state machine: Idle, Entering, Entered, Active, Exiting,
+  Exited, Disabled, Error, Loading, Updating. See Animation state
+  machine in build.md.
+## Iconography
+- Families: Phosphor, Radix, Tabler, or Doton. One family per product.
+- Stroke weight: 1.5px for data-dense, 2px for marketing.
+- Sizing: 16px inline, 20px headers, 24px standalone, 32px+ feature.
+- Filled vs outline: filled for active/selected, outline for default.
+- Duo-tone: primary filled, secondary outline.
+- Triple-tone: three opacity stops for illustrations, not navigation.
+- Decoration limit: one decorative icon per component max.
+- Accessibility: decorative icons aria-hidden. Meaningful icons have
+  aria-label or title.
+## DESIGN.md (when a design system doc is asked for)
+Ten mandatory sections:
+1. Visual theme and atmosphere: density, variance, motion bands.
+2. Color palette and roles: descriptive name, hex, functional role,
+   light/dark variants, semantic colors.
+3. Typography: families, scale, usage rules, responsive behavior.
+4. Component stylings: each component with its states, variants,
+   composition patterns.
+5. Layout principles: grid, containers, responsive behavior, breakpoints.
+6. Motion and interaction: curves, durations, state machine, what
+   animates.
+7. Accessibility: contrast, focus, ARIA, keyboard, screen reader.
+8. Dark mode: CSS variable architecture, color adjustments, testing.
+9. Iconography: family, stroke weight, sizing, variants, usage rules.
+10. Anti-patterns: the banned list for this project.

package/skills/ui/ui-core/references/verify.md ADDED Viewed

@@ -0,0 +1,37 @@
+# Verify (the finish gate)
+Nothing ships without this gate. Evidence classes: [capture] screenshot
+at the stated viewport, [dom] computed style or DOM check, [code]
+source with file:line. Assertions are not evidence.
+## The gate
+1. Seven viewports render without overflow: 1440, 1280, 1024, 768, 640,
+   390, 375. [capture]
+2. Hierarchy changes per class, not just shrinks: desktop full chrome,
+   tablet reduced secondary chrome, mobile one-column with primary
+   action first. A squeezed desktop is a failed adaptation. [capture]
+3. No surface renders blank: every list, panel, search, trash has empty,
+   loading, and error states. [dom]
+4. Error states explain what happened and give a recovery action. [dom,
+   code]
+5. No P0 or P1 issues remain. [code, dom]
+6. Feedback matches the mechanism table. [code]
+7. Keyboard: Escape exits transient states, focus never gets trapped,
+   no mouse-only controls. [code, dom]
+8. First-run guidance exists and self-disappears. [capture]
+9. prefers-reduced-motion respected. [code]
+10. The 10-minute journey runs clean at every step. [per-step result]
+11. Lint and build pass. [command output]
+Per class also verify: nav collapse, hero reflow, multi-column
+fallbacks, touch targets at 44px minimum, nothing scrolls horizontally,
+container-queried components at their narrowest realistic container.
+Accessibility, responsive, dark mode, and copy each have a dedicated
+gate. See references/accessibility.md, references/responsive.md,
+references/dark-mode.md, references/copy.md.
+Zero failures to declare done. Fix and re-run the failed rows. If no
+browser tooling exists, say "visual verification was NOT performed" and
+downgrade captures to dom and code. Never skip silently.