Open Source MCP Server

{ scaffolding :: atomic_design :: typescript }

FrontForge

MCP server that scaffolds production-ready frontend projects with Atomic Design

Next.js + Expo/React Native, TypeScript strict, React Query, barrel exports — all wired up automatically. Works with Claude Code and any MCP-compatible AI assistant.

terminal

$ claude mcp add frontforge -- npx @quardianwolf/frontforge

Get Started View on GitHub

7 Tools

// Built-in Tools

Everything you need to scaffold production-ready frontend projects. Each tool follows strict conventions and handles the boring wiring for you.

project_info

Detect project type, folder structure, and current state. Identifies Next.js or Expo automatically.

→ Platform: Next.js | Has features/: true

scaffold_project

Set up the complete project skeleton — features/, providers, query client, theme, utils, and CLAUDE.md.

→ CREATE features/ hooks/ lib/ providers/

create_feature

Create a feature directory with full Atomic Design structure: atoms, molecules, organisms, templates.

→ Landing/components/atoms/index.ts

create_component

Generate a component with its own folder, barrel export, and automatic index wiring.

→ HeroSection/HeroSection.tsx + index.ts

create_style

Create Expo CSS style files for mobile components. Generates typed StyleSheet with theme tokens.

→ HeroSection/styles.ts (Expo only)

setup_query_provider

Wire up QueryProvider in the root layout with React Query devtools and proper configuration.

→ providers/QueryProvider.tsx + layout.tsx

create_query_hook

Generate React Query hooks for a resource — both list and detail queries with TypeScript types.

→ useUsers.ts + useUser.ts + types.ts

more coming soon_

Workflow

// How It Works

Three steps from zero to production-ready project structure.

Install

Add FrontForge to your MCP configuration. One line in your claude_desktop_config.json or .mcp.json — that's it.

claude mcp add frontforge -- npx @quardianwolf/frontforge

Scaffold

Tell your AI assistant what to build. FrontForge tools create the entire project structure — features, components, hooks, providers, barrel exports.

scaffold_project → create_feature → create_component

Build

Your AI assistant fills in the component code. The structure is already perfect — Atomic Design, TypeScript strict, proper imports. Just add the logic.

AI writes JSX → you ship

Example

// Real Usage

From MCP config to fully structured project in seconds.

.mcp.json

json

{
  "mcpServers": {
    "frontforge": {
      "command": "npx",
      "args": ["@quardianwolf/frontforge"]
    }
  }
}

AI assistant interaction

bash

// Ask your AI assistant:
"Create a Landing page with a hero section,
 features grid, and footer"

// FrontForge automatically runs:
$ scaffold_project  → project skeleton
$ create_feature    → Landing/
$ create_component  → HeroSection, FeaturesGrid, Footer
$ create_component  → Button, Card, Badge (atoms)

generated structure

text

features/
└── Landing/
    ├── components/
    │   ├── atoms/
    │   │   ├── Button/
    │   │   │   ├── Button.tsx
    │   │   │   └── index.ts
    │   │   ├── Badge/
    │   │   └── index.ts          ← barrel export
    │   ├── molecules/
    │   │   ├── FeatureCard/
    │   │   └── index.ts
    │   ├── organisms/
    │   │   ├── HeroSection/
    │   │   ├── FeaturesGrid/
    │   │   └── index.ts
    │   └── templates/
    │       ├── LandingTemplate/
    │       └── index.ts
    ├── hooks/
    ├── api/
    ├── types/
    └── index.ts                  ← feature barrel

Platforms

// Supported Platforms

Same Atomic Design structure, platform-specific tooling. Write once, scaffold anywhere.

Next.js

Full-stack React framework with App Router, server components, and optimized builds.

+Tailwind CSS + cn() utility
+App Router (app/ directory)
+TypeScript strict mode
+React Query integration
+Barrel exports & path aliases
+next/font, next/image, next/link

Expo

React Native framework for iOS, Android, and web with unified developer experience.

+Expo CSS (StyleSheet)
+styles.ts per component
+theme.ts design tokens
+TypeScript strict mode
+React Query integration
+Barrel exports & path aliases

Setup

// Installation

Add FrontForge to your MCP configuration and start scaffolding.

claude_desktop_config.json

json

{
  "mcpServers": {
    "frontforge": {
      "command": "npx",
      "args": ["@quardianwolf/frontforge"]
    }
  }
}

Or add to your project's .mcp.json for project-scoped configuration.

works with any MCP-compatible client