clone-website

$npx mdskill add JasonxzWen/harness-hub/clone-website

Clone a website for authorized reproduction purposes

  • Verify user's authority and intent to clone a specific website.
  • Use isolated workspace for extraction and reconstruction of assets.
  • Automatically inspect live page with browser automation tools.
  • Provide durable notes for implementation and verification.

SKILL.md

.github/skills/clone-websiteView on GitHub ↗
---
name: clone-website
description: "Load when the user explicitly asks to clone, reverse-engineer, or rebuild a website they own or are authorized to reproduce; do not load for generic redesign, inspiration, scraping, phishing, impersonation, or copying third-party brands."
argument-hint: "<authorized-url> [replacement-content-or-brief]"
user-invocable: true
license: MIT
metadata:
  source: "JCodesMore/ai-website-cloner-template clone-website skill"
  upstream_commit: "c9b4fea5b257370af339abedad727c8903490dac"
  license: "MIT"
  adaptation: "Safety-first Skill Hub wrapper; upstream workflow is summarized in references and host-specific platform metadata is excluded."
---

# Clone Website

Use this skill for explicit website reconstruction requests where the user has authority to reproduce the target page. Treat it as a side-effect-heavy workflow: it uses browser inspection, network access, local file writes, asset handling, and build validation.

## Required Gates

1. Confirm the user supplied a URL and a legitimate reproduction purpose. If ownership or permission is unclear, ask before continuing.
2. Use `assets/website-cloner` from this skill or an equivalent isolated app workspace. Do not run this inside an unrelated production app unless the user explicitly asks.
3. Inspect the live page with browser automation before building. If browser automation is unavailable, stop and report that the clone cannot be verified.
4. Write durable extraction notes before implementation: topology, visual tokens, interaction behavior, and component specs.
5. Replace third-party brand copy/assets with the user's requested content unless they explicitly own the original material.
6. Build and inspect the result before handoff. At minimum run the harness check command and capture one desktop screenshot.

## Default Scope

- Clone one URL at a time unless the user explicitly asks for multiple sites.
- Match layout, rhythm, typography scale, color mood, and interaction model.
- Do not copy logos, trademarks, proprietary images, tracking scripts, forms, accounts, or backend behavior.
- Prefer local/generated content and simple assets when the target is only a visual reference.
- Record gaps rather than guessing hidden behavior.

## Progressive Files

- Read `references/safety-and-permissions.md` before any external site clone.
- Read `references/extraction-checklist.md` during browser inspection.
- Read `references/upstream-workflow.md` when adapting the full upstream pipeline.
- Use `assets/component-spec-template.md` for section handoffs or research notes.

## Validation

For the local harness, run:

```bash
npm run check
```

When using a framework app, also run the nearest build/typecheck/lint commands. A clone that does not build or cannot be opened in a browser is not complete.

More from JasonxzWen/harness-hub

SkillDescription
agent-interaction-auditLoad when the user asks for private agent interaction audits from local Codex/Claude Code traces, task profiles, tool-call decisions, collaboration bottlenecks, prompt/rule or automation-log audits, closeout retrospectives, or evidence-backed Skill/project-rule/Eval/SOP/OKF improvements.
agent-reachLoad when a task needs read-only internet research or content retrieval through an already installed Agent Reach CLI; diagnose available backends first, never install, upgrade, authenticate, configure, or copy credentials on the user's behalf.
animation-vocabularyLoad when a user describes a Web animation or motion effect without knowing its name and needs the precise term or close alternatives; use only for naming, not design, implementation, or review.
apple-designLoad when a frontend task needs Apple-platform design guidance or physical, gesture-driven, velocity-aware, interruptible interaction; skip generic visual styling and use review-animations for report-only motion review.
beautiful-feishu-whiteboardLoad when creating or restyling a polished editable Feishu or Lark whiteboard, infographic, diagram, poster, or visual explainer; do not load for generic SVGs, static images, or other whiteboard platforms.
codebase-to-courseLoad when a user wants a source-backed interactive HTML course that explains how a codebase works; do not load for chat tutoring, repository review, articles, slide decks, or general browser artifacts.
context-guidanceFixture skill used to represent an additional standard skill context surface.
decision-uiLoad when Codex 即将要求用户在 2-3 个互斥方案中做真实决定、准备询问阻塞性澄清问题或需要确认高影响取舍;将选择转换为宿主原生可点击 UI,并在工具不可用时诚实文本回退。不要用于低风险实现细节、只有一个合理答案的问题、普通信息采集或不需要用户决策的完成汇报。
design-taste-frontendLoad when a task needs anti-template frontend visual direction, design-read calibration, or pre-flight critique for landing pages, portfolios, marketing pages, or redesigns; do not load for dashboards, data tables, multi-step product UI, routine frontend logic, HTML reports, slide decks, or generic code explanation.
effective-interactLoad when agent pauses to report relatively complex information needing Chinese-first clear complex communication, alignment, multi-option choice, status/incident, long-task fact ledgers, implementation plans, reviews, maps, explainers, evidence, risks, validation, handoff; choose plain text/Markdown/visual Markdown/HTML by decision cost; do not load merely because answer is long; skip trivial chat/bundled apps.