skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

impeccable

Generate token-based UI component guidelines with WCAG 2.2 AA accessibility rules.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#tokens#design-system#ui guidelines#interaction-states#wcag-2-2
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill impeccable-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: impeccable
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/impeccable
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill impeccable-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves inconsistent design-system implementation by providing clear, token-based guidance for creating UI that matches the Impeccable editorial-poster aesthetic while meeting accessibility expectations.

Core Features & Use Cases

  • Token-driven foundations: Enforces a warm, modern palette and typography/spacing scales (e.g., Chakra Petch, JetBrains Mono, defined color tokens) to keep implementations consistent.
  • Accessibility and interaction rules: Ensures WCAG 2.2 AA, keyboard-first behavior, and visible focus states with testable acceptance criteria.
  • Operational guideline workflow: Standardizes how an AI or author produces component-level rules, do/don’t patterns, and QA checklists for review.

Quick Start

Use the impeccable skill to generate component implementation guidelines that apply the specified tokens and include WCAG 2.2 AA, keyboard-first interaction, and focus-visible requirements.

Frequently Asked Questions about impeccable

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

FAQPage Schema
How do I generate accessible UI guidelines for a design system?▼

Token-based design-system instructions standardize component-level guidance by applying defined typography, spacing, and color tokens. This enforces WCAG 2.2 AA keyboard-first behavior, visible focus states, and testable QA gates across common UI components.

What are token-based design-system instructions for UI components?▼

Token-based design-system instructions define typography, spacing, and color scales to standardize UI component implementation. They include concrete do/don't patterns and testable QA acceptance criteria anchored to specific design tokens.

How do I ensure my UI components meet WCAG 2.2 AA keyboard-first requirements?▼

Ensure WCAG 2.2 AA compliance by enforcing keyboard-first behavior and explicit focus-visible interaction states in your component guidelines. Include testable acceptance criteria and QA checklists to verify accessibility across responsive and edge-case scenarios.

Can I apply editorial-poster typography and color tokens to existing UI components?▼

Apply editorial-poster typography and color tokens to existing UI components by mapping them to defined scales like Chakra Petch and JetBrains Mono. This includes creating concrete do/don't rules for consistent application across interaction states.

What's the best way to standardize interaction states across a design system?▼

Standardize interaction states by defining explicit focus and behavior rules with token-based references, ensuring keyboard-first accessibility. Generate component-level do/don't patterns and QA quality gates with testable acceptance criteria for consistent implementation.

Why does my design system UI fail WCAG 2.2 QA checks on focus states?▼

UI fails WCAG 2.2 QA checks when focus-visible interaction states are missing or inconsistent. Resolve this by generating component guidelines with explicit keyboard-first behavior rules and testable acceptance criteria anchored to design tokens.

Related Skills

Explore More Design & Creative Skills→
nikglavinnikglavin
1

lyra-design-system

Define a cohesive design system with tokens, typography, color, and spacing.

Community
Advanced
superpollo02superpollo02

corporate

Define enterprise UI design guidelines with typography, color, and WCAG 2.2 AA accessibility rules.

Community
Intermediate
aaronbassettaaronbassett
4

flutter-core:flutter-ui-widgets

Provide a structured library of Flutter UI widgets for consistent layouts.

Community
Intermediate
superpollo02superpollo02

futuristic

Generate futuristic design-system component guidance with token foundations and WCAG 2.2 AA accessibility.

Community
Intermediate