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 skills add tamnguyendinh/Anvien --skill ui-driven-specgit clone --depth 1 https://github.com/tamnguyendinh/AnvienWrote 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/tamnguyendinh/anvien/ui-driven-spec)<a href="https://agentmods.dev/skills/tamnguyendinh/anvien/ui-driven-spec"><img src="https://agentmods.dev/badge/skills/tamnguyendinh/anvien/ui-driven-spec/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/tamnguyendinh/anvien/ui-driven-spec"><img src="https://agentmods.dev/badge/skills/tamnguyendinh/anvien/ui-driven-spec.svg" alt="Reviewed on agentmods" width="80" 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.00076 | $0.01095 |
| Opus 5 | $0.00038 | $0.00548 |
| Sonnet 5 | $0.00015 | $0.00219 |
| Haiku 4.5 | $0.00008 | $0.00110 |
Grade A, and why
ui-driven-spec 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 6d 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 — 80 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI-Driven Spec — FE-First Development Workflow
Core Philosophy
The UI is the user interaction map, not the supreme authority.
The supreme authority remains the Spec and System Architecture.
Human / Architect approval is mandatory before a single line of backend code is written.
- Traditional flow:
Spec → Backend → Frontend(Gaps discovered late, expensive patches). - UI-driven flow:
UI Prototyping → Contract Extraction → Spec Alignment & Gate → Module-by-Module Backend Implementation & QA.
Iron Laws
- Extraction over invention: Contract extraction reads from FE code and mock types without guessing. Missing information must be flagged as
[TBD], never self-filled. - Spec judges artifacts, not the reverse: If an artifact conflicts with the Spec, conform the artifact to the Spec. Do not alter the Spec during extraction.
- Owner Review Gate is non-negotiable: No backend planning or implementation may begin without explicit owner sign-off. Silence is never approval.
- Strict single-module planning: Never plan multiple backend modules concurrently. Plan exactly one module, implement, verify with runtime QA, obtain approval, then proceed to the next module.
- Spec is the supreme law: If UI/FE behavior conflicts with Spec requirements, stop and escalate — never arbitrarily decide which side wins.
- No uncontracted backend work: Backend never implements anything outside
backend-contract-map.md. Do not add unsolicited endpoints. - Real UI verification mandatory: A module is never done without testing with real API integration on the actual UI.
File-to-File Workflow Pipeline
[1] references/ui-prototyping-and-components.md
│ • Build static HTML prototype (`prototype/`)
│ • Build FE components with mock types (`src/types/`, `src/mocks/`)
▼
[2] references/contract-maps-and-payloads.md
│ • Extract Data Source Map & API Payload contracts
│ • Extract UI Slot Map & State Transitions
│ • Aggregate Backend Contract Map (`docs/backend-contract-map.md`)
▼
[3] references/spec-alignment-and-review-gate.md
│ • Draft / ingest authoritative SPEC (`docs/SPEC.md`)
│ • Adjudicate and align all contract maps against SPEC
│ • Package handoff bundle & await Owner Approval
│
▼ ⛔ [MANDATORY OWNER APPROVAL GATE] ⛔
│
[4] references/module-implementation-and-qa.md
│ • Plan single module (`Implementation Plan: Module [Name]`)
│ • Implement backend services & wire live API to FE
│ • Verify runtime QA on real UI (`docs/qa-log.md`)
│ • Iterate module-by-module until complete
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.
- 6d ago First seen · 80 lines · 76 tokens per session scan A 20aa3813495e
ui-driven-spec is a skill published in the GitHub repository tamnguyendinh/Anvien (9 stars, last pushed 2d ago), licensed MIT. It adds 76 tokens to every session and 1,095 once invoked, about $0.0004 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-03.
Other skills, from other repositories
supabase-nextjs
Next.js with Supabase and Drizzle ORM.
design-patterns
Agents should invoke this skill when choosing patterns, designing traits/interfaces/components, deciding abstraction boundaries, evaluating dependency injection/callbacks, or comparing implementation approaches in Rust, TypeScript/React, or Django/Python.
fullstack-expert
Expert-level fullstack development guide covering multi-language (TypeScript, Python, Go, Rust), multi-framework (Next.js, FastAPI, Gin, Axum), API design, microservices, DevOps, and system design / Panduan fullstack tingkat ahli mencakup multi-bahasa (TypeScript, Python, Go, Rust), multi-framework (Next.js, FastAPI…
spa-orchestrator
Orchestrates Single-Page Application (SPA) architecture, integrating frontend state management with API-driven backends / Mengorkestrasi arsitektur Single-Page Application (SPA), mengintegrasikan state management frontend dengan backend berbasis API.
multiple-entry-points
Expert guide for designing and implementing Multiple Entry Points architecture in web applications / Panduan ahli untuk merancang dan mengimplementasikan arsitektur Multiple Entry Points pada aplikasi web.
client-scripts
Write ServiceNow client scripts (onLoad/onChange/onSubmit/onCellEdit) using gform, guser, GlideAjax, field visibility/mandatory toggles, and validation with debounced server calls.