skills.rest
aziontech
aziontechOFFICIAL
Explore all skills by this author →
Website𝕏@aziontechGitHub

component-scaffold

Convert approved component specs into Vue scaffolds with package wiring.

2|5|Updated Oct 24, 2023
Search Tags:#design system#vue#monorepo#component scaffolding#spec compliance#package exports#injection key
One-click install
npx skills add https://github.com/aziontech/webkit --skill component-scaffold-aziontech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-scaffold
Source: https://github.com/aziontech/webkit/tree/main/.claude/skills/component-scaffold
Command: npx skills add https://github.com/aziontech/webkit --skill component-scaffold-aziontech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates the time-consuming, error-prone work of manually creating new spec-compliant Vue component files by generating the full component scaffold consistently from an approved spec.

Core Features & Use Cases

  • Spec-to-file conversion: Transforms an approved .specs/<name>.md into the correct Vue component directory structure and file set for both monolithic and canonical composition patterns.
  • Exports and packaging wiring: Creates per-component package.json files and adds the proper entries to packages/webkit/package.json#exports so the components are discoverable by consumers.
  • Strict compliance guardrails: Ensures every prop, event, and slot comes only from the spec and follows the repository’s styling and implementation constraints (TypeScript-only, no local styles, variants via data-* attributes).

Quick Start

Use the component-scaffold skill to generate the Vue implementation and package/exports wiring for a newly approved component named popover based on its .specs/popover.md content.

Frequently Asked Questions about component-scaffold

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I scaffold Vue components from a spec in a monorepo?▼

Scaffolding Vue components from a spec converts an approved .specs/<name>.md file directly into a complete, spec-bound component directory structure with TypeScript SFC files and package wiring.

Can I generate package.json exports automatically for new Vue components?▼

Yes, generating package exports automatically creates per-component package.json files and adds the proper entries to packages/webkit/package.json#exports so new components are discoverable by consumers.

How do Vue component props and slots stay compliant with the approved spec?▼

Spec compliance is maintained by strict guardrails that enforce every prop, event, and slot to come only from the approved specification, rejecting any deviations during the scaffold generation.

Does Vue component scaffolding support both monolithic and canonical composition patterns?▼

Yes, Vue component scaffolding supports creating both monolithic and canonical composition-pattern components, generating the correct folder layout and file set for either architectural approach.

What are the styling constraints when generating TypeScript Vue components?▼

Styling constraints for generated TypeScript Vue components require TypeScript-only files, prohibit local styles, and enforce component variants strictly via data-* attributes to match repository standards.

Related Skills

Explore More Software Engineering Skills→
wepn13232wepn13232
7

element-plus-input-tag

Map Element Plus InputTag component props and events for documentation lookup.

Community
Basic
QING-YU123QING-YU123

frontend-generator

Scaffold Vue 3 pages and components with Naive UI and Tailwind CSS.

Community
Advanced
tylerjrbuelltylerjrbuell
21

validate-build

Validate TypeScript monorepo packages against project specifications and build rules.

Community
Advanced
igpastorigpastor

component-scaffold

Generate complete UI component boilerplate for React, Next.js, and Vue 3 projects.

Community
Advanced