skills.rest
LinusConradM
LinusConradMCOMMUNITY
Explore all skills by this author →
GitHub

ux-designer

Define CSS visual specifications for the CRPD Dashboard with WCAG 2.2 AA compliance.

Updated Mar 27, 2026
Search Tags:#accessibility#wcag#ux-design#design-system#visual-consistency#css-values#ui-specification
One-click install
npx skills add https://github.com/LinusConradM/test_crpd_dashboard --skill ux-designer-linusconradm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-designer
Source: https://github.com/LinusConradM/test_crpd_dashboard/tree/main/.claude/skills/ux-designer
Command: npx skills add https://github.com/LinusConradM/test_crpd_dashboard --skill ux-designer-linusconradm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

You are the UX designer for the CRPD Disability Rights Data Dashboard — the first NLP and AI-powered platform to make the full CRPD reporting cycle searchable, visual, and actionable for disability rights organizations, governments, researchers, and policy advocates. Trigger this skill for any task involving UI layout specifications, typography decisions, spacing and alignment, color system usage, component styling, design consistency audits, or visual accessibility compliance. Also trigger when the user says "ux", "design", "layout", "spacing", "typography", "font", "color", "responsive", "user experience", "beautify", "make it look", "cards", "pills", "badges", or any visual/interaction design work. Even casual phrasing like "make this prettier", "clean up the UI", or "this looks wrong" should activate this skill.

Core Features & Use Cases

  • Define exact typography, spacing, color tokens, and component styling that engineers implement.
  • Ensure design consistency and accessibility (WCAG 2.2 AA) across dashboards such as Home, Explore, Country Profiles, and Compare.
  • Provide design-system documentation that teams can reference for audits, iterations, and new features.

Quick Start

Provide a complete visual specification for a UI change, including typography, spacing, color, and component states, for the Software Engineer to implement.

Frequently Asked Questions about ux-designer

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

FAQPage Schema
How do I generate exact CSS values for dashboard UI specifications?▼

To generate exact CSS values for dashboard UI specifications, you define precise visual rules for typography, spacing, color tokens, and component states. This outputs frontend-ready specifications aligned with your design system for direct engineering implementation.

What is WCAG 2.2 AA compliance for visual design systems?▼

WCAG 2.2 AA compliance for visual design systems ensures accessibility by meeting specific contrast ratios and interface guidelines. It guarantees dashboard components, typography, and color tokens remain usable for individuals with disabilities while maintaining visual consistency.

How do I document color tokens and layout grids for frontend implementation?▼

Document color tokens and layout grids by defining exact CSS values and alignment rules within a central design system file. This creates a standardized reference engineers use to build consistent dashboard components across Home, Explore, and Country Profile pages.

Can I use a Python design system file for UI specification and spacing?▼

Yes, you can use a Python design system file like src/colors.py for UI specification and spacing. It serves as the central source for color tokens and visual consistency rules, ensuring dashboard components align directly with defined engineering standards.

What is the best way to audit visual consistency across dashboard pages?▼

The best way to audit visual consistency across dashboard pages is cross-referencing component styling, typography, and spacing against a centralized design system. This verifies core pages like Home and Explore maintain uniform visual specifications and accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
wpgauravwpgaurav
14

frontend-css-patterns

Provide framework-agnostic CSS patterns for typography, color, motion, and layout.

Community
Intermediate
rakovi4rakovi4
45

align-design

Compare CSS values and fix styling mismatches between components and HTML mockups.

Community
Intermediate
exceptionlessexceptionless
2.5k

accessibility

Enforce WCAG 2.2 AA compliance for frontend components with semantic HTML and ARIA.

Official
Intermediate
yigitkonuryigitkonur
11

extract-saas-design

Extract design tokens, component specs, and layout patterns from SaaS dashboards.

Community
Advanced