ui-spec-linter

Validate UI spec packages for completeness, vocabulary, consistency, and state coverage.

1|Updated May 6, 2026
One-click install
npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-spec-linter
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-spec-linter
Source: https://github.com/ThorStarlord/interface-skills/tree/main/skills/ui-spec-linter
Command: npx skills add https://github.com/ThorStarlord/interface-skills --skill ui-spec-linter

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

ui-spec-linter prevents vague, incomplete, or internally inconsistent spec packages from turning into implementation defects by validating cross-file completeness, vocabulary, consistency, and state coverage before generation starts.

Core Features & Use Cases

  • Spec Completeness Validation: Confirms all required spec package files and required sections (including Run Manifest requirements) are present and non-empty.
  • Vocabulary & Token Integrity Checks: Flags banned vague language and ensures every referenced token exists in system.md, while also surfacing dead-weight tokens that are never used.
  • Cross-File Consistency Verification: Detects contradictions between brief, blueprint, and component specs (including non-goals compliance and acceptance criteria traceability).
  • Interactive State Coverage Audits: Ensures each interactive component includes required states like hover, focus, disabled, loading, error, and empty as applicable.

Quick Start

Run ui-spec-linter as the final quality gate on a complete spec package right before invoking ui-generate-code.

Frequently Asked Questions about ui-spec-linter

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate a UI spec package for completeness before code generation?

UI spec linting prevents inconsistent specifications from turning into implementation defects by checking cross-file completeness, vocabulary integrity, and state coverage. It catches vague language and missing interactive states like hover or disabled before any code is generated.

How do I check my UI spec for token consistency and vague vocabulary?

UI spec linting detects contradictions between your brief, blueprint, and component specifications while verifying non-goals compliance and acceptance criteria traceability. This cross-file consistency verification ensures that all interactive components include required states like hover, focus, disabled, loading, error, and empty.

What is the best way to ensure interactive state coverage in a UI component spec?

UI spec linting produces a ranked lint report with suggested fixes without auto-fixing your files. You can run this as a final quality gate right before invoking code generation, or use it for post-redline verification after making spec edits.

Can I use spec linting for post-redline verification after editing component specs?

UI spec linting requires a complete spec package including brief, blueprint, system, component-specs, and acceptance files with required Run Manifest sections. It serves as a pre-generation quality gate to ensure all required files are present and non-empty before code generation.