New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Build Screen

by tsubotax in tsubotax/melta-ui

melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、checkhtml で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3…

MITAuto-check passedFrontend & Design

Install Build Screen

skills CLI
$ npx skills add tsubotax/melta-ui --skill build-screen -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install tsubotax/melta-ui build-screen --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/build-screen .claude/skills/build-screen && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
build-screen
GitHub stars
201
Token cost
~1.3k tokens
SKILL.md length
414 words
Files
1
Skills in repo
3
Repo updated
First seen
Licence
MIT

At a glance

melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、checkhtml で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3…

  • Works in 5 steps: 依頼の分類と契約の引き当て → 意図確認（最大 3 問） → 生成 → …
  • Tasks that involve Design tokens
  • SKILL.md covers Step 1: 依頼の分類と契約の引き当て, Step 2: 意図確認（最大 3 問）, Step 3: 生成 and Step 4: 自己検証（検査は最大 3 回 = 初回 +…, plus 2 more sections
  • Calls npm and gh

What it does

Build Screen is an agent skill from tsubotax/melta-ui. melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、checkhtml で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3 問だけ意図を確認してから生成する。ボタン 1 個・カード 1 枚のようなコンポーネント単体の生成には使わない（DESIGN.md のクイックモードで足りる）。既存 HTML のレビューにも使わない（design-review skill が担当）。

Its SKILL.md is about 1.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Design tokens, Design review and critique and Agent instruction files. It works with Tailwind CSS and Model Context Protocol. The repository describes itself as: 人間にも、AIにも、読めるデザインシステム — AI-Ready Design System for Claude Code & Cursor. The licence is MIT.

When your agent uses it

  • Tasks that involve Design tokens
  • Tasks that involve Design review and critique
  • Tasks that involve Agent instruction files

Example prompts

  • “/build-screen”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. 依頼の分類と契約の引き当て
  2. 意図確認（最大 3 問）
  3. 生成
  4. 自己検証（検査は最大 3 回 = 初回 + 修正後の再検査 2 回）
  5. 報告（この順・この書式）

What it can do on your machine

Read from SKILL.md and the folder at commit a44f290. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm
    • gh

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm and gh, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Build Screen loads about 1.3k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 414 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~1.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from tsubotax/melta-ui at commit a44f290, republished under its MIT licence (© tsubotax). 414 words, ~1,322 tokens.

Download SKILL.mdSave it as .claude/skills/build-screen/SKILL.md (or your agent's skills folder).
name
build-screen
description
melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、check_html で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3 問だけ意図を確認してから生成する。ボタン 1 個・カード 1 枚のようなコンポーネント単体の生成には使わない（DESIGN.md のクイックモードで足りる）。既存 HTML のレビューにも使わない（design-review skill が担当）。
user-invocable
true

画面を作る

melta の契約から画面 1 枚を生成し、生成物を自分で lint して、「何を自動検査したか / 何を検査していないか」まで含めて報告する。依頼から提出までの往復を 1 回に潰すための手順書。

参照の実体は MCP ツールと AGENTS.md / DESIGN.md / design/contracts/ に置く。この手順書に仕様を複製しない（複製した瞬間に drift する）。

Step 1: 依頼の分類と契約の引き当て

  1. AGENTS.md の「## タスクベース読み込みガイド」の表を読み、依頼を該当行に当てる。表をここに写さない（AGENTS.md が正）。複数の行に跨る依頼（例: 「サイドバー付きの設定画面」= サイドバー付きページ + 設定画面）は該当行の和集合を取る
  2. 該当行が挙げるファイルを、表の順序どおりに読む
    • MCP が使えるなら get_component（契約の exact value）と search（どの契約が該当するかの探索）を優先する
    • MCP が無ければ design/contracts/components/*.contract.json を直接読む
    • 値の正本は契約、原則の正本は DESIGN.md。競合したら契約が勝つ（design/authority.md）
  3. 引き当てた契約名と読んだファイルを控える。Step 5 でそのまま報告する

引き当てが 1 つも無い依頼（DS に契約が存在しないコンポーネントを含む）は、生成前にその旨を伝える。契約の無い部品を勝手に発明しない。

Step 2: 意図確認（最大 3 問）

下の質問バンクを上から見て、依頼文から答えが取れる問いは飛ばす。残ったものだけを 1 回でまとめて聞く。4 問以上聞かない。3 問を超える不確定さが残るなら、残りは仮置きして Step 5 の報告に「こう仮定した」と書く。

  • Q1: 画面の主目的と主動作を 1 つ（例: 一覧から詳細へ / フォームを送信する）
  • Q2: 含めるデータ状態（通常のみ / + 空状態 / + 読み込み中 / + エラー）
  • Q3: 出力先パスと幅（ファイルパス / デスクトップのみ or レスポンシブ）

出力先が未指定なら提案する。examples/ は CI の Full Scan 対象なので、DS 公式サンプルにする意図が無い限り避ける。

拡張子は .html に揃える（Step 4 の CLI 経路が検査できるのは .html / .tsx / .jsx / .vue だけ。.htm などを渡すと検査自体が実行されない）。

ダークモードは聞かない。AGENTS.md の「テーマ・ダークモード」表の設定に従う。

Claude Code では AskUserQuestion で聞く。他のクライアントでは箇条書きで聞いて回答を待つ（推測で進めない）。

Step 3: 生成

  • DESIGN.md の原則 + Step 1 で引き当てた契約の exact value で HTML を 1 枚書く。Tailwind class は契約の値を使う（近い値を目分量で選ばない）
  • Step 4 が拾えるルールも最初から守って書く（例: [TABLE_TH_SCOPE_REQUIRED] / [A11Y_NO_TABINDEX_POSITIVE] / [BTN_ICON_ONLY_ARIA_REQUIRED]）。修正ループは検算であって、生成の手抜き分を回収する装置ではない
  • severity が error でも detector が manual のルールは Step 4 で絶対に捕まらない（例: 実効タップ標的 44px の下限 [A11Y_MIN_TAP_TARGET_44]）。生成時に守るのが唯一の機会なので、使うコンポーネントのカテゴリのルールを design/contracts/rules.json で先に見る

Step 4: 自己検証（検査は最大 3 回 = 初回 + 修正後の再検査 2 回）

  1. 生成物を検査する。経路は 2 つあり、返ってくる情報が違う。どちらを使ったかを覚えておく（Step 5 の書き方が変わる）
    • MCP 経路: check_html に生成物を渡す。passed / violations / coverage.automated / coverage.notAutomated が返る
    • CLI 経路（MCP が無い環境）: npm run design:lint-generated -- <生成ファイルのパス>。error があれば exit 1。返るのは違反一覧と件数と PASSED / FAILED だけで、passed フィールドも coverage も返らない
  2. severity error を全部直して再検査する。warn は残してよいが Step 5 に列挙する
  3. 3 回目の検査でも error が残るなら、残った violations を報告に載せて止まる。ルールを黙って緩めない・生成物を検査対象から外さない
  4. 検査そのものが実行できなかったとき（CLI が exit 2 = 対象拡張子でない / パスが解決できない / ruleset を読めない、ツールのエラー、MCP が応答しない）は、修正ループに入らない。生成物は無検査のままなので、エラー出力をそのまま持って Step 5 へ行く。「たぶん通る」で埋めない
Show full SKILL.md (198 more words)Show less

Step 5: 報告（この順・この書式）

  1. 使った契約と読んだファイル — Step 1 で控えたもの。Step 2 で仮置きした前提があればここに書く

  2. lint 結果 — 最終検査の結果を、使った経路が実際に返した形のまま書く。要約も補完もしない

    • MCP 経路: passed の値と violations
    • CLI 経路: コマンドの exit code と出力の違反一覧（返っていないので passed という語は使わない）
    • error 0 なら「error 0」と書ける。error が残ったまま Step 4 の上限に達したなら、件数と残った violations を全部載せる
    • 検査が実行できなかったときは、件数を書かずにエラー出力をそのまま転記する（exit code と標準エラー出力）。違反 0 件と書かない
    • warn が残っていれば、どちらの経路でも全件列挙する

  3. coverage

    • MCP 経路: coverage.automated / coverage.notAutomated をそのまま転記する（要約しない）
    • CLI 経路: 「未取得（CLI 経路では返らない。check_html が使える環境で再検査すると取れる）」と書く。件数を推測して埋めない

  4. 評価不可 — この画面に関係するのに自動検査で判定できないルールを design/contracts/rules.json から ID で引いて列挙する。列は design-review の ## 評価不可 節と同じ 3 列。ただし reason の語彙は design-review（human-only / not-observable-static / ルール無し）とは違い、rules.json の automationStatus の値を使う

    aspectreasonproposal
    サイドバーの現在ページ表示 [SPACE_NO_MISSING_ARIA_CURRENT]impossible-static実際のルーティングと突き合わせる
    Drawer のフォーカストラップ [SPACE_NO_DRAWER_NO_FOCUS_TRAP]human-only実機で Tab / Shift+Tab の循環を確認する
    • human-only — 人が実機を操作しないと判定できない
    • impossible-static — 静的 HTML からは判定できない（属性は書けるが、その中身が正しいかは外部の情報が要る）
    • llm-judge-candidate — 自動検査は無いが design-review skill が審査できる
    • covered-by-test — 既存テストがルールを担保しているが、この生成物の実動作は別に確認が要る
    • 未分類 — automationStatus の宣言が無いルール（rules.json に 44 件ある。例: [SPACE_NO_P0_CARDS]）。分類が未了なだけで、検査されているかは別に確認する
    • ルール無し — 対応するルールが design/contracts/rules.json に無い。この行に ID は書かない
    • この 3 分岐（automationStatus の値 / 無ければ 未分類 / ルール自体が無ければ ルール無し）でどのルールにも reason を割り当てられる。空欄にしない
    • automationStatus が auto のルールは Step 4 が検査するので、この節には載せない
    • 実在しない ID を書かない

  5. 最後に 1 行。3 分岐。どれにも共通して「ブランド未承認」を書く

    • error 0: 「lint-clean draft・ブランド未承認。最終判断は人間」
    • error 残り: 「lint 未通過・ブランド未承認。残った violations は上の 2 に列挙した」
    • 検査未完了: 「検査未完了・ブランド未承認。理由は上の 2 に転記した」

やらないこと

  • context: fork にしない — 生成物と検証結果はメインコンテキストに残す必要がある。fork すると呼び出し元に要約しか戻らず、Step 5 の転記が伝聞になる
  • 実行時に原文を取りに行かない（gh api 等でのリモート取得）。インストール済みのファイルと MCP だけを読む
  • 「学習ポイント」「なぜこうするか」の散文を生成物に混ぜない。人間向けの「なぜ」は docs/ と hook の block 文言に置く
  • check_html の passed を完成承認と言わない。lint-clean draft であってブランド適合の保証ではない
  • コンポーネント単体の生成に使わない。ボタン 1 個・カード 1 枚は DESIGN.md のクイックモードで足りる
  • 既存 HTML のレビューに使わない。それは design-review skill の担当

© tsubotax, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/build-screen of tsubotax/melta-ui.

Open the folder on GitHubat commit a44f290

Compare with similar skills

Build Screen next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Build Screen compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Build Screen this skilltsubotax/melta-ui201—~1.3kAutomated safety check: PassMIT
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Figma Codegenawdr74100/figwright995—~4.2kAutomated safety check: PassMIT
Persian Rtl UITronIsHere/vibefarsiui210—~1.7kAutomated safety check: WarnNone
Design Reviewpproenca/dot-skills215—~3.4kAutomated safety check: PassMIT
Kaizen UINVIDIA/Personal-AI-Router1.6k—~4.7kAutomated safety check: PassApache-2.0

Similar skills

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Figma Codegen

    awdr74100/figwright

    Generate framework-aware code from a Figma design. An agent skill from awdr74100/figwright.

    995 GitHub stars~4.2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Persian Rtl UI

    TronIsHere/vibefarsiui

    Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates…

    210 GitHub stars~1.7k tokensUpdated yesterday
    Frontend & DesignAuto-check: warnings

  • Design Review

    pproenca/dot-skills

    Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table.

    215 GitHub stars~3.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Kaizen UI

    NVIDIA/Personal-AI-Router

    Official

    Kaizen UI (KUI) component library and design-pattern advisor for NVIDIA applications.

    1.6k GitHub stars~4.7k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Figma use_figma Plugin API Rules

    warpdotdev/warp

    Required groundwork before any use_figma call: the rules and reference files for running JavaScript in a Figma file through the Plugin API without common failures.

    65k GitHub starsUsed in 4 repos~4.4k tokens
    Frontend & DesignAuto-check passed

More from tsubotax/melta-ui

  • Ban Pattern

    tsubotax/melta-ui

    Register AI-generated-looking UI patterns as prohibited rules in the design system.

    201 GitHub stars~1.4k tokensUpdated 12 days ago
    Auto-check passed

  • Design Review

    tsubotax/melta-ui

    HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。

    201 GitHub stars~504 tokensUpdated 12 days ago
    Auto-check passed

Works with

Categories

Questions about Build Screen

What does Build Screen do?

melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、checkhtml で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3…. Build Screen is an agent skill from tsubotax/melta-ui.

When should I use Build Screen?

Build Screen fits situations like: tasks that involve Design tokens; tasks that involve Design review and critique; tasks that involve Agent instruction files.

How do I install Build Screen in Claude Code?

Run `npx skills add tsubotax/melta-ui --skill build-screen -a claude-code`. Or copy the skill folder (skills/build-screen in tsubotax/melta-ui) into .claude/skills/build-screen in your project. Claude Code loads it when a task matches its description.

How do I install Build Screen in Codex?

Run `npx skills add tsubotax/melta-ui --skill build-screen -a codex`. Or copy the skill folder (skills/build-screen in tsubotax/melta-ui) into .agents/skills/build-screen in your project. Codex loads it when a task matches its description.

Can I use Build Screen in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add tsubotax/melta-ui --skill build-screen -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/build-screen, .gemini/skills/build-screen, .github/skills/build-screen and .opencode/skills/build-screen in your project.

What does Build Screen need to run?

Going by SKILL.md and its folder, Build Screen needs the command-line tools its instructions call (npm and gh).

Does Build Screen access the network?

SKILL.md contains no URLs. Its commands use npm and gh, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Build Screen safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Build Screen use?

Build Screen is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Build Screen use?

About 1.3k tokens (SKILL.md is roughly 5.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Build Screen?

Skills that share tags, products or a category with Build Screen: MCP Development (coollabsio/coolify, 63k stars), Figma Codegen (awdr74100/figwright, 995 stars), Persian Rtl UI (TronIsHere/vibefarsiui, 210 stars) and Design Review (pproenca/dot-skills, 215 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Build Screen?

tsubotax (a GitHub user) maintains it in tsubotax/melta-ui, which has 201 GitHub stars. The repository holds 3 skills in this directory. The repository was last updated on September 27, 2026.

Source: tsubotax/melta-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.