frontend-ui-ux

Transform aesthetic direction into production-ready UI code for React, Vue, or vanilla JS.

17|1|Updated Jan 30, 2026
One-click install
npx skills add https://github.com/jakezp/everything-opencode --skill frontend-ui-ux-jakezp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-ui-ux
Source: https://github.com/jakezp/everything-opencode/tree/main/skills/frontend-ui-ux
Command: npx skills add https://github.com/jakezp/everything-opencode --skill frontend-ui-ux-jakezp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridge designer vision and developer implementation by transforming aesthetic direction into production-ready UI code.

Core Features & Use Cases

  • Design system-aware UI components following accessibility and responsive design principles.
  • Translating aesthetic direction into production-ready code across React, Vue, or vanilla JS projects.
  • Use Case: Implement a pixel-perfect dashboard screen adhering to the defined aesthetic direction with accessible color contrast and typography.

Quick Start

Create a pixel-perfect UI for the next screen following the documented aesthetic direction.

Frequently Asked Questions about frontend-ui-ux

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

FAQPage Schema
How do I translate aesthetic design direction into production-ready UI code?▼

Translating aesthetic direction into production-ready UI code requires bridging visual layouts, typography, and color systems into accessible frontend components. This ensures pixel-perfect interfaces satisfying responsive design and design-system integration requirements.

Can I generate accessible UI components for React or Vue projects?▼

Yes, you can generate accessible UI components for React or Vue projects. The implementation covers layout, typography, color contrast, and accessible interactions to ensure production-grade frontend interfaces across these frameworks.

What is the best way to build a pixel-perfect dashboard screen with accessible color contrast?▼

The best way to build a pixel-perfect dashboard screen is to follow the documented aesthetic direction while enforcing accessible color contrast and typography standards. This yields production-grade UI code integrated into your design system.

Does this approach work with vanilla JS or only design-system frameworks?▼

This approach works with vanilla JS as well as React and Vue projects. It applies design-system-aware principles to ensure responsive design and accessible interactions are maintained across any frontend implementation.

How do I ensure responsive design when implementing frontend interfaces from aesthetic direction?▼

Ensure responsive design by transforming the aesthetic direction into production-ready UI code that adheres to layout, typography, and color system standards. This produces accessible frontend interfaces that adapt correctly across device viewports.