skills.rest
eaglhuang
eaglhuangCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ui-spec-scaffold

Generate UI-spec assets and TypeScript panel skeletons from normalized recipes.

3|Updated Mar 6, 2026
Search Tags:#automation#typescript#scaffold#recipe#screen#panel#ui-spec
One-click install
npx skills add https://github.com/eaglhuang/cocos_new --skill ui-spec-scaffold
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-spec-scaffold
Source: https://github.com/eaglhuang/cocos_new/tree/main/.github/skills/ui-spec-scaffold
Command: npx skills add https://github.com/eaglhuang/cocos_new --skill ui-spec-scaffold

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill translates verified normalized recipes and content contracts into production-ready ui-spec assets and TypeScript skeletons for CompositePanel and ChildPanel, enabling seamless creation and standardization of screens.

Core Features & Use Cases

  • Generate production-ready ui-spec JSON (layouts, skins, and screens) from a normalized recipe, family defaults, and content contracts.
  • Create CompositePanel / ChildPanel TypeScript skeletons and the corresponding screen package structure to accelerate frontend development.
  • Align naming, slots, and data sources with the recipe and contracts, while providing deterministic, testable scaffolds that can be reviewed before commit.
  • Support dry-run and write workflows, exposing outputs under assets/resources/ui-spec for verification and integration with existing tooling.

Quick Start

Provide a recipe.json path and run the dry-run to generate the ui-spec layouts and panel scaffold.

Frequently Asked Questions about ui-spec-scaffold

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

FAQPage Schema
How do I generate UI specs and TypeScript panel scaffolds from a normalized recipe?▼

Generate UI specs and panel scaffolds by providing a valid recipe.json path to automate the creation of production-ready layouts, skins, and TypeScript panel skeletons under assets/resources/ui-spec.

What is the purpose of normalizing screen structures and content contracts before scaffolding?▼

Normalizing screen structures and content contracts ensures that the generated UI spec assets align naming, slots, and data sources deterministically with the recipe before creating panel skeletons.

Can I preview generated UI spec assets and panel skeletons before writing them to my project?▼

Yes, you can preview generated UI spec assets and panel skeletons using the dry-run mode to review deterministic outputs for verification before committing them to your codebase.

How do I create TypeScript skeletons for CompositePanel and ChildPanel from a screen recipe?▼

Create TypeScript skeletons for CompositePanel and ChildPanel by running the scaffold compiler against your recipe, which generates the corresponding screen package structure for frontend development.

What do I need to provide to start generating ui-spec JSON layouts and skins?▼

You need to provide a valid recipe path pointing to your normalized recipe file, alongside family defaults and content contracts, to start generating ui-spec JSON layouts and skins.

Does the generated UI scaffold output integrate with existing frontend tooling?▼

Yes, the generated UI scaffold output integrates with existing tooling by exposing deterministic, testable ui-spec assets and TypeScript skeletons under assets/resources/ui-spec for direct project incorporation.

Related Skills

Explore More Software Engineering Skills→
hardness1020hardness1020
8

define-tech-spec

Create and validate Stage C tech specs with architecture definitions and data contracts.

Community
Advanced
xztxyxztxy

svelte

Convert JSON UI specs into runnable Svelte component trees.

Community
Intermediate
elasticelastic
15

dashboard-guidelines

Enforce Kibana dashboard asset guidelines within Elastic integration packages.

Official
Intermediate
khokskhoks
2

user_custom_strategy_intake

Scaffold custom trading strategy directories and register them in ClaudeTrading configuration.

Community
Intermediate