How do I install the UI Feature Delivery skill?

Run npx skillmds@latest add tomevault-io/ui-feature-delivery in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the UI Feature Delivery skill do?

Implement React UI features using the data-ui contract system and Tailwind B1 (layout-only), including interface/data contract design, evidence capture in .ai/.tmp/ui/ /, and mandatory governance gate execution. Use when this capability is needed. It is listed under Web & Frontend on SkillMD.

Is UI Feature Delivery safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with UI Feature Delivery?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is UI Feature Delivery free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published UI Feature Delivery?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

UI Feature Delivery by tomevault-io

Name: UI Feature Delivery
Author: tomevault-io

UI Feature Delivery

Implement React UI features using the data-ui contract system and Tailwind B1 (layout-only), including interface/data contract design, evidence capture in .ai/.tmp/ui/<run-id>/, and mandatory governance gate execution. Use when this capability is needed.

tomevault-io Updated Sep 17, 2026

File contents

UI Feature Delivery (React + data-ui Contract)

Purpose

Deliver UI/UX features with stable styling and low drift under LLM leadership.

This skill focuses on:

UI structure + behavior implementation
interface/data contract design (API/types)
strict adherence to data-ui contract and Tailwind B1 boundary
automatically closing the loop by running the governance gate

Locked policies

Tailwind: B1-layout-only
Theme: token-only
Evidence: .ai/.tmp/ui/<run-id>/

When to use

Use when the user asks to:

implement a page, flow, or complex UI behavior
adjust UI + API contracts to support a feature
refactor UI while keeping style stable

Avoid when:

initializing the UI system (use ui-system-bootstrap)
converting a screenshot into tokens/contract changes (use ui-style-intake-from-image)

Inputs

Feature requirement
Target routes/components
Data/API constraints

Outputs

Feature code changes (React)
Evidence under .ai/.tmp/ui/<run-id>/
Governance gate report

Workflow

Phase 0 — Preflight (SSOT)

Confirm docs/context/ui/ui-spec.json exists.
- If missing, invoke ui-system-bootstrap first.
Confirm Tailwind B1 boundary: layout only.
Choose a run-id and create .ai/.tmp/ui/<run-id>/.

Phase A — UI spec-constrained design

Design the UI using existing contract roles and attributes:
- Prefer patterns in ui/patterns/*.
- Choose data-ui roles + data-* enums.
Define required data contracts (types / DTOs / API endpoints):
- Keep data contracts stable and explicit.

Phase B — Implementation

Implement components/pages:
- All semantic styling must be via data-ui + enums.
- Tailwind allowed only for layout (flex/grid/position/overflow/size/truncate).
- Do not add inline styles or hard-coded colors.

Phase C — Close the loop (mandatory)

Run governance gate and fix violations:

python3 .ai/skills/features/ui/ui-governance-gate/scripts/ui_gate.py run --mode full

Phase D — If you hit spec limits

If the feature cannot be expressed with the current contract/tokens:
- STOP and draft a minimal proposal.
- Route to:
  - tokens/theme changes: ui-style-intake-from-image or ui-system-bootstrap (with approval)
  - contract expansion: proposal + approval, then ui-system-bootstrap + codegen

Approval gates

Approval is mandatory when:

changing tokens or theme files
changing contract roles/enums
introducing a documented exception to Tailwind B1

Verification

Uses contract roles/enums only
Tailwind is layout-only
Gate passes (or violations are documented + approved)
Evidence captured
Central test suite passes: node .ai/tests/run.mjs --suite ui

Boundaries

MUST NOT modify tokens/contract without explicit approval.
MUST NOT introduce a component library as the primary mechanism.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: ui-feature-deliverydescription: Implement React UI features using the data-ui contract system and Tailwind B1 (layout-only), including interface/data contract design, evidence capture in .ai/.tmp/ui/<run-id>/, and mandatory governance gate execution. Use when this capability is needed.---# UI Feature Delivery (React + data-ui Contract)## PurposeDeliver UI/UX features with **stable styling** and low drift under LLM leadership.This skill focuses on:- UI structure + behavior implementation- interface/data contract design (API/types)- strict adherence to `data-ui` contract and Tailwind B1 boundary- automatically closing the loop by running the governance gate## Locked policies- Tailwind: B1-layout-only- Theme: token-only- Evidence: `.ai/.tmp/ui/<run-id>/`## When to useUse when the user asks to:- implement a page, flow, or complex UI behavior- adjust UI + API contracts to support a feature- refactor UI while keeping style stableAvoid when:- initializing the UI system (use `ui-system-bootstrap`)- converting a screenshot into tokens/contract changes (use `ui-style-intake-from-image`)## Inputs- Feature requirement- Target routes/components- Data/API constraints## Outputs- Feature code changes (React)- Evidence under `.ai/.tmp/ui/<run-id>/`- Governance gate report## Workflow### Phase 0 — Preflight (SSOT)1. Confirm `docs/context/ui/ui-spec.json` exists. - If missing, invoke `ui-system-bootstrap` first.2. Confirm Tailwind B1 boundary: layout only.3. Choose a `run-id` and create `.ai/.tmp/ui/<run-id>/`.### Phase A — UI spec-constrained design4. Design the UI using existing contract roles and attributes: - Prefer patterns in `ui/patterns/*`. - Choose `data-ui` roles + `data-*` enums.5. Define required data contracts (types / DTOs / API endpoints): - Keep data contracts stable and explicit.### Phase B — Implementation6. Implement components/pages: - All semantic styling must be via `data-ui` + enums. - Tailwind allowed only for layout (flex/grid/position/overflow/size/truncate). - Do not add inline styles or hard-coded colors.### Phase C — Close the loop (mandatory)7. Run governance gate and fix violations:```bashpython3 .ai/skills/features/ui/ui-governance-gate/scripts/ui_gate.py run --mode full```### Phase D — If you hit spec limits8. If the feature cannot be expressed with the current contract/tokens: - STOP and draft a minimal proposal. - Route to: - tokens/theme changes: `ui-style-intake-from-image` or `ui-system-bootstrap` (with approval) - contract expansion: proposal + approval, then `ui-system-bootstrap` + codegen## Approval gatesApproval is mandatory when:- changing tokens or theme files- changing contract roles/enums- introducing a documented exception to Tailwind B1## Verification- [ ] Uses contract roles/enums only- [ ] Tailwind is layout-only- [ ] Gate passes (or violations are documented + approved)- [ ] Evidence captured- [ ] Central test suite passes: `node .ai/tests/run.mjs --suite ui`## Boundaries- MUST NOT modify tokens/contract without explicit approval.- MUST NOT introduce a component library as the primary mechanism.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.

Frequently asked questions