AI コーディングエージェントとの Next.js アプリケーションとして、ライブウェブサイトを再構築するための生産指向の始動機。 テンプレートは、厳格なTypeScriptツールチェーン、オプションのRedis-backedセッションの永続性、マルチプラットフォームのエージェントのスキルを出荷しているので、[/clone-website]] ワークフローは、チーム間で再現性を維持します。

自分のコピーから始めましょう。 GitHub **このテンプレートを使用して、別のリポジトリを作成します。 生成されたクローン出力をこの上流テンプレートにコミットしないでください。

お問い合わせ

コンテンツの表

• なぜこのテンプレート
• システムアーキテクチャ
• ワークフローのクローン化
• 特徴
• 条件
• インストール
• 構成
• 開発
• テスト
• プロジェクト構造
• トラブルシューティング
• 貢献
• よくある質問
• ライセンス

お問い合わせ

このテンプレートの理由

ほとんどのウェブサイトの再構築は、設計抽出とコンポーネントの実装の間のハンドオフに失敗します。 このリポジトリは、その境界を標準化します。

| お知らせ | アプローチ | お問い合わせ | エージェントの指示 | シングルソース AGENTS.md で、10以上のプラットフォームに同期 | | 【docs/research/のCSS値を計算した構成スペック | |ランタイム品質 | 厳格なタイプスクリプト・エスペント・ビテスト・CI検証 |

Website Cloner — Next.js Agent Template

A 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 /clone-website workflows stay reproducible across teams.

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.

---

Table of contents

• Why this template
• System architecture
• Clone workflow
• Features
• Requirements
• Installation
• Configuration
• Development
• Testing
• Project structure
• Troubleshooting
• Contributing
• FAQ
• License

---

Why this template

Most website rebuilds fail in the handoff between design extraction and component implementation. This repository standardizes that boundary:

---

System architecture

flowchart TB
  subgraph agents [AI Coding Agents]
    CC[Claude Code]
    CX[Codex / Cursor / Copilot]
    Others[Gemini / Windsurf / ...]
  end

  subgraph template [Template Repository]
    SKILL["/clone-website skill"]
    AGENTS[AGENTS.md rules]
    APP[Next.js App Router]
    CACHE[Cache layer]
    API["/api/cache/*"]
  end

  subgraph persistence [Optional Persistence]
    MEM[(In-memory store)]
    REDIS[(Redis)]
  end

  subgraph output [Generated Clone]
    COMP[React components]
    ASSETS[public/images + seo]
    SPECS[docs/research/components]
  end

  agents --> SKILL
  SKILL --> AGENTS
  AGENTS --> APP
  APP --> API
  API --> CACHE
  CACHE --> MEM
  CACHE --> REDIS
  SKILL --> SPECS
  SPECS --> COMP
  SKILL --> ASSETS

Cache layer

sequenceDiagram
  participant Agent
  participant API as /api/cache/sessions
  participant Service as CacheService
  participant Backend as Memory or Redis

  Agent->>API: POST session metadata
  API->>Service: saveCloneSession()
  Service->>Backend: SET session:{id}
  Backend-->>Service: OK
  Service-->>API: session record
  API-->>Agent: 201 Created

  Agent->>API: GET ?id=session-1
  API->>Service: getCloneSession()
  Service->>Backend: GET session:{id}
  Backend-->>Service: JSON payload
  Service-->>API: CloneSessionRecord
  API-->>Agent: 200 OK

---

Clone workflow