Features

| Feature | Count | Description | |---------|-------|-------------| | MCP Tools | 21 | Complete AI assistant toolkit | | UI Components | 25 | Production-ready React components with Framer Motion | | Guardrail Analyzers | 4 | Code analysis for React/Vite/Next.js best practices | | Guardrail Generators | 7 | Generate hooks, services, project structure | | Figma Tools | 6 | Design-to-code, tokens, asset export | | Output Formats | 2 | React + Vanilla HTML/CSS/JS | | Frameworks | 4 | React, React + Vite, Next.js App Router, Pages Router |

Key Capabilities

• 21 MCP Tools - Complete AI assistant integration for frontend development
• Automatic Guardrail - Best practices enforced automatically when AI writes code
• Framework Auto-Detection - Detects React+Vite or Next.js from config files
• 25 Animated UI Components - Loading states, e-commerce, chat, auth, visual effects
• Frontend Guardrail - Code analysis, memory leak detection, React Query validation
• Code Generation - Generate hooks, services, and project structure
• Figma Integration - Convert designs to React/HTML/Tailwind code
• Design Tokens - Extract colors, typography, spacing from Figma
• Asset Export - Export icons and images as SVG/PNG/JPG/PDF
• Dual Format - React/Framer Motion + Vanilla HTML/CSS/JS
• TypeScript First - Full type definitions included

Installation

npm install archyra framer-motion lucide-react

UI Components

25 Production-Ready Components

Loading (5 components)

| Component | Description | |-----------|-------------| | LoadingDots | Animated bouncing dots | | Skeleton | Content placeholder (text, avatar, card, image) | | Shimmer | Shimmer loading effect | | ProgressBar | Animated progress (default, gradient, striped, glow) | | PulseCircle | Circular progress with pulse rings |

Creative / AI (3 components)

| Component | Description | |-----------|-------------| | AiCreating | Multi-stage AI robot animation | | AiCreating2 | AI brain with rotating rings | | CodeTyping | Terminal code typing effect |

Processing (1 component)

| Component | Description | |-----------|-------------| | DataProcessing | Data pipeline visualization |

Auth (1 component)

| Component | Description | |-----------|-------------| | FloatingLogin | Animated login form with OAuth |

Chat (3 components)

| Component | Description | |-----------|-------------| | ChatBubble | Message bubble with status indicators | | ChatTyping | Typing indicator (dots, pulse, wave) | | ChatMessage | Full chat message with avatar |

E-Commerce (5 components)

| Component | Description | |-----------|-------------| | ProductCard | 3D product card with hover effects | | AddToCartButton | Animated cart button with price | | WishlistHeart | Heart with particle burst animation | | FlashSaleTimer | Countdown timer with urgency styling | | CartNotification | Flying product notification |

Visual Effects (7 components)

| Component | Description | |-----------|-------------| | GlowButton | Button with animated glow effect | | SpotlightCard | Card with mouse-following spotlight | | AuroraBackground | Animated aurora gradient background | | AnimatedBeam | Animated connecting beam between elements | | Card3D | 3D tilt card with glare effect | | NeonGradientCard | Card with rotating neon gradient border | | InfiniteCarousel | Infinite scrolling carousel |

Guardrail

Frontend Engineering Guardrail enforces React best practices through AI-assisted code analysis and generation.

🚀 Automatic Enforcement

Once installed, guardrail rules are automatically applied! The MCP server exposes:

• Resources - Architecture guidelines that AI assistants read automatically
• Prompts - Pre-configured prompts for creating components/hooks with guardrail rules
• Tools - Analysis and generation tools that follow best practices

This means when you ask an AI assistant to "create a UserProfile component", it will:

1. Automatically read the guardrail guidelines
2. Apply the correct folder structure
3. Use proper TypeScript patterns
4. Avoid forbidden patterns (no fetch in components, no any type, etc.)

Framework Support

| Framework | Auto-Detected By | |-----------|-----------------| | React + Vite | vite.config.ts, src/main.tsx | | Next.js App Router | next.config.js + app/ directory | | Next.js Pages Router | next.config.js + pages/ directory | | React (generic) | package.json with react dependency |

The framework is automatically detected based on your project's config files. No configuration needed!

Code Analysis (4 tools)

| Tool | Description | |------|-------------| | analyze_component | Detect architectural violations, forbidden patterns, file size limits | | enforce_structure | Validate project follows recommended folder structure | | validate_react_query | Check React Query hooks follow best practices | | check_memory_leak | Detect memory leak patterns (uncleared intervals, missing cleanup) |

Code Generation (7 tools)

| Tool | Description | |------|-------------| | generate_hook | Generate React Query hooks with axios + Bearer token auth | | generate_service | Create API service files with typed methods | | split_component | Analyze large components and suggest splitting strategies | | initialize_project | Setup recommended folder structure + documentation | | get_architecture_rules | Get complete architecture rules reference | | detect_framework | Auto-detect project framework from config files | | get_frontend_guidelines | Get mandatory coding rules (called automatically) |

Rules Enforced

• 150 line limit per component file
• No fetch() in components - use services + React Query
• No useState for server state - use React Query
• No any type - strict TypeScript
• Memory leak prevention - cleanup patterns required
• Approved UI libraries only - shadcn/ui, Radix, Tailwind

Example Prompts

"Analyze my UserProfile.tsx component for violations"
"Check this component for memory leaks"
"Generate a React Query hook for GET /api/users"
"Initialize my project with the recommended structure"
"Detect what framework my project is using"
"Get architecture rules for my Vite project"

Figma Integration

Convert Figma designs to code, extract design tokens, and export assets directly through AI assistants.

Design to Code

Convert Figma frames to production-ready code:

| Format | Output | |--------|--------| | React | TypeScript component with inline styles | | HTML | Semantic HTML with CSS | | Tailwind | JSX with Tailwind utility classes |

Design Tokens

Extract design tokens in multiple formats:

| Format | Description | |--------|-------------| | CSS | CSS custom properties (:root variables) | | Tailwind | tailwind.config.js theme extension | | SCSS | SCSS variables + typography mixins | | JSON | W3C Design Tokens format |

Asset Export

Export icons and images from Figma:

| Format | Best For | |--------|----------| | SVG | Icons, logos (scalable) | | PNG | UI elements with transparency | | JPG | Photos and images | | PDF | Print assets |

Setup

1. Get a Figma Personal Access Token from Figma Settings → Account
2. Tell your AI assistant: "Set my Figma token: figd_xxxxx"
3. Share Figma URLs and ask to convert/extract

Example Prompts

"Convert this Figma frame to React: https://figma.com/file/xxx?node-id=1:234"
"Extract design tokens from my Figma file as Tailwind config"
"Export all icons from Figma as SVG"
"Get the color palette from my design system"

Architecture Designer

Visual AWS Infrastructure Design

Design cloud architectures visually and export production-ready Infrastructure as Code.

20 AWS Services Supported

| Category | Services | |----------|----------| | Compute | EC2, Lambda, ECS | | Storage | S3 | | Database | RDS, DynamoDB, ElastiCache | | Networking | VPC, CloudFront, Route53, API Gateway, ALB, NLB, NAT Gateway | | Security | IAM, Cognito | | Integration | SNS, SQS | | VPC Components | VPC Environment, Public Subnet, Private Subnet |

Infrastructure as Code Export

| Format | Languages | Output Files | |--------|-----------|--------------| | Terraform | HCL | main.tf, variables.tf, outputs.tf, modules | | Pulumi | TypeScript | index.ts, Pulumi.yaml, package.json | | Pulumi | Python | __main__.py, Pulumi.yaml, requirements.txt |

Architecture Features

• Drag & Drop - Visual service placement
• Auto-connections - Smart service linking
• VPC Designer - Complete network architecture with subnets
• Property Editor - Configure each service (instance types, runtimes, etc.)
• Real-time Preview - See IaC code as you design
• ZIP Export - Download complete project structure

Quick Start

UI Components

import { LoadingDots, ChatBubble, ProductCard } from 'archyra';

function App() {
  return (
    <div>
      <LoadingDots size="md" color="#6366f1" />

      <ChatBubble
        message="Hello!"
        variant="sender"
        color="blue"
      />

      <ProductCard
        name="Premium Headphones"
        price={299}
        rating={4.8}
        onAddToCart={() => console.log('Added!')}
      />
    </div>
  );
}

Architecture Designer

// The Architecture Designer is a full-page application
// Access it at /designer in the gallery

// Export options:
// 1. Terraform HCL
// 2. Pulumi TypeScript
// 3. Pulumi Python
// 4. ZIP download with all files

Component Examples

AiCreating2

import { AiCreating2 } from 'archyra';

<AiCreating2
  isLoading={true}
  message="Creating your design..."
  primaryColor="#6366f1"
  backgroundColor="#0f172a"
  contained={true}
  onComplete={() => console.log('Done!')}
/>

ChatBubble

import { ChatBubble } from 'archyra';

<ChatBubble
  message="Hey, how are you?"
  variant="sender"
  color="blue"
  timestamp="2:30 PM"
  status="delivered"
/>

ProductCard

import { ProductCard } from 'archyra';

<ProductCard
  image="/product.jpg"
  name="Wireless Earbuds"
  price={149}
  originalPrice={199}
  rating={4.5}
  reviews={128}
  badge="Sale"
  onAddToCart={() => handleAdd()}
/>

FlashSaleTimer

import { FlashSaleTimer } from 'archyra';

<FlashSaleTimer
  endTime={new Date('2024-12-31')}
  title="Flash Sale Ends In"
  discount={50}
  variant="urgent"
  onEnd={() => console.log('Sale ended!')}
/>

MCP Server

Archyra includes an MCP (Model Context Protocol) server with 19 tools for AI assistant integration.

Quick Setup

# Interactive mode
npx archyra init

# Or specify directly
npx archyra init --client claude
npx archyra init --client cursor
npx archyra init --client windsurf

Supported AI Tools

| Tool | Config Location | |------|-----------------| | Claude Code | ~/.claude/claude_desktop_config.json or ~/.mcp.json | | Cursor | .cursor/mcp.json or ~/.cursor/mcp.json | | Windsurf | ~/.codeium/windsurf/mcp_config.json |

Manual Configuration

{
  "mcpServers": {
    "archyra": {
      "command": "npx",
      "args": ["-y", "archyra@latest", "serve"]
    }
  }
}

All 19 MCP Tools

Component Tools (4)

| Tool | Description | |------|-------------| | list_components | List all 25 components with filtering | | get_component | Get component details, props, and source | | add_component | Get instructions to add a component | | get_install_command | Get npm install command |

Guardrail Analyzers (4)

| Tool | Description | |------|-------------| | analyze_component | Analyze React component for violations | | enforce_structure | Validate project folder structure | | validate_react_query | Check React Query usage patterns | | check_memory_leak | Detect memory leak patterns |

Guardrail Generators (5)

| Tool | Description | |------|-------------| | generate_hook | Generate React Query hooks with axios + auth | | generate_service | Create API service files | | split_component | Suggest component splitting strategies | | initialize_project | Setup folder structure and docs | | get_architecture_rules | Get all architecture rules |

Figma Tools (6)

| Tool | Description | |------|-------------| | figma_set_token | Configure Figma Personal Access Token | | figma_get_file | Get file structure (pages, frames) | | figma_get_components | List all components in a file | | figma_to_code | Convert frames to React/HTML/Tailwind | | figma_get_styles | Extract design tokens (CSS/Tailwind/SCSS/JSON) | | figma_export_assets | Export assets as SVG/PNG/JPG/PDF |

Usage Examples

UI Components:

• "List all animation components"
• "Add the LoadingDots component to my project"
• "Show me the AiCreating2 component in vanilla HTML"

Code Analysis (Guardrail):

• "Analyze my UserProfile component for violations"
• "Check this component for memory leaks"
• "Validate my project folder structure"

Code Generation (Guardrail):

• "Generate a React Query hook for /api/users"
• "Generate a service file for the product API"
• "Initialize project with recommended structure"

Figma Integration:

• "Set my Figma token: figd_xxxxx"
• "Convert this Figma frame to React: [URL]"
• "Extract design tokens from my Figma file"
• "Export all icons from Figma as SVG"

Vanilla HTML/CSS

Every UI component has a vanilla HTML/CSS/JS version - no React or npm required!

"Show me the LoadingDots component in vanilla format"

HTML:

<div class="loading-dots">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS:

.loading-dots {
  display: flex;
  gap: 8px;
}
.loading-dots span {
  width: 12px;
  height: 12px;
  background: #6366f1;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

CLI

npx archyra --help              # Show help
npx archyra init                # Interactive MCP setup
npx archyra init --client X     # Direct setup for specific client
npx archyra serve               # Start MCP server manually

Summary

| Category | Details | |----------|---------| | MCP Tools | 19 total tools for AI assistants | | UI Components | 25 animated React components | | Guardrail | 4 analyzers + 5 generators for React/Next.js best practices | | Figma Integration | Design-to-code, tokens extraction, asset export | | Supported Formats | React, HTML/CSS, Tailwind, CSS, SCSS, JSON | | MCP Support | Claude Code, Cursor, Windsurf | | Output Formats | React/Framer Motion, Vanilla HTML/CSS/JS |

License

MIT

Author

johnbekele

Links

• npm Package
• GitHub Repository