riso

Generate WCAG 2.2 AA-compliant UI guidance for risograph-inspired component libraries.

2.3k|211|Updated Mar 9, 2026
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill riso
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: riso
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/riso
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill riso

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of producing a consistent, implementation-ready UI style from a playful risograph aesthetic without sacrificing accessibility and interaction quality.

Core Features & Use Cases

  • Tokenized Riso foundation: Defines a warm paper-like surface, fluorescent pink for primary interactions, and deep federal blue for hierarchy, backed by explicit typography and spacing scales.
  • Accessible interaction guidance: Enforces WCAG 2.2 AA, keyboard-first behavior, and visible focus states with concrete do/don’t rules.
  • Component-ready implementation rules: Guides component anatomy, states (default/hover/focus-visible/active/disabled/loading/error), and QA checkpoints for reliable engineering and design alignment.

Quick Start

Use the riso skill to generate UI guidance for a design system component set that matches the risograph paper-pink-blue visual direction while meeting WCAG 2.2 AA and explicit interaction-state requirements.

Frequently Asked Questions about riso

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

FAQPage Schema
How do I build an accessible UI component library with a risograph design style?▼

Token-driven color, typography, and spacing foundations provide the warm paper-like surface, fluorescent pink, and deep federal blue scales needed to implement a consistent risograph design system across product UI surfaces.

What's the best way to ensure keyboard navigation passes WCAG 2.2 AA in a design system?▼

You can guide component anatomy and state behavior by defining explicit rules for default, hover, focus-visible, active, disabled, loading, and error states, ensuring reliable engineering and design alignment for product UI surfaces.

Does this risograph UI approach support standard design tokens for typography and spacing?▼

No, this approach does not sacrifice accessibility; it enforces WCAG 2.2 AA compliance with keyboard-first behavior, visible focus states, and concrete do/don't anti-pattern rules while maintaining the playful risograph aesthetic.

When do I need explicit interaction states for UI components like buttons and inputs?▼

You need explicit interaction states for UI components like buttons and inputs when building a component library that requires reliable engineering and design alignment through testable QA acceptance criteria and clear do/don't anti-pattern guidance.