Verified:GitHub

frontend-ui-engineering

Implement UI states, accessibility, and responsiveness with runtime evidence.

Updated Apr 27, 2026

Search Tags:#accessibility #state management #responsive design #design-to-code #runtime verification #frontend ui #anti-ai slop

Ready to run

npx skills add https://github.com/vTRKA/supervibe --skill frontend-ui-engineering-vtrka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/vTRKA/supervibe/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/vTRKA/supervibe --skill frontend-ui-engineering-vtrka

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents UI implementations from drifting away from design intent by aligning states, accessibility, responsiveness, and runtime evidence before code changes land.

Core Features & Use Cases

State-matrix implementation: Enumerates and implements loading, empty, partial, success, and error/validation/permission/disabled states for real screens and components.
Design-to-code fidelity: Bridges design specifications and component libraries by preserving tokens, interaction patterns, focus behavior, and semantic structure.
Anti-slop evidence and fail-closed handoff: Requires artifact-bound anti-slop reporting and gate-specific evidence before approving UI readiness, especially for advanced visual surfaces.

Quick Start

Use this skill to implement a production-ready UI for an approved design handoff by typing: /supervibe frontend-ui-engineering implement the approved screen with full states, accessibility, and runtime evidence.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema

How do I ensure frontend UI implementations match design intent across all states?▼

Use design-to-code fidelity checks by preserving design tokens, interaction patterns, and semantic structure when bridging design specifications to component libraries. This ensures accessibility, focus behavior, and responsive design are maintained during implementation.

What is anti-slop reporting for frontend UI engineering?▼

Anti-slop reporting is an evidence-driven verification process that requires artifact-bound proof and gate-specific blockers before approving UI readiness. It uses a fail-closed approach to prevent incomplete or drifting visual surfaces from landing in production code.

How do I implement accessible and responsive design after prototype handoff?▼

To implement accessible and responsive design after prototype handoff, enumerate all UI states, consume capability-contracts for advanced runtimes, and verify browser runtime behavior. This ensures the final code matches the approved design across all conditions.

Do I need an approved design handoff before using frontend UI engineering?▼

Yes, an approved design handoff is required. This skill applies to engineering real screens, flows, forms, dashboards, and extension or mobile UI after the prototype design is approved, ensuring implementation starts from a finalized specification.

What's the best way to verify browser runtime behavior for advanced visual surfaces?▼

Verify browser runtime behavior by consuming capability-contracts and generating fail-closed, artifact-bound evidence. This approach enforces gate-taxonomy-specific blockers, ensuring advanced visual surfaces meet strict accessibility and state-matrix requirements before completion.