Menu
Run the project's pnpm checks (lint, type-check, type-coverage, storybook build) on the freshly-written component. Pure runner; never edits code.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
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.
Interactively draft `.specs/<name>.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.
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.
Consume the @aziontech/webkit design system correctly. Use when adding or reviewing UI in a project that depends on @aziontech/webkit — how to find the right component, import it with the flat path, style with @aziontech/theme tokens, and keep bundles small.
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-[…].
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.
| name | validate-component |
| description | Run the project's pnpm checks (lint, type-check, type-coverage, storybook build) on the freshly-written component. Pure runner; never edits code. |
| status | active |
| last_updated | "2026-05-22T00:00:00.000Z" |
| scope | webkit |
| enforced_by | ["storybook-source","props","dependencies"] |
Confirm the scaffolded component compiles, lints, types, and builds. Surfaces failures to the orchestrator so the run can be marked degraded or rolled back.
/component-create, after echo-reporter confirmed parity.Run the four checks in this fixed order; stop on the first failure and surface it:
| # | Command | Failure means |
|---|---|---|
| 1 | pnpm webkit:lint | ESLint reports an error or warning that crosses the project threshold. |
| 2 | pnpm webkit:type-check | vue-tsc reports a TypeScript error in the component, its sub-components, or the consuming exports. |
| 3 | pnpm webkit:type-coverage | Type coverage below the threshold (project default: 95%). |
| 4 | pnpm storybook:build | The new .stories.js breaks the Storybook build. |
For each command, capture the exit code and the last 40 lines of stdout/stderr. Emit a table:
| Check | Result | Detail |
|---|---|---|
| `pnpm webkit:lint` | ✅ pass | 0 warnings |
| `pnpm webkit:type-check` | ✅ pass | — |
| `pnpm webkit:type-coverage` | ✅ pass | 97.2% (threshold 95%) |
| `pnpm storybook:build` | ✅ pass | build output OK |
If any row is ❌, include the last 40 lines of the tool's output below the table and stop.
pnpm install. If a dep is missing, surface that as the failure reason.git. Validation never touches the working tree.package.json → emit BLOCKED: script <name> not found in root package.json.BLOCKED: <command> timed out and exit.