Archyra

The Complete AI Frontend Toolkit

UI Components • Code Analysis • Figma Integration • Best Practices Enforcement

Features •
UI Components •
Guardrail •
Figma •
MCP Server •
CLI

---

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 |

$3

- 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

``bash
npm install archyra framer-motion lucide-react
`

---

UI Components

$3

#### 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.

$3

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.)

$3

| 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!

$3

| 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) |

$3

| 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) |

$3

- 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

$3

`
"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.

$3

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 |

$3

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 |

$3

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 |

$3

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

$3

`
"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

$3

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

$3

| 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 |

$3

| 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 |

$3

- 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

$3

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

function App() {
return (



);
}
`

$3

`tsx
// 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

$3

`tsx
import { AiCreating2 } from 'archyra';

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

$3

`tsx
import { ChatBubble } from 'archyra';

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

$3

`tsx
import { ProductCard } from 'archyra';

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

$3

`tsx
import { FlashSaleTimer } from 'archyra';

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.

$3

`bash


Interactive mode

npx archyra init

Or specify directly

npx archyra init --client claude
npx archyra init --client cursor
npx archyra init --client windsurf
`

$3

| 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 |

$3

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

$3

#### 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 |

$3

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:
`html



`

CSS:
`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

`bash
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