ui-apply-generic

ui-apply-generic

The plain lane used to be a name with nothing behind it. This skill is the lane: it carries the implementation discipline that previously lived only inside the framework executors, and it gets framework idiom from the 16-stack corpus instead of from prose written here.

That split is the whole point. One skill plus a corpus serves Svelte, Astro, Angular, Alpine, htmx and everything future at once. Sixteen framework skills would serve the same set and cost a single maintainer sixteen surfaces to keep current — the enumeration this package refuses.

When to use

• state.stack.frontend resolves to plain, or to a label with no framework-specific overlay.
• A stack whose axes.reactivity or axes.meta is recognised but has no executor skill (svelte, angular, astro, solid, qwik, htmx).
• As the base of a composition: an overlay skill (livewire, flux, blade-ui, react-shadcn-ui) adds framework specifics on top of this contract, it does not replace it.

Do NOT use when a framework executor already covers the whole job — then this skill is the base and the executor is the overlay, dispatched together.

Procedure

Step 1 — Query the stack corpus (mandatory)

Read state.stack.axes and query per resolved axis value, most specific first: meta → reactivity → component_lib.

node <skills-root>/corpus-grounding/scripts/ground.mjs search \
  --manifest <skills-root>/design-intelligence/data/manifest.json \
  --stack <axis-value> "<the concrete question>"

axes.meta: nuxt with axes.reactivity: vue means two queries — --stack nuxtjs and --stack vue. A meta-framework does not replace the layer it wraps; that conflation is the defect the axes exist to fix.

Cite what you used. The result names the corpus rows the implementation followed. An uncited pick is indistinguishable from the model's memory, and memory is exactly what the corpus exists to replace.

No corpus domain for the detected stack → say so, in the result:

No stack corpus for <stack> — proceeding on the generic contract. Framework idiom below is not grounded and should be reviewed by someone who knows this stack.

Silence is the failure mode. An unstated gap reads as grounded output.

Step 2 — Apply the stack-independent contract

Every item is a hard requirement, and none of them is framework-specific:

1. Verbatim floor. Microcopy comes from state.ui_design.microcopy exactly as written — every label, empty-state line, and validation message. No paraphrase, no improvement. Where a source artifact was provided, it beats the brief (see design-fidelity).
2. Token discipline. Colour, spacing, radius and shadow values come from the project's tokens. A raw hex or arbitrary px that no token backs is a finding, not a choice. Validate with design-tokens' tokens validate.
3. Component reuse. Check state.ui_audit.components_found before creating anything. In a run that has already added components, re-read the component directories — the audit inventory is computed once per state-file and does not refresh (see existing-ui-audit § Gotchas). Control roles. For every control you add, look up its role in the control_roles of agent-config ui:audit (re-run it when the artifact is older than your last UI edit): use the canonical implementation and the siblings' box metrics. Role missing or tied → ask before inventing a control kind; a native control beside an existing primitive needs a stated native_control_reason.
4. a11y floor. Semantic elements over div + role; every interactive element reachable and labelled; focus visible; contrast meets the project's stated level, AA when unstated.
5. All five states. empty, loading, error, success, disabled per the brief. An explicit n/a is legitimate for a surface that genuinely has no such state — declaring that is the opposite of inventing filler.
6. Asset discipline. Copy referenced assets into the project's asset path. Never hotlink; never fabricate a logo or a screenshot.
7. No placeholders. <placeholder>, lorem, todo:, tbd, xxx are rejected at the boundary — including inside arrays.

Step 3 — Verify, with honest degrade

Exercise the result with whatever the host actually has, and name which:

Available	Do
Browser / Playwright	Render, check the states, exercise one interaction
Screenshot only	Capture and inspect layout at 375 / 768 / 1280
Neither	Static inspection only, and say the render is unverified

Never claim a state or interaction works without having exercised it. A caveat is a finding; a silent claim is a defect.

Output format

Four requirements, in order — each is checkable by a reader of the result:

1. Name the corpora queried, or state that none exists for this stack.
2. Cite the rows that changed a decision — not every row read.
3. State the verification method and its caveats, never an unqualified "works".
4. List components reused before components added, so a duplicate is visible rather than buried.

Write state.ticket["ui_apply"]:

ui_apply:
  files: ["resources/js/UserCard.svelte"]
  rendered:
    "resources/js/UserCard.svelte": |
      <full text, microcopy-locked>
  components_added: ["UserCard"]
  components_reused: ["Button"]
  microcopy_lock: true
  stack_corpus:                 # which corpora answered, or the degrade note
    queried: ["svelte"]
    cited: ["svelte.csv:12 — prefer stores over prop drilling"]
  verify:
    method: static_inspect      # or playwright / screenshot
    caveats: ["render not verified — no browser available"]

Gotchas

• Do not write framework prose into this skill. The moment it explains how Svelte stores work, it stops being one maintainable surface and starts being sixteen. Framework knowledge belongs in the corpus.
• axes.reactivity: unknown is not none. unknown means a project has manifests and no recognised reactivity layer — proceed, and say the stack was not recognised. none means there genuinely is no reactivity layer, which is the normal shape for a static page.
• A meta-framework needs its own query. Querying only --stack vue for a Nuxt project silently drops the routing, data-fetching and SSR idioms that are the whole reason Nuxt exists.
• The generic contract is a floor, not a ceiling. Where an overlay skill is dispatched with this one, its framework rules win on their subject.
• The floor now lives in exactly one place, and that is the point. Overlay composition applies this contract to every lane, so a future change to any of its seven items is a one-point edit here rather than four lane patches that drift apart. Concretely: the five-states requirement reaches every lane through this skill. That requirement is deliberately unconditional — an explicit n/a is the escape for a surface that genuinely has no such state (asserted in ui_lane_matrix.test.ts), so this is not a defect being broadened. But if the decision is ever revisited, revisit it here.

Do NOT

• Emit framework code from memory and present it as grounded.
• Skip the corpus query because the stack "looks obvious".
• Claim a render or an interaction was verified when no primitive was available.
• Invent states, sections, or copy the brief does not carry.
• Treat a missing corpus as an evidence gap — it is a missing pack, and the two must not be recorded the same way.

See also

• design-intelligence — the --stack corpus this skill queries (16 stacks).
• existing-ui-audit — the inventory Step 2 checks, and its once-per-state-file limit.
• design-tokens — tokens validate.
• fe-design — where the brief's selection decisions come from, and what it does when the corpus is not installed.
• ui-component-architect, tailwind-engineer — stack-neutral companions this skill composes with.