refined

Generate WCAG 2.2 AA-aligned UI component guidelines with design tokens and QA checklists.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill refined-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: refined
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/refined
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill refined-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Refined helps teams create consistent, modern minimal interfaces with strong accessibility and repeatable implementation rules.

Core Features & Use Cases

  • Unified visual foundations: Playfair Display + JetBrains Mono typography, refined spacing rhythm, and a defined color token palette.
  • Accessible interaction patterns: WCAG 2.2 AA guidance with keyboard-first behavior and visible focus requirements.
  • Opinionated component guidance: Do/don’t rules, explicit component states, and testable quality gates to reduce inconsistencies.

Quick Start

Ask an AI agent to generate Refined UI guidelines for your next component (e.g., buttons and inputs) using the provided tokens, required states, and a QA checklist.

Frequently Asked Questions about refined

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

FAQPage Schema
How do I standardize UI component states and color tokens for a design system?

To standardize UI component states and color tokens, apply opinionated component guidance with explicit do/don't rules and token-anchored constraints. This ensures consistent typography, spacing rhythm, and interactive behavior across product interfaces.

What are the WCAG 2.2 AA requirements for keyboard-first accessible UI components?

WCAG 2.2 AA requirements for accessible UI components mandate visible focus indicators and keyboard-first interaction patterns. Adhering to these guidelines ensures interactive states are usable for assistive technologies without requiring a mouse.

How do I generate accessible UI guidelines for buttons and inputs using design tokens?

You generate accessible UI guidelines for buttons and inputs by requesting an AI agent to apply defined color tokens, required component states, and testable quality gates. This process yields standardized, repeatable interface rules.

Does this approach to modern minimal UI creation support specific typography and spacing rhythm?

Yes, modern minimal UI creation supports specific typography and spacing rhythm by utilizing Playfair Display and JetBrains Mono fonts alongside a refined spacing scale. These unified visual foundations ensure aesthetic consistency.

When do I need explicit do/don't rules and testable quality gates for component authoring?

You need explicit do/don't rules and testable quality gates for component authoring when building product interfaces that demand high consistency and accessibility. This opinionated guidance reduces implementation variations across teams.

Why does my design system need token-anchored rules for component states?

Your design system needs token-anchored rules for component states to eliminate visual inconsistencies and ensure repeatable implementation. Binding interactive states to a defined color token palette maintains reliable UI quality.