10x-development-team

10x Development Team

Describe your app. 7 AI agents build it. Works with 9 AI clients. Outputs production-quality UI.

---

What Is This?

An MCP server and plugin that turns any AI assistant into a full development team. You describe what you want in plain English. The plugin's 7 specialist agents plan, design, build, test, and deploy it.

No templates. No boilerplate. No "here's some code, figure it out." The agents coordinate through a shared file index, reuse a registry of 35+ component blueprints, follow a 50+ file knowledge base of proven patterns, and remember everything across sessions via persistent SQLite memory.

By the numbers

---

Design-First Philosophy

Most AI code generators produce functional but ugly output. This plugin produces Lovable/v0/Bolt-level quality by default.

The design system is everything. Inspired by Lovable, v0, and Bolt.new, the 10x Development Team treats visual quality as a first-class requirement -- not an afterthought. The knowledge base includes massive, production-grade reference files: the Framer Motion reference alone is 1,949 lines, the shadcn/ui reference is 2,041 lines, and the UI/UX Principles bible is 514 lines.

Every agent follows 10 mandatory design principles baked into the system:

1. Design system first, code second -- globals.css and tailwind.config.ts define ALL visual tokens. Components only reference semantic tokens like bg-primary, text-foreground, border-border. Direct colors like bg-gray-500 or text-white are banned. No hardcoded colors, ever.

2. Rich animations by default -- Scroll reveals, hover lifts, page transitions, staggered lists, hero effects, micro-interactions. The Framer Motion knowledge file alone is 1,949 lines of production-ready animation patterns.

3. Every data view has 3 states -- Loading skeleton, empty state, error state. Never a blank screen.

4. shadcn/ui with custom variants -- 2,041 lines of component patterns including theming, custom variants, and composition recipes. Not just "install and use" -- deeply integrated with the design system.

5. Dark mode is automatic -- Semantic HSL tokens in globals.css mean dark mode works everywhere with zero per-component effort. Gradients and shadows adapt automatically.

6. Micro-interactions on everything -- Hover scale (1.02), focus rings, active press (0.98), smooth transitions. Every interactive element has visible state changes.

7. Mobile-first responsive -- Designed for 320px first, enhanced at 640px and 1024px+. No desktop-only layouts.

8. Accessibility is non-negotiable -- Labels, 4.5:1 contrast ratios, focus indicators, semantic HTML, ARIA attributes. WCAG AA compliance.

9. Typography has hierarchy -- Display, headline, title, body-lg, body, caption, overline. Consistent across all pages.

10. Spacing follows base-4 rhythm -- 4px, 8px, 12px, 16px, 24px, 32px. No arbitrary values.

The result: apps that look like a designer built them, not like AI generated them.

---

Works With 9 AI Clients

Config paths are auto-detected per platform (Windows, macOS, Linux).

---

Quick Start

Option A: Auto-detect all your AI clients (recommended)

# Auto-detect and configure ALL your AI clients
npx 10x-development-team setup

# Health check
npx 10x-development-team doctor

Open your AI client. Say: "Start a new project -- I want an invoice app for freelancers."

Option B: Configure a specific client

# Or configure a specific client
npx 10x-development-team setup --client cursor

# Or configure ALL supported clients at once
npx 10x-development-team setup --all

Option C: Claude Code direct plugin (slash commands, no MCP needed)

# Claude Code direct plugin (no MCP needed)
npx 10x-development-team install-plugin /path/to/your/project
cd /path/to/your/project

In Claude Code, type: /start

Option D: Clone the repo

git clone https://github.com/10x-Anit/10x-development-team.git
cp -r 10x-development-team/.claude /path/to/your/project/.claude

Health check

npx 10x-development-team doctor

This checks: Node version, plugin files, SQLite database, configured clients, and knowledge base integrity.

---

5 Real Use Cases

1. Founder with an idea, no coding skills

"I want an app where freelancers create invoices and track payments."

What happens: The plugin asks 4 plain-English questions. Picks MVP scope. 7 agents build login, dashboard, invoice CRUD, client list, payment tracking -- all with a polished design system, loading states, and dark mode. Run npm run dev and see a working app. Add Stripe payments with one more command.

Scope: MVP | Client: Claude Desktop | Stack: Next.js + Prisma + Auth

---

2. Developer with existing data, needs a dashboard

"I have 50K rows of analytics in Supabase. Build me a dashboard."

What happens: :connect-data Supabase wires up the client and proxy routes. The plugin builds stat cards with animated numbers, sortable tables, and Recharts/Plotly charts -- all following the design system. :modify-ui add realtime updates makes the data flow live. Built in under an hour.

Scope: MVP | Client: Claude Code | Data: Supabase + Realtime

---

3. Freelancer who needs a client landing page in 10 minutes

"Build a landing page for a fitness app -- hero, features, pricing, testimonials."

What happens: Simple scope. No React, no npm. Just HTML/CSS/JS. The plugin builds a responsive, dark-mode-ready page with smooth scroll, animated sections, and a polished color system. Customize colors and layout with :modify-ui. Drag the folder to Netlify. Done.

Scope: Simple | Client: Any | Output: HTML + CSS + JS (no build tools)

---

4. Product manager who needs a prototype for investors

"Build a team workspace app -- like Notion meets Slack. Needs to look real."

What happens: Prototype scope. Vite + React with mock data. The plugin builds 5 pages with Framer Motion transitions, staggered list animations, and a complete design system. Investors click through it live. When funded, upgrade to MVP scope -- same project, real data.

Scope: Prototype | Client: Codex | Stack: Vite + React + Tailwind

---

5. Startup CTO scaling a live app

"We have 500 users. Add Stripe payments, email notifications, and a settings page."

What happens: :resume loads the project from persistent memory -- it knows every file, every feature, every past decision. :add-feature Stripe subscriptions builds checkout + webhooks + pricing page. :add-feature welcome and invoice emails sets up Resend with React Email templates. :add-page account settings uses existing auth and components. :review runs QA. :deploy updates CI/CD. Three features shipped in one session.

Scope: Production | Client: Claude Code | Stack: Next.js + Stripe + Resend

---

The 7 Agents

---

4 Scopes -- Never Over-Engineer

A landing page gets HTML. A SaaS gets Next.js. The plugin decides -- you don't have to.

---

19 Commands

---

What's Inside

mcp-server/          MCP server -- 12 tools, 10 resources, 8 prompts
.claude/
  skills/            19 skill definitions (slash commands)
  agents/             7 specialist agent instructions
  knowledge/         50+ code pattern files (copy-paste ready)
  components/        35+ component blueprints with registry
  templates/          8 project scaffolds
  scripts/            DB init, validation, component checks

Knowledge Base -- 50+ Files

Agents don't invent code. They copy proven patterns from a curated knowledge base:

MCP Server -- Tools, Resources, Prompts

Tools (12)

Resources (10)

Prompts (8)

Persistent Memory

SQLite database at ~/.10x/memory.db:

• Tracks every project you've ever created
• Remembers decisions, preferences, session history
• Resume any project with full context: :resume
• Switch between projects: :projects

Model-Aware Execution

The plugin adapts to whatever model is running it:

---

Architecture

User (any AI client)
  |
  +── Claude Desktop ───> MCP Server (stdio, local)
  +── Claude Code ──────> Direct plugin (.claude/) OR MCP Server
  +── Cursor IDE ───────> MCP Server (stdio, local)
  +── Windsurf IDE ─────> MCP Server (stdio, local)
  +── Cline ────────────> MCP Server (stdio, local)
  +── VS Code + Copilot ─> MCP Server (stdio, local)
  +── Continue.dev ─────> MCP Server (stdio, local)
  +── Codex CLI ────────> MCP Server (stdio, local)
  +── OpenCode ─────────> MCP Server (stdio, local)
  |
  +── All modes ────────> ~/.10x/memory.db (persistent memory)
  +── All modes ────────> .10x/ per project (index, tasks, features, log)

---

MCP Config Reference

The JSON format that goes in each client's config file:

{
  "mcpServers": {
    "10x-dev": {
      "command": "npx",
      "args": ["-y", "10x-development-team"],
      "env": {}
    }
  }
}

Note: VS Code uses "servers" instead of "mcpServers":

{
  "servers": {
    "10x-dev": {
      "command": "npx",
      "args": ["-y", "10x-development-team"],
      "env": {}
    }
  }
}

This config works for: Claude Desktop, Cursor, Windsurf, Cline, Continue.dev, Codex, and OpenCode. For Claude Code, use the direct plugin install (install-plugin) or add to ~/.claude/.mcp.json.

---

CLI Commands

npx 10x-development-team setup                    # Auto-detect and configure ALL found clients
npx 10x-development-team setup --client cursor     # Configure a specific client
npx 10x-development-team setup --all               # Explicitly configure all clients
npx 10x-development-team install-plugin [path]     # Copy plugin files into project (Claude Code)
npx 10x-development-team doctor                    # Check installation health
npx 10x-development-team --version                 # Show version
npx 10x-development-team --help                    # All CLI commands

Environment Variables

---

What Makes This Different

Most AI coding tools generate functional but visually mediocre output. You get unstyled components, inconsistent spacing, hardcoded colors, no loading states, no error handling, and no animations.

This plugin is different because the design system is enforced at every layer:

• UI Designer agent creates the design tokens before any component is built
• Frontend Dev agent reads the design system knowledge file before writing any UI
• Knowledge files contain production-quality patterns -- not minimal examples, but 2,000-line reference implementations with theming, variants, animations, and accessibility
• Component registry provides pre-built blueprints that already follow the design system
• 10 design commandments are embedded in every agent's instructions -- they cannot be skipped

The output looks like it came from a product team with a designer, not from a code generator.

---

For AI Agents Reading This

If you are an AI agent that has been asked to set up or use the 10x Development Team:

1. Install: npx 10x-development-team setup --client [your-client]
2. The MCP server exposes 12 tools. Call tenx_start to begin a new project.
3. Call tenx_get_knowledge with category and file_name to read code patterns.
4. Call tenx_get_agent with agent_name to load agent instructions.
5. Call tenx_get_skill with skill_name to get skill execution instructions.
6. The system works locally -- no API keys, no hosting, no cloud services needed.
7. All project state lives in .10x/ at the project root. Read .10x/project.json first.
8. Persistent memory lives in ~/.10x/memory.db. Use tenx_get_context to load it.
9. The knowledge base has 50+ files. Use tenx_list_knowledge to see all categories.
10. For Claude Code: use npx 10x-development-team install-plugin . to install as a direct plugin with slash commands.

---

Links

• Homepage: 10x-anit.github.io/10x-development-team
• GitHub: github.com/10x-Anit/10x-development-team
• npm: npmjs.com/package/10x-development-team

---

Built by Anit Chaudhry | MIT License