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>
Third-Party Integrations
Pre-configured integration templates for popular services and platforms.
Categories
1. Framework Adapters (framework-adapters/)
Adapters for integrating with popular frameworks like Next.js, Remix, Astro.
2. LLM Providers (llm-providers/)
Ready-to-use integrations for OpenAI, Anthropic, Together AI, and more.
3. Platforms (platforms/)
Platform integrations for Vercel, AWS, Supabase, Firebase, etc.
4. Vector Databases (vector-databases/)
Integration code for Pinecone, Weaviate, Qdrant, Chroma, and more.
Usage
Install integrations with:
ai-dev setup <service>
Examples:
ai-dev setup supabase
ai-dev setup openai
ai-dev setup pinecone
Integration code is copied to .ai-dev/integrations/ in your project.
Available Integrations
| Category | Service | Description |
|---|---|---|
| Auth | Supabase | Authentication and database |
| Auth | Clerk | User management |
| Auth | Auth0 | Enterprise auth |
| Payments | Stripe | Payment processing |
| Resend | Transactional email | |
| Vector DB | Pinecone | Vector database |
| LLM | OpenAI | GPT models |
| LLM | Anthropic | Claude models |
Adding Custom Integrations
Place custom integration code in .ai-dev/integrations/custom/
Built for rapid integration ⚡