ui-brief-generator

Consolidates UI specs, task shards, and reference images into a structured brief.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates scattered UI specifications, references, and visual assets into a single, actionable UI brief, reducing ambiguity and speeding up kickoff.

Core Features & Use Cases

  • Automated briefing: synthesize docs like docs/keep.summary.md, UI specs, cross-reference-index, and reference images into a formal design brief.
  • Task-ready outputs: generate design-brief and task shard-ready metadata to support handoffs to design and engineering.
  • Input flexibility: accepts screenId, taskId, or a path to a specification; supports updating outputs as sources evolve.

Quick Start

Provide a screenId or taskId and specify the desired outputs (design-brief, task shard, or both).

Frequently Asked Questions about ui-brief-generator

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

FAQPage Schema
How do I consolidate scattered UI specifications into a single design brief?

Consolidate scattered UI specifications by synthesizing docs, task shards, and reference images into a single executable UI brief. This reduces ambiguity and speeds up project kickoff by structuring family, content contracts, and smoke routes for downstream execution.

What is a task shard and how does it fit into UI documentation?

A task shard is a metadata-ready output generated alongside a design brief to support cross-team handoffs. It structures specific UI tasks for engineering execution, ensuring that visual assets and screen specifications are actionable and trackable.

How do I generate a task-ready brief for cross-team design handoffs?

Generate a task-ready brief by providing a screenId, taskId, or specification path. The system synthesizes these inputs with reference images and summary docs to produce structured briefs containing skin fragments and smoke routes for immediate handoff.

Can I use a screenId to update an existing UI brief when sources evolve?

Yes, you can use a screenId or taskId to update existing UI briefs as source materials evolve. This input flexibility allows you to refresh the synthesized design documentation and task shard metadata without regenerating the entire specification from scratch.

What is the best way to structure UI specs for early design sprints?

Structure UI specs for early design sprints by consolidating them into a formal brief with family, content_contract, and skin fragments. This approach transforms scattered visual assets and summary docs into actionable smoke routes and references for rapid execution.

What limitations exist when consolidating cross-reference-index files into a UI brief?

Consolidation depends on the structure of cross-reference-index files and summary docs; disorganized inputs may limit the accuracy of generated skin fragments and smoke routes. Ensure screenId and taskId mappings are clear to maintain brief integrity.