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

To add support for a new AI coding agent, create a pointer file referencing AGENTS.md, copy the master skill definition from .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 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 bash script and scripts/sync-skills.mjs Node.js script automatically propagate changes from AGENTS.md and 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.

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 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 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 directly. If the new agent uses a proprietary skill format, add a case to scripts/sync-skills.mjs to copy the master 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 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":

# 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	Single source of truth for agent instructions, pipeline description, and critical implementation notes.
.github/skills/clone-website/SKILL.md	Master skill definition containing the /clone-website command signature and detailed workflow steps.
scripts/sync-agent-rules.sh	Generates concrete instruction files for agents unable to read 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 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 and copy the master skill definition to the agent's expected location.
• Update 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 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 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 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 or 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 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 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}