skills.rest
TECH-HY
TECH-HYOFFICIAL
Explore all skills by this author →
GitHub

ux-ui-oss-playbook

Design and refactor UX/UI surfaces using patterns from mature open-source design systems.

Updated Mar 22, 2026
Search Tags:#checklist#accessibility#design systems#dashboard#ux design#ui design#open-source patterns
One-click install
npx skills add https://github.com/TECH-HY/SKILLS --skill ux-ui-oss-playbook-tech-hy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-ui-oss-playbook
Source: https://github.com/TECH-HY/SKILLS/tree/main/skills/ux-ui-oss-playbook
Command: npx skills add https://github.com/TECH-HY/SKILLS --skill ux-ui-oss-playbook-tech-hy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It turns scattered UI requests into a consistent, evidence-based design workflow grounded in proven open-source design systems instead of ad-hoc visual decisions. ## Core Features & Use Cases - Pattern Catalog: Distilled guidance from GOV.UK, USWDS, Primer, Cloudscape, PatternFly, Polaris, and Ant Design covering accessibility, information architecture, states, and microcopy. - Shipping Checklist: Quality gates for structure, states, accessibility, content, role-based privacy, and operational quality before release. - Evidence Template: A standard scenario format capturing before/after states, audit events, and screenshot or log proof. - Use Case: When redesigning an operator dashboard for a marketplace, follow the workflow to define the user role, pick reference systems, cover all UI states, validate keyboard flow, and produce an evidence pack for review. ## Quick Start Use the ux-ui-oss-playbook skill to redesign the admin dashboard screen with role-based views and full state coverage.

Frequently Asked Questions about ux-ui-oss-playbook

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

FAQPage Schema
How do I design a dashboard UI based on open-source design systems?▼

Start by defining the user role and job-to-be-done, then pick 2-3 reference systems such as Cloudscape or PatternFly from the pattern catalog. Build the page in the order orientation, status, next action, evidence, history, and validate accessibility before visual polish.

What UI states should a design cover before shipping?▼

Cover default, empty, loading, blocked, error, and success states, plus stale or expired states when the domain has data freshness. Every blocked state needs a safe reason and a next actionable step, and error copy must explain what failed and how to recover.

Which open-source design systems does this playbook reference?▼

It distills patterns from GOV.UK, USWDS, Primer, Cloudscape, PatternFly, Shopify Polaris, and Ant Design. The source-links reference file lists canonical URLs for each system's accessibility and design guidance.

How do I handle role-based data exposure in marketplace UIs?▼

Show only safe summaries in member and public views, allow internal context in operator and admin views under RBAC, and never expose internal notes or risk flags in public payloads. Authentication context owns identity, not request-provided IDs.

When is this playbook not the right approach?▼

It is optimized for operational, role-based, and accessibility-first surfaces, so it is less suited for highly experimental or brand-driven visual design where deterministic patterns and predictability are not the priority.

Related Skills

Explore More Design & Creative Skills→
GenEducationGenEducation

bmad-agent-pm

Clarify product requirements from vague ideas into concise PRDs.

Official
Intermediate
echoVicechoVic
553

frontend/component-development

Guides frontend component development covering design principles, state management, styling, and testing.

Community
Intermediate
gooftroopgooftroop

accessibility

Audit web pages for WCAG 2.1 accessibility issues and provide improvement recommendations.

Community
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate