mcpField
U
ui-spec

ui-spec

github.com/idaibinDesign & UI636 installsUpdated 1d ago
Repository

About ui-spec

ui-spec is a routing skill for producing implementation-ready UI contracts from a grounded brief or an accepted visual source. It separates UI readiness from product approval, implementation, runtime evidence, and delivery decisions.

Key features

  1. 01Routes requests to relevant UI modules
  2. 02Defines feature and shared design contracts
  3. 03Tracks evidence, gaps, and readiness by slice
  4. 04Separates UI readiness from delivery authority

Use cases

  1. 01Specify a selected page or flow
  2. 02Explore an unapproved visual direction
  3. 03Adopt or change shared visual semantics
  4. 04Assess readiness across multiple surfaces

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/idaibin/skills --skill ui-spec

After installing, type/ui-specin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
assets/
DESIGN.md
frontend-visual-evidence.schema.json
references/
candidate-visual-direction.md
design-md-contract.md
documentation-boundaries.md
eval-cases.md
evaluation-rubric.md
frontend-layout-governance.md
frontend-visual-evidence.md
measurement-normalization.md
multi-surface.md
scene-archetypes.md
svg-icon-system.md
usage.md
visual-direction-and-anti-slop.md
visual-source.md
workflow.md
scripts/
validate-design-md-completeness.py
validate-frontend-visual-evidence.py

Details

From the project README

UI Specification

Purpose

Produce an implementation-ready UI contract without replacing Product, shared design, component/source, runtime-evidence, or delivery authority. This file is a routing map: after selecting a branch, read only its referenced modules.

Entry Gate

  • Require either a source-grounded candidate brief or a selected/accepted visual source; otherwise stop as evidence-incomplete.
  • Read effective repository guidance and current Worktree status before an authorized artifact write.
  • Keep Product behavior, Feature UI Markdown, adopted DESIGN.md, component source, runtime evidence, and Git delivery as separate authorities.

Route Map

Request stateLoadResult
Applicability or source selection is unclearusage and visual sourceResolve scope/source or stop
Direction is exploratory and unapprovedcandidate directionIgnored local candidate spec plus synchronized complete generation prompt; DESIGN.md unchanged; Not Ready
A page, flow, or accepted surface is selectedworkflow and documentation boundariesFeature Spec and per-slice readiness
Shared visual semantics are being adopted or changedDESIGN.md contractApproved, linted <design-root>/DESIGN.md; Feature Specs reference it
Several independent surfaces are in scopemulti-surfaceShared index plus independently loadable slices/verdicts

Invariants

  • Candidate handoffs bind candidate spec/prompt revisions and hashes. Accepted-contract handoffs and evidence bind the accepted comparison-basis revision.
  • Do not invent product behavior, exact values, assets, component ownership, rights, runtime facts, or shared semantics. Tag unknowns with the defined evidence level.
  • Do not duplicate shared tokens or component interfaces in a Feature Spec, introduce a parallel Registry/schema, or force DESIGN.md adoption for an unchanged local slice.
  • A structured projection is conditional: use it only when a named owner, producer, non-LLM consumer, semantic version, executable validator, drift policy, and retirement rule already exist.
  • Do not operate external AI, generate/edit images or SVG source, edit product source, operate browser/client state, or mutate Git. Route those actions to their owners.
  • Ready covers only UI visual/interaction readiness. It is not Product approval, implementation, review, runtime, delivery, deployment, or production proof.

Output Map

Return [email protected] with lifecycle/profile, source identity and rights, authority disposition, slice IDs, applicable layout/state/interaction/accessibility and asset contracts, delta/evidence references, comparison basis, per-slice readiness, and named gaps. Candidate output additionally returns both ignored paths/hashes and handoff status. Store task-local evidence under verified ignored .codex/artifacts/. Include DESIGN, viewport, SVG, or runtime-evidence fields only when the corresponding module was activated.

Reference Map

Load a module only when its condition applies:

ConditionModule
Visual direction, theme, color, Preserve/Overhaul choicevisual direction
An accepted/candidate source names a scene archetypescene archetypes
Layout ownership, inset, overlay, focus, hit order, or transition changeslayout and interaction
Repeated source measurements need normalizationmeasurement normalization
SVG/icon roles or fallback are part of acceptanceSVG icon contract
Current runtime is compared with a selected sourcevisual evidence
Final readiness is being decidedevaluation rubric

Maintainers use eval cases for regression work; do not load them during ordinary UI specification.

Comments

Markdown supported