AgentStatic is a static site generator that uses AI assistance to create HTML and CSS output without any JavaScript in the final render. It drives branding and content through a design-token based workflow, with pre-styled custom elements and partials that are assembled into a complete site. The included Claude Code integration provides slash commands to initialize branding, generate new pages and components, rebrand, audit for accessibility or broken links, and deploy the generated dist folder to hosting providers. You’ll typically start by configuring your brand (brand.json) via the /begin workflow, then customize pages under the pages/ directory using the provided elements and partials, preview locally with npm run serve, and finally deploy the dist/ folder to Netlify, Vercel, or another static host.

Prerequisites:

• Node.js 16+ (with npm or yarn)
• Access to Claude Code for AI-assisted commands (optional but recommended)

Installation steps:

1. Clone the repository or set up your project skeleton: git clone <repo-url> my-site cd my-site

2. Install dependencies: npm install

3. Ensure Claude Code is installed if you plan to use AI-assisted commands. Follow Claude Code installation guidance provided in the docs or via your Claude Code launcher.

4. Start the local preview server (if applicable for this project): npm run serve

   This serves the dist/ output locally for preview

5. Build the project when ready: npm run build

6. Deploy by pushing the dist/ folder to your static host (Netlify, Vercel, GitHub Pages, S3, etc.).

Tips and common considerations:

• The output is pure HTML + CSS with zero JavaScript in the final site. The build system may use TypeScript or JS tooling behind the scenes, but nothing ships to browsers.
• Brand configuration is centralized in brand.json. Edit this to control colors, typography, and spacing; run the build to regenerate CSS variables.
• Use the provided components under elements/ for consistent styling across pages. Parts like <include-head>, <include-nav>, and <include-footer> help reduce duplication.
• If you skip adding images during /begin, placeholder text will be used; you can always add images later by editing pages or re-running /rebrand.
• For troubleshooting, consult CLAUDE.md or the element README files for component specifics and build details.
• When deploying, ensure dist/ is the folder you publish to your static host.