skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

paper

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
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill paper-piercingxx
Or copy as Structured Prompt for Agent▼
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.

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
PiercingXXPiercingXX
1

luxury

Generate tokenized design-system guidance for luxury dark UI components.

Community
Intermediate
PiercingXXPiercingXX
1

contemporary

Generate design-system guidance with WCAG 2.2 AA accessibility and QA checklists.

Community
Intermediate
PiercingXXPiercingXX
1

elegant

Standardize Elegant UI design guidance with token-driven typography, color, spacing, and component rules.

Community
Intermediate