ui-family-architect

Assign structural families, theme stacks, and recipe seeds to UI proof zones.

3|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/eaglhuang/cocos_new --skill ui-family-architect
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-family-architect
Source: https://github.com/eaglhuang/cocos_new/tree/main/.github/skills/ui-family-architect
Command: npx skills add https://github.com/eaglhuang/cocos_new --skill ui-family-architect

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This step of the UI production pipeline reads a proof draft, assigns a structural family, a themeStack, and a recipe seed for each visual zone, validates family availability, and outputs a family-map along with prefilled recipe fields to feed downstream steps.

Core Features & Use Cases

  • Reads proof drafts to map each visual zone to a suitable structural family and UI skin configuration.
  • Validates availability of core structural families and their corresponding skin recipes, flagging missing assets or unresolved questions.
  • Produces a ready-to-use family-map and a recipe seed that accelerates the subsequent recipe compiler and UI vibe pipeline.

Quick Start

Provide the proof draft path (and optional themeOverride) to initiate the workflow and generate a family-map and recipe seeds for the target screen.

Frequently Asked Questions about ui-family-architect

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

FAQPage Schema
How do I assign UI structural families to visual zones from a proof draft?

You assign structural families by providing a proof draft path, which the workflow reads to map each visual zone to a structural family, a theme stack, and a recipe seed, generating a ready-to-use family-map for downstream pipeline steps.

What is a UI family-map and when do I need it in the production pipeline?

A UI family-map allocates structural families and theme stacks to visual zones. You need it after proof draft creation and reference decomposition to validate family availability before feeding recipe seeds to the recipe compiler.

Can I override the theme stack when assigning UI families to proof zones?

Yes, you can pass an optional themeOverride parameter when initiating the workflow to replace the default theme stack configuration for the target screen's visual zones during family assignment.

How does the UI family assignment workflow handle missing structural families or assets?

The workflow validates the existence of required structural and skin families, actively flagging missing asset or recipe gaps and capturing unresolved questions for follow-up in the output family-map.

Do I need to decompose UI references before running the family assignment workflow?

Yes, ui-reference-decompose is a prerequisite pipeline step. You must decompose references first to generate the proof draft input required to assign structural families and theme stacks to each visual zone.

What is the best way to generate recipe seeds for a UI vibe pipeline?

The best way to generate recipe seeds is to use a proof draft to assign structural families and theme stacks, which outputs prefilled recipe fields that directly accelerate the subsequent recipe compiler and UI vibe pipeline.