clone-anywebsiteHigh-fidelity visual-first web rebuilding from design references. Screenshot-driven analysis, DOM interrogation for exact CSS values, asset inspection (WebGL...
Install via ClawdBot CLI:
clawdbot install solomonneas/clone-anywebsiteGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 10, 2026
A company wants to migrate their outdated, static HTML/CSS website to a modern React/Tailwind stack while preserving the exact visual design. Using this skill, they can take screenshots and extract precise CSS values to rebuild each section pixel-perfectly, ensuring brand consistency across the new tech stack.
A startup founder wants to study the visual design of successful SaaS landing pages to apply similar patterns to their own marketing site. By cloning the reference page, they can dissect the component structure, typography, and effects (like glassmorphism) to understand what makes the design effective.
A freelance designer receives a screenshot of a website a client likes but lacks the codebase. Using this skill, they can quickly scaffold a React/Tailwind prototype that visually matches the reference, speeding up iteration and approval cycles without starting from scratch.
A developer wants to refresh their personal portfolio with a unique visual style seen on a cutting-edge creative agency site. They use the skill to extract the exact color palette, gradient backgrounds, and scroll-triggered animations, then adapt the code to showcase their own work.
An enterprise product team is redesigning their dashboard to match a competitor's user-friendly interface. By cloning key screens (like the analytics overview or settings panel), they can quickly replicate the layout and component styling, then focus on integrating their own data and functionality.
Offer a service where businesses pay to have their existing websites converted into modern, component-based React/Tailwind code. Revenue is per project, based on complexity and number of pages. Ideal for agencies or freelancers targeting small to medium businesses.
Provide a recurring subscription service where in-house design teams submit references or competitor screenshots, and the team delivers cloned, clean, reusable components on a weekly or monthly basis. This reduces the time designers spend on CSS polish.
Create step-by-step tutorials and sell reusable 'clone kits' (Figmas, code snippets, extracted assets) for popular high-design websites. Each kit includes the cloned components, CSS tokens, and assets, sold individually or via a membership site.
💬 Integration Tip
Integrate by invoking the skill alongside Chrome DevTools MCP: use `take_screenshot` for visual grounding, then `evaluate_script` with the provided JS snippets to extract exact CSS values for fonts, shadows, and backgrounds.
Scored May 10, 2026
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Generate landing page content from PRD — hero section, features, A/B headline variants, CTA, and SEO meta tags. Use when user says "create landing page", "wr...
Scaffold a new presale service foundation (docs/config/plans/readiness) before coding. Use when starting a new presale automation service, rebuilding project...
Tailwind reference tool. Use when working with tailwind in frontend contexts.