A monorepo-driven ecosystem for scalable UI development, enabling shared design systems, component libraries, and optimized build pipelines.
Skill Claude CodeCodex
Scaffold a new webkit animation into the semantic catalog (semantic/animations.js) + record the Theme gap. Used when a component needs an animation the catalog lacks, instead of a component-local @keyframes or an off-catalog animate-[…].
Skill Claude CodeCodex
Fix pnpm audit --audit-level=high failures by bumping the offending dependency to its patched version, with a semver-aware guardrail (patch = auto, minor = validate carefully, major = ALERT and ask). Identifies the owning monorepo project and emits a status report.
Skill Claude CodeCodex
Generate the .figma.ts Code Connect mapping. Skipped automatically when @figma/code-connect is not installed.
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.
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.
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.
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.
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.
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.
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.
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…
Skill Claude CodeCodex
Decide monolithic vs composition using the shadcn-vue criterion. Pure decision; never writes code.
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.
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.
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.
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…
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…
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…
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…
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 /…
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 /…
Skill Claude CodeCodex
The list page — the one shape every resource index takes on @aziontech/webkit, and the filter system that narrows it. Fixes the page skeleton (shell → page heading carrying the create action → controls row → filter bar → card-wrapped Table), the split between search and filters (search runs through the table's own…
Skill Claude CodeCodex
The writing rules for Azion product interfaces (Console). Use whenever you author or review any interface string: page and section titles, field labels, helper text, buttons, menu and nav items, table headers, tags, tooltips, empty states, toasts, dialogs, validation messages. Fixes punctuation and capitalization (no…
Skill Claude CodeCodex
Make motion smooth using only @aziontech/theme animate tokens — animate- utilities, duration-/ease-/curve tokens, compositor-props-only, ≤150ms interaction feedback, and a mandatory motion-reduce escape on every motion class. No external animation library, no inline cubic-bezier, no hardcoded ms.