skills.rest
elcoosp
elcoospCOMMUNITY
Explore all skills by this author →
GitHub

dx

Design user interfaces and maintain design systems with WCAG 2.1 AA accessibility standards.

Updated Mar 11, 2026
Search Tags:#accessibility#UI/UX#design system#component design#user flow#frontend spec
One-click install
npx skills add https://github.com/elcoosp/elcoosp-skills --skill dx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dx
Source: https://github.com/elcoosp/elcoosp-skills/tree/main/virtual-saas-team/agents/extended/dx
Command: npx skills add https://github.com/elcoosp/elcoosp-skills --skill dx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures visual coherence and conversion-optimized user experiences by providing expert guidance on design systems, UI components, user flows, and frontend implementation contracts.

Core Features & Use Cases

  • Design System Creation: Define and maintain a single source of truth for all visual decisions, including design tokens, component libraries, and layout systems.
  • Feature Design & Handoff: Map user flows, design screens with system tokens, annotate interactions, and create detailed handoff specs for developers.
  • UX Audits: Review existing UI for usability, accessibility, and alignment with user personas, providing actionable recommendations.
  • Use Case: When developing a new feature, use this Skill to first define the design system (DX-001), then design the user flow and screens (DX-002), ensuring all components are accessible and implementable by the engineering team.

Quick Start

Use the dx skill to design the user flow and screens for the new user onboarding feature based on PM-003.

Frequently Asked Questions about dx

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

FAQPage Schema
How do I create a design system and ensure UI components meet WCAG 2.1 AA accessibility standards?▼

To create a design system meeting WCAG 2.1 AA accessibility standards, define visual tokens, build component libraries, and generate user flow diagrams while ensuring developer handoff clarity for production-ready frontend specs.

What is the best way to generate production-ready frontend code specifications from UI designs?▼

Generating production-ready frontend code specifications involves mapping user flows, annotating interactions, and creating detailed handoff specs from visual designs to ensure implementation clarity for the engineering team.

How do I conduct a UX audit for existing user interfaces?▼

Conducting a UX audit involves reviewing existing UI for usability, accessibility, and alignment with user personas, which yields actionable recommendations to optimize conversion and visual coherence.

Can I use this for wireframing new features and mapping user flow diagrams?▼

Yes, you can use this for wireframing new features and mapping user flow diagrams by leveraging expert guidance to design screens with system tokens and annotate user interactions.

Does this design system approach work without external frontend dependencies?▼

Yes, this design system approach works without external frontend dependencies, using internal references to define visual languages and generate implementation contracts independently.

Why do my developer handoffs lack clarity when designing UI components?▼

Developer handoffs lack clarity when UI components lack annotated interactions and detailed implementation specs, which this design system approach resolves by providing explicit frontend contracts.

Related Skills

Explore More Design & Creative Skills→
hfadhlullahhfadhlullah

PRD Generator

Generate Product Requirements Documents through an interview process.

Community
Advanced
ybbms777ybbms777
1

figma-design-sync

Compare Figma designs with live web implementations and fix visual mismatches.

Community
Advanced
hpurihpuri

A2UI UX Designer

Generate UX design documents and interactive wireframes from agent interactions.

Community
Advanced
windyskywindysky

moai-domain-uiux

Establish domain UI/UX foundations with design tokens and theming for React and Vue.

Community
Basic