skills.rest
KevinKE93
KevinKE93COMMUNITY
Explore all skills by this author →
Website𝕏@keji_laoke_aiGitHub

frontend-ui-engineering

Implement frontend UI against design contracts with state, responsive, and accessibility coverage.

42|3|Updated May 8, 2026
Search Tags:#accessibility#design system#frontend engineering#visual QA#ui implementation#responsive states#monkey testing
One-click install
npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill frontend-ui-engineering-kevinke93
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-engineering
Source: https://github.com/KevinKE93/Dev_Agent_OPC/tree/main/dev-agent/skills/frontend-ui-engineering
Command: npx skills add https://github.com/KevinKE93/Dev_Agent_OPC --skill frontend-ui-engineering-kevinke93

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill prevents UI implementations from drifting away from the approved design contract, while ensuring required responsive, state, and accessibility behaviors are built and evidenced before delivery.

Core Features & Use Cases

  • Design-contract gated implementation: Enforces readiness via required design artifacts (DESIGN.md, VISUAL_SYSTEM.md, SCREEN_ACCEPTANCE.md, and implementation trace) and uses design-check tooling before coding.
  • Production-grade UI build workflow: Translates accepted screen criteria into primitives, applies local component patterns, and covers required UI states (loading/empty/error/success, disabled, selection, permission, and responsive constraints).
  • Functional, exploratory, and visual QA outputs: Defines optional QA gates, evidence artifacts (FUNCTIONAL_TEST, MONKEY_TEST, VISUAL_COMPARISON), scoring expectations, and rules for screenshot capture during exceptions.

Quick Start

Use the frontend-ui-engineering skill when you need to implement or review a customer-facing UI scope to match DESIGN.md, VISUAL_SYSTEM.md, and SCREEN_ACCEPTANCE.md for the project and produce the required implementation and QA 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 my UI implementation matches the approved design contract?▼

To ensure UI implementation matches a design contract, gate development on required artifacts like DESIGN.md, VISUAL_SYSTEM.md, and SCREEN_ACCEPTANCE.md, reuse local component patterns, and maintain an IMPLEMENTATION_TRACE.md to verify visual fidelity before delivery.

What states should I cover when building responsive frontend UI?▼

Responsive frontend UI requires covering loading, empty, error, success, disabled, selection, permission, and responsive constraint states to ensure complete user experience coverage across all functional happy paths.

How do I run visual QA on frontend UI components?▼

Run visual QA on frontend UI by generating evidence artifacts like FUNCTIONAL_TEST, MONKEY_TEST, and VISUAL_COMPARISON files, capturing screenshots during exceptions, and validating outputs against minimum visual fidelity scoring expectations.

Do I need design artifacts to start frontend UI engineering?▼

Yes, frontend UI engineering requires design artifacts like DESIGN.md, VISUAL_SYSTEM.md, and SCREEN_ACCEPTANCE.md as gating prerequisites before coding begins, ensuring the implementation translates accepted screen criteria into primitives accurately.

What is monkey testing in frontend UI development?▼

Monkey testing in frontend UI development is an exploratory QA technique that validates functional happy paths and edge cases, producing MONKEY_TEST evidence artifacts to prove interface robustness before customer-ready delivery.

How do I prevent UI drift from the approved design system?▼

Prevent UI drift from an approved design system by applying local component patterns and design tokens, enforcing design-check tooling before coding, and maintaining an IMPLEMENTATION_TRACE.md to track fidelity against the visual system.

Related Skills

Explore More Design & Creative Skills→
lexicalninjalexicalninja
2

quality-gate-manager

Automate quality gate enforcement across project stages with structured criteria.

Community
Advanced
arthrodarthrod

dogfood

Explore web applications and generate bug reports with screenshots and videos.

Community
Advanced
ekremmkasapekremmkasap

tailwind-design-system

Automates Tailwind CSS v4 design system creation with tokens and themes.

Community
Advanced
xpert-aixpert-ai
8

image-to-code

Convert visual design assets into responsive frontend code with visual QA.

Official
Advanced