Claudable

🥇Gold

Claudable is an open-source web builder that uses local CLI agents like Claude Code, Codex, and Gemini CLI to automate web development. It enables developers to build and deploy products quickly, reducing manual coding efforts. It connects to local CLI agents and integrates with web development workflows.

3,8565590Updated 4d ago

Intermediate30min to implementautomation

Saves ~120 min per use

Quick InstallView Source

git clone https://github.com/opactorai/Claudable.git

Works with:

Claude

Overview

About This Skill

https://github.com/opactorai/Claudable

How to Use

[{"step":"Install Claudable and your preferred CLI agent (e.g., Claude Code).","action":"Run `npm install -g claudable` and ensure your CLI agent (e.g., `claude code`) is in your PATH.","tip":"Verify installation with `claudable --version` and `claude code --version`."},{"step":"Initialize a new project with a template.","action":"Use `claudable init [PROJECT_NAME] --template [TEMPLATE]` (e.g., `nextjs-tailwind`, `astro`, or `svelte`).","tip":"List available templates with `claudable templates`. Start with a template matching your stack to avoid manual setup."},{"step":"Add components, pages, or features dynamically.","action":"Run commands like `claudable add page [NAME]`, `claudable add component [NAME] --with-props [PROPS]`, or `claudable add feature [FEATURE]` (e.g., `auth`, `search`).","tip":"Use `--with-props` for components requiring dynamic data (e.g., `ProductCard --with-props title,price`)."},{"step":"Test and deploy locally.","action":"Run `npm run dev` to preview changes, then use `claudable deploy --target [HOST]` (e.g., `vercel`, `netlify`, `cloudflare`).","tip":"For Vercel, install the CLI (`npm install -g vercel`) and log in (`vercel login`) before deploying."},{"step":"Iterate and extend.","action":"Use `claudable add [RESOURCE]` to scaffold new elements or manually edit files. Document changes in `README.md`.","tip":"Leverage your CLI agent (e.g., `claude code`) to review generated code or troubleshoot errors. Check Claudable’s docs for advanced features like API route generation."}]

Use Cases

Quickly generate a personal portfolio website by describing your desired features.

Create a task management application with user authentication and a dark mode interface.

Build a blog platform that integrates with a PostgreSQL database for content management.

Deploy a fully functional e-commerce site with payment integration in minutes.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/opactorai/Claudable

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Use Claudable with [LOCAL_CLI_AGENT] to automate the creation of a [WEBSITE_TYPE] for [PROJECT_NAME]. Include responsive design, [PAGES], and [FEATURES]. Deploy the project to [HOSTING_SERVICE] after testing locally. Document the process in a README.md file.

Example Output

### Claudable Automation Output for 'EcoMart' Project

**Project Overview:**
EcoMart is a responsive e-commerce website built using Claudable with Claude Code CLI agent. The project includes 5 pages (Home, Products, About, Cart, Checkout), a product search feature, and a contact form. The site was deployed to Vercel after local testing.

**Generated Files & Structure:**
```
ecomart/
├── src/
│   ├── components/
│   │   ├── Header.jsx (sticky navigation with logo)
│   │   ├── ProductCard.jsx (dynamic grid layout)
│   │   ├── Cart.jsx (local storage integration)
│   │   └── Footer.jsx (social links)
│   ├── pages/
│   │   ├── Home.jsx (hero section + featured products)
│   │   ├── Products.jsx (filterable product grid)
│   │   ├── About.jsx (company story)
│   │   ├── Cart.jsx (persistent cart state)
│   │   └── Checkout.jsx (Stripe integration)
│   ├── styles/
│   │   ├── globals.css (Tailwind directives)
│   │   └── theme.js (color palette)
│   └── data/
│       └── products.json (mock product data)
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   └── hero-bg.jpg
│   └── favicon.ico
├── package.json (auto-generated with dependencies)
├── tailwind.config.js (responsive breakpoints)
├── .gitignore
└── README.md (deployment steps)
```

**Key Automations:**
1. **Component Generation:** Claudable scaffolded all React components with JSX structure, Tailwind classes, and placeholder data.
2. **State Management:** Added Zustand for cart persistence (localStorage) and Zustand for product filtering.
3. **API Mocking:** Created a mock API route (`/api/products`) using Vercel’s serverless functions for testing.
4. **Deployment Script:** Generated a `deploy.sh` script with Vercel CLI commands for one-click deployment.
5. **Testing:** Ran `npm run dev` locally, then `vercel deploy` to push to production.

**Performance Metrics:**
- Lighthouse Score: 98 (Performance), 100 (Accessibility), 95 (SEO)
- Bundle Size: 124KB (minified + gzipped)
- Time Saved: ~8 hours vs. manual setup

**README.md Snippet:**
```markdown
## Deployment
1. Install Vercel CLI: `npm install -g vercel`
2. Run `vercel` in the project root
3. Follow prompts to link to your Vercel account
4. Project will deploy to `https://ecomart.vercel.app`
```

**Next Steps:**
- Connect to a real database (e.g., Supabase) for product data.
- Add user authentication via Clerk or NextAuth.
- Implement a newsletter signup form with Mailchimp integration.
- Set up CI/CD with GitHub Actions for automated testing on push.

**Error Logs (if any):**
- Tailwind purge issue resolved by adding `content: ['./src/**/*.{js,jsx}']` to `tailwind.config.js`.
- Vercel deployment failed due to missing `vercel.json` (added `{"version": 2}`).

**Total CLI Commands Executed:**
```bash
npx claudable init ecomart --template nextjs-tailwind
cd ecomart
npx claudable add page Home Products About Cart Checkout
npx claudable add component ProductCard --with-props title,price,image
npx claudable deploy --target vercel
```