building-design

Name: building-design
Author: cedmandocdoc

github.com/cedmandocdocDesign & UI044 installsUpdated 2d ago

About building-design

A skill that guides setup and workflows for building-design, including resolving a design root and following project contracts and recipes. It is for users creating or updating designs in the project’s prescribed structure.

Key features

01Set up the design root and viewer
02Install viewer dependencies
03Read design and preview contracts
04Choose a recipe by intent

Use cases

01Check whether building-design is ready
02Create a design for a feature
03Amend an existing design
04Work from a .design.ts file

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/cedmandocdoc/awesome-skills --skill building-design

After installing, type/building-designin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/

openai.yaml

assets/

design.md

index.md

assets/app/

.gitignore

index.html

package.json

tsconfig.json

vite.config.ts

assets/app/system/

define.ts

motion.css

motion.ts

type.css

assets/app/viewer/

App.tsx

canvas.tsx

chrome.tsx

frame.css

Frame.tsx

main.tsx

meta.ts

registry.ts

viewer.css

assets/surface/feature/

feature.design.ts

screen.css

screen.design.ts

Screen.tsx

assets/surface/ui/

component.css

component.design.ts

Component.tsx

references/

creating-design.md

design-contract.md

Details

From the project README

Building Design

Setup

Item	Kind	Required	When	Done when	How
Node.js 22.12+ with npm	user	required	All	`node --version` reports 22.12 or later	https://nodejs.org
Root path and intention	ask	required	All	design-contract.md → Resolve design root finds a root for the request's intention	Ask for the folder (default per design-contract.md → Design roots) and the intention (one short phrase); missing or empty → use it, else ask for another path; recorded as the root's location and `index.md` → `intention`
Root marker	static	required	All	`<design-root>/index.md` carries design-contract.md → Author signature	Write `index.md` from `assets/index.md` with `intention`
Viewer app	static	required	All	Viewer files and `index.md` → Viewer keys match `assets/`	Copy everything in `assets/app/`, dotfiles included (`cp -R <skill>/assets/app/. <design-root>/`); replace `index.md` → Viewer keys from `assets/index.md`
Viewer install	auto	required	All	`<design-root>/node_modules/` exists	`npm install` in the design root

Workflow

Setup — for each Setup row whose When covers the request, in order: Done when holds → skip; user → stop and print its How when required, continue without it when optional; ask → fill what the request answers, ask the rest together in one message, record each answer; auto and static → run.
Contract — read design-contract.md and preview-contract.md.
Recipe — match one Recipes row; open every doc in its Read column.

Recipes

Intent	Example phrasing	Read
Set up	"Set up building-design", "Is building-design ready?"	Setup — run Workflow step 1 for every row, then report each row's state
Build or amend	"Design the checkout feature", "Make the hero headline shorter", a reference to `@design/design.md` or a `.design.ts` file	creating-design.md

Comments

Markdown supported