mirror of
https://github.com/daffy0208/ai-dev-standards.git
synced 2026-09-14 20:49:49 +08:00
daffy0208
e5da92f751
Comprehensive design resources for building aesthetically pleasing, accessible websites. ## Phase 3 Overview: 75 New Resources - 35 UI components (overlays, inputs, layouts, utilities) - 12 integrations (media, icons, fonts, design tools) - 11 tools (image optimization, color utilities, accessibility) - 14 MCPs (AI design automation, Figma sync, documentation) - 3 skills (figma-developer, asset-manager, prototype-designer) ## Phase 3.1: Image Management Suite Integrations (3): - Cloudinary: CDN with URL-based transformations, face detection - Imgix: Real-time image processing via URL parameters - Unsplash: Stock photo API with search and collections Components (6): - Image: Optimized lazy-loading with srcset/sizes, blur placeholder - Gallery: Lightbox gallery with grid/masonry layout, keyboard navigation - Carousel: Touch-enabled carousel with autoplay, indicators - ImageUpload: Drag-and-drop uploader with preview and validation - Avatar: User avatar with fallback initials and status indicator - MediaViewer: Full-screen media viewer with zoom/pan Tools (3): - image-optimizer-tool: Sharp-based optimization (compression, resizing) - responsive-image-generator-tool: Generate srcset and sizes attributes - webp-converter-tool: Convert images to WebP format ## Phase 3.2: Icon & Font Systems Integrations (5): - Heroicons: 500+ icons by Tailwind team (outline/solid variants) - Lucide: 1000+ beautiful open-source icons - Font Awesome: Thousands of icons with multiple styles - Google Fonts: 1400+ fonts with pairing suggestions - Adobe Fonts: Premium web font service integration Components (2): - Icon: Universal icon component supporting all libraries - IconPicker: Icon search and selection interface with previews MCPs (2): - icon-library-mcp: Icon search, management, and SVG generation - font-optimizer-mcp: Font subsetting, optimization, and loading Tools (2): - font-pairing-tool: AI-powered font combination suggestions - type-scale-generator-tool: Generate modular typography scales ## Phase 3.3-3.5: Advanced UI Components (35 components) All with TypeScript, Tailwind CSS + CVA, WCAG 2.1 AA accessibility, full keyboard navigation. Overlays & Dialogs (5): - Tooltip: 4 placements, portal rendering, ARIA describedby - Popover: Floating popover with click/hover triggers - Accordion: Collapsible sections with single/multi-expand modes - Drawer: Slide-out panel from 4 sides with focus trap - Dialog: Accessible modal with backdrop and ESC handling Advanced Inputs (5): - Slider: Range slider with marks, tooltips, dual handles - ColorPicker: HEX/RGB/HSL modes with presets and alpha - DatePicker: Calendar picker with range selection, min/max - TimePicker: 12/24hr formats with keyboard input - FileUpload: Drag-and-drop with preview and validation Feedback & Navigation (6): - Progress: Linear/circular with determinate/indeterminate states - Badge: Notification badge with dot/count variants - Alert: Message alerts (info, success, warning, error) - Breadcrumb: Breadcrumb navigation with custom separators - Stepper: Step-by-step progress indicator - Rating: Star rating with half-star support Layout Components (10): - Grid: CSS Grid wrapper with responsive columns - Container: Max-width container with responsive padding - Stack: Flexbox stack (vertical/horizontal) with spacing - Spacer: Flexible spacing component - Divider: Visual divider (horizontal/vertical) - AspectRatio: Maintain aspect ratio wrapper - Center: Center content horizontally and vertically - Switch: Toggle switch with ARIA switch pattern - Checkbox: Checkbox with indeterminate state - Radio: Radio button with RadioGroup Enhanced Existing (9): - Pagination: Intelligent page number display with ellipsis - Select: Enhanced with search and multi-select - Tabs: Compound component with controlled/uncontrolled modes - Table: Sortable with ARIA table semantics - Skeleton: Loading placeholder (enhanced version) - Button: Added loading states and variants - Card: Enhanced with composable sections - Input: Added password toggle and validation states - Modal: Enhanced with focus trap and body scroll lock ## Phase 3.6: AI & Design Tool MCPs (7 MCPs) - image-generator-mcp: DALL-E, Midjourney, Stable Diffusion integration - svg-generator-mcp: Programmatic SVG generation with templates - illustration-generator-mcp: AI-powered custom illustrations - figma-sync-mcp: Figma-to-code with token extraction - design-handoff-mcp: Automated design handoff workflows - theme-builder-mcp: Generate complete themes from base colors - dark-mode-converter-mcp: Light-to-dark palette transformation ## Phase 3.7: Design Tool Integrations (4 integrations + 3 skills) Integrations: - Figma: Complete REST API client with token extraction - Sketch: Sketch API integration for design assets - Adobe XD: Adobe XD API for prototypes and specs - Canva: Canva API for template and asset management Skills: - figma-developer: Figma-to-code workflows and automation - asset-manager: Asset organization, optimization, brand libraries - prototype-designer: Interactive prototypes and user testing ## Phase 3.8: Design Tools & Utilities (6 tools + 5 MCPs) Tools: - color-palette-generator-tool: Generate harmonious palettes with WCAG - contrast-checker-tool: WCAG 2.1 AA/AAA contrast validation - color-scheme-tool: Complementary, analogous, triadic schemes - breakpoint-analyzer-tool: Analyze responsive breakpoints - color-blindness-simulator-tool: Simulate deuteranopia, protanopia, tritanopia - touch-target-validator-tool: Validate 44px minimum touch targets MCPs: - storybook-generator-mcp: Auto-generate Storybook stories - props-documenter-mcp: Component props documentation - typography-analyzer-mcp: Typography analysis and optimization - asset-library-mcp: Design asset library management - responsive-preview-mcp: Multi-device preview generation ## Registry Updates (Phase 3.9) Updated all META registries with Phase 3 resources: - component-registry.json: 35 → 70 components (+35) - integration-registry.json: 13 → 25 integrations (+12) - tool-registry.json: 13 → 24 tools (+11) - mcp-registry.json: 34 → 48 MCPs (+14) - skill-registry.json: 42 → 45 skills (+3) - .claude/CLAUDE.md: Updated resource counts (150 → 216) - README.md: Updated resource counts New Categories: - Components: media (6) - Integrations: media-services (3), icon-libraries (3), font-services (2), design-tools (4) - Tools: media-tools (3), design-tools (8) - MCPs: design category expanded (2 → 16) ## Also Included - 7 comprehensive playbooks (RAG, multi-agent, MCP dev, component dev, monitoring, performance, security) - 4 observability tools (logger, metrics, tracer, error-tracker) - 4 workflow orchestration components (task-queue, workflow-orchestrator, state-manager, event-bus) - 3 MCP server handler components (tool-handler, resource-handler, prompt-handler) - Phase 2 CLI components and tools (auth, forms, errors, feedback) Total Resources: 216 (was 150) All resources discoverable via CLI and relationship mapping system. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2174 lines
57 KiB
JSON
2174 lines
57 KiB
JSON
{
|
|
"version": "2.0.0",
|
|
"last_updated": "2025-10-27",
|
|
"description": "Registry of reusable components in ai-dev-standards. Components are pre-built implementations for common patterns.",
|
|
"total_components": 70,
|
|
"components": [
|
|
{
|
|
"id": "simple-task-agent",
|
|
"name": "Simple Task Agent",
|
|
"category": "agents",
|
|
"description": "Basic task execution agent template",
|
|
"path": "/COMPONENTS/agents/simple-task-agent.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"agent-orchestrator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Task execution",
|
|
"Error handling",
|
|
"State management"
|
|
]
|
|
},
|
|
{
|
|
"id": "login-form",
|
|
"name": "Login Form",
|
|
"category": "auth",
|
|
"description": "Authentication login form component",
|
|
"path": "/COMPONENTS/auth/LoginForm.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"security-engineer",
|
|
"mobile-developer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp"
|
|
],
|
|
"depends_on": [
|
|
"form-field",
|
|
"use-form"
|
|
],
|
|
"features": [
|
|
"Email/password login",
|
|
"Form validation",
|
|
"Error handling",
|
|
"Loading states"
|
|
]
|
|
},
|
|
{
|
|
"id": "signup-form",
|
|
"name": "Signup Form",
|
|
"category": "auth",
|
|
"description": "User registration form component",
|
|
"path": "/COMPONENTS/auth/SignupForm.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"security-engineer",
|
|
"mobile-developer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp"
|
|
],
|
|
"depends_on": [
|
|
"form-field",
|
|
"use-form"
|
|
],
|
|
"features": [
|
|
"User registration",
|
|
"Password strength validation",
|
|
"Email verification",
|
|
"Terms acceptance"
|
|
]
|
|
},
|
|
{
|
|
"id": "password-reset",
|
|
"name": "Password Reset",
|
|
"category": "auth",
|
|
"description": "Password reset flow component",
|
|
"path": "/COMPONENTS/auth/PasswordReset.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"security-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"form-field",
|
|
"use-form"
|
|
],
|
|
"features": [
|
|
"Email verification",
|
|
"Token validation",
|
|
"Password update"
|
|
]
|
|
},
|
|
{
|
|
"id": "protected-route",
|
|
"name": "Protected Route",
|
|
"category": "auth",
|
|
"description": "Route protection wrapper for authenticated pages",
|
|
"path": "/COMPONENTS/auth/ProtectedRoute.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"security-engineer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Authentication checking",
|
|
"Redirect to login",
|
|
"Role-based access"
|
|
]
|
|
},
|
|
{
|
|
"id": "error-boundary",
|
|
"name": "Error Boundary",
|
|
"category": "errors",
|
|
"description": "React error boundary for graceful error handling",
|
|
"path": "/COMPONENTS/errors/ErrorBoundary.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"mobile-developer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp"
|
|
],
|
|
"depends_on": [
|
|
"error-fallback"
|
|
],
|
|
"features": [
|
|
"Error catching",
|
|
"Fallback UI",
|
|
"Error reporting"
|
|
]
|
|
},
|
|
{
|
|
"id": "error-fallback",
|
|
"name": "Error Fallback",
|
|
"category": "errors",
|
|
"description": "Error fallback UI component",
|
|
"path": "/COMPONENTS/errors/ErrorFallback.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"wireframe-generator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"User-friendly error display",
|
|
"Retry functionality",
|
|
"Error details"
|
|
]
|
|
},
|
|
{
|
|
"id": "not-found",
|
|
"name": "404 Not Found",
|
|
"category": "errors",
|
|
"description": "404 error page component",
|
|
"path": "/COMPONENTS/errors/NotFound.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"wireframe-generator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"404 messaging",
|
|
"Navigation links",
|
|
"Search functionality"
|
|
]
|
|
},
|
|
{
|
|
"id": "loading-spinner",
|
|
"name": "Loading Spinner",
|
|
"category": "feedback",
|
|
"description": "Loading indicator component",
|
|
"path": "/COMPONENTS/feedback/LoadingSpinner.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect",
|
|
"mobile-developer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Animated spinner",
|
|
"Size variants",
|
|
"Color customization"
|
|
]
|
|
},
|
|
{
|
|
"id": "skeleton",
|
|
"name": "Skeleton Loader",
|
|
"category": "feedback",
|
|
"description": "Skeleton loading placeholder component",
|
|
"path": "/COMPONENTS/feedback/Skeleton.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Content placeholders",
|
|
"Animation",
|
|
"Shape variants"
|
|
]
|
|
},
|
|
{
|
|
"id": "toast",
|
|
"name": "Toast Notification",
|
|
"category": "feedback",
|
|
"description": "Toast notification component",
|
|
"path": "/COMPONENTS/feedback/Toast.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect",
|
|
"mobile-developer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Success/error/info variants",
|
|
"Auto-dismiss",
|
|
"Position control",
|
|
"Action buttons"
|
|
]
|
|
},
|
|
{
|
|
"id": "form-field",
|
|
"name": "Form Field",
|
|
"category": "forms",
|
|
"description": "Reusable form field component with validation",
|
|
"path": "/COMPONENTS/forms/FormField.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Input types",
|
|
"Validation",
|
|
"Error messages",
|
|
"ARIA labels"
|
|
]
|
|
},
|
|
{
|
|
"id": "use-form",
|
|
"name": "useForm Hook",
|
|
"category": "forms",
|
|
"description": "Form state management hook",
|
|
"path": "/COMPONENTS/forms/useForm.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Form state",
|
|
"Validation",
|
|
"Submit handling",
|
|
"Reset functionality"
|
|
]
|
|
},
|
|
{
|
|
"id": "base-mcp-server",
|
|
"name": "Base MCP Server",
|
|
"category": "mcp-servers",
|
|
"description": "Foundation class for all MCP servers with tool/resource/prompt registration",
|
|
"path": "/COMPONENTS/mcp-servers/base-mcp-server.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"all-36-mcps"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Tool registration and invocation",
|
|
"Resource registration and access",
|
|
"Prompt registration and execution",
|
|
"Error handling and logging",
|
|
"Health checks"
|
|
]
|
|
},
|
|
{
|
|
"id": "mcp-tool-handler",
|
|
"name": "MCP Tool Handler",
|
|
"category": "mcp-servers",
|
|
"description": "Advanced tool execution with rate limiting, caching, and retries",
|
|
"path": "/COMPONENTS/mcp-servers/mcp-tool-handler.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"performance-optimizer"
|
|
],
|
|
"supports_mcps": [
|
|
"all-36-mcps"
|
|
],
|
|
"depends_on": [
|
|
"base-mcp-server"
|
|
],
|
|
"features": [
|
|
"Input/output validation with Zod",
|
|
"Rate limiting (sliding/fixed window)",
|
|
"Caching with TTL",
|
|
"Retry logic with exponential backoff",
|
|
"Timeout handling",
|
|
"Performance metrics"
|
|
]
|
|
},
|
|
{
|
|
"id": "mcp-resource-handler",
|
|
"name": "MCP Resource Handler",
|
|
"category": "mcp-servers",
|
|
"description": "Resource access management with caching and versioning",
|
|
"path": "/COMPONENTS/mcp-servers/mcp-resource-handler.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"all-36-mcps"
|
|
],
|
|
"depends_on": [
|
|
"base-mcp-server"
|
|
],
|
|
"features": [
|
|
"Content caching with size limits",
|
|
"Version management",
|
|
"ETags for cache validation",
|
|
"Access control",
|
|
"Usage statistics"
|
|
]
|
|
},
|
|
{
|
|
"id": "mcp-prompt-handler",
|
|
"name": "MCP Prompt Handler",
|
|
"category": "mcp-servers",
|
|
"description": "Template-based prompt generation with variable substitution",
|
|
"path": "/COMPONENTS/mcp-servers/mcp-prompt-handler.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"copywriter"
|
|
],
|
|
"supports_mcps": [
|
|
"all-36-mcps"
|
|
],
|
|
"depends_on": [
|
|
"base-mcp-server"
|
|
],
|
|
"features": [
|
|
"Template processing with {{variable}} syntax",
|
|
"Type validation",
|
|
"Dynamic prompt generation",
|
|
"Example management",
|
|
"Prompt caching"
|
|
]
|
|
},
|
|
{
|
|
"id": "document-loader",
|
|
"name": "Document Loader",
|
|
"category": "rag-pipelines",
|
|
"description": "Multi-source document ingestion for RAG pipelines",
|
|
"path": "/COMPONENTS/rag-pipelines/document-loader.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"vector-database-mcp",
|
|
"knowledge-base-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Multi-source loading (files, directories, URLs)",
|
|
"Format support (TXT, MD, HTML, JSON, CSV, PDF)",
|
|
"Parallel processing",
|
|
"Metadata extraction",
|
|
"Progress tracking"
|
|
]
|
|
},
|
|
{
|
|
"id": "text-chunker",
|
|
"name": "Text Chunker",
|
|
"category": "rag-pipelines",
|
|
"description": "Smart text chunking with multiple strategies for optimal retrieval",
|
|
"path": "/COMPONENTS/rag-pipelines/text-chunker.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"vector-database-mcp",
|
|
"semantic-search-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Multiple chunking strategies (fixed, recursive, semantic, sentence, markdown)",
|
|
"Overlap configuration",
|
|
"Token counting",
|
|
"Metadata preservation",
|
|
"Batch processing"
|
|
]
|
|
},
|
|
{
|
|
"id": "embedding-pipeline",
|
|
"name": "Embedding Pipeline",
|
|
"category": "rag-pipelines",
|
|
"description": "Batch embedding generation with multi-provider support",
|
|
"path": "/COMPONENTS/rag-pipelines/embedding-pipeline.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"embedding-generator-mcp",
|
|
"vector-database-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Multi-provider support (OpenAI, Cohere, HuggingFace)",
|
|
"Batch processing",
|
|
"Caching and retries",
|
|
"Progress tracking",
|
|
"Rate limit handling"
|
|
]
|
|
},
|
|
{
|
|
"id": "vector-store-client",
|
|
"name": "Vector Store Client",
|
|
"category": "rag-pipelines",
|
|
"description": "Unified interface for multiple vector databases",
|
|
"path": "/COMPONENTS/rag-pipelines/vector-store-client.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"vector-database-mcp",
|
|
"semantic-search-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Multi-database support (Pinecone, Weaviate, Chroma, Qdrant, PgVector)",
|
|
"Unified search interface",
|
|
"Connection pooling",
|
|
"Batch operations",
|
|
"Metadata filtering"
|
|
]
|
|
},
|
|
{
|
|
"id": "retrieval-pipeline",
|
|
"name": "Retrieval Pipeline",
|
|
"category": "rag-pipelines",
|
|
"description": "Query processing with hybrid search and reranking",
|
|
"path": "/COMPONENTS/rag-pipelines/retrieval-pipeline.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"semantic-search-mcp",
|
|
"vector-database-mcp"
|
|
],
|
|
"depends_on": [
|
|
"vector-store-client",
|
|
"embedding-pipeline"
|
|
],
|
|
"features": [
|
|
"Query expansion and rewriting",
|
|
"Hybrid search (vector + keyword)",
|
|
"Fusion algorithms (RRF, weighted)",
|
|
"Reranking support",
|
|
"Result deduplication"
|
|
]
|
|
},
|
|
{
|
|
"id": "rag-orchestrator",
|
|
"name": "RAG Orchestrator",
|
|
"category": "rag-pipelines",
|
|
"description": "End-to-end RAG pipeline orchestration",
|
|
"path": "/COMPONENTS/rag-pipelines/rag-orchestrator.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"rag-implementer",
|
|
"knowledge-base-manager"
|
|
],
|
|
"supports_mcps": [
|
|
"knowledge-base-mcp",
|
|
"vector-database-mcp"
|
|
],
|
|
"depends_on": [
|
|
"document-loader",
|
|
"text-chunker",
|
|
"embedding-pipeline",
|
|
"vector-store-client",
|
|
"retrieval-pipeline"
|
|
],
|
|
"features": [
|
|
"Ingestion pipeline (load, chunk, embed, store)",
|
|
"Query pipeline (retrieve, rerank, generate)",
|
|
"Pipeline monitoring and metrics",
|
|
"Error handling and retries",
|
|
"Configuration management"
|
|
]
|
|
},
|
|
{
|
|
"id": "button",
|
|
"name": "Button",
|
|
"category": "ui-components",
|
|
"description": "Accessible button component with variants and loading states",
|
|
"path": "/COMPONENTS/ui-components/Button.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Variant styles (primary, secondary, ghost, destructive, outline, link)",
|
|
"Size options (sm, md, lg, icon)",
|
|
"Loading state with spinner",
|
|
"Full ARIA support",
|
|
"Keyboard navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "card",
|
|
"name": "Card",
|
|
"category": "ui-components",
|
|
"description": "Card container component for content grouping",
|
|
"path": "/COMPONENTS/ui-components/Card.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Variant styles (default, bordered, elevated)",
|
|
"Optional title and footer",
|
|
"Composable sections",
|
|
"Responsive design"
|
|
]
|
|
},
|
|
{
|
|
"id": "input",
|
|
"name": "Input",
|
|
"category": "ui-components",
|
|
"description": "Text input component with validation and password toggle",
|
|
"path": "/COMPONENTS/ui-components/Input.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Input types (text, password, email, number)",
|
|
"Password visibility toggle",
|
|
"Error states with validation",
|
|
"ARIA labels and descriptions",
|
|
"Disabled states"
|
|
]
|
|
},
|
|
{
|
|
"id": "modal",
|
|
"name": "Modal",
|
|
"category": "ui-components",
|
|
"description": "Accessible modal dialog with focus trap and backdrop",
|
|
"path": "/COMPONENTS/ui-components/Modal.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Size options (sm, md, lg, full)",
|
|
"Focus trap implementation",
|
|
"ESC key and backdrop close",
|
|
"Body scroll lock",
|
|
"Portal rendering",
|
|
"Full ARIA dialog support"
|
|
]
|
|
},
|
|
{
|
|
"id": "select",
|
|
"name": "Select",
|
|
"category": "ui-components",
|
|
"description": "Dropdown select with single/multi-select and search",
|
|
"path": "/COMPONENTS/ui-components/Select.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Single and multi-select modes",
|
|
"Searchable/filterable options",
|
|
"Full keyboard navigation",
|
|
"ARIA listbox pattern",
|
|
"Disabled options support"
|
|
]
|
|
},
|
|
{
|
|
"id": "table",
|
|
"name": "Table",
|
|
"category": "ui-components",
|
|
"description": "Data table with sorting and style variants",
|
|
"path": "/COMPONENTS/ui-components/Table.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"data-visualizer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Column sorting (ascending/descending)",
|
|
"Variant styles (default, striped, bordered, compact)",
|
|
"Custom cell rendering",
|
|
"useTableSort hook",
|
|
"ARIA table semantics"
|
|
]
|
|
},
|
|
{
|
|
"id": "tabs",
|
|
"name": "Tabs",
|
|
"category": "ui-components",
|
|
"description": "Tabbed interface with controlled/uncontrolled modes",
|
|
"path": "/COMPONENTS/ui-components/Tabs.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Compound component pattern",
|
|
"Controlled and uncontrolled modes",
|
|
"Variant styles (default, pills, underline)",
|
|
"ARIA tabs pattern",
|
|
"Keyboard navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "pagination",
|
|
"name": "Pagination",
|
|
"category": "ui-components",
|
|
"description": "Pagination component with intelligent page display",
|
|
"path": "/COMPONENTS/ui-components/Pagination.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"data-visualizer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Intelligent page number algorithm with ellipsis",
|
|
"First/last and prev/next buttons",
|
|
"Configurable sibling count",
|
|
"ARIA navigation",
|
|
"Responsive design"
|
|
]
|
|
},
|
|
{
|
|
"id": "cn-utility",
|
|
"name": "CN Utility",
|
|
"category": "ui-components",
|
|
"description": "Tailwind CSS class merging utility",
|
|
"path": "/COMPONENTS/ui-components/utils.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Merge Tailwind classes with proper precedence",
|
|
"Conflict resolution",
|
|
"Type-safe class values"
|
|
]
|
|
},
|
|
{
|
|
"id": "task-queue",
|
|
"name": "Task Queue",
|
|
"category": "workflows",
|
|
"description": "Priority-based task queue with retry logic",
|
|
"path": "/COMPONENTS/workflows/task-queue.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"mvp-builder",
|
|
"performance-optimizer"
|
|
],
|
|
"supports_mcps": [
|
|
"agent-orchestrator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Priority queue (low, normal, high, urgent)",
|
|
"Concurrent task limits",
|
|
"Retry logic with exponential backoff",
|
|
"Task dependencies",
|
|
"Progress tracking"
|
|
]
|
|
},
|
|
{
|
|
"id": "workflow-orchestrator",
|
|
"name": "Workflow Orchestrator",
|
|
"category": "workflows",
|
|
"description": "Linear and parallel workflow execution with error recovery",
|
|
"path": "/COMPONENTS/workflows/workflow-orchestrator.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"mvp-builder"
|
|
],
|
|
"supports_mcps": [
|
|
"agent-orchestrator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Linear and parallel step execution",
|
|
"Conditional branching",
|
|
"Error recovery strategies (retry, skip, abort, continue)",
|
|
"Rollback support",
|
|
"State persistence"
|
|
]
|
|
},
|
|
{
|
|
"id": "state-manager",
|
|
"name": "State Manager",
|
|
"category": "workflows",
|
|
"description": "State management with history and pub/sub",
|
|
"path": "/COMPONENTS/workflows/state-manager.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"frontend-builder"
|
|
],
|
|
"supports_mcps": [
|
|
"agent-orchestrator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"State get/set/delete with dot notation paths",
|
|
"State history with undo/redo",
|
|
"Pub/sub for state changes",
|
|
"Wildcard subscriptions",
|
|
"State diffing"
|
|
]
|
|
},
|
|
{
|
|
"id": "event-bus",
|
|
"name": "Event Bus",
|
|
"category": "workflows",
|
|
"description": "Pub/sub event system with priority and wildcards",
|
|
"path": "/COMPONENTS/workflows/event-bus.ts",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "custom",
|
|
"supports_skills": [
|
|
"multi-agent-architect",
|
|
"frontend-builder",
|
|
"mvp-builder"
|
|
],
|
|
"supports_mcps": [
|
|
"agent-orchestrator-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Pub/sub event pattern",
|
|
"Wildcard subscriptions (single and multi-level)",
|
|
"Event priority (low, normal, high, critical)",
|
|
"Event replay and history",
|
|
"Typed events support"
|
|
]
|
|
},
|
|
{
|
|
"id": "image",
|
|
"name": "Image",
|
|
"category": "media",
|
|
"description": "Optimized image component with lazy loading, srcset, and blur placeholder",
|
|
"path": "/COMPONENTS/media/Image.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"performance-optimizer",
|
|
"visual-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"asset-optimizer-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Lazy loading with Intersection Observer",
|
|
"Responsive srcset generation",
|
|
"Blur-up placeholder",
|
|
"Object-fit support",
|
|
"Error handling with fallback"
|
|
]
|
|
},
|
|
{
|
|
"id": "gallery",
|
|
"name": "Gallery",
|
|
"category": "media",
|
|
"description": "Image gallery with lightbox and keyboard navigation",
|
|
"path": "/COMPONENTS/media/Gallery.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"image",
|
|
"modal",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Grid layout with masonry option",
|
|
"Lightbox modal",
|
|
"Keyboard navigation (arrows, ESC)",
|
|
"Touch swipe support",
|
|
"Thumbnail navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "carousel",
|
|
"name": "Carousel",
|
|
"category": "media",
|
|
"description": "Image carousel with touch swipe and autoplay",
|
|
"path": "/COMPONENTS/media/Carousel.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"mobile-developer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"mobile-builder-mcp"
|
|
],
|
|
"depends_on": [
|
|
"image",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Touch swipe support",
|
|
"Autoplay with pause on hover",
|
|
"Dot indicators",
|
|
"Arrow navigation",
|
|
"Loop/infinite scroll option"
|
|
]
|
|
},
|
|
{
|
|
"id": "image-upload",
|
|
"name": "Image Upload",
|
|
"category": "media",
|
|
"description": "Drag-and-drop image uploader with preview",
|
|
"path": "/COMPONENTS/media/ImageUpload.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Drag and drop interface",
|
|
"Click to browse",
|
|
"Image preview before upload",
|
|
"File type validation",
|
|
"Size limits",
|
|
"Multiple upload support"
|
|
]
|
|
},
|
|
{
|
|
"id": "avatar",
|
|
"name": "Avatar",
|
|
"category": "media",
|
|
"description": "User avatar with fallback initials",
|
|
"path": "/COMPONENTS/media/Avatar.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Image with fallback to initials",
|
|
"Size variants (xs, sm, md, lg, xl)",
|
|
"Shape options (circle, square, rounded)",
|
|
"Status indicator",
|
|
"Group avatar support"
|
|
]
|
|
},
|
|
{
|
|
"id": "media-viewer",
|
|
"name": "Media Viewer",
|
|
"category": "media",
|
|
"description": "Full-screen media viewer with zoom and pan",
|
|
"path": "/COMPONENTS/media/MediaViewer.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"modal",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Full-screen mode",
|
|
"Zoom in/out controls",
|
|
"Pan/drag support",
|
|
"Keyboard shortcuts",
|
|
"Support for images and videos"
|
|
]
|
|
},
|
|
{
|
|
"id": "icon",
|
|
"name": "Icon",
|
|
"category": "ui-components",
|
|
"description": "Universal icon component supporting multiple icon libraries",
|
|
"path": "/COMPONENTS/ui-components/Icon.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"visual-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp",
|
|
"icon-library-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Support for Heroicons, Lucide, Font Awesome",
|
|
"Size variants (xs, sm, md, lg, xl)",
|
|
"Color customization",
|
|
"Accessibility labels",
|
|
"Animated icons support"
|
|
]
|
|
},
|
|
{
|
|
"id": "icon-picker",
|
|
"name": "Icon Picker",
|
|
"category": "ui-components",
|
|
"description": "Icon search and selection interface",
|
|
"path": "/COMPONENTS/ui-components/IconPicker.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"icon-library-mcp"
|
|
],
|
|
"depends_on": [
|
|
"icon",
|
|
"input",
|
|
"select",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Search by name",
|
|
"Category filtering",
|
|
"Recent icons",
|
|
"Preview before selection",
|
|
"Multi-library support"
|
|
]
|
|
},
|
|
{
|
|
"id": "tooltip",
|
|
"name": "Tooltip",
|
|
"category": "ui-components",
|
|
"description": "Contextual tooltip with multiple placements",
|
|
"path": "/COMPONENTS/ui-components/Tooltip.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"4 placements (top, bottom, left, right)",
|
|
"Auto-positioning",
|
|
"Hover and click triggers",
|
|
"Delay configuration",
|
|
"ARIA compliance"
|
|
]
|
|
},
|
|
{
|
|
"id": "popover",
|
|
"name": "Popover",
|
|
"category": "ui-components",
|
|
"description": "Floating popover with portal rendering",
|
|
"path": "/COMPONENTS/ui-components/Popover.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Portal rendering",
|
|
"Click outside to close",
|
|
"Arrow indicator",
|
|
"Placement options",
|
|
"Focus trap"
|
|
]
|
|
},
|
|
{
|
|
"id": "accordion",
|
|
"name": "Accordion",
|
|
"category": "ui-components",
|
|
"description": "Collapsible content with keyboard navigation",
|
|
"path": "/COMPONENTS/ui-components/Accordion.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Single or multiple expansion",
|
|
"Keyboard navigation",
|
|
"Animated transitions",
|
|
"ARIA accordion pattern",
|
|
"Controlled/uncontrolled modes"
|
|
]
|
|
},
|
|
{
|
|
"id": "drawer",
|
|
"name": "Drawer",
|
|
"category": "ui-components",
|
|
"description": "Slide-out drawer/sidebar with focus trap",
|
|
"path": "/COMPONENTS/ui-components/Drawer.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Slide from left/right/top/bottom",
|
|
"Focus trap",
|
|
"Body scroll lock",
|
|
"Backdrop with blur",
|
|
"ESC key support"
|
|
]
|
|
},
|
|
{
|
|
"id": "dialog",
|
|
"name": "Dialog",
|
|
"category": "ui-components",
|
|
"description": "Accessible modal dialog",
|
|
"path": "/COMPONENTS/ui-components/Dialog.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Size options (sm, md, lg, xl)",
|
|
"Focus trap implementation",
|
|
"ESC key and backdrop close",
|
|
"Body scroll lock",
|
|
"ARIA dialog support"
|
|
]
|
|
},
|
|
{
|
|
"id": "slider",
|
|
"name": "Slider",
|
|
"category": "ui-components",
|
|
"description": "Range slider with marks and tooltips",
|
|
"path": "/COMPONENTS/ui-components/Slider.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Single and range sliders",
|
|
"Mark indicators",
|
|
"Tooltip with value",
|
|
"Keyboard navigation",
|
|
"ARIA slider pattern"
|
|
]
|
|
},
|
|
{
|
|
"id": "color-picker",
|
|
"name": "Color Picker",
|
|
"category": "ui-components",
|
|
"description": "Color selection with HEX/RGB/HSL modes",
|
|
"path": "/COMPONENTS/ui-components/ColorPicker.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"visual-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"input",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"HEX/RGB/HSL input modes",
|
|
"Color palette swatches",
|
|
"Eyedropper tool",
|
|
"Alpha channel support",
|
|
"Recent colors"
|
|
]
|
|
},
|
|
{
|
|
"id": "date-picker",
|
|
"name": "Date Picker",
|
|
"category": "ui-components",
|
|
"description": "Calendar date picker with range selection",
|
|
"path": "/COMPONENTS/ui-components/DatePicker.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"input",
|
|
"popover",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Single date and range selection",
|
|
"Min/max date constraints",
|
|
"Disabled dates",
|
|
"Month/year navigation",
|
|
"Keyboard navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "time-picker",
|
|
"name": "Time Picker",
|
|
"category": "ui-components",
|
|
"description": "Time selection with 12/24hr formats",
|
|
"path": "/COMPONENTS/ui-components/TimePicker.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"input",
|
|
"select",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"12/24 hour format",
|
|
"Hour/minute selection",
|
|
"Keyboard input",
|
|
"Dropdown selection",
|
|
"Time validation"
|
|
]
|
|
},
|
|
{
|
|
"id": "file-upload",
|
|
"name": "File Upload",
|
|
"category": "ui-components",
|
|
"description": "File upload with drag-and-drop",
|
|
"path": "/COMPONENTS/ui-components/FileUpload.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Drag and drop",
|
|
"Multiple file support",
|
|
"File type validation",
|
|
"Size limits",
|
|
"Upload progress",
|
|
"Preview thumbnails"
|
|
]
|
|
},
|
|
{
|
|
"id": "progress",
|
|
"name": "Progress",
|
|
"category": "ui-components",
|
|
"description": "Linear and circular progress indicators",
|
|
"path": "/COMPONENTS/ui-components/Progress.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Linear and circular styles",
|
|
"Determinate and indeterminate modes",
|
|
"Color variants",
|
|
"Size options",
|
|
"Label display"
|
|
]
|
|
},
|
|
{
|
|
"id": "badge",
|
|
"name": "Badge",
|
|
"category": "ui-components",
|
|
"description": "Notification badge with variants",
|
|
"path": "/COMPONENTS/ui-components/Badge.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"visual-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Variant styles (default, primary, success, warning, error)",
|
|
"Size options (sm, md, lg)",
|
|
"Dot indicator",
|
|
"Removable option",
|
|
"Count display"
|
|
]
|
|
},
|
|
{
|
|
"id": "alert",
|
|
"name": "Alert",
|
|
"category": "ui-components",
|
|
"description": "Alert message with variants",
|
|
"path": "/COMPONENTS/ui-components/Alert.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"icon",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Variant styles (info, success, warning, error)",
|
|
"Closeable option",
|
|
"Icon support",
|
|
"Title and description",
|
|
"Action buttons"
|
|
]
|
|
},
|
|
{
|
|
"id": "breadcrumb",
|
|
"name": "Breadcrumb",
|
|
"category": "ui-components",
|
|
"description": "Breadcrumb navigation",
|
|
"path": "/COMPONENTS/ui-components/Breadcrumb.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"accessibility-engineer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Automatic separator",
|
|
"Current page indicator",
|
|
"Truncation for long paths",
|
|
"ARIA navigation",
|
|
"Custom separators"
|
|
]
|
|
},
|
|
{
|
|
"id": "stepper",
|
|
"name": "Stepper",
|
|
"category": "ui-components",
|
|
"description": "Step-by-step progress indicator",
|
|
"path": "/COMPONENTS/ui-components/Stepper.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Horizontal and vertical layouts",
|
|
"Step status (active, completed, error)",
|
|
"Clickable steps",
|
|
"Optional descriptions",
|
|
"Progress line"
|
|
]
|
|
},
|
|
{
|
|
"id": "rating",
|
|
"name": "Rating",
|
|
"category": "ui-components",
|
|
"description": "Star rating component",
|
|
"path": "/COMPONENTS/ui-components/Rating.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"icon",
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Star or custom icon",
|
|
"Half-star support",
|
|
"Read-only mode",
|
|
"Hover preview",
|
|
"Keyboard navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "skeleton-loader-enhanced",
|
|
"name": "Skeleton Loader Enhanced",
|
|
"category": "ui-components",
|
|
"description": "Enhanced skeleton loader with complex layouts",
|
|
"path": "/COMPONENTS/ui-components/SkeletonLoaderEnhanced.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"ux-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Complex layout templates",
|
|
"Card/list/table skeletons",
|
|
"Wave animation",
|
|
"Custom shape composition",
|
|
"Avatar + text patterns"
|
|
]
|
|
},
|
|
{
|
|
"id": "grid",
|
|
"name": "Grid",
|
|
"category": "ui-components",
|
|
"description": "CSS Grid wrapper with responsive columns",
|
|
"path": "/COMPONENTS/ui-components/Grid.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Responsive column count",
|
|
"Gap control",
|
|
"Auto-fit/auto-fill",
|
|
"Min-width constraints",
|
|
"Alignment options"
|
|
]
|
|
},
|
|
{
|
|
"id": "container",
|
|
"name": "Container",
|
|
"category": "ui-components",
|
|
"description": "Max-width container with padding",
|
|
"path": "/COMPONENTS/ui-components/Container.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Max-width variants (sm, md, lg, xl, 2xl, full)",
|
|
"Responsive padding",
|
|
"Center alignment",
|
|
"Fluid option"
|
|
]
|
|
},
|
|
{
|
|
"id": "stack",
|
|
"name": "Stack",
|
|
"category": "ui-components",
|
|
"description": "Flex stack (vertical/horizontal)",
|
|
"path": "/COMPONENTS/ui-components/Stack.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Vertical/horizontal direction",
|
|
"Spacing control",
|
|
"Alignment options",
|
|
"Wrap support",
|
|
"Divider option"
|
|
]
|
|
},
|
|
{
|
|
"id": "spacer",
|
|
"name": "Spacer",
|
|
"category": "ui-components",
|
|
"description": "Flexible spacing component",
|
|
"path": "/COMPONENTS/ui-components/Spacer.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect",
|
|
"visual-designer"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [],
|
|
"features": [
|
|
"Fixed or flex sizing",
|
|
"Horizontal/vertical",
|
|
"Responsive spacing",
|
|
"Design token integration"
|
|
]
|
|
},
|
|
{
|
|
"id": "divider",
|
|
"name": "Divider",
|
|
"category": "ui-components",
|
|
"description": "Visual divider (horizontal/vertical)",
|
|
"path": "/COMPONENTS/ui-components/Divider.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"visual-designer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"design-token-manager-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Horizontal/vertical orientation",
|
|
"Label/text in divider",
|
|
"Thickness control",
|
|
"Color variants",
|
|
"Spacing options"
|
|
]
|
|
},
|
|
{
|
|
"id": "aspect-ratio",
|
|
"name": "Aspect Ratio",
|
|
"category": "ui-components",
|
|
"description": "Maintain aspect ratio wrapper",
|
|
"path": "/COMPONENTS/ui-components/AspectRatio.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Common ratios (1:1, 16:9, 4:3, 21:9)",
|
|
"Custom ratio support",
|
|
"Responsive behavior",
|
|
"Content positioning"
|
|
]
|
|
},
|
|
{
|
|
"id": "center",
|
|
"name": "Center",
|
|
"category": "ui-components",
|
|
"description": "Center content horizontally and vertically",
|
|
"path": "/COMPONENTS/ui-components/Center.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Horizontal centering",
|
|
"Vertical centering",
|
|
"Both axes centering",
|
|
"Inline option"
|
|
]
|
|
},
|
|
{
|
|
"id": "switch",
|
|
"name": "Switch",
|
|
"category": "ui-components",
|
|
"description": "Toggle switch with ARIA",
|
|
"path": "/COMPONENTS/ui-components/Switch.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"On/off toggle",
|
|
"Size variants (sm, md, lg)",
|
|
"Disabled state",
|
|
"ARIA switch role",
|
|
"Keyboard navigation"
|
|
]
|
|
},
|
|
{
|
|
"id": "checkbox",
|
|
"name": "Checkbox",
|
|
"category": "ui-components",
|
|
"description": "Checkbox with indeterminate state",
|
|
"path": "/COMPONENTS/ui-components/Checkbox.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"Checked/unchecked/indeterminate states",
|
|
"Label support",
|
|
"Error state",
|
|
"Disabled state",
|
|
"ARIA checkbox"
|
|
]
|
|
},
|
|
{
|
|
"id": "radio",
|
|
"name": "Radio",
|
|
"category": "ui-components",
|
|
"description": "Radio button with RadioGroup",
|
|
"path": "/COMPONENTS/ui-components/Radio.tsx",
|
|
"status": "active",
|
|
"language": "typescript",
|
|
"framework": "react",
|
|
"supports_skills": [
|
|
"frontend-builder",
|
|
"accessibility-engineer",
|
|
"design-system-architect"
|
|
],
|
|
"supports_mcps": [
|
|
"component-generator-mcp",
|
|
"accessibility-checker-mcp"
|
|
],
|
|
"depends_on": [
|
|
"cn-utility"
|
|
],
|
|
"features": [
|
|
"RadioGroup for managing selection",
|
|
"Keyboard navigation",
|
|
"Label support",
|
|
"Disabled options",
|
|
"ARIA radio pattern"
|
|
]
|
|
}
|
|
],
|
|
"categories": {
|
|
"agents": {
|
|
"name": "AI Agents",
|
|
"count": 1,
|
|
"description": "Reusable AI agent implementations",
|
|
"components": [
|
|
"simple-task-agent"
|
|
],
|
|
"needed": [
|
|
"rag-agent",
|
|
"research-agent",
|
|
"code-review-agent",
|
|
"multi-agent-coordinator"
|
|
]
|
|
},
|
|
"auth": {
|
|
"name": "Authentication",
|
|
"count": 4,
|
|
"description": "Authentication and authorization components",
|
|
"components": [
|
|
"login-form",
|
|
"signup-form",
|
|
"password-reset",
|
|
"protected-route"
|
|
],
|
|
"needed": []
|
|
},
|
|
"errors": {
|
|
"name": "Error Handling",
|
|
"count": 3,
|
|
"description": "Error display and handling components",
|
|
"components": [
|
|
"error-boundary",
|
|
"error-fallback",
|
|
"not-found"
|
|
],
|
|
"needed": []
|
|
},
|
|
"feedback": {
|
|
"name": "User Feedback",
|
|
"count": 3,
|
|
"description": "Loading states and user feedback components",
|
|
"components": [
|
|
"loading-spinner",
|
|
"skeleton",
|
|
"toast"
|
|
],
|
|
"needed": [
|
|
"progress-bar",
|
|
"alert",
|
|
"modal"
|
|
]
|
|
},
|
|
"forms": {
|
|
"name": "Forms",
|
|
"count": 2,
|
|
"description": "Form components and utilities",
|
|
"components": [
|
|
"form-field",
|
|
"use-form"
|
|
],
|
|
"needed": [
|
|
"select",
|
|
"checkbox",
|
|
"radio",
|
|
"file-upload"
|
|
]
|
|
},
|
|
"mcp-servers": {
|
|
"name": "MCP Servers",
|
|
"count": 4,
|
|
"description": "MCP server component implementations",
|
|
"components": [
|
|
"base-mcp-server",
|
|
"mcp-tool-handler",
|
|
"mcp-resource-handler",
|
|
"mcp-prompt-handler"
|
|
],
|
|
"needed": []
|
|
},
|
|
"rag-pipelines": {
|
|
"name": "RAG Pipelines",
|
|
"count": 6,
|
|
"description": "RAG pipeline components",
|
|
"components": [
|
|
"document-loader",
|
|
"text-chunker",
|
|
"embedding-pipeline",
|
|
"vector-store-client",
|
|
"retrieval-pipeline",
|
|
"rag-orchestrator"
|
|
],
|
|
"needed": []
|
|
},
|
|
"ui-components": {
|
|
"name": "UI Components",
|
|
"count": 44,
|
|
"description": "General UI components",
|
|
"components": [
|
|
"button",
|
|
"card",
|
|
"input",
|
|
"modal",
|
|
"select",
|
|
"table",
|
|
"tabs",
|
|
"pagination",
|
|
"cn-utility",
|
|
"icon",
|
|
"icon-picker",
|
|
"tooltip",
|
|
"popover",
|
|
"accordion",
|
|
"drawer",
|
|
"dialog",
|
|
"slider",
|
|
"color-picker",
|
|
"date-picker",
|
|
"time-picker",
|
|
"file-upload",
|
|
"progress",
|
|
"badge",
|
|
"alert",
|
|
"breadcrumb",
|
|
"stepper",
|
|
"rating",
|
|
"skeleton-loader-enhanced",
|
|
"grid",
|
|
"container",
|
|
"stack",
|
|
"spacer",
|
|
"divider",
|
|
"aspect-ratio",
|
|
"center",
|
|
"switch",
|
|
"checkbox",
|
|
"radio"
|
|
],
|
|
"needed": [
|
|
"dropdown"
|
|
]
|
|
},
|
|
"workflows": {
|
|
"name": "Workflows",
|
|
"count": 4,
|
|
"description": "Workflow orchestration components",
|
|
"components": [
|
|
"task-queue",
|
|
"workflow-orchestrator",
|
|
"state-manager",
|
|
"event-bus"
|
|
],
|
|
"needed": []
|
|
},
|
|
"media": {
|
|
"name": "Media Components",
|
|
"count": 6,
|
|
"description": "Image, gallery, carousel, and media handling components",
|
|
"components": [
|
|
"image",
|
|
"gallery",
|
|
"carousel",
|
|
"image-upload",
|
|
"avatar",
|
|
"media-viewer"
|
|
],
|
|
"needed": []
|
|
}
|
|
},
|
|
"critical_missing_categories": [],
|
|
"statistics": {
|
|
"total_components": 70,
|
|
"by_category": {
|
|
"agents": 1,
|
|
"auth": 4,
|
|
"errors": 3,
|
|
"feedback": 3,
|
|
"forms": 2,
|
|
"mcp-servers": 4,
|
|
"rag-pipelines": 6,
|
|
"ui-components": 44,
|
|
"workflows": 4,
|
|
"media": 6
|
|
},
|
|
"empty_categories": 0,
|
|
"skills_covered": 18
|
|
},
|
|
"usage_notes": {
|
|
"purpose": "This registry catalogs reusable component implementations",
|
|
"installation": "Use 'ai-dev install component <name>' to install components",
|
|
"cross_references": [
|
|
"META/skill-registry.json - Maps skills to components",
|
|
"META/mcp-registry.json - Maps MCPs to components"
|
|
],
|
|
"adding_components": "Place components in appropriate subdirectories in COMPONENTS/",
|
|
"documentation": "Each component must include usage examples and props documentation"
|
|
}
|
|
} |