Borrowing it
Nothing to install: this file belongs to dylanroscover/Embody. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/dylanroscover/Embody/main/.claude/skills/build-ui/SKILL.mdgit clone --depth 1 https://github.com/dylanroscover/EmbodyWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/dylanroscover/embody/build-ui)<a href="https://agentmods.dev/skills/dylanroscover/embody/build-ui"><img src="https://agentmods.dev/badge/skills/dylanroscover/embody/build-ui.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
What 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.1 | $0.00068 | $0.01923 |
| Opus 5 | $0.00034 | $0.00962 |
| Sonnet 5 | $0.00014 | $0.00385 |
| Haiku 4.5 | $0.00007 | $0.00192 |
Grade A, and why
build-ui 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 4d ago.
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 — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Build UI - visual design system for TouchDesigner panels
Load BEFORE building or restyling any TD panel UI (dialogs, wizards, HUDs,
control surfaces). This is the design layer; td-ui-mechanics.md (in this skill directory) is the mechanics
(which COMP to use, single-window, etc.). A panel is not done until a captured
frame / live window proves it reads cleanly.
The failure this prevents: font sizes all over the place, giant buttons, no padding, no alignment, no hierarchy, low contrast - "novice" UI. The cure is a small set of tokens applied consistently. Never pick a size, color, or gap ad hoc; pull it from the scales below.
1. Design tokens (dark theme - TD colors are 0..1 floats)
Color - a restrained palette. More colors != better; use opacity/size for hierarchy, accent only for the primary action.
| Token | RGB (0..1) | Use |
|---|---|---|
bg |
0.11, 0.12, 0.115 | window / panel background |
surface |
0.16, 0.17, 0.165 | cards, secondary buttons, input fields |
surface-hi |
0.21, 0.22, 0.215 | hover / pressed |
border |
0.26, 0.27, 0.265 | dividers, 1px outlines |
text |
0.92, 0.92, 0.92 | primary text |
text-muted |
0.60, 0.61, 0.60 | secondary / hints / captions |
accent |
0.24, 0.52, 0.35 | PRIMARY / recommended action only |
accent-text |
0.96, 0.98, 0.96 | text on accent |
Rule: exactly one accent element per screen (the primary action). Everything else
is surface/text. Match the host project's existing palette when it has one
(e.g. Embody's tagger dark) instead of inventing.
Type scale - 3-4 sizes, never more. fontsizex on a Text COMP:
| Role | size | color |
|---|---|---|
| Title / H1 | 20 | text |
| Section / H2 | 15 | text |
| Body / label | 12 | text |
| Caption / hint | 11 | text-muted |
If two things are the same role, they are the same size. Establish hierarchy with size + color, not five random sizes.
Spacing - a 4px grid. Every gap, pad, and size is one of these: 4, 8, 12, 16, 24, 32. No arbitrary values.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 4d ago Changed · +5 lines · +68 tokens per session 5fa1d75c616c
- 8d ago First seen · 129 lines · 0 tokens per session scan A 9db0d3a85244
build-ui is a skill published in the GitHub repository dylanroscover/Embody (169 stars, last pushed yesterday), licensed MIT. It adds 68 tokens to every session and 1,923 once invoked, about $0.0003 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-08-30.
Other skills, from other repositories
web-architecture
Default web app architecture: TypeScript, feature folders, a view / state / client split in the same spirit as MVVM. Use when creating or changing web UI, TypeScript/JavaScript frontend, React or similar SPA/SSR pages, CSS, or browser API clients in an app that has not already chosen a different pattern.
a11y-debugging
Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.
agentcore-investigation
Investigate Bedrock AgentCore runtime sessions via CloudWatch Logs Insights — resolve session/trace IDs, query OTEL spans, filter noise, build timelines. Use when debugging AgentCore agent sessions, tracing tool calls, or analyzing latency.
amazon aurora dsql
Deprecated compatibility redirect for Aurora DSQL guidance. Use when a request concerns DSQL, Aurora DSQL, distributed SQL, DSQL schemas, migrations, queries, authentication, performance, or application development.
frontend-feature
Build a new page, view, or data-driven feature in the Next.js frontend. Use when adding a route under the dashboard/marketing area, wiring UI to a backend endpoint, adding client state, or creating a localized page. Covers App Router, data fetching, Zustand stores, and i18n.
decocms-ui
Build or style React UI with the decocms product design system (@decocms/ui). Use when creating interfaces, pages, or components in a project that should look like decocms products, when the user mentions "design system", "@decocms/ui", "decocms style", or asks to make UI consistent with Studio. Covers installation…