paper

Name: paper
Availability: InStock
Author: piercingxx

Generate implementation-ready Paper design-system guidance with WCAG acceptance criteria.

1|Updated Jul 9, 2026

Search Tags:#typography #accessibility #design system #design tokens #ui guidelines #component states

Ready to run

npx skills add https://github.com/PiercingXX/xx-stack --skill paper-piercingxx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: paper
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/paper
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill paper-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It standardizes Paper design-system guidance so teams produce consistent, accessible UI with predictable typography, spacing, and color usage.

Core Features & Use Cases

Design foundations: Defines Paper’s typography scale (Roboto, Montserrat, PT Mono), spacing rhythm, and color tokens for implementation-ready usage.
Component-level rules: Provides an expected structure for turning foundations into concrete component anatomy, states, variants, and responsive/edge-case behavior.
Accessibility and QA: Enforces WCAG-aligned acceptance criteria and a code-review QA checklist to prevent regressions and anti-patterns.

Quick Start

Ask the AI to generate implementation-ready Paper design-system guidance for a specific component (for example, a button) following the required output structure and including testable accessibility acceptance criteria.

Frequently Asked Questions about paper

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

FAQPage Schema

How do I codify design system rules for consistent UI components?▼

To codify design system rules for consistent UI, you define token-first specifications for typography, spacing, and color, then translate them into implementation-ready component anatomy, states, and variants with explicit do/don't constraints.

What is the best way to document component states and accessibility in a design system?▼

Documenting component states and accessibility requires defining testable WCAG acceptance criteria and a QA checklist for code review, ensuring predictable responsive behavior and preventing regressions across product interfaces.

How do I generate implementation-ready UI guidelines for a specific component?▼

You generate implementation-ready UI guidelines by requesting the AI to output structured design-system guidance for a specific component, including foundations, interaction states, edge-case behavior, and accessibility documentation.

Does this design system approach require token-first specification for typography and color?▼

Yes, this design system approach requires token-first specification, demanding explicit definitions for typography scale, spacing rhythm, and color tokens before authoring concrete component guidelines and interaction states.

Can I use Paper design rules to enforce WCAG acceptance criteria during code review?▼

Yes, you can use Paper design rules to enforce WCAG-aligned acceptance criteria by applying the provided QA checklist during code review, preventing anti-patterns and ensuring accessible UI across product interfaces.