skills.rest
oghie
oghieCOMMUNITY
Explore all skills by this author →
GitHub

uiux-frontend-engineering

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
One-click install
npx skills add https://github.com/oghie/skillsets --skill uiux-frontend-engineering
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
klarbauklarbau
7

ckm:design-system

Standardize three-layer design tokens and generate brand-compliant slides with HTML validation.

Community
Advanced
cliveportmancliveportman
1

design-specs

Format design specs for components, screens, flows, and token mappings.

Community
Intermediate
Paradiddle131Paradiddle131
1

frontend-design

Generate production-grade HTML/CSS/JS frontend components with WCAG-ready accessibility.

Community
Advanced
lucabattistinilucabattistini

design-govern

Create a governance document defining token evolution and component deprecation rules.

Community
Advanced