skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

plan-design

Create design systems and audit UIs for WCAG 2.1 AA compliance.

1|Updated Jul 9, 2026
Search Tags:#accessibility#design system#component library#design tokens#ux#ui audit
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill plan-design-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: plan-design
Source: https://github.com/PiercingXX/xx-stack/tree/main/runtime/skills/plan-design
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill plan-design-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves inconsistent UI patterns and accessibility gaps by turning design knowledge into a coherent system with documented tokens, components, and standards.

Core Features & Use Cases

  • Design system creation: Establish design principles and define design tokens (colors, typography, spacing, shadows, radius) that teams can reuse consistently.
  • Component library planning: Specify core UI components (buttons, forms, cards, navigation, feedback patterns) with variants, states, and usage rules.
  • Accessibility and consistency audits: Evaluate existing screens against WCAG 2.1 AA guidelines and produce actionable findings with clear “what/why/fix” structure.

Quick Start

Use the plan-design skill to produce a complete design system spec and an audit report for a UI you want to standardize and improve.

Frequently Asked Questions about plan-design

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

FAQPage Schema
How do I create a design system from scratch for a new product?▼

Plan a component library by specifying core UI components like buttons, forms, cards, and navigation with their variants, states, and usage rules. This yields a structured specification that teams use to build consistent, reusable interface elements.

How do I audit existing UI for accessibility and consistency issues?▼

Audit existing UI by evaluating screens against WCAG 2.1 AA guidelines to identify accessibility and consistency violations. This generates an actionable report with clear what, why, and fix recommendations to prioritize interface improvements.

What are design tokens and when do I need them for UI standardization?▼

Design tokens are reusable variables defining visual properties like colors, typography, spacing, shadows, and radius. You need them when standardizing UI to replace hardcoded values, ensuring consistent design system application across components and platforms.

Can I use this approach to check WCAG 2.1 AA compliance for my screens?▼

Yes, you can check WCAG 2.1 AA compliance by evaluating existing user interfaces against accessibility guidelines. The process produces documented audit recommendations detailing specific violations and actionable fixes to improve accessibility quality.

What is the best way to structure documented audit recommendations for UI improvements?▼

Structure documented audit recommendations using a clear what, why, and fix format for each finding. This actionable structure helps teams understand accessibility violations, consistency gaps, and exact steps needed to resolve identified UI issues.

Related Skills

Explore More Design & Creative Skills→
vignesh2027vignesh2027
6

ui-ux-designer

Audit interfaces against WCAG 2.1 AA and provide UX critique.

Community
Intermediate
glwrglwr
1

design-review

Audit iOS app UI against design system and HIG guidelines from Simulator screenshots.

Community
Advanced
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
686f6c61686f6c61
105

accessibility-audit

Audit web content against WCAG 2.1 Level AA guidelines.

Community
Advanced