frontend-ui-engineering

Name: frontend-ui-engineering
Availability: InStock
Author: handy369

Implement frontend page and component UI skeletons with explicit runtime states.

Updated Apr 27, 2026

Search Tags:#accessibility #frontend #design-system #component-architecture #ui-state #ui-qa #interaction-feedback

Ready to run

npx skills add https://github.com/Handy369/passto-pi-frame --skill frontend-ui-engineering-handy369

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/Handy369/passto-pi-frame/tree/main/skills/frontend-ui-engineering
Command: npx skills add https://github.com/Handy369/passto-pi-frame --skill frontend-ui-engineering-handy369

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents front-end implementations from drifting into “mostly visuals” by forcing a clear, testable UI skeleton first—especially for loading, empty, error, and interaction feedback states.

Core Features & Use Cases

UI skeleton before detail: Establish page/component roles and separate data containers from presentation layers.
Complete state + feedback coverage: Define key runtime states (loading, empty, error, success/confirmation, disabled/pending) so interactions are verifiable.
Design-system-aligned implementation: Implement UI with consistent spacing, typography, semantic tokens, and accessibility/keyboard usability as a default quality line.
Scope guardrails: Avoid jumping into high-level UX direction or API/contract work when the primary risk is UI execution.

Quick Start

Use frontend-ui-engineering to first draft the page/component structure and enumerate loading, empty, error, success, and disabled/pending UI states before writing detailed UI code.

Frequently Asked Questions about frontend-ui-engineering

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

FAQPage Schema

How do I structure a frontend UI skeleton with loading, empty, and error states?▼

To structure a frontend UI skeleton, first establish page and component roles by separating data containers from presentation layers. This ensures explicit loading, empty, error, success, and disabled UI states are defined before writing detailed code, making interactions fully verifiable.

Why does my frontend component implementation drift into mostly visuals with missing interaction feedback?▼

Frontend implementations drift into mostly visuals when a clear, testable UI skeleton is not forced first. Establishing a stable UI skeleton with explicit runtime states and user feedback before detailing the UI prevents this drift and ensures interaction feedback coverage.

What is the best way to separate data and presentation layers in component architecture?▼

The best way to separate data and presentation layers in component architecture is to converge existing contracts into a stable UI skeleton. This approach defines component roles first, ensuring data containers and presentation layers are distinct and runtime states are testable.

How do I ensure design-system consistency and accessibility in frontend UI development?▼

To ensure design-system consistency and accessibility in frontend UI development, implement UI with consistent spacing, typography, and semantic tokens. Accessibility and keyboard usability should be treated as a default quality line during the component architecture process.

Does this approach to frontend UI engineering cover disabled and pending UI states?▼

Yes, this approach to frontend UI engineering covers disabled and pending UI states. It forces complete state and feedback coverage by defining key runtime states including loading, empty, error, success/confirmation, and disabled/pending for user interaction verification.

When should I avoid using a UI skeleton approach for frontend page implementation?▼

You should avoid using a UI skeleton approach when the primary risk is high-level UX direction or API/contract work rather than UI execution. This method includes scope guardrails specifically to prevent jumping into high-level UX direction or API work.