skills.rest
JhonMM27
JhonMM27COMMUNITY
Explore all skills by this author →
GitHub

ui-ux-designer

Translate UX research into tokenized components with WCAG accessibility checks.

Updated May 26, 2025
Search Tags:#accessibility#design systems#component library#design tokens#wcag#ui-ux#ux validation
One-click install
npx skills add https://github.com/JhonMM27/Sistema_Pos_Paf_Webs --skill ui-ux-designer-jhonmm27
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-ux-designer
Source: https://github.com/JhonMM27/Sistema_Pos_Paf_Webs/tree/main/.agent/skills/ui-ux-designer
Command: npx skills add https://github.com/JhonMM27/Sistema_Pos_Paf_Webs --skill ui-ux-designer-jhonmm27

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you design consistent, accessible interfaces and reusable design systems instead of one-off UI decisions that are hard to maintain, hard to scale, and risky for users.

Core Features & Use Cases

  • Design Systems Mastery: Build token-based, governance-friendly component libraries using atomic design and design-to-development handoff.
  • Accessibility & Inclusive Design: Plan and validate WCAG-aligned color, semantics, keyboard navigation, and cognitive accessibility from the start.
  • Modern UX Workflows: Translate user research and UX validation into components, interaction states, and cross-platform patterns.

Example: You’re redesigning your POS web app UI and need a tokenized component system (buttons, forms, alerts, tables) that matches brand styles while meeting accessibility requirements and speeding up developer implementation.

Quick Start

Ask the AI to help you produce a token-based UI component plan and accessibility checklist for a POS web interface section, including states (default, hover, focus, disabled, error, loading) and success criteria mapped to WCAG.

Frequently Asked Questions about ui-ux-designer

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

FAQPage Schema
How do I create a design system with token-based architecture for a multi-platform product?▼

To create a token-based design system, you translate UX research and design principles into tokenized components and interaction guidelines. This yields a governance-friendly component library using atomic design for scalable web and multi-platform products.

How do I validate WCAG 2.2 accessibility compliance during UI component design?▼

You validate WCAG 2.2 compliance by running inclusive design checks on color contrast, semantics, keyboard navigation, and cognitive accessibility. This planning ensures components meet accessibility requirements directly from the design phase.

What is the best way to document component states for design-to-development handoff?▼

The best way to document handoff is defining actionable implementation-ready guidance for component states like default, hover, focus, disabled, error, and loading. This maps interaction states to success criteria for developers.

Can I use this approach to audit accessibility for an existing POS web interface?▼

Yes, you can audit an existing POS web interface by applying WCAG 2.1 and 2.2 inclusive design checks. The process generates an accessibility checklist and actionable plan to align current UI with required standards.

Do I need user research data before building a tokenized component library?▼

While you can build token libraries independently, translating user research and UX validation into components ensures the design system solves actual user needs. Research informs interaction patterns and cross-platform semantics.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

design-system

Generate presentations from primitive, semantic, and component tokens with JSON and CSS styling.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
redpanda-dataredpanda-data
34

setup-accessibility

Enforce WCAG 2.1 AA ARIA compliance via Claude Code hooks with Playwright and AXE.

Official
Intermediate
augustoheissaugustoheiss

agency-ui-designer

Create tokenized UI design systems with WCAG AA accessibility and developer handoff packages.

Community
Advanced