How to Integrate Amazon Q for Website Cloning Tasks

You can integrate Amazon Q into the AI Website Cloner Template by installing the AWS Q CLI, configuring IAM credentials, and invoking the pre-defined /clone-website skill that executes the template's multi-phase cloning pipeline.

The JCodesMore/ai-website-cloner-template repository provides a universal framework for reverse-engineering websites into type-safe Next.js applications. According to the source code, the project includes dedicated support for Amazon Q through a declarative skill system located in the .amazonq directory, allowing developers to trigger complex cloning workflows using natural language commands.

Prerequisites

Before executing website cloning tasks, you must install the official Amazon Q command-line interface and configure your AWS credentials.

Install the Amazon Q CLI

The Amazon Q CLI is distributed as an npm package named @aws/q-cli. Install it globally to access the q-cli binary from any directory.

npm install -g @aws/q-cli

Configure AWS Credentials

Amazon Q requires valid AWS IAM credentials for authentication. Use the standard AWS CLI configuration or export environment variables.

aws configure

# Enter your AWS Access Key ID, Secret Access Key, default region, and output format

Alternatively, export the credentials directly:

export AWS_ACCESS_KEY_ID=your_access_key
export AWS_SECRET_ACCESS_KEY=your_secret_key
export AWS_SESSION_TOKEN=your_session_token  # if using temporary credentials

Understanding the Amazon Q Skill Descriptor

The repository contains a platform-specific skill descriptor at .amazonq/cli-agents/clone-website.json that instructs the Amazon Q CLI how to invoke the cloning logic. This JSON file maps the natural language command /clone-website to the template's execution pipeline without requiring manual code changes.

According to the repository structure, the descriptor specifies:

• name: The skill identifier (clone-website)
• command: The invocation pattern (/clone-website)
• environment: Variables forwarded to the cloning process

The template treats AGENTS.md as the single source of truth for agent instructions. When you modify this file, you must regenerate the platform-specific descriptors using the sync script to ensure Amazon Q receives the latest definitions.

Executing the Clone Command

Once authenticated, start an Amazon Q session and invoke the website cloning skill using the forward-slash command syntax.

# Authenticate and open the interactive REPL

q-cli login

# Inside the Amazon Q session, execute the clone

> /clone-website https://example.com

Amazon Q will execute the same five-phase pipeline implemented in the template: reconnaissance → foundation → component specification → parallel build → assembly & QA. The cloned output appears in the src/app/page.tsx entry point and related component directories.

Synchronizing Skill Definitions

If you modify the agent instructions in AGENTS.md or adjust the cloning workflow, you must synchronize the changes to the Amazon Q-specific descriptor.

Run the Node.js sync script located in the scripts directory:

node scripts/sync-skills.mjs

This script regenerates .amazonq/cli-agents/clone-website.json and other platform-specific skill files, ensuring that Amazon Q receives the updated command definitions and environment mappings.

Summary

• Install the @aws/q-cli package globally to access Amazon Q's interactive REPL.
• Configure AWS IAM credentials via aws configure or environment variables before authentication.
• The skill descriptor at .amazonq/cli-agents/clone-website.json defines how Amazon Q invokes the /clone-website command.
• Execute q-cli login to start a session, then run > /clone-website <url> to trigger the multi-phase cloning pipeline.
• Run node scripts/sync-skills.mjs after modifying AGENTS.md to update the Amazon Q skill definitions.

Frequently Asked Questions

What file defines the Amazon Q integration in this template?

The integration is defined in .amazonq/cli-agents/clone-website.json. This JSON file acts as a skill descriptor that tells the Amazon Q CLI which command to run and how to structure the environment variables when invoking the website cloning workflow.

How do I update the Amazon Q skill after modifying the agent instructions?

Run node scripts/sync-skills.mjs from the repository root. This script reads the single source of truth in AGENTS.md and regenerates the platform-specific skill files, including the Amazon Q JSON descriptor, ensuring your changes are reflected in the CLI.

Can I use Amazon Q to clone any website with this template?

Yes. After authenticating with q-cli login, you can pass any public URL to the /clone-website command. The template executes a comprehensive pipeline that analyzes the target site and generates a Next.js replica with Tailwind CSS styling and TypeScript types.

Where does the cloned website code appear in the repository?

The generated code appears in the standard Next.js application structure, with the entry point at src/app/page.tsx. Components, styles, and assets are organized according to the template's parallel build phase output, ready for immediate deployment or further customization.

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