{"id":51368766,"url":"https://github.com/acentrist/web-clone-skills","last_synced_at":"2026-07-03T04:03:49.388Z","repository":{"id":361377302,"uuid":"1254191780","full_name":"acentrist/web-clone-skills","owner":"acentrist","description":"Skill package for cloning single public webpages into local Vite React Tailwind apps with Playwright capture, asset mirroring, and visual verification for Codex, Claude Code, and Gemini.","archived":false,"fork":false,"pushed_at":"2026-05-30T10:36:23.000Z","size":15880,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-30T12:09:34.883Z","etag":null,"topics":["agent-skills","claude-code","clone-ui","clone-website","codex","gemini-cli","skills","ui"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acentrist.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-30T08:53:56.000Z","updated_at":"2026-05-30T10:36:27.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/acentrist/web-clone-skills","commit_stats":null,"previous_names":["acentrist/web-clone-skills"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/acentrist/web-clone-skills","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acentrist%2Fweb-clone-skills","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acentrist%2Fweb-clone-skills/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acentrist%2Fweb-clone-skills/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acentrist%2Fweb-clone-skills/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acentrist","download_url":"https://codeload.github.com/acentrist/web-clone-skills/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acentrist%2Fweb-clone-skills/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35071464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-03T02:00:05.635Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["agent-skills","claude-code","clone-ui","clone-website","codex","gemini-cli","skills","ui"],"created_at":"2026-07-03T04:03:49.034Z","updated_at":"2026-07-03T04:03:49.378Z","avatar_url":"https://github.com/acentrist.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Skills: Web Clone\n\nSkill package for cloning single public webpages into local Vite React Tailwind apps with Playwright capture, asset mirroring, and visual verification for Codex, Claude Code, and Gemini.\n\nThe workflow captures page structure, styles, assets, favicons, screenshots, and motion hints with Playwright; creates section contracts; assembles a local app; and verifies the result across desktop, tablet, and mobile viewports.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/demo.gif\" alt=\"Web Clone demo\" width=\"100%\"\u003e\n\u003c/p\u003e\n\n## Repository Overview\n\nThe package currently provides one skill:\n\n- `web-clone/`\n  - `SKILL.md`: core workflow, completion rules, and CLI usage\n  - `scripts/`: Node.js tools for capture, contract creation, app assembly, and verification\n  - `references/`: code generation and fidelity rules\n  - `agents/openai.yaml`: optional Codex UI metadata\n  - `package.json` / `package-lock.json`: runtime dependencies for the skill scripts\n  - `setup.sh`: convenience setup wrapper for npm dependencies and Playwright Chromium\n\nTypical use cases:\n\n- Cloning a single public webpage into a local Vite React Tailwind app\n- Capturing layout, CSS, assets, favicons, and motion hints for a page reconstruction task\n- Generating section contracts for component rebuilding\n- Verifying desktop, tablet, and mobile fidelity before considering a clone complete\n\n## Installation\n\nClone this package first, then run the copy commands from the cloned directory:\n\n```bash\ngit clone https://github.com/acentrist/web-clone-skills.git\ncd web-clone-skills\n```\n\nIf you already cloned it, run the install commands from that repository root. The path `./web-clone` must exist.\n\n### 1) Codex\n\nCopy the skill into `$CODEX_HOME/skills/`:\n\n```bash\nmkdir -p \"${CODEX_HOME:-$HOME/.codex}/skills\"\ncp -R web-clone \"${CODEX_HOME:-$HOME/.codex}/skills/\"\nsh \"${CODEX_HOME:-$HOME/.codex}/skills/web-clone/setup.sh\"\n```\n\nOr install from a public GitHub repository with `$skill-installer`:\n\n```text\n$skill-installer install https://github.com/acentrist/web-clone-skills/tree/main/web-clone\n```\n\nAfter GitHub URL installation, install the runtime dependencies:\n\n```bash\nsh \"${CODEX_HOME:-$HOME/.codex}/skills/web-clone/setup.sh\"\n```\n\nUsage example:\n\n```text\nUse $web-clone to clone https://www.example.com/ into a local Vite React Tailwind app.\n```\n\n### 2) CC (Claude Code)\n\nUse either a global or project-level installation.\n\nGlobal:\n\n```bash\nmkdir -p \"$HOME/.claude/skills\"\ncp -R web-clone \"$HOME/.claude/skills/\"\nsh \"$HOME/.claude/skills/web-clone/setup.sh\"\n```\n\nProject-level:\n\n```bash\nmkdir -p .claude/skills\ncp -R web-clone .claude/skills/\nsh .claude/skills/web-clone/setup.sh\n```\n\nIn prompts, explicitly request this skill, for example: `Please use the web-clone skill to clone https://www.example.com/`.\n\n### 3) Gemini\n\nCopy this skill into your Gemini skills directory:\n\n```bash\nmkdir -p \"$HOME/.gemini/skills\"\ncp -R web-clone \"$HOME/.gemini/skills/\"\nsh \"$HOME/.gemini/skills/web-clone/setup.sh\"\n```\n\nThen ask concrete cloning tasks in Gemini, for example: `Use the web-clone skill to clone https://www.example.com/`.\n\n## Notes\n\n- The runtime requires Node.js, npm, network access for the target page, and a Chromium runtime installed by Playwright.\n- Generated apps, captured HTML, screenshots, mirrored third-party assets, and verification reports are local run artifacts.\n- The default workflow writes local run artifacts under a host-named directory, for example `$HOME/web-clone-runs/example.com`.\n- The skill is scoped to one public page. It does not crawl whole sites, recreate backend behavior, bypass authentication, or provide rights to third-party content.\n\n## License\n\nThis project is licensed under the MIT License. See [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facentrist%2Fweb-clone-skills","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facentrist%2Fweb-clone-skills","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facentrist%2Fweb-clone-skills/lists"}