# How to Add Support for a New AI Coding Agent to the AI Website Cloner Template

> Easily add a new AI coding agent to the AI Website Cloner Template. Follow our guide to update AGIANTS.md, master skill definitions, and sync scripts for seamless integration.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-06-23

---

**To add support for a new AI coding agent, create a pointer file referencing [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), copy the master skill definition from [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) to the agent's expected location, and extend the sync scripts to automate regeneration across the repository.**

The JCodesMore/ai-website-cloner-template provides a Next.js 16 scaffold that enables AI agents to reverse-engineer public websites into production-ready applications. Adding support for a new AI coding agent requires bridging the template's centralized instruction architecture with the specific file format expectations of your target platform. This integration ensures the agent can execute the standardized multi-phase pipeline using the single source of truth defined in the repository.

## Understanding the Template Architecture

The template employs a three-layer architecture that separates core scaffolding from agent-specific orchestration. Understanding these layers is essential before you add support for a new AI coding agent.

**Core scaffolding** provides the base Next.js 16 application with shadcn/ui, Tailwind CSS v4, and TypeScript configured in folders like `src/app`, `src/components`, and `src/lib`.

**Agent orchestration** uses [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) as the single source of truth, containing the multi-phase pipeline definition (recon, foundation, component specs, parallel build, assembly, and QA) and the critical instructions for running the `/clone-website` skill.

**Platform-specific glue** consists of pointer files and sync scripts that adapt the centralized instructions for each supported agent. The [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) bash script and `scripts/sync-skills.mjs` Node.js script automatically propagate changes from [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) and [`SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/SKILL.md) to locations where specific agents can read them.

## Step-by-Step: Adding a New AI Coding Agent

Follow these five steps to integrate a new agent into the template ecosystem.

### 1. Create a Pointer File

Add a file in the repository root that directs the new agent to the canonical instructions. For agents that read markdown natively, create a file containing `@AGENTS.md`. For agents requiring concrete configuration files, create a platform-specific file such as [`myagent-config.yaml`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/myagent-config.yaml).

This pointer tells the agent where the master instructions live, ensuring it always references the most current version of the pipeline definition.

### 2. Add a Skill Definition

Copy the master skill definition from [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) into the location expected by the new agent, or create a symlink to it. This file contains the command signature (`/clone-website <url…>`) and the detailed step-by-step workflow for website cloning.

The skill must be discoverable by the agent's command interface so users can invoke the cloning pipeline directly.

### 3. Update the Sync Scripts

Extend [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) to generate the new pointer file automatically, or add your agent to the script's "Agents that DON'T need generated files" list if it reads [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) directly. If the new agent uses a proprietary skill format, add a case to `scripts/sync-skills.mjs` to copy the master [`SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/SKILL.md) content to the appropriate location during regeneration.

These scripts maintain consistency across all supported platforms by deriving files from the single source of truth.

### 4. Run the Regeneration

Execute the sync scripts to populate the new agent's files with current content:

```bash
bash scripts/sync-agent-rules.sh
node scripts/sync-skills.mjs

```

This step guarantees that every agent sees identical, up-to-date instructions and skill definitions.

### 5. Verify the Integration

Start the new agent and run `/clone-website https://example.com` to confirm the pipeline executes through all phases (recon → spec → parallel build) without errors. This end-to-end test validates that the agent correctly interprets the instructions and can interact with the template's scaffolding.

## Practical Example: Adding SuperCoder

Here is a concrete implementation for a fictional agent called "SuperCoder":

```bash

# Create a pointer file that SuperCoder reads

cat > .supercoder <<'EOF'
@AGENTS.md
EOF

# Copy the skill definition where SuperCoder expects it

mkdir -p .supercoder/skills
cp .github/skills/clone-website/SKILL.md .supercoder/skills/clone-website.md

# Extend the sync script (open scripts/sync-agent-rules.sh and add):

# write_file "$REPO_ROOT/.supercoder" "$RESOLVED_CONTENT"

# Regenerate everything

bash scripts/sync-agent-rules.sh
node scripts/sync-skills.mjs

# Test the integration

supercoder --chrome
/clone-website https://example.com

```

All paths use the repository root as the base. The sync scripts automatically embed the correct GitHub URLs when generating files.

## Key Files and Their Roles

| File | Role |
|------|------|
| [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) | Single source of truth for agent instructions, pipeline description, and critical implementation notes. |
| [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) | Master skill definition containing the `/clone-website` command signature and detailed workflow steps. |
| [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) | Generates concrete instruction files for agents unable to read [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) directly (Copilot, Cline, Continue, Amazon Q). |
| `scripts/sync-skills.mjs` | Propagates the master skill definition to platform-specific locations expected by each agent. |
| `src/app/*` | Base Next.js application files (layout, page, globals) that receive generated components during the build phase. |
| `src/components/ui/*` | Shadcn/ui primitives used as building blocks for the generated interface components. |

## Summary

- The template uses [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) as the single source of truth for all agent instructions and the `/clone-website` pipeline definition.
- You must create a **pointer file** to link the agent to [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) and copy the **master skill definition** to the agent's expected location.
- Update [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) and `scripts/sync-skills.mjs` to automate file generation for your new agent.
- Always run the sync scripts after modifying [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) or the skill definition to maintain consistency across all supported platforms.
- Verify integration by executing the full `/clone-website <url>` pipeline and confirming completion of all five phases.

## Frequently Asked Questions

### What is the purpose of the AGENTS.md file?

[`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) serves as the single source of truth containing the multi-phase pipeline instructions, project structure definitions, and "Most Important Notes" that dictate how agents must execute the `/clone-website` skill. All agent-specific files are generated from this master document to ensure consistency across platforms.

### Why do I need to update the sync scripts when adding a new agent?

The sync scripts—[`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) and `scripts/sync-skills.mjs`—automate the distribution of centralized instructions to agent-specific locations. By extending these scripts, you ensure that when [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) or [`SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/SKILL.md) changes, your new agent automatically receives updated instructions without manual file copying.

### Can I add an agent that reads markdown natively without running sync scripts?

Yes, agents that read markdown natively can simply use a pointer file containing `@AGENTS.md` without requiring generated configuration files. However, you should still update [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) to add your agent to the exclusion list or document it as "natively supported" to clarify that it doesn't require preprocessing.

### What should I do if my agent uses a custom skill format?

If your agent expects skills in a format different from the standard [`SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/SKILL.md) structure, modify `scripts/sync-skills.mjs` to add a transformation case. This script can copy the master skill content and reformat it (for example, converting markdown to YAML or JSON) to match the agent's expected input schema while preserving the core command logic and workflow steps.