Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/moorestech/moorestech/webui-designnpx skills add moorestech/moorestech --skill webui-designgit clone --depth 1 https://github.com/moorestech/moorestechWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00114 | $0.25643 |
| Opus 5 | $0.00057 | $0.12821 |
| Sonnet 5 | $0.00023 | $0.05129 |
| Haiku 4.5 | $0.00011 | $0.02564 |
Grade A, and why
webui-design scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured today.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 590 lines — stays where its author put it; the contents beside it link to each section on GitHub.
moorestech Web UI デザイン哲学
このドキュメントは moorestech Web UI の見た目・構造のホワイトリストである。
大原則: ここに書かれていない表現・コンポーネント・パターンは使わない、やらない。 新しい表現が必要になったら、実装する前にこのドキュメントを更新して裁定を取る。 「とりあえず作って後で様式化」は禁止。様式が先、実装が後。
大原則: フェード・余白などの視覚寸法は固定長トークンが既定。パネル寸法に比例する%指定は破綻源。 %指定は基準サイズでは正しく見え、寸法違いのパネル（大型化・別画面流用）で初めて破綻する。 比例させたい明確な理由がある場合のみ%を使い、その理由をコメントで明記する。
正本（リファレンス実装）はインベントリ画面（InventoryPanel + RecipeViewer + ItemListPanel）。
迷ったらインベントリ画面がどうしているかを見て、それに従う。
0. 実装フロー（Web UIの作業はこれで回す）
Web UI は Unity を経由せず HMR で即反映でき、Playwright で画素・レイアウトを実測できる。 この速さを使い切ることが前提であり、「Unityを立てて目視する」「コードを読んで推測する」で済ませてはいけない。
0.1 worktree を切る
moores-wt new <branch> --no-editor
cd <worktree>/moorestech_web/webui && pnpm install
Web UI だけなら Unity Editor は不要（--no-editor）。node_modules は worktree に付いてこないので pnpm install する（storeが温まっていれば数秒）。
0.2 mock-host + vite dev を上げる（Unity不要・HMR有効）
MOCK_PORT=<port_a> MOORESTECH_E2E=true node --import tsx e2e/mock-host/server.ts
MOORESTECH_E2E=true MOORESTECH_BACKEND_PORT=<port_a> MOORESTECH_VITE_PORT=<port_b> pnpm dev
vite.config.ts が /api /ws /__ を backend ポートへプロキシするので、mock-host が Unity サーバーの代わりになる。
画面状態は mock の制御エンドポイントで作る（/__uistate /__block /__modal /__topic-control 等・e2e/support/mockControl.ts が窓口）。
ポートはセッション固有に振る。 Playwright既定の 5273 を使い回すと並列セッションで衝突し、無関係な spec が落ちて原因調査が空転する。
0.3 cloudflared quick tunnel で人間に見せる
cloudflared tunnel --url http://127.0.0.1:<port_b> --http-host-header 127.0.0.1:<port_b>
--http-host-header は必須。無いと vite の allowedHosts 検査が *.trycloudflare.com を弾き "Blocked request" になる（vite.config.ts は無変更で通せる）。
URLはDNS伝播に十数秒かかる。HMRが効くので、修正はそのURLへ即反映される＝ユーザーと同じ画面を見ながら詰められる。
0.4 直す前に、症状の出所を実測で特定する（最重要）
見た目の症状は必ず数値の出所へ落としてから直す。 スクショだけを見て原因を決めない。
Playwright スクリプトで次を出力する:
getBoundingClientRect()… 位置・寸法のズレscrollHeightvsclientHeight/scrollWidthvsclientWidth… 溢れの有無と量getComputedStyle()… 実際に効いている値（トークンの解決結果）dataset.state/display… Mantineの内部状態（スクロールバー等）
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- today First seen · 590 lines · 114 tokens per session scan A 121ef305915a
webui-design is a skill published in the GitHub repository moorestech/moorestech (82 stars, last pushed yesterday), licensed Apache-2.0. It adds 114 tokens to every session and 25,643 once invoked, about $0.0006 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-01.
Other skills, from other repositories
game-ui-ux
Design and build game UI/UX — HUDs, menus, and overlays — that survive every screen: anchor- based responsive layout, resolution/aspect scaling and safe areas, keyboard/gamepad focus navigation, a screen/menu state stack, and event-driven (not polled) HUD updates. Engine- neutral patterns that pair with the detected…
polish-ui
Design-quality workflow that combines design taste, aesthetic direction, image-to-code, a Web Interface Guidelines audit, and real-browser verification. Use when building or polishing a UI surface, implementing a mockup/screenshot, or when asked to make a page "look great".
rebrand
Apply a downstream brand to a PlatformPlatform fork. Edits one config file, drops in eight supplied logo assets, renames the solution and CLI to the new brand, and rotates UserSecretsId across every csproj. Skips all other source files. Use once per downstream fork after cloning, or to re-flip a brand later.
review-design
Reviews frontend components for design quality and UI/UX standards. Use when checking component styling, responsiveness, accessibility, or when asked to review a design.
ara3d-sdk
Use when processing AEC/BIM 3D data in .NET 8 — mesh generation and transformation, SIMD-accelerated math, IFC/STEP/PLY to glTF/GLB/VIM conversion, plugin development. Ara3D-SDK: high-performance .NET 3D geometry and BIM library suite.
game-ui-workflow
Orchestrates an end-to-end game UI workflow from game design (GDD), PRD, and UI interaction logic through design specification, screen-system extension, page image generation, component breakdown, sprite-sheet splitting, PNG ZIP packaging, atlas packing, engine JSON handoff, asset registration, and validation. Use…