Agentos UI UX
SapienXai/AgentOS
Design, review, or implement AgentOS UI and UX work using the project’s operator-console visual system.
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
Install Design Review
$ npx skills add tsubotax/melta-ui --skill design-review -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install tsubotax/melta-ui design-review --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-review .claude/skills/design-review && rm -rf skills-srcUse ~/.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/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .claude/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/tsubotax/melta-ui/tree/main/skills/design-reviewType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add tsubotax/melta-ui --skill design-review -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install tsubotax/melta-ui design-review --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/design-review .agents/skills/design-review && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .agents/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tsubotax/melta-ui --skill design-review -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install tsubotax/melta-ui design-review --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/design-review .cursor/skills/design-review && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .cursor/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/tsubotax/melta-ui.git --path skills/design-review--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add tsubotax/melta-ui --skill design-review -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install tsubotax/melta-ui design-review --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/design-review .gemini/skills/design-review && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .gemini/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install tsubotax/melta-ui design-reviewInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add tsubotax/melta-ui --skill design-review -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/design-review .github/skills/design-review && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .github/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add tsubotax/melta-ui --skill design-review -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install tsubotax/melta-ui design-review --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/tsubotax/melta-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/design-review .opencode/skills/design-review && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "design-review" agent skill from https://github.com/tsubotax/melta-ui/tree/main/skills/design-review into .opencode/skills/design-review/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-review", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
design-review- GitHub stars
- 201
- Token cost
- ~504 tokens
- SKILL.md length
- 137 words
- Files
- 5 (incl. references)
- Skills in repo
- 3
- Repo updated
- First seen
- Licence
- MIT
At a glance
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
- Works in 5 steps: 対象のHTMLファイルを特定する → DSリファレンスを読む → チェックリストに沿って違反を検出する → …
- Tasks that involve Design review and critique
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Design Review is an agent skill from tsubotax/melta-ui. HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
Its SKILL.md is about 500 tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/checklist.md`, `references/report-template.md` and `references/rules-index.md`).
It sits in Media & Creative, covering Design review and critique. It works with Tailwind CSS. 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 review and critique
Example prompts
- “/design-review”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 61d1bcc. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Design Review loads about 504 tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 41 tokens; SKILL.md has 137 words of instructions outside code blocks.
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 61d1bcc, republished under its MIT licence (© tsubotax). 137 words, ~504 tokens.
Download SKILL.mdSave it as
.claude/skills/design-review/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- design-review
- description
- HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。
デザインレビュー
HTMLファイルを melta UI デザインシステム（design/contracts/rules.json を正とする）に照らしてレビューし、違反を検出・分類・修正提案する。
手順
Step 1: 対象のHTMLファイルを特定する
- 引数でファイルパスが指定されている場合 → そのファイルを読み込む
- 引数がない場合 →
examples/配下のHTMLファイルを一覧表示し、ユーザーに選択してもらう - 対象がHTMLファイルでない場合 → 「HTMLファイルを指定してください」と返す
対象ファイルを全文読み込む。
Step 2: DSリファレンスを読む
design/contracts/rules.json（SSOT。ID / severity / detector / pattern / alternative / automationStatus を持つ全禁止ルール）
補助（任意）:
foundations/prohibited.md— 人間向けの prose 版。SSOT ではなく、pattern を持つルールの一部しか載っていないので、これだけで判定しない
Step 3: チェックリストに沿って違反を検出する
references/checklist.md（観点。HTML のどこをどう見るかの手順）を読み込み、各項目の [ID] を Step 2 で読んだ rules.json から引く。severity / detector / alternative の値は rules.json が正。
references/rules-index.md は 全文を読まなくてよい。checklist に無いカテゴリを横断して探すときの索引（カテゴリ別の表 + human-only 節 + 機械検出済み節）として、必要な箇所だけ参照する。
checklist.md のカテゴリ順にHTMLを走査する:
- カラー
- スペーシング・レイアウト
- タイポグラフィ
- モーション
- ボーダー
- フォーム（fieldset/legend カード干渉、日付セレクト幅を含む）
- アクセシビリティ
checklist.md に載っていないカテゴリ（modal / stepper / tag / list / table / skeleton / datepicker / baseline / ai-pattern / philosophy / button / divider）の違反を見つけた場合は、rules-index.md から ID を引いて報告する。
報告する違反には必ずルール ID を添える。 rules.json に存在しない ID を書かない（tests/skill-rule-refs.spec.ts が実在性を検査している）。対応するルールが無い指摘は違反ではなく「評価不可（ルール無し）」として扱う。
Step 4: 偽陽性を排除し、重大度を判定する
references/severity-rules.md を読み込み、以下を実行:
- 「推奨」と「必須」を区別 — 推奨事項は違反として報告しない
- 文脈判定で偽陽性を排除 — label/aria-current/text-xs の文脈確認
- 重大度を割り当て — Critical / High / Medium / Low の4段階。固定ルールに従い、表に無いものは rules.json の
severityから変換する
Step 5: レポートを出力する
references/report-template.md を読み込み、テンプレートに沿ってレポートを出力する。
レポートには ## 評価不可 節を必ず含める（human-only / 静的に観測できない / 対応ルール無しの3種）。評価不可の項目は違反件数に含めない。
出力前に サマリー整合チェック を実施: 本文中の各重大度の件数と冒頭サマリーの件数が一致することを確認する。
© 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
SKILL.md and 4 other files (references) in skills/design-review of tsubotax/melta-ui.
- SKILL.md
- references/checklist.md
- references/report-template.md
- references/rules-index.md
- references/severity-rules.md
Open the folder on GitHubat commit 61d1bcc
Compare with similar skills
Design Review 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Design Review this skilltsubotax/melta-ui | 201 | — | ~504 | Automated safety check: Pass | MIT | |
| Agentos UI UXSapienXai/AgentOS | 118 | — | ~4.4k | Automated safety check: Pass | MIT | |
| Design Craftkipperacademy/skillpper | 149 | — | ~3.8k | Automated safety check: Pass | None | |
| Design Reviewpproenca/dot-skills | 215 | — | ~3.4k | Automated safety check: Pass | MIT | |
| Designericrisco/rsc-harness | 180 | — | ~6.6k | Automated safety check: Pass | MIT | |
| Design ReferencesMadAppGang/claude-code | 285 | — | ~2.8k | Automated safety check: Pass | MIT |
Similar skills
Design Craft
kipperacademy/skillpper
Opinionated product-design skill for building, reviewing, polishing, and iterating on landing pages, apps, dashboards, AI products, design systems, and brand touchpoints.
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.
Design
ericrisco/rsc-harness
A skill your agent uses when designing or refreshing a web UI or landing page — visual concept, type/color/spacing/motion tokens, composition, rescuing a UI that reads AI-generic, or a graded design…
Design References
MadAppGang/claude-code
Predefined design system references for UI reviews. An agent skill from MadAppGang/claude-code.
Brand and Design Toolkit
nextlevelbuilder/ui-ux-pro-max-skill
Bundles design tasks behind one skill: brand identity, tokens, UI styling, logos, corporate identity mockups, slides, banners, icons and social images.
More from tsubotax/melta-ui
Ban Pattern
tsubotax/melta-ui
Register AI-generated-looking UI patterns as prohibited rules in the design system.
Build Screen
tsubotax/melta-ui
melta DS の契約から画面 1 枚（ページ / スクリーン）を生成し、checkhtml で自己検証して coverage と評価不可まで報告する。トリガー: 「画面を作って」「〜ページを生成」「画面生成」「ダッシュボードを作って」「設定画面を作って」「build screen」「generate a page」。AGENTS.md のタスクベース読み込みガイドで契約を引き当て、最大 3…
Related
Works with
Categories
Questions about Design Review
What does Design Review do?
HTMLファイルをmelta UIデザインシステムに照らしてレビューし、違反を検出・分類・修正提案する。トリガー: 「デザインレビュー」「DSチェック」「禁止パターンチェック」「design review」「check compliance」「DS準拠確認」。対象ファイルのパスを引数で受け取る。. Design Review is an agent skill from tsubotax/melta-ui.
When should I use Design Review?
Design Review fits situations like: tasks that involve Design review and critique.
How do I install Design Review in Claude Code?
Run `npx skills add tsubotax/melta-ui --skill design-review -a claude-code`. Or copy the skill folder (skills/design-review in tsubotax/melta-ui) into .claude/skills/design-review in your project. Claude Code loads it when a task matches its description.
How do I install Design Review in Codex?
Run `npx skills add tsubotax/melta-ui --skill design-review -a codex`. Or copy the skill folder (skills/design-review in tsubotax/melta-ui) into .agents/skills/design-review in your project. Codex loads it when a task matches its description.
Can I use Design Review 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 design-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-review, .gemini/skills/design-review, .github/skills/design-review and .opencode/skills/design-review in your project.
What does Design Review need to run?
SKILL.md names no scripts, command-line tools or credentials: Design Review is instructions for the agent only.
Does Design Review access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Design Review 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 Design Review use?
Design Review 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 Design Review use?
About 504 tokens (SKILL.md is roughly 2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 11k tokens, read only when the agent opens those files.
What are the alternatives to Design Review?
Skills that share tags, products or a category with Design Review: Agentos UI UX (SapienXai/AgentOS, 118 stars), Design Craft (kipperacademy/skillpper, 149 stars), Design Review (pproenca/dot-skills, 215 stars) and Design (ericrisco/rsc-harness, 180 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Review?
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 October 10, 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.