skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

paper

Generate UI component guidance using print-inspired design tokens and WCAG 2.2 AA rules.

Updated May 13, 2026
Search Tags:#typography#accessibility#design system#tokens#ui components#paper aesthetic
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill paper-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: paper
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/paper
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill paper-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes how teams implement a print-inspired, paper-textured design language so UI stays consistent across components and states.

Core Features & Use Cases

  • Token-accurate styling: Defines typography (Montserrat/Roboto/PT Mono), spacing rhythm, and a minimal color palette (primary/neutral/success/warning/danger) for consistent implementation.
  • Accessibility-first interaction guidance: Enforces WCAG 2.2 AA, keyboard-first behavior, and visible focus states to prevent regressions.
  • Opinionated component rules: Provides do/don’t patterns and quality gates that improve output correctness during code reviews and generation workflows.

Quick Start

Use the paper skill to generate component guidance that applies its typography, color tokens, spacing scale, and WCAG 2.2 AA keyboard-first interaction rules.

Frequently Asked Questions about paper

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

FAQPage Schema
How do I maintain UI consistency when implementing a print-inspired design system across multiple components?▼

Ensure UI consistency by applying token-based styling with named thresholds for typography, spacing, and color across components. Enforce explicit state handling, do/don't constraints, and accessibility acceptance criteria during automated UI generation and design-system authoring.

What accessibility standards should I apply when generating UI components like buttons and modals?▼

Apply WCAG 2.2 AA standards to UI components by enforcing keyboard-first behavior and visible focus-visible states. Require explicit state handling for default, hover, active, disabled, loading, and error conditions to prevent accessibility regressions.

Can I use brand tokens to enforce typography and color rules across new and refactored interfaces?▼

Yes, you can enforce typography and color rules across new and refactored interfaces using brand tokens. Define a minimal color palette and typography scale including Montserrat, Roboto, and PT Mono to standardize component styling and spacing rhythm.

How do I add quality gates for design system components during code review?▼

Add quality gates during code review by executing an executable QA checklist that validates do/don't constraints, token-based styling, and accessibility acceptance criteria. Ensure all relevant component states are explicitly handled before approval.

What's the best way to standardize interaction states for inputs, cards, and navigation components?▼

Standardize interaction states by enforcing explicit handling of default, hover, focus-visible, active, disabled, loading, and error states. Apply opinionated component rules and token-based styling across inputs, cards, and navigation for consistent behavior.

Related Skills

Explore More Design & Creative Skills→
totalaudiopromototalaudiopromo
1

totalaud-brand

Enforce totalaud brand guidelines for totalaud.io frontend design and development.

Community
Intermediate
PiercingXXPiercingXX
1

refined

Generate Refined design-system component rules with tokens, accessibility criteria, and QA checklists.

Community
Intermediate
bergsidebergside
2.3k

fantasy

Generate fantasy-themed design system guidance with WCAG 2.2 AA accessibility rules.

Official
Intermediate
jtvarisjtvaris

ckm:ui-styling

Integrate shadcn/ui components with Tailwind CSS and design tokens for React projects.

Community
Advanced