Skills
.Work. You
Rest

ui-redline

Community

Diagnose UI-spec mismatches and prescribe exact fixes

Design & Creative#accessibility#code generation#design tokens#playwright#spec compliance#ui redline#diff and remediation
AuthorThorStarlord
Version1.0.0
Installs0

System Documentation

What problem does it solve?

UI implementations often drift from the approved spec, creating confusing gaps between what was intended and what was built.

Core Features & Use Cases

  • Spec-to-implementation mismatch diagnosis: Compares implementation evidence (screenshot, code, or live URL) against spec sections and identifies what diverges.
  • Severity-ranked redline findings: Produces a structured list of mismatches classified as Blocker, Major, Minor, or Polish.
  • Copy-paste refactor prompt for codegen: Generates an actionable prompt that a code-generation step can apply without introducing new design decisions.
  • Use for loop-closing: Works best as the final step after a UI build cycle feels off or fails checks, especially when the user says it “doesn't look right”.

Quick Start

Ask the AI to run ui-redline using your available spec and provide either the inspector evidence report, a screenshot, and/or the relevant UI code or live URL.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: ui-redline
Download link: https://github.com/ThorStarlord/interface-skills/archive/main.zip#ui-redline

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.