Menu
Decide `monolithic` vs `composition` using the shadcn-vue criterion. Pure decision; never writes 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
| name | structure-decide |
| description | Decide `monolithic` vs `composition` using the shadcn-vue criterion. Pure decision; never writes code. |
| status | active |
| last_updated | "2026-05-22T00:00:00.000Z" |
| scope | webkit |
| enforced_by | ["compound-api","component-structure"] |
Apply the shadcn-vue rule consistently:
Use Composition Pattern only when the consumer needs to reorder or omit parts the root exposes. Otherwise, monolithic with props + slots.
When in doubt, choose monolithic. Atoms (Button, IconButton, Tag, Badge, Spinner, Currency) are always monolithic.
/spec-create, before writing the structure: frontmatter./component-create when the spec is approved (defense in depth)./spec-create).figma-discover JSON if available (for the regions array).composition.composition.default, no sub-anatomy) → monolithic.monolithic.monolithic (default when in doubt).card-pricing.vue (fixed layout, slot inversions).button.vue, icon-button.vue.structure: composition
rationale: Consumer reorders/omits Header, Body, Footer.
structure: monolithic
rationale: Fixed layout with optional default + actions slots.
structure: <verdict> and rationale: <one sentence>.BLOCKED: spec missing <section>.monolithic or composition.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.