[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92238":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":28,"readmeContent":29,"aiSummary":30,"trendingCount":15,"starSnapshotCount":15,"syncStatus":31,"lastSyncTime":32,"discoverSource":33},92238,"ai-website-cloner","UHolli\u002Fai-website-cloner","UHolli","AI website cloner for rebuilding live websites with AI coding agents","",null,"TypeScript",156,1165,82,0,4,49.6,"MIT License",false,"master",true,[23,24,5,25,26,27],"agent-cloner","ai-agent","coding-agent","website-agent-cloner","website-cloner","2026-07-22 04:02:05","# Website Cloner — Next.js Agent Template\n\nA production-oriented starter for rebuilding live websites as typed Next.js applications with AI coding agents. The template ships a strict TypeScript toolchain, optional Redis-backed session persistence, and multi-platform agent skills so `\u002Fclone-website` workflows stay reproducible across teams.\n\n> **Start from your own copy.** Use GitHub **Use this template** to create a separate repository. Do not commit generated clone output back to this upstream template.\n\n---\n\n## Table of contents\n\n- [Why this template](#why-this-template)\n- [System architecture](#system-architecture)\n- [Clone workflow](#clone-workflow)\n- [Features](#features)\n- [Requirements](#requirements)\n- [Installation](#installation)\n- [Configuration](#configuration)\n- [Development](#development)\n- [Testing](#testing)\n- [Project structure](#project-structure)\n- [Troubleshooting](#troubleshooting)\n- [Contributing](#contributing)\n- [FAQ](#faq)\n- [License](#license)\n\n---\n\n## Why this template\n\nMost website rebuilds fail in the handoff between design extraction and component implementation. This repository standardizes that boundary:\n\n| Concern | Approach |\n|---------|----------|\n| Agent instructions | Single source in `AGENTS.md`, synced to 10+ platforms |\n| Design fidelity | Component specs with computed CSS values in `docs\u002Fresearch\u002F` |\n| Runtime quality | Strict TypeScript, ESLint, Vitest, and CI validation |\n| Session continuity | Optional Redis cache for multi-step clone pipelines |\n| Deployment | Standalone Next.js output with Docker Compose |\n\n---\n\n## System architecture\n\n```mermaid\nflowchart TB\n  subgraph agents [AI Coding Agents]\n    CC[Claude Code]\n    CX[Codex \u002F Cursor \u002F Copilot]\n    Others[Gemini \u002F Windsurf \u002F ...]\n  end\n\n  subgraph template [Template Repository]\n    SKILL[\"\u002Fclone-website skill\"]\n    AGENTS[AGENTS.md rules]\n    APP[Next.js App Router]\n    CACHE[Cache layer]\n    API[\"\u002Fapi\u002Fcache\u002F*\"]\n  end\n\n  subgraph persistence [Optional Persistence]\n    MEM[(In-memory store)]\n    REDIS[(Redis)]\n  end\n\n  subgraph output [Generated Clone]\n    COMP[React components]\n    ASSETS[public\u002Fimages + seo]\n    SPECS[docs\u002Fresearch\u002Fcomponents]\n  end\n\n  agents --> SKILL\n  SKILL --> AGENTS\n  AGENTS --> APP\n  APP --> API\n  API --> CACHE\n  CACHE --> MEM\n  CACHE --> REDIS\n  SKILL --> SPECS\n  SPECS --> COMP\n  SKILL --> ASSETS\n```\n\n### Cache layer\n\n```mermaid\nsequenceDiagram\n  participant Agent\n  participant API as \u002Fapi\u002Fcache\u002Fsessions\n  participant Service as CacheService\n  participant Backend as Memory or Redis\n\n  Agent->>API: POST session metadata\n  API->>Service: saveCloneSession()\n  Service->>Backend: SET session:{id}\n  Backend-->>Service: OK\n  Service-->>API: session record\n  API-->>Agent: 201 Created\n\n  Agent->>API: GET ?id=session-1\n  API->>Service: getCloneSession()\n  Service->>Backend: GET session:{id}\n  Backend-->>Service: JSON payload\n  Service-->>API: CloneSessionRecord\n  API-->>Agent: 200 OK\n```\n\n---\n\n## Clone workflow\n\n```mermaid\nflowchart LR\n  A[Reconnaissance] --> B[Foundation]\n  B --> C[Component specs]\n  C --> D[Parallel builders]\n  D --> E[Assembly and QA]\n\n  A --- A1[Screenshots + tokens]\n  B --- B1[Fonts, globals, assets]\n  C --- C1[docs\u002Fresearch\u002Fcomponents]\n  D --- D1[Git worktrees per section]\n  E --- E1[Visual diff + merge]\n```\n\nRun inside your agent:\n\n```text\n\u002Fclone-website https:\u002F\u002Fexample.com\n```\n\nPhases are defined in `.claude\u002Fskills\u002Fclone-website\u002FSKILL.md` and propagated to other platforms via `npm run sync:skills`.\n\n---\n\n## Features\n\n- **Strict TypeScript** — `noUnusedLocals`, no `allowJs`, separate configs for app, scripts, and tests\n- **Optional Redis persistence** — connection manager with retry, graceful shutdown, and typed config\n- **In-memory fallback** — zero external services required for local development\n- **Cache HTTP API** — health probe and clone-session CRUD at `\u002Fapi\u002Fcache\u002F*`\n- **Multi-platform skills** — one skill source, nine generated platform targets\n- **Docker Compose stack** — app, dev, and Redis services with health checks\n- **CI pipeline** — lint, typecheck, test, and build on every push\n\n---\n\n## Requirements\n\n| Tool | Version |\n|------|---------|\n| Node.js | 24+ (see `.nvmrc`) |\n| npm | 10+ |\n| Redis | 7+ (optional, via Docker Compose) |\n| AI agent | Claude Code recommended; see `AGENTS.md` |\n\n---\n\n## Installation\n\n```bash\n# 1. Create your repository from the GitHub template UI\n\n# 2. Clone your copy\ngit clone https:\u002F\u002Fgithub.com\u002FYOUR-ORG\u002FYOUR-REPO.git\ncd YOUR-REPO\n\n# 3. Install dependencies (lockfile is local-only)\nnpm install\n\n# 4. Copy environment defaults\ncp .env.example .env\n\n# 5. Start the dev server\nnpm run dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000). The placeholder page prompts you to run `\u002Fclone-website`.\n\n### Docker\n\n```bash\n# Production-like container\ndocker compose up app --build\n\n# Dev container with bind mount (port 3001 by default)\ndocker compose up dev --build\n\n# Enable Redis-backed cache\nREDIS_ENABLED=true docker compose up app redis --build\n```\n\n---\n\n## Configuration\n\nEnvironment variables (see `.env.example`):\n\n| Variable | Default | Description |\n|----------|---------|-------------|\n| `LOG_LEVEL` | `info` | Application log level (`debug` … `error`) |\n| `REDIS_ENABLED` | `false` | Use Redis instead of in-memory cache |\n| `REDIS_URL` | `redis:\u002F\u002F127.0.0.1:6379` | Redis connection URL |\n| `REDIS_KEY_PREFIX` | `website-cloner:` | Namespace for cache keys |\n| `REDIS_CONNECT_TIMEOUT_MS` | `10000` | Connection timeout |\n| `REDIS_MAX_RETRIES` | `5` | Reconnect attempts |\n| `REDIS_DEFAULT_TTL_SECONDS` | `86400` | Default entry TTL (24 h) |\n| `PORT` | `3000` | Production container port mapping |\n| `DEV_PORT` | `3001` | Dev container port mapping |\n\n### Cache API examples\n\n```bash\n# Health check\ncurl http:\u002F\u002Flocalhost:3000\u002Fapi\u002Fcache\u002Fstatus\n\n# Save clone session metadata\ncurl -X POST http:\u002F\u002Flocalhost:3000\u002Fapi\u002Fcache\u002Fsessions \\\n  -H \"Content-Type: application\u002Fjson\" \\\n  -d '{\"session\":{\"id\":\"demo\",\"targetUrl\":\"https:\u002F\u002Fexample.com\",\"status\":\"pending\",\"createdAt\":\"2026-01-01T00:00:00.000Z\",\"updatedAt\":\"2026-01-01T00:00:00.000Z\"}}'\n\n# Load session\ncurl \"http:\u002F\u002Flocalhost:3000\u002Fapi\u002Fcache\u002Fsessions?id=demo\"\n```\n\n---\n\n## Development\n\n| Command | Description |\n|---------|-------------|\n| `npm run dev` | Next.js development server |\n| `npm run build` | Production build (standalone) |\n| `npm run start` | Serve production build |\n| `npm run lint` | ESLint across app, scripts, and tests |\n| `npm run typecheck` | TypeScript for app, scripts, and tests |\n| `npm run test` | Vitest unit tests |\n| `npm run validate` | lint + typecheck + test + build |\n| `npm run sync:skills` | Regenerate platform clone-website files |\n| `npm run sync:agents` | Regenerate platform agent rule files |\n\n### Sync workflow\n\n| Source of truth | Generated targets | Command |\n|-----------------|-------------------|---------|\n| `AGENTS.md` | Copilot, Cline, Continue, Amazon Q | `npm run sync:agents` |\n| `.claude\u002Fskills\u002Fclone-website\u002FSKILL.md` | Codex, Cursor, Gemini, … | `npm run sync:skills` |\n\nInternal audit notes: [`docs\u002Finternal\u002FAUDIT.md`](docs\u002Finternal\u002FAUDIT.md).\n\n---\n\n## Testing\n\nTests live under `tests\u002F` and run with Vitest:\n\n```bash\nnpm test           # single run\nnpm run test:watch # watch mode\n```\n\nCoverage includes:\n\n- Environment configuration parsing\n- In-memory cache TTL and CRUD behavior\n- Redis store operations (mocked client)\n- Clone session helper functions\n\nCI executes the same suite on Node 24 for every pull request.\n\n---\n\n## Project structure\n\n```\n.\n├── src\u002F\n│   ├── app\u002F                 # Next.js routes and API handlers\n│   │   └── api\u002Fcache\u002F       # Cache health + session endpoints\n│   ├── components\u002Fui\u002F       # shadcn\u002Fui primitives\n│   ├── hooks\u002F               # Shared React hooks (scaffold)\n│   ├── lib\u002F\n│   │   ├── cache\u002F           # Memory + Redis cache backends\n│   │   ├── config\u002F          # Typed environment configuration\n│   │   ├── errors\u002F          # Application error types\n│   │   └── logger\u002F          # Structured logging utility\n│   └── types\u002F               # Shared TypeScript interfaces\n├── tests\u002Fcache\u002F             # Vitest unit tests\n├── scripts\u002F                 # TypeScript build\u002Fsync tooling\n├── docs\u002F\n│   ├── internal\u002F            # Engineering audit notes\n│   └── research\u002F            # Agent extraction output (generated)\n├── .claude\u002Fskills\u002F          # Canonical clone-website skill\n├── docker-compose.yml       # app + dev + redis services\n├── vitest.config.ts\n├── tsconfig.json            # App compiler config\n├── tsconfig.scripts.json    # Scripts compiler config\n└── tsconfig.test.json       # Test compiler config\n```\n\n**Design decisions**\n\n- `src\u002Flib\u002Fcache\u002F` isolates persistence from API routes so agents can reuse cache logic in scripts.\n- `tests\u002F` is top-level (not colocated) to keep production bundles lean.\n- Lockfiles are intentionally gitignored; CI uses `npm install`.\n\n---\n\n## Troubleshooting\n\n| Symptom | Likely cause | Fix |\n|---------|--------------|-----|\n| `Redis is disabled` API error | `REDIS_ENABLED=false` | Set `REDIS_ENABLED=true` and start Redis |\n| Cache ping returns 503 | Redis unreachable | Check `REDIS_URL`, run `docker compose up redis` |\n| `Session-store bridge not found` (legacy docs) | Outdated instructions | Use `\u002Fapi\u002Fcache\u002Fstatus` instead |\n| Typecheck fails on scripts | Wrong working directory | Run commands from repository root |\n| ESLint ignores tests | Stale config | Ensure `eslint .` includes `tests\u002F` |\n| Docker healthcheck fails | App still compiling | Increase `start_period` in compose file |\n| Agent cannot find skill | Platform copy stale | Run `npm run sync:skills` |\n\n---\n\n## Contributing\n\n1. Fork the template and create a feature branch.\n2. Run `npm install && npm run validate` before opening a PR.\n3. Keep commits focused; avoid unrelated refactors.\n4. Update `.env.example` when adding configuration keys.\n5. Regenerate platform files if you edit `AGENTS.md` or the clone skill.\n\nPull requests should include a test plan listing commands run and any manual verification steps.\n\n---\n\n## FAQ\n\n**Do I need Redis?**  \nNo. The default in-memory backend works for single-machine agent runs. Enable Redis when multiple agents or CI runners share clone session state.\n\n**Can I use this without Claude Code?**  \nYes. Run `npm run sync:skills` after editing the canonical skill. Most agents read `AGENTS.md` or their platform-specific copy automatically.\n\n**Will this copy any website automatically?**  \nNo. The template provides scaffolding and agent instructions. A coding agent still performs extraction, spec writing, and component generation.\n\n**Is scraping always legal?**  \nNo. Verify ownership, licensing, and target site terms before cloning. See the ethical use section in `AGENTS.md`.\n\n**Why is `package-lock.json` ignored?**  \nThis template optimizes for fork-level dependency resolution. Generate the lockfile locally with `npm install`.\n\n---\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n","这是一个基于AI编码代理的网站克隆工具，用于将线上网站自动重建为类型安全的Next.js应用。核心功能包括：通过多平台AI代理（如Claude、Codex、Gemini等）执行\u002Fclone-website工作流；严格TypeScript工具链保障代码质量；支持Redis或内存缓存实现多步克隆会话持久化；自动生成React组件、静态资源及带计算CSS值的组件规范文档。适用于前端团队快速重构遗留网站、生成可维护的现代化站点副本，或作为AI驱动网页重建的标准化开发模板。",2,"2026-07-08 04:29:55","CREATED_QUERY"]