Skills
.Work. You
Rest

ui-generate-code

Community

Translate a validated UI spec into code.

Software Engineering#accessibility#react#code generation#ui-spec#frontend implementation#spec traceability#state matrix
AuthorThorStarlord
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Prevents AI-generated UI from drifting away from the agreed contract by turning an approved UI component specification into production-ready frontend code with no silent design decisions.

Core Features & Use Cases

  • Spec-traceable code generation: Produces code where every significant choice maps back to specific sections of the component spec.
  • Gap handling with explicit assumptions: Surfaces missing spec details as questions or clearly logged assumptions instead of inventing values.
  • Full state + accessibility coverage: Implements every state matrix entry and required ARIA/keyboard/focus behaviors as defined in the spec.
  • Pre-flight validation: Refuses to start unless a validated component spec and (when needed) a system spec exist, and the framework/styling/API style are known.

Quick Start

Use ui-generate-code only after you have an approved ui-component-spec (and ui-system if applicable), then ask it to generate the implementation in your chosen framework and styling approach.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-generate-code
Download link: https://github.com/ThorStarlord/interface-skills/archive/main.zip#ui-generate-code

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.