aziontech

aziontech/webkit

Skill Claude CodeCodex

Generate the .figma.ts Code Connect mapping. Skipped automatically when @figma/code-connect is not installed.

aziontech/webkit

Skill Claude CodeCodex

Write the .vue file(s) for a component, plus the entry in packages/webkit/package.json#exports. Strictly spec-bound — every prop/event/slot must come from the spec. For composition pattern, each sub-component lives in its own folder.

aziontech/webkit

Skill Claude CodeCodex

Re-read every file written this run and diff its content against the spec. Independent parser (cross-check with validate-spec-compliance.mjs). Final defensive line.

aziontech/webkit

Skill Claude CodeCodex

Pull design tokens, regions, and states from a Figma frame via the Figma MCP. Pure read; emits a structured JSON blob the rest of the pipeline consumes.

aziontech/webkit

Skill Claude CodeCodex

Regenerate the Linux visual-regression baselines for a branch/PR via the CI workflow, download the artifact, mirror it into the snapshots folder, and commit it to the branch. Baselines are CI-only — never generated locally.

aziontech/webkit

Skill Claude CodeCodex

Scan composables, utility components, and same-category siblings for logic that should be reused instead of duplicated. Emits a structured suggestion list.

aziontech/webkit

Skill Claude CodeCodex

Interactively draft .specs/ .md for a new webkit component. Owns the questions, the cross-reference with DESIGN.md and Figma, and the initial status: draft write. Never writes component code.

aziontech/webkit

Skill Claude CodeCodex

Validate a .specs/ .md against the schema, the body section rules, and the Constraints block. Writes the checksum and flips status from draft to approved when valid.

aziontech/webkit

Skill Claude CodeCodex

Write a minimal .stories.js for a webkit component using the canonical Button.stories.js shape. Stories are Default + one composite story per multi-option axis (Types / Sizes / Icons / …) + one story per mutually-exclusive state (Loading / Disabled / Filled / Invalid) — never one-story-per-variant. Give…

aziontech/webkit

Skill Claude CodeCodex

Decide monolithic vs composition using the shadcn-vue criterion. Pure decision; never writes code.

aziontech/webkit

Skill Claude CodeCodex

Map a Figma token JSON blob to DESIGN.md classes / var(--) semantic tokens. Pure transformation; never edits the spec or component files.

aziontech/webkit

Skill Claude CodeCodex

Run the project's pnpm checks (lint, type-check, type-coverage, storybook build) on the freshly-written component. Pure runner; never edits code.

aziontech/webkit

Agent

Runs and explains the @aziontech/webkit adoption flow — npx @aziontech/webkit init. Sets up deps, lint configs, pre-commit, the webkit MCP, and the Claude Code bundle in this project, idempotently.

aziontech/webkit

Agent

Measures how much of an app already renders through @aziontech/webkit versus hand-rolled UI, and produces a prioritized backlog of custom components that have a webkit equivalent to adopt.

aziontech/webkit

Agent

Answers "which @aziontech/webkit component should I use, and how?" Grounds every answer in the installed catalog and the webkit MCP — never invents a component or an import path.

aziontech/webkit

Agent

Reviews a diff for correct and performant @aziontech/webkit usage — flat imports, theme tokens, tree-shaking, reuse over reinvention. The local (non-CI) design-system review.

aziontech/webkit

Agent

Runs the visual and behavioral QA pass on a @aziontech/webkit app — builds and serves it, drives real routes with headless Chromium, and reports only what it observed across themes, console, a11y, states, and interaction.

aziontech/webkit

Skill Claude CodeCodex

Fast deslop pass for UI built on @aziontech/webkit — enforce components-only, tokens-only (typography/color/shape/spacing/shadow), correct typography hierarchy, and consistent spacing rhythm. Use for a quick cleanup or polish review.

aziontech/webkit

Skill Claude CodeCodex

Where a create or settings form LIVES, and what it is built from. Use whenever you add or review a flow that creates a resource, edits one, or asks a question that commits — a "New X" button, a create route, an "add" affordance inside a detail page, a settings tab. Fixes the surface (a first-level resource creates on…

aziontech/webkit

Skill Claude CodeCodex

The token adapter that maps charts onto @aziontech/theme — every series color derived from the --color- families (never hex), computed tokens re-read on a data-theme change so a canvas re-themes (SVG re-themes for free), and the chart's loading/empty/error surface rendered with webkit components. For chart-form and…

aziontech/webkit

Skill Claude CodeCodex

Migrating an existing app onto @aziontech/webkit is a sequence of small, shippable stories in dependency order — never a big-bang rewrite. Use when adopting webkit into a legacy screen or app: decompose the migration, check the catalog before building custom, track a coverage scorecard per screen, and file gaps…

aziontech/webkit

Skill Claude CodeCodex

Where an error goes in a @aziontech/webkit app, and what it carries when it gets there. One decision table covering all five cases — client-side validation on the field, a server rejection scoped to one field as a Message in that section (plus the field's invalid state and a scroll anchor on a long form), an unscoped…

aziontech/webkit

Skill Claude CodeCodex

Accessible forms on @aziontech/webkit — one Form Layout spacing reference (xs inside a field, lg between fields/rows) shared by five form types (Drawer, nested Drawer, Dialog, ItemGroup settings, CardBox with independent saves) that differ only in container + save model, with two internal layouts (Cards + ItemGroups /…

aziontech/webkit

Skill Claude CodeCodex

The "feels finished" sign-off for UI on @aziontech/webkit — a whole-screen cross-axis pass that confirms state completeness, optical balance, and coherence AFTER the per-axis skills ran, plus an optional earned-delight pass (at most one or two restrained, token-driven moments at a completion / first-time / recovery /…