Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add roedyrustam/vibes-plug --skill website-design-clonergit clone --depth 1 https://github.com/roedyrustam/vibes-plugWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/roedyrustam/vibes-plug/website-design-cloner)<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/website-design-cloner"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/website-design-cloner/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/roedyrustam/vibes-plug/website-design-cloner"><img src="https://agentmods.dev/badge/skills/roedyrustam/vibes-plug/website-design-cloner.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00129 | $0.03347 |
| Opus 5.5 | $0.00052 | $0.01339 |
| Sonnet 5.5 | $0.00026 | $0.00669 |
| Haiku 4.5 | $0.00013 | $0.00335 |
Grade A, and why
website-design-cloner scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 211 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Website Design Cloner & Reverse Engineering Expert (2026 Edition)
English
Orchestration & Integration
Connects and orchestrates with relevant domain skills:
modern-web-guidance: Evaluates modern CSS and HTML standards to replace deprecated target patterns during cloning.design-system-architect: Maps reverse-engineered palettes into semantic OKLCH tokens and surface container tiers.tailwind-expert: Translates target layout dimensions into modern Tailwind v4 utilities.visual-ui-auditor: Runs automated 20-point visual audits and screenshot diffing against the target URL.ui-ux-pro-max: Standardizes typography scales, optical tracking, and 60-30-10 color balance.anti-slop: Cleanses cloned components of div-soup wrappers and missing interactive states.brainstorming,zero-to-prod-orchestrator,session-memory-manager: Continuous lifecycle orchestration.
Description
website-design-cloner is an advanced URL-to-Code visual reverse engineering skill. It enables AI agents to inspect any target website URL, analyze its visual aesthetic, layout grid, CSS design tokens (OKLCH/HEX colors, typography system, container bounds, shadow tiers, border-radii), DOM structure, and interactive components, and synthesize production-ready code (Tailwind CSS v4, React 19, Next.js 15, HTML5/Vanilla CSS) to achieve a full 1:1 duplication.
Trigger Conditions
- Replicating or cloning a website layout, landing page, or web application directly from a target URL.
- Extracting design systems (color palettes, typography scales, container grids, component patterns) from a reference link.
- Re-creating complex UI components (Hero banners, Bento grids, navbar drawers, pricing tables, footers) based on live URLs.
- Auditing and reverse-engineering third-party website layouts for component scaffolding.
5-Step URL-to-Code Reverse Engineering Methodology
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago Changed · +12 lines b54f00996a9e
- 3d ago Changed · +1 lines cd419770c8a4
- 6d ago Changed 4d0d0884d50c
- 15d ago Changed 8eaa825619e5
- 17d ago Changed · +10 lines 76fcbb92bf85
- 20d ago Changed f15c8b5ce844
- 21d ago Changed · +7 lines 6dc9903007b5
- 23d ago Changed · -6 lines · +117 tokens per session eb971a07330e
- 25d ago Changed · +6 lines · -117 tokens per session 5f18c6c1eb08
- 1mo ago First seen · 181 lines · 129 tokens per session scan A eec4e2338f6a
website-design-cloner is a skill published in the GitHub repository roedyrustam/vibes-plug (113 stars, last pushed today), licensed MIT. It adds 129 tokens to every session and 3,347 once invoked, about $0.0005 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
shadcnui
Expert shadcn/ui assistance covering Radix UI primitives, Tailwind CSS styling, copy-paste architecture, and accessibility. Use when building modern React component systems and accessible design systems.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
antigravity-design-expert
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts. Use when building complex…
shadcn-ui
Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons…
frontend-ui-engineering
Builds production-quality, accessible, responsive user-facing UIs. Use when building or modifying interfaces and pages, creating components, implementing layouts, meeting WCAG accessibility requirements, managing state, or when the output needs to look and feel production-quality rather than AI-generated.