MMCPMarkets
SC

santifer/claudeable

Browser automation

Эта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал

26 stars Качество 63 Тренд 11MIT
Repository Install

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

:gb: English | :es: Español

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

  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

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

  1. NEVER use direct color classes (text-white, bg-zinc-900)
  2. ALWAYS use semantic tokens (bg-background, text-foreground)
  3. AVOID generic typefaces (Inter, Arial, Roboto)
Открыть полный README на GitHub

Рекомендуемые инструменты

Попробуйте другой запрос или уберите фильтр.

Установка

npx skillfish add santifer/claudeable
Новичок в MCP? Начните с руководства на mcpskill.org →