skills.rest
MANR255926
MANR255926COMMUNITY
Explore all skills by this author →
𝕏@Allyan255926GitHub

paper

Generates implementation-ready design system guidelines using Paper design tokens and accessibility rules.

Updated Aug 31, 2026
Search Tags:#typography#accessibility#design system#design tokens#wcag#component guidelines#ui documentation
One-click install
npx skills add https://github.com/MANR255926/GARAGE --skill paper-manr255926
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: paper
Source: https://github.com/MANR255926/GARAGE/tree/main/.agents/skills/paper
Command: npx skills add https://github.com/MANR255926/GARAGE --skill paper-manr255926

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building UIs with the Paper design style often lack consistent, implementation-ready guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component rules. This Skill turns Paper's design tokens and foundations into concrete, testable design-system documentation. ## Core Features & Use Cases - Token-Driven Guidance: Anchors every rule to Paper's defined color, typography, and spacing tokens (e.g., primary #111111, Roboto/Montserrat/PT Mono fonts, 4/8/12/16/24/32 spacing scale). - Component-Level Rules: Produces component anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior specifications. - Accessibility Acceptance Criteria: Generates WCAG 2.2 AA-aligned, testable requirements plus anti-patterns, migration notes, and a QA checklist for code review. - Use Case: A designer-engineer pair documenting a new button component can generate complete guidance covering states, keyboard interaction, token usage, and accessibility criteria in one pass. ## Quick Start Use the paper skill to write design-system guidelines for a card component following the Paper design style.

Frequently Asked Questions about paper

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

FAQPage Schema
How do I write design system guidelines for a new component?▼

Start by restating the design intent, then define tokens and foundational constraints before component rules. Specify anatomy, variants, states, and interaction behavior, and finish with accessibility acceptance criteria and a QA checklist for code review.

What design tokens does the Paper design style use?▼

Paper uses primary #111111, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626 colors. Typography uses Roboto, Montserrat, and PT Mono on a 14/16/18/24/32/40 scale, with a 4/8/12/16/24/32 spacing scale.

How do I make component accessibility requirements testable?▼

Anchor each accessibility statement to a measurable criterion, such as WCAG 2.2 AA contrast ratios, visible focus states, and keyboard-first interaction. Avoid ambiguous adjectives and pair every rule with a token, threshold, or concrete example.

Which component states should design guidelines always define?▼

Guidelines should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. They should also describe keyboard, pointer, and touch interaction behavior plus edge cases like long labels and empty states.

When should I prioritize accessibility over visual design choices?▼

Whenever a conflict arises between aesthetics and accessibility, accessibility takes priority. Flag the conflict explicitly, then resolve it in favor of testable accessibility requirements such as contrast and focus visibility.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
eleva-labseleva-labs

review-code

Provides a structured checklist for frontend code reviews.

Official
Basic
aesthezelaesthezel
8

accessibility

Audit web content for WCAG 2.2 compliance and generate improvement suggestions.

Community
Advanced
sevenbelowllcsevenbelowllc

tailwind-design-system

Build scalable design systems with Tailwind CSS v4 and CVA.

Official
Advanced