react-design-systems-mcp: Instructions file for Claude Code

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

React Design Systems is a Model Context Protocol (MCP) server that provides comprehensive information about design systems created for React. The current version focuses exclusively on the AWS Cloudscape Design System components, along with code generation capabilities. It's built using the FastMCP framework and TypeScript.

Development Commands

Building and Running

# Install dependencies
npm install

# Build TypeScript to JavaScript
npm run build

# Run in development mode with auto-reload
npm run dev

# Run in development mode with SSE transport
npm run dev:sse

# Run production server
npm start

Testing

# Run all tests
npm test

# Run specific test suites
npm run test:unit      # Unit tests only
npm run test:e2e       # End-to-end tests only
npm run test:tools     # Tools tests
npm run test:resources # Resources tests
npm run test:roo      # Roo integration tests

# Run tests in CI mode (skip long-running tests)
npm run test:ci

Linting and Type Checking

# Run ESLint
npm run lint

Architecture Overview

Project Structure

• src/components/: Component registry and data

  • registry.ts: Main component registry implementation
  • data/: Component metadata, categories, examples, and patterns
  • registry-new.ts: New registry implementation (experimental)

• src/mcp/: MCP server implementation

  • server.ts: FastMCP server implementation
  • fastmcp-server.ts: Re-exports server.ts for backward compatibility

• src/search/: Search engine for components

• src/code-generator/: Code generation for components and patterns

• src/documentation/: Documentation provider

• src/property-explorer/: Component property exploration

• src/example-provider/: Component examples

• src/integration/: Roo integration

• src/security/: Security enhancements

• src/optimization/: Performance optimizations