Pixel Perfect Web Replica

Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare screenshots; and list replaceable resources for rebranding or customization.

14 stars 4 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add Core-Mate/Pixel-Perfect-Web-Replica --skill pixel-perfect-web-replica

Manual install

git clone --depth 1 https://github.com/Core-Mate/Pixel-Perfect-Web-Replica.git /tmp/Pixel-Perfect-Web-Replica
mkdir -p ~/.claude/skills
cp -r /tmp/Pixel-Perfect-Web-Replica/. ~/.claude/skills/pixel-perfect-web-replica

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Pixel-Perfect Web Replica

## Core Goal

Build a local sandbox replica of a public frontend page for implementation study. Preserve the page's visible structure, CSS behavior, media assets, typography, scroll effects, and lightweight interactions as closely as legal public access allows. Do not perform unauthorized login, scraping of private data, bypassing, exploit testing, or destructive scanning.

## Default Workflow

1. **Scope the target**
   - Confirm the target URL and intended local output folder.
   - Treat public HTML/CSS/JS/media as the source of truth.
   - If the page requires auth, stop at the public surface unless the user provides authorized local artifacts.

2. **Collect public evidence**
   - Fetch HTML and headers with `curl -L` and `curl -I -L`.
   - Capture desktop and mobile screenshots of the original page before editing.
   - Extract text, links, resources, meta tags, and obvious runtime behavior.

3. **Mirror static resources**
   - Prefer the bundled script:
     ```bash
     python3 <skill_dir>/scripts/mirror_public_page.py <url> <output_dir>
     ```
   - The script downloads the HTML, same-origin referenced assets, CSS `url(...)` assets, favicon/manifest assets when discoverable, and writes resource inventories.
   - If the site uses external build chunks, CSS files, or JS files, inspect and mirror their nested `url(...)` dependencies too.

4. **Make it run locally**

Read the full skill on GitHub

Details

Skill name: pixel-perfect-web-replica
Repository: Core-Mate/Pixel-Perfect-Web-Replica
License: MIT
Repo updated: 9 May 2026

FAQ

What does the Pixel Perfect Web Replica skill do?

How do I install the Pixel Perfect Web Replica skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Core-Mate/Pixel-Perfect-Web-Replica --skill pixel-perfect-web-replica. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Pixel Perfect Web Replica popular?

It lives in Core-Mate/Pixel-Perfect-Web-Replica, which has 14 GitHub stars and 4 forks.

Related skills

Audhd UI Guide

Greyland-Fireworks/audhd-ui-guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

Frontend & Design

Itqan

saleh-alhaddad/itqan-engineering

The full software-engineering lifecycle as one suite — DISCOVER, DEFINE, PLAN, BUILD, VERIFY, REVIEW, SHIP — with approval gates before code, test-first builds, evidence before "done", and resumable multi-session work. Routes to 12 sub-skills covering any stack, plus feature discovery, security audit, UI/UX craft, and learning roadmaps.

Frontend & DesignIn 1 list

Arabic UI

JKc66/arabic-ui

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical syntactic flow, eliminates translationese (العرنجية), applies Al-Jahiz's density principle, and handles Arabic pluralization and bidirectional layout.

Frontend & Design

CSS Animation

neonwatty/css-animation-skill

Generates self-contained HTML/CSS animations of app features for walkthroughs, demos, and onboarding. Researches the target app via Chrome, interviews the user, generates a structured brief and animation HTML file, then enters an iterative freeze-inspect-feedback review loop until the user approves. Use when the user says "css animation", "animate this feature", "create a css walkthrough", "animation walkthrough", or wants to create a CSS-based visual demo of an app feature.

Frontend & Design

Design Feel Like Your Own Product

Tiannanzhao/design-feel-like-your-own-product

Learn and replicate a designer's style from Figma files to create new components that feel authentic to their design system. Use this skill whenever a user shares a Figma file and wants to create new components, plugins, or UI elements that match an existing design style — even if they don't explicitly say "learn my style". Trigger when users mention Figma files, design systems, "make it look like my design", "match the style", or ask to extend an existing UI.

Frontend & Design

Build for Good UX

alper-dev/build-for-good-ux-skill

Audit, build, or refactor frontend UI components, pages, forms, and interactive flows to implement complete UX states (loading, success, error, empty), resilient async degradation, accessible button interactions, error recovery, Fitts's Law mobile touch targets, and choice simplification. Use when creating or reviewing user-facing interfaces, form validations, multi-section dashboards, checkout flows, or gesture-sensitive mobile screens.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.