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
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.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.