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

output-discipline

Validate UI components for content, states, and accessibility before shipping.

Updated Aug 23, 2026
Search Tags:#code-quality#edge-cases#design-system#placeholders#frontend-quality#accessible-ui#complete-ui
One-click install
npx skills add https://github.com/prapanch/agent-forma --skill output-discipline-prapanch
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: output-discipline
Source: https://github.com/prapanch/agent-forma/tree/main/output-discipline
Command: npx skills add https://github.com/prapanch/agent-forma --skill output-discipline-prapanch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI shipping often includes placeholders and skeleton states that look done but aren't. This skill enforces real content, real states, and real edge cases so what ships is production-ready.

Core Features & Use Cases

  • Enforces completion of UI components with real content, real states, and edge-case handling before shipping.
  • Prevents placeholders and demo data from appearing in production; defines content, states, behavior completeness and accessibility checks.
  • Provides guidance on emergency exceptions and clarifies what "Coming Soon" means to avoid accidental scope leakage.

Quick Start

Audit your UI components to replace placeholders with real content and ensure all interactive states and accessibility requirements are met.

Frequently Asked Questions about output-discipline

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

FAQPage Schema
How do I prevent placeholder text and demo data from shipping in my frontend UI?▼

To prevent placeholder text and demo data from shipping in production UI, enforce a completeness checklist that validates real content, interactive states, and edge-case handling before code is finalized. This ensures unfinished components are caught early.

What states and edge cases need to be checked for production-ready UI components?▼

Production-ready UI components require validating real content, interactive states, edge-case behavior, and accessibility checks. This ensures the UI handles all expected user interactions and data variations without breaking or showing incomplete states.

How do I audit my design system components for UI completeness before launch?▼

Audit design system components for UI completeness by checking that all widgets, pages, and components have real content, functional behavior, and accessibility requirements met. Replace any remaining placeholders with actual data to ensure completeness.

Can I use a "Coming Soon" state for unfinished features without causing scope leakage?▼

Yes, you can use a "Coming Soon" state for unfinished features by defining clear guidance on emergency exceptions. This prevents accidental scope leakage by clarifying exactly what constitutes a temporary state versus incomplete functionality.

Why does my accessible UI still show skeleton states to users in production?▼

Accessible UI shows skeleton states in production because the UI lacks a completeness validation step before shipping. Enforcing real content replacement and state checks ensures skeleton loads are replaced with finalized data and interactive behavior.

Related Skills

Explore More Design & Creative Skills→
gaia-reactgaia-react
21

skeleton-loaders

Standardize skeleton loading states with shimmer classes and ARIA attributes.

Official
Intermediate
kangmominkangmomin
1

lint-check

Run ESLint, TypeScript type checks, and accessibility validations on frontend code.

Community
Intermediate
KhoiwallKhoiwall

frontend-design

Create production-grade React interface blueprints using Tailwind v4 and shadcn/ui.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced