skills.rest
prapanch
prapanchCOMMUNITY
Explore all skills by this author →
GitHub

component-quality

Automate pre-delivery UI component quality checks against design-system criteria.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#frontend#code-review#design-system#visual-qa#component-quality
One-click install
npx skills add https://github.com/prapanch/agent-forma --skill component-quality
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-quality
Source: https://github.com/prapanch/agent-forma/tree/main/component-quality
Command: npx skills add https://github.com/prapanch/agent-forma --skill component-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a deterministic pre-delivery check to ensure every UI component meets design-system standards before shipping, reducing visual defects and rework.

Core Features & Use Cases

  • Enforces design-system tokens for colors, spacing, and typography to maintain visual consistency.
  • Verifies accessibility basics (contrast, focus states, labeling) and interaction readiness.
  • Integrates into development workflows (CI or PR checks) to prevent incomplete components from shipping.

Quick Start

Run the pre-delivery UI component check on the current codebase to validate all components against the design-system criteria.

Frequently Asked Questions about component-quality

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

FAQPage Schema
How do I automate UI component quality checks before delivery?▼

Automate pre-delivery UI component quality checks by integrating a deterministic checklist into CI or PR workflows, validating visual consistency, accessibility, and interaction readiness against design-system standards.

What is a pre-delivery visual QA checklist for frontend components?▼

A pre-delivery visual QA checklist verifies design-system token usage for colors and spacing, ensures accessibility basics like contrast and focus states, and confirms interaction readiness before a component ships.

Can I enforce design system standards in PR workflows without special tooling?▼

Yes, you can enforce design system standards in PR workflows without special tooling by applying a deterministic checklist directly to the codebase to validate component implementation discipline.

How do I verify accessibility basics like contrast and focus states in a UI component?▼

Verify accessibility basics by running a pre-delivery check that validates contrast ratios, focus states, and proper labeling against design-system criteria before the component is approved.

Does a UI component quality gate work for local development environments?▼

Yes, a UI component quality gate can be integrated into local checks, allowing developers to validate visual consistency and accessibility criteria during component development before creating a PR.

What is the best way to prevent incomplete UI components from shipping?▼

Prevent incomplete UI components from shipping by integrating a deterministic quality gate into CI pipelines that enforces design-system tokens, visual consistency, and accessibility criteria.

Related Skills

Explore More Software Engineering Skills→
ravnhqravnhq
16

design-frontend

Validate UI components against design system tokens and responsive guidelines.

Official
Basic
HelloWorldSunginHelloWorldSungin
2

deployment-workflow

Execute production deployments with pre-checks, rollback procedures, and post-deployment validation.

Community
Advanced
BillChiricoBillChirico
5

github-pr-resolver

Resolve GitHub pull request review threads and failing CI checks with commits.

Community
Advanced
tunacosguntunacosgun

emcn-design-review

Audit UI code against the emcn design system for conformance.

Community
Advanced