# How to Integrate Amazon Q for Website Cloning Tasks > Integrate Amazon Q for website cloning with the JCodesMore AI Website Cloner Template. Install the AWS Q CLI, configure IAM, and use the /clone-website skill for a multi-phase cloning pipeline. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: how-to-guide - Published: 2026-07-04 --- **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. ```bash 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. ```bash aws configure # Enter your AWS Access Key ID, Secret Access Key, default region, and output format ``` Alternatively, export the credentials directly: ```bash 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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. ```bash # 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/page.tsx) entry point and related component directories. ## Synchronizing Skill Definitions If you modify the agent instructions in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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: ```bash node scripts/sync-skills.mjs ``` This script regenerates [`.amazonq/cli-agents/clone-website.json`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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 ` to trigger the multi-phase cloning pipeline. - Run `node scripts/sync-skills.mjs` after modifying [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.