uiux-frontend-engineering

Name: uiux-frontend-engineering
Availability: InStock
Author: Oghie

Design and validate frontend UI/UX with token-driven design systems.

8|Updated Jun 17, 2026

Search Tags:#accessibility #frontend #handoff #tokens #design-system #responsiveness #uiux

Ready to run

npx skills add https://github.com/oghie/skillsets --skill uiux-frontend-engineering

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: uiux-frontend-engineering
Source: https://github.com/oghie/skillsets/tree/main/uiux_frontend_skill
Command: npx skills add https://github.com/oghie/skillsets --skill uiux-frontend-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Streamline front-end design, implementation, and validation by codifying UX best practices into token-driven patterns, accessible interactions, and testable design systems.

Core Features & Use Cases

Token-driven design: map tokens from theme/design-system to UI components and interactions.
Accessibility and responsive fidelity: ensure semantic HTML, keyboard navigation, proper contrast, and adaptable layouts across devices.
Handoff and governance: provide design specs, tokens, components, and validation steps for seamless collaboration between UX, design, and engineering.
XR/spatial interface readiness: support 3D/webXR surfaces and embodied UI patterns where applicable.

Quick Start

Design a frontend UI task and I will generate token-driven design, implementation, and validation guidance.

Frequently Asked Questions about uiux-frontend-engineering

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

FAQPage Schema

How do I map design tokens to UI components for a responsive frontend?▼

Map design tokens to UI components by applying token-driven design patterns that bridge theme specifications with frontend implementation. This ensures semantic HTML, adaptable layouts across devices, and consistent theming from discovery through final handoff.

What is the best way to ensure accessibility and keyboard navigation in frontend UI design?▼

Ensure accessibility and keyboard navigation by enforcing semantic HTML, proper contrast, and adaptable layouts during the UI design process. This approach codifies UX best practices into accessible interactions and testable design system components.

How do I validate a UI implementation against an existing design system?▼

Validate a UI implementation by verifying the output against token mappings, component libraries, and accessibility guidelines. This validation step ensures performance, theming consistency, and responsive fidelity before final developer handoff.

Can I use token-driven design patterns for XR and spatial interfaces?▼

Yes, token-driven design patterns support XR and spatial interface readiness by guiding 3D and webXR surface development. This ensures embodied UI patterns maintain accessibility and performance standards across extended reality environments.

Does this approach generate design specs and components for engineering handoff?▼

Yes, the approach provides design specs, tokens, components, and validation steps for seamless engineering handoff. It streamlines collaboration between UX, design, and engineering teams by codifying governance directly into the deliverables.