Skip to main content
skill CX Codex

paper — Claude Code skill: what it does, how to install

Generates Paper Design UI guidelines with tactile print styling, strict typography tokens, and WCAG 2.2 AA accessibility rules.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add bergside/awesome-design-skills --skill paper -a claude-code
Open on GitHub

What paper does

This skill instructs the agent to produce design system documentation following the Paper Design style. It locks in specific foundations: a spacing scale of 4/8/12/16/24/32, typographic scales from 14 to 40, and typefaces Roboto, Montserrat, and PT Mono. Palette tokens define #111111 as primary and #FFFFFF as surface.

Every component specification follows a strict output layout. The agent defines anatomy, variants, responsive behavior, and interaction states. Each guide ends with prohibited anti-patterns and a QA checklist ready for code review.

Accessibility rules strictly enforce WCAG 2.2 AA with visible focus indicators. Whenever visual styling conflicts with accessible contrast, the skill forces accessibility over aesthetics.

What it helps with

  • document component states and interaction behaviors
  • standardize spacing and typography scales across UI components
  • generate QA checklists for accessible design reviews
  • enforce WCAG 2.2 AA contrast and keyboard navigation rules

Example prompts for the agent

  • Generate design guidelines for a form input using Paper style
  • Create a QA checklist and component anatomy for a modal dialog
  • Specify states and spacing tokens for a primary action button

How to install paper

1Skills CLI (Vercel)

npx skills add bergside/awesome-design-skills --skill paper -a claude-code

2Manually: put the files in place

~/.claude/skills/paper/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/paper/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about paper

How to install paper in Claude Code?

Run npx skills add bergside/awesome-design-skills --skill paper -a claude-code in your terminal. The skill file is placed at ~/.claude/skills/paper/SKILL.md.

What does the paper skill do?

It guides coding agents to author consistent design system specifications, complete with token scales, interaction states, and accessibility criteria.

Which fonts and tokens does Paper Design use?

The style uses Roboto as the primary font, Montserrat for display headings, and PT Mono for monospace. Spacing follows increments of 4, 8, 12, 16, 24, and 32.

Source text

SKILL.md · MIT
---
name: paper
description: Paper-textured, print-inspired design with minimal colors, clean serif/sans typography, and tactile surface qualities.
license: MIT
metadata:
  author: typeui.sh
---

<!-- TYPEUI_SH_MANAGED_START -->
# Paper Design Design System Skill (Universal)

## Mission
You are an expert design-system guideline author for Paper Design.
Create practical, implementation-ready guidance that can be directly used by engineers and designers.

## Brand
Paper design style

## Style Foundations
- Visual style: minimal, clean
- Typography scale: 14/16/18/24/32/40 | Fonts: primary=Roboto, display=Montserrat, mono=PT Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#111111, secondary=#8B5CF6, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- Spacing scale: 4/8/12/16/24/32


## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states

## Writing Tone
concise, confident, helpful

## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit

## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels

## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.

## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
2. Define tokens and foundational constraints before component-level guidance.
3. Specify component anatomy, states, variants, and interaction behavior.
4. Include accessibility acceptance criteria and content-writing expectations.
5. Add anti-patterns and migration notes for existing inconsistent UI.
6. End with a QA checklist that can be executed in code review.

## Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist

## Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).

## Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

## Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.

<!-- TYPEUI_SH_MANAGED_END -->

© typeui.sh · MIT · bergside/awesome-design-skills

Similar skills

Everything for Design →

From the same set67

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor