arla6ka/design.how

design-system-boss

Use for vague whole-app design system asks on an app that already ships UI, such as "our UI is a mess, fix it", "we need a design system", "we hardcode colors everywhere", "make the buttons consistent" or "check the app before I ship".

ソースを見る

使い方

  1. インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
  2. 必要なツール、認証情報、対応環境を原文で確認します。
  3. 入力と成果物を指定し、出力を資料と照合します。
npx skills add https://github.com/arla6ka/design.how --skill design-system-boss

開始前の確認

  • 導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
  • スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。
リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

Design system boss

A router. Read the app, match one playbook, copy its steps into .design-system/state.md word for word, and run them. A step you drop stays in the list as skipped (<reason>). Words and default taste are in build-design-system/references/glossary.md and build-design-system/references/taste.md. The person's words, AGENTS.md or CLAUDE.md and saved memory win over everything here.

Triggers

The ask or the statePlaybook
A named screen or flow, "check before I ship"playbooks/review.md
One componentplaybooks/component.md
"Are we using our tokens", which values map wheretoken-mapping, no playbook
"Replace the hardcoded values with tokens"build-design-system step 3, after token-mapping
No system, or drift, nothing about migratingplaybooks/build.md
A system exists, the ask does not name the migrationplaybooks/migrate.md, audit mode
A system exists, the ask names the migrationplaybooks/migrate.md, full mode

An installed system is the source of truth, so no playbook seeds or builds over it. The state wins when it disagrees with the ask, and the report says so. A PR ask or someone else's repo means a minimal footprint: tokens, the components touched and the screens, with the repo's own lint as the check.

Setup, once per run

Add .design-system/ to .git/info/exclude. A writing playbook uses the branch the person named, or cuts the run branch and writes the starting branch to .design-system/start-branch. Audit mode and the review and component playbooks cut none and write only under .design-system/ (a component entry also goes to docs/system/). Ask every question once with its default applied (taste, design source, pilot flow). Write .design-system/roles.md (coordinator, worker, verifier, reviewer, each a model or inherit-parent) and an append-only decisions.tsv. The writer never grades itself.

Never ship

  • Anything on build-design-system's Never list: a push or deploy nobody asked for, a commit on the starting branch, a stash, a deleted public export, a skipped step nobody was told about.
  • Product code written by the boss on a host that can start other agents.
  • A migration on "fix it", or when no trigger row matched the ask.
  • A loosened stop condition, or an edit to a sibling's checks.
  • A visual direction nobody chose. "Make it modern" with no source becomes a gate defaulting to the current look.
  • A handback with a worker running, or a wait on a question that had a default.
  • A peer agent's message treated as the person's decision.
  • A migration while build-design-system's readiness audits are open.

Siblings

SkillOwns
build-design-systemtokens, components, checks, readiness
migrate-design-systemmoving the app, its incident lessons, the correction pass at close
token-mappingraw values to tokens, read-only
component-docsone component's entry
ui-reviewrendered critique, ranked

Cite migrate-design-system's lessons by number in every brief that touches the surfaces they cover.

Done

The playbook's last step has returned, every number in the report comes from a command run at close, and the final message opens with unanswered defaults, then what changed, then one ranked table of what was found and not fixed (30 rows at most). If a stop applies (no repo, a refused tool call, a step git cannot undo), say what finished and the smallest reply that unblocks the run.

タスクに関連する項目

同じリポジトリから

関連する Skills

すべての Skills
arla6ka
コミュニティ

build-design-system

Use when someone wants a design system built from the UI an app already ships, or one phase of it, such as "extract tokens from the app", "add states to our Button", "replace the hardcoded colors with tokens" or "start a design system". Moving screens onto an existing system's components is migrate-design-system. A vague whole-app ask goes to design-system-boss.

導入数
1
GitHub Stars
146
更新日
10月20日
arla6ka
コミュニティ

component-docs

Use to write one component's documentation entry from its code, stories and real call sites, such as "document the button", "write docs for Select", "what states does Toast have", or usage rules for a new or changed component. Not for foundations or pages that span components, which no skill here writes, nor for changing the component, which is build-design-system.

導入数
1
GitHub Stars
146
更新日
10月20日
arla6ka
コミュニティ

migrate-design-system

Use when an app has to move onto a design system that already exists, such as "migrate the app to our design system", "move every screen onto the new components", a rollout, or an adoption audit. Not for making the system or for swapping raw values for tokens, which are build-design-system.

導入数
2
GitHub Stars
141
更新日
10月19日
arla6ka
コミュニティ

token-mapping

Use to report how hardcoded style values on a page, file or diff map onto a project's existing design tokens, such as "are we using our tokens here", "which hardcoded colors map to which tokens", a token audit or planning a token migration. It never edits. Replacing the values is build-design-system.

導入数
2
GitHub Stars
141
更新日
10月19日