frontend/component

You can generate Astro components from a design contract by providing the contract path and component specification. The Skill reads these inputs to produce a static component file with typed props and scoped styles using design tokens.

A design contract is a specification that defines static component requirements, including token-based styling, prop typing, and interface rules. It standardizes the component interface to enable reuse across pages and apps.

Yes, you can create static frontend components with typed props and no JavaScript. The Skill enforces contract rules to ensure no unwanted JavaScript is included, satisfying the no-JS requirement.

To enforce design tokens in Astro component styling, the Skill reads the full design contract and generates scoped styles that strictly use the defined tokens. This ensures consistency with project conventions.

Frontend component generation applies to static components defined by a design contract. It validates the component spec and ensures token-based styling and typed props for production-ready output.

The best way to standardize frontend component interfaces is by translating a design contract into a production-ready Astro component. This process enforces contract rules and outputs a run report for traceability.