Skip to content

audit-frontend-consistency

skillLast commit

Agent skill for auditing frontend typography, spacing, color, responsive behavior, states, motion, and accessibility consistency.

Open productSource
Role
Agent workflow design and automation engineering
Scope
Agent workflow, validation automation, and packaging
Status
Published npm package

Problem

Visual inconsistencies are often reported from one screenshot without provenance, comparison points, responsive states, or a systemic root cause.

Constraints

  1. C1

    Screenshots must be tied to route, viewport, time/build, and state.

  2. C2

    Responsive/a11y behavior needs multiple widths and interaction states.

  3. C3

    An audit request alone does not authorize implementation.

Architecture

Agent audit/repair workflow; consistency reference defining evidence, severity, dependency order, and verification expectations. Packaging supplies portable host installation.

01

Skill workflow

Agent audit/repair workflow.

02

Automation

Consistency reference defining evidence, severity, dependency order, and verification expectations. Packaging supplies portable host installation.

Decisions

D1

Compare equivalent elements side-by-side before generalizing

Compare equivalent elements side-by-side before generalizing.

D2

Audit shared tokens/primitives before local pages

Audit shared tokens/primitives before local pages.

D3

Repair shared causes before adding component overrides

Repair shared causes before adding component overrides, trading a broader root fix for less design drift.

Contribution

  • Defined screenshot provenance and viewport/state coverage.
  • Codified severity and finding fields.
  • Designed dependency-ordered audit and repair sequencing.
  • Packaged cross-host installation and contract tests.

Outcomes

  • Agents can produce reproducible UI findings.
  • Distinguish observed defects from inferred causes.
  • Propose the smallest systemic fix.
  • Recheck affected viewports, states, motion, focus, tests, and builds when implementation is requested.

Verified stack

  • Agent Skills
  • JavaScript
  • Node.js
  • npm
  • GitHub Actions
  • CI/CD
  • Git

Working through something similar?

Share your challenge, scope, and timeline to start a focused conversation.