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.
npx skills add bergside/awesome-design-skills --skill paper -a claude-codeWhat 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-code2Manually: put the files in place
~/.claude/skills/paper/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/paper/
1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill paper -a codex2Manually: put the files in place
.agents/skills/paper/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill paper -a cursor2Manually: put the files in place
.cursor/skills/paper/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install bergside/awesome-design-skills paper2Manually: put the files in place
.github/skills/paper/SKILL.md1Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill paper -a gemini-cli2Platform CLI
gemini skills install https://github.com/bergside/awesome-design-skills --path skills/paperManually: put the files in place
.devin/skills/paper/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add bergside/awesome-design-skills --skill paper -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
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