Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/sd0xdev/sd0x-harnessnpx agentmods add skills/sd0xdev/sd0x-harness/ui-first-principlesWrote 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/sd0xdev/sd0x-harness/ui-first-principles)<a href="https://agentmods.dev/skills/sd0xdev/sd0x-harness/ui-first-principles"><img src="https://agentmods.dev/badge/skills/sd0xdev/sd0x-harness/ui-first-principles/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/sd0xdev/sd0x-harness/ui-first-principles"><img src="https://agentmods.dev/badge/skills/sd0xdev/sd0x-harness/ui-first-principles.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.00113 | $0.05999 |
| Opus 5.5 | $0.00045 | $0.02400 |
| Sonnet 5.5 | $0.00023 | $0.01200 |
| Haiku 4.5 | $0.00011 | $0.00600 |
Grade C, and why
ui-first-principles scanned grade C with 1 finding 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 1mo 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.
Recursive force deletehighDestructive command
rm -rf with a variable or a broad path is one typo away from removing the wrong tree.
cleanup() { rm -rf "${TMPDIR:-}" 2>/dev/null || true; } How it starts
The opening of the file, as written. The whole thing — 334 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI First-Principles
Reasoning chain: <scenario> → JTBD → 5 IA/cognitive principles → field decisions → anti-patterns → gap report → validated handoff doc.
Output:
handoff-ui-first-principles.md(default<cwd>/handoff-ui-first-principles.md, override with--output). Downstream/frontend-designreads §5 Information Hierarchy directly.
Non-Negotiable Rules
SKILL.md is the normative source. Files under the
references/directory elaborate but do not override.
| # | Rule | Violation = |
|---|---|---|
| 1 | Phase 1 (redact.js) must run before any LLM phase. Raw input never enters Phases 3–6. |
Skill invalid (PII risk) |
| 2 | Phase 7 critical violation (pii_leak_fingerprint / pii_leak_regex / missing_decision) → 1 retry with violation context → still critical → emit ⚠️ Need Human (no warn-only fallback). |
Retry policy breach |
| 3 | Principle Anchor column must hold one ID from JTBD | CognitiveLoadTheory | HicksLaw | MillersLaw | ProgressiveDisclosure. Multi-principle prose is fine in rationale. |
invalid_anchor soft violation |
| 4 | Priority column must hold one of primary | secondary | on_demand | hidden. |
invalid_priority soft violation |
| 5 | Anti-Pattern Pattern column IDs must belong to the v1 whitelist in references/anti-patterns.md. Use literal (none detected) when no anti-patterns apply. |
invalid_anti_pattern_id soft violation |
| 6 | Output must end with ✅ Ready (clean) or ⚠️ Soft warnings (soft only) or ⚠️ Need Human (post-retry critical). Hook + behavior layer parses these. |
Auto-loop cannot parse |
Trigger
- Keywords: UI first principles, IA design, 資訊架構, 欄位優先級, scenario-driven UI, JTBD UI, anti-pattern audit, ui-first-principles
- Slash form:
/ui-first-principles <scenario>
When NOT to Use
| Intent | Use instead |
|---|---|
| Visual layout / colour / Tailwind work | /frontend-design |
| Post-build evaluation of existing UI | /critique |
| Simplifying an already-shipped flow | /distill |
| Pure feasibility on a design idea | /feasibility-study |
| Tech-spec for an IA decision | /tech-spec (use this skill's output as input) |
What ships with it
4 files 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.
- 1mo ago Changed · +9 lines b118323818e5
- 1mo ago First seen · 325 lines · 113 tokens per session scan C a2444ab36361
ui-first-principles is a skill published in the GitHub repository sd0xdev/sd0x-harness (194 stars, last pushed 16d ago), licensed MIT. It adds 113 tokens to every session and 5,999 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it C with 1 finding (recursive force delete). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
frontend
Two-mode frontend skill: (1) authoring — accessibility, responsive layout, loading/error states, performance, DESIGN.md authoring, visual direction; (2) critique — READ-only scored review of built UI against anchored rubric, AI-slop detection, two isolated assessments. Router invokes mode via context.
visual-asset-design
A guide for turning character, scene, and prop ideas into prompts for generating consistent reference images. It covers layouts, camera views, visual identity, and continuity across image variations.
exploration
Two-mode exploration skill: (1) design dialogue — turn rough ideas into validated designs through collaborative interview before planning; (2) spike — throwaway code answering ONE design question, deleted or absorbed, never shipped. Router invokes mode via dispatch context.
memory-and-handoff
Two-mode skill: (1) session memory — load/persist durable workflow state under .cc10x/ (activeContext, patterns, progress) so context survives compaction; (2) handoff package — portable, secrets-redacted export for a coworker, different tool, or fresh non-cc10x session.
building
Use when writing production code test-first: the RED-GREEN-REFACTOR cycle, false-RED detection, vertical slicing, scope escalation, test process discipline, and code generation patterns.
cc10x-guide
Answers questions about cc10x itself — what it is, how to install and configure it, how the router, workflows, memory, and hooks operate, and how to troubleshoot. Use this skill when: the user asks ABOUT cc10x — "what is cc10x", "how do I configure cc10x", "why isn't cc10x activating", "how do cc10x workflows work"…