Skills Guide

Paper UI Parity Check

VerifiedCaution

Use when comparing or recreating UI in Paper MCP and fixing parity issues against the live site.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
7/22/2026
Claude CodeCursor
#ui-parity#paper-mcp#computed-styles#browser-verification#tailwind

Recommended for

Backend developerClaude CodeCode reviewFrontend developerCursorFullstack developer

Automated summary

Guides recreating or auditing a UI in Paper MCP by comparing computed styles from the live rendered site instead of the source files.

Strengths

  • Treats the rendered DOM as source of truth and keeps Astro/TSX files as secondary references
  • Requires capturing getComputedStyle() and checking the parent chain before drawing conclusions
  • Warns about Tailwind pitfalls where a utility name does not match the theme token
  • Verification loop with screenshots after every meaningful Paper change

Limitations

  • Assumes Paper MCP and agent-browser eval are available in the environment
  • Gives no procedure for pages that cannot be rendered or reached live
  • Highly specific to this repo and its Astro/React stack
When to use it

Use when rebuilding a page in Paper MCP or chasing a visual discrepancy between the Paper design and the live rendered site.

When not to use it

Avoid for greenfield design work with no live reference, or for anything outside Paper MCP and a browser.

Security analysis

Caution
Quality score84/100

The skill is purely procedural documentation: it tells the agent to inspect a live page, read computed styles/DOM, recreate values in Paper, and verify with screenshots. There are no destructive commands, no curl|sh, no secret/token exfiltration, no obfuscated payloads, and no instructions to disable safety controls. The only notable capability is browser-based `eval` plus live-site access, which is a powerful tool used for a legitimate UI-audit purpose, hence 'caution' rather than 'safe' or 'risky'.

Findings
  • •Directs the agent to run `agent-browser eval` (arbitrary JS execution in a live browser session) and read `outerHTML` from the rendered site; usage described is read-only inspection, but the tool itself is powerful and could be repurposed if the skill is modified or prompt-injected.
  • •Involves live network access to the rendered site for screenshots and DOM capture — legitimate here, but a network-capable workflow.
How this analysis is made

Examples

Fix spacing parity
Compare the pricing section of the live site with my Paper frame and fix the spacing and alignment so it matches the rendered page.
Explain computed color
The hero background looks off in Paper. Check the live rendered element's computed color with agent-browser eval and correct it.
Audit a component
Audit the header component for parity against the live site, verifying typography, clipping, and color before declaring it done.

name: paper-parity description: Use when comparing or recreating this repo's UI in Paper MCP and fixing parity issues against the live rendered site.

paper-parity

Use this skill whenever working with Paper MCP to recreate, compare, or audit UI from this repo.

Goal

Match the live rendered website in Paper as closely as possible. The live DOM is the source of truth for visual output. Source files are secondary references for ownership, structure, and intent.

Workflow

  1. Inspect the live rendered page first.
  2. Use agent-browser eval to capture getComputedStyle() for the actual visible element.
  3. Check the parent chain and rendered wrappers before inferring where a style comes from.
  4. Use outerHTML when needed to confirm final DOM structure.
  5. Recreate the final rendered values in Paper, not guessed source-level values.
  6. Use *.astro, *.tsx, and *.ts files only after the DOM check to clarify ownership and structure.
  7. After each meaningful Paper change, take a screenshot and compare again.

DOM Rules

  • Do not infer selector paths from Astro or React source alone when layout or styling depends on the final DOM.
  • Parent-driven selectors, arbitrary variants, descendant combinators, astro-island wrappers, slots, and scoped styles can all change where a style is actually applied.
  • If a style appears to belong to a component, verify whether it is really coming from a parent wrapper in the rendered DOM.

Color Rules

  • For Tailwind utilities, use the computed color from the browser, not the utility name.
  • Utilities like bg-*-100 may resolve to generated tints and not the base theme token.
  • Do not collapse a utility name to a guessed token value without checking computed styles first.

Verification

  • Before declaring parity, confirm spacing, typography, alignment, clipping, and color against the live render.
  • Screenshots show what is wrong; computed styles explain why.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/paper-ui-parity-check-mrwakfw4' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/paper-ui-parity-check-mrwakfw4/download' --output '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md.part' && mv '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md.part' '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && test -s '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/paper-parity' && cp -R '.skill-downloads/paper-ui-parity-check-mrwakfw4' '.claude/skills/paper-parity'

Cursor
test -f '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && test -s '.skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/paper-parity' && cp -R '.skill-downloads/paper-ui-parity-check-mrwakfw4' '.cursor/skills/paper-parity'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/paper-ui-parity-check-mrwakfw4'

openskills read 'paper-ui-parity-check-mrwakfw4'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/paper-ui-parity-check-mrwakfw4/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot