santifer/claudeable
Browser automationこのページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
Metaproyecto de Claude Code para crear webs profesionales
概要
A Claude Code metaproject for creating professional web pages at Lovable-level quality. Building professional, production-ready web applications requires: - Setting up the same stack over and over (React, TypeScript, Tailwind, shadcn) - Remembering design best practices and avoiding common pitfalls - Configuring multiple tools (Figma, Supabase, image generation, etc.) - Maintaining consistency across projects is a pre-configured "toolbox" for Claude Code. Open it in this directory and you have everything ready to create professional websites instantly: - that guide Claude to follow best practices - pre-configured for design, backend, and image generation - ready to use with the optimal stack - enforced automatically (semantic tokens, custom fonts, etc.) 1. Open Claude Code in this directory 2. Ask for what you need: "Create a landing page for an AI startup" 3. Use the available skills to guide the process The templates/ directory contains ready-to-use base projects: 1.
README
以下は原文 README の抜粋です。原文を見る。
Claudable
A Claude Code metaproject for creating professional web pages at Lovable-level quality.
The Problem
Building professional, production-ready web applications requires:
- Setting up the same stack over and over (React, TypeScript, Tailwind, shadcn)
- Remembering design best practices and avoiding common pitfalls
- Configuring multiple tools (Figma, Supabase, image generation, etc.)
- Maintaining consistency across projects
The Solution
Claudable is a pre-configured “toolbox” for Claude Code. Open it in this directory and you have everything ready to create professional websites instantly:
- Skills that guide Claude to follow best practices
- MCPs pre-configured for design, backend, and image generation
- Templates ready to use with the optimal stack
- Design rules enforced automatically (semantic tokens, custom fonts, etc.)
Tech Stack
How to Use
- Open Claude Code in this directory
- Ask for what you need: “Create a landing page for an AI startup”
- Use the available skills to guide the process
Available Skills
Official Plugin (Anthropic)
| Skill | Description |
|---|---|
/frontend-design |
Create distinctive, professional interfaces |
Local Skills
| Skill | Description |
|---|---|
/claudable-stack |
Tech stack and design system |
/claudable-workflow |
Step-by-step workflow for new projects |
/claudable-design |
Visual design guidelines |
/readme-pro |
Professional bilingual READMEs for GitHub |
Configured MCPs
| MCP | Use | Requires |
|---|---|---|
| Nanobanana | Image generation with Gemini | GOOGLE_API_KEY |
| Figma | Pixel-perfect design to code | OAuth via URL |
| Playwright | Screenshots and visual testing | - |
| Supabase | Backend (DB, auth, storage) | SUPABASE_ACCESS_TOKEN |
Templates
The templates/ directory contains ready-to-use base projects:
# Copy template to new project
cp -r templates/vite-react-shadcn ../my-new-project
cd ../my-new-project
npm install
npm run dev
Design Rules
- NEVER use direct color classes (
text-white,bg-zinc-900) - ALWAYS use semantic tokens (
bg-background,text-foreground) - AVOID generic typefaces (Inter, Arial, Roboto)
推奨ツール
別のキーワードを試すか、フィルタを外してください。
インストール
npx skillfish add santifer/claudeable