mirror of
https://github.com/daffy0208/ai-dev-standards.git
synced 2026-09-14 20:49:49 +08:00
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>
445 lines
13 KiB
JavaScript
445 lines
13 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
/**
|
|
* Generator Test Suite
|
|
* Tests all code generators to ensure they produce valid, working code
|
|
*/
|
|
|
|
const fs = require('fs-extra')
|
|
const path = require('path')
|
|
const ComponentGenerator = require('./CLI/generators/component-generator')
|
|
const McpGenerator = require('./CLI/generators/mcp-generator')
|
|
const IntegrationGenerator = require('./CLI/generators/integration-generator')
|
|
const ToolGenerator = require('./CLI/generators/tool-generator')
|
|
|
|
// Test results
|
|
const testResults = {
|
|
component: { passed: 0, failed: 0, tests: [] },
|
|
mcp: { passed: 0, failed: 0, tests: [] },
|
|
integration: { passed: 0, failed: 0, tests: [] },
|
|
tool: { passed: 0, failed: 0, tests: [] }
|
|
}
|
|
|
|
// Test output directory
|
|
const TEST_OUTPUT_DIR = path.join(__dirname, 'test-output')
|
|
|
|
/**
|
|
* Setup test environment
|
|
*/
|
|
async function setup() {
|
|
console.log('Setting up test environment...\n')
|
|
await fs.ensureDir(TEST_OUTPUT_DIR)
|
|
await fs.emptyDir(TEST_OUTPUT_DIR)
|
|
}
|
|
|
|
/**
|
|
* Cleanup test environment
|
|
*/
|
|
async function cleanup() {
|
|
console.log('\nCleaning up...')
|
|
// Keep test output for inspection
|
|
// await fs.remove(TEST_OUTPUT_DIR)
|
|
}
|
|
|
|
/**
|
|
* Test Component Generator
|
|
*/
|
|
async function testComponentGenerator() {
|
|
console.log('==================================================')
|
|
console.log('Testing Component Generator')
|
|
console.log('==================================================\n')
|
|
|
|
const generator = new ComponentGenerator()
|
|
|
|
// Test 1: Generate basic component with props
|
|
try {
|
|
console.log('Test 1: Generate TestButton with props...')
|
|
const files = await generator.generate({
|
|
name: 'TestButton',
|
|
props: {
|
|
label: 'string',
|
|
onClick: 'function'
|
|
},
|
|
withTests: true,
|
|
withStorybook: false
|
|
})
|
|
|
|
// Verify files
|
|
const expectedFiles = [
|
|
'components/TestButton/TestButton.tsx',
|
|
'components/TestButton/index.ts',
|
|
'components/TestButton/TestButton.test.tsx'
|
|
]
|
|
|
|
for (const file of files) {
|
|
console.log(` ✓ Generated: ${file.path}`)
|
|
|
|
// Write to test output
|
|
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
|
|
await fs.ensureDir(path.dirname(outputPath))
|
|
await fs.writeFile(outputPath, file.content)
|
|
|
|
// Verify file has content
|
|
if (!file.content || file.content.length === 0) {
|
|
throw new Error(`File ${file.path} has no content`)
|
|
}
|
|
|
|
// Verify TypeScript syntax (basic check)
|
|
if (file.path.endsWith('.tsx') || file.path.endsWith('.ts')) {
|
|
if (!file.content.includes('import') && !file.content.includes('export')) {
|
|
throw new Error(`File ${file.path} appears to be missing imports/exports`)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Check for specific fixes
|
|
const testFile = files.find(f => f.path.includes('.test.tsx'))
|
|
if (!testFile.content.includes('renders without crashing')) {
|
|
throw new Error('Test file missing basic test case')
|
|
}
|
|
|
|
testResults.component.passed++
|
|
testResults.component.tests.push({
|
|
name: 'Generate TestButton with props',
|
|
status: 'PASS',
|
|
files: files.map(f => f.path)
|
|
})
|
|
console.log(' ✓ Test 1 PASSED\n')
|
|
} catch (error) {
|
|
testResults.component.failed++
|
|
testResults.component.tests.push({
|
|
name: 'Generate TestButton with props',
|
|
status: 'FAIL',
|
|
error: error.message
|
|
})
|
|
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Test MCP Generator
|
|
*/
|
|
async function testMcpGenerator() {
|
|
console.log('==================================================')
|
|
console.log('Testing MCP Generator')
|
|
console.log('==================================================\n')
|
|
|
|
const generator = new McpGenerator()
|
|
|
|
// Test 1: Generate MCP with tools
|
|
try {
|
|
console.log('Test 1: Generate testvalidation MCP...')
|
|
const files = await generator.generate({
|
|
name: 'testvalidation',
|
|
description: 'Test validation MCP server',
|
|
features: ['tools', 'resources']
|
|
})
|
|
|
|
// Verify files
|
|
const expectedFiles = [
|
|
'MCP-SERVERS/testvalidation-mcp/index.js',
|
|
'MCP-SERVERS/testvalidation-mcp/package.json',
|
|
'MCP-SERVERS/testvalidation-mcp/README.md',
|
|
'MCP-SERVERS/testvalidation-mcp/.env.example'
|
|
]
|
|
|
|
for (const file of files) {
|
|
console.log(` ✓ Generated: ${file.path}`)
|
|
|
|
// Write to test output
|
|
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
|
|
await fs.ensureDir(path.dirname(outputPath))
|
|
await fs.writeFile(outputPath, file.content)
|
|
|
|
// Verify file has content
|
|
if (!file.content || file.content.length === 0) {
|
|
throw new Error(`File ${file.path} has no content`)
|
|
}
|
|
}
|
|
|
|
// Check for Phase 1 & 2 fixes
|
|
const indexFile = files.find(f => f.path.includes('index.js'))
|
|
if (!indexFile.content.includes('args ?? {}')) {
|
|
throw new Error('Missing fix for handling missing arguments')
|
|
}
|
|
|
|
const packageFile = files.find(f => f.path.includes('package.json'))
|
|
const pkg = JSON.parse(packageFile.content)
|
|
if (!pkg.bin) {
|
|
throw new Error('package.json missing bin field')
|
|
}
|
|
|
|
testResults.mcp.passed++
|
|
testResults.mcp.tests.push({
|
|
name: 'Generate testvalidation MCP',
|
|
status: 'PASS',
|
|
files: files.map(f => f.path)
|
|
})
|
|
console.log(' ✓ Test 1 PASSED\n')
|
|
} catch (error) {
|
|
testResults.mcp.failed++
|
|
testResults.mcp.tests.push({
|
|
name: 'Generate testvalidation MCP',
|
|
status: 'FAIL',
|
|
error: error.message
|
|
})
|
|
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Test Integration Generator
|
|
*/
|
|
async function testIntegrationGenerator() {
|
|
console.log('==================================================')
|
|
console.log('Testing Integration Generator')
|
|
console.log('==================================================\n')
|
|
|
|
const generator = new IntegrationGenerator()
|
|
|
|
// Test 1: Generate integration with types and env
|
|
try {
|
|
console.log('Test 1: Generate testapi integration...')
|
|
const files = await generator.generate({
|
|
name: 'testapi',
|
|
provider: 'custom',
|
|
withAuth: false,
|
|
withTypes: true,
|
|
withEnv: true
|
|
})
|
|
|
|
for (const file of files) {
|
|
console.log(` ✓ Generated: ${file.path}`)
|
|
|
|
// Write to test output
|
|
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
|
|
await fs.ensureDir(path.dirname(outputPath))
|
|
await fs.writeFile(outputPath, file.content)
|
|
|
|
// Verify file has content
|
|
if (!file.content || file.content.length === 0) {
|
|
throw new Error(`File ${file.path} has no content`)
|
|
}
|
|
}
|
|
|
|
// Check for Phase 1 & 2 fixes
|
|
const clientFile = files.find(f => f.path.includes('-client.ts'))
|
|
if (!clientFile.content.includes('response.status === 204')) {
|
|
throw new Error('Missing fix for handling 204 responses')
|
|
}
|
|
|
|
if (!clientFile.content.includes('Headers instance to plain object')) {
|
|
throw new Error('Missing fix for Headers instance handling')
|
|
}
|
|
|
|
const indexFile = files.find(f => f.path.endsWith('index.ts'))
|
|
if (!indexFile.content.includes('export type * from')) {
|
|
throw new Error('Missing type exports in index file')
|
|
}
|
|
|
|
testResults.integration.passed++
|
|
testResults.integration.tests.push({
|
|
name: 'Generate testapi integration',
|
|
status: 'PASS',
|
|
files: files.map(f => f.path)
|
|
})
|
|
console.log(' ✓ Test 1 PASSED\n')
|
|
} catch (error) {
|
|
testResults.integration.failed++
|
|
testResults.integration.tests.push({
|
|
name: 'Generate testapi integration',
|
|
status: 'FAIL',
|
|
error: error.message
|
|
})
|
|
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Test Tool Generator
|
|
*/
|
|
async function testToolGenerator() {
|
|
console.log('==================================================')
|
|
console.log('Testing Tool Generator')
|
|
console.log('==================================================\n')
|
|
|
|
const generator = new ToolGenerator()
|
|
|
|
// Test 1: Generate LangChain tool
|
|
try {
|
|
console.log('Test 1: Generate testsearch LangChain tool...')
|
|
const files = await generator.generate({
|
|
name: 'testsearch',
|
|
framework: 'langchain',
|
|
category: 'search'
|
|
})
|
|
|
|
for (const file of files) {
|
|
console.log(` ✓ Generated: ${file.path}`)
|
|
|
|
// Write to test output
|
|
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
|
|
await fs.ensureDir(path.dirname(outputPath))
|
|
await fs.writeFile(outputPath, file.content)
|
|
|
|
// Verify file has content
|
|
if (!file.content || file.content.length === 0) {
|
|
throw new Error(`File ${file.path} has no content`)
|
|
}
|
|
}
|
|
|
|
// Verify correct extension
|
|
const toolFile = files.find(f => f.path.includes('-tool'))
|
|
if (!toolFile.path.endsWith('.ts')) {
|
|
throw new Error('LangChain tool should have .ts extension')
|
|
}
|
|
|
|
testResults.tool.passed++
|
|
testResults.tool.tests.push({
|
|
name: 'Generate testsearch LangChain tool',
|
|
status: 'PASS',
|
|
files: files.map(f => f.path)
|
|
})
|
|
console.log(' ✓ Test 1 PASSED\n')
|
|
} catch (error) {
|
|
testResults.tool.failed++
|
|
testResults.tool.tests.push({
|
|
name: 'Generate testsearch LangChain tool',
|
|
status: 'FAIL',
|
|
error: error.message
|
|
})
|
|
console.log(` ✗ Test 1 FAILED: ${error.message}\n`)
|
|
}
|
|
|
|
// Test 2: Generate CrewAI tool
|
|
try {
|
|
console.log('Test 2: Generate testcrew CrewAI tool...')
|
|
const files = await generator.generate({
|
|
name: 'testcrew',
|
|
framework: 'crewai',
|
|
category: 'custom'
|
|
})
|
|
|
|
for (const file of files) {
|
|
console.log(` ✓ Generated: ${file.path}`)
|
|
|
|
// Write to test output
|
|
const outputPath = path.join(TEST_OUTPUT_DIR, file.path)
|
|
await fs.ensureDir(path.dirname(outputPath))
|
|
await fs.writeFile(outputPath, file.content)
|
|
|
|
// Verify file has content
|
|
if (!file.content || file.content.length === 0) {
|
|
throw new Error(`File ${file.path} has no content`)
|
|
}
|
|
}
|
|
|
|
// Verify correct extension
|
|
const toolFile = files.find(f => f.path.includes('-tool.py'))
|
|
if (!toolFile) {
|
|
throw new Error('CrewAI tool should have .py extension')
|
|
}
|
|
|
|
// Check for datetime import (Phase 2 fix)
|
|
if (!toolFile.content.includes('from datetime import datetime')) {
|
|
throw new Error('CrewAI tool missing datetime import')
|
|
}
|
|
|
|
testResults.tool.passed++
|
|
testResults.tool.tests.push({
|
|
name: 'Generate testcrew CrewAI tool',
|
|
status: 'PASS',
|
|
files: files.map(f => f.path)
|
|
})
|
|
console.log(' ✓ Test 2 PASSED\n')
|
|
} catch (error) {
|
|
testResults.tool.failed++
|
|
testResults.tool.tests.push({
|
|
name: 'Generate testcrew CrewAI tool',
|
|
status: 'FAIL',
|
|
error: error.message
|
|
})
|
|
console.log(` ✗ Test 2 FAILED: ${error.message}\n`)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Print test results
|
|
*/
|
|
function printResults() {
|
|
console.log('\n==================================================')
|
|
console.log('TEST RESULTS SUMMARY')
|
|
console.log('==================================================\n')
|
|
|
|
const categories = ['component', 'mcp', 'integration', 'tool']
|
|
let totalPassed = 0
|
|
let totalFailed = 0
|
|
|
|
for (const category of categories) {
|
|
const results = testResults[category]
|
|
totalPassed += results.passed
|
|
totalFailed += results.failed
|
|
|
|
const status = results.failed === 0 ? '✓ PASS' : '✗ FAIL'
|
|
console.log(`${category.toUpperCase()} Generator: ${status}`)
|
|
console.log(` Passed: ${results.passed}`)
|
|
console.log(` Failed: ${results.failed}`)
|
|
|
|
// Show individual test results
|
|
for (const test of results.tests) {
|
|
if (test.status === 'FAIL') {
|
|
console.log(` ✗ ${test.name}: ${test.error}`)
|
|
} else {
|
|
console.log(` ✓ ${test.name}`)
|
|
}
|
|
}
|
|
console.log()
|
|
}
|
|
|
|
console.log('--------------------------------------------------')
|
|
console.log(`Total Tests: ${totalPassed + totalFailed}`)
|
|
console.log(`Passed: ${totalPassed}`)
|
|
console.log(`Failed: ${totalFailed}`)
|
|
console.log('--------------------------------------------------\n')
|
|
|
|
console.log(`Test output saved to: ${TEST_OUTPUT_DIR}\n`)
|
|
|
|
if (totalFailed > 0) {
|
|
console.log('❌ Some tests failed. Please review the errors above.\n')
|
|
process.exit(1)
|
|
} else {
|
|
console.log('✅ All tests passed!\n')
|
|
process.exit(0)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Main test runner
|
|
*/
|
|
async function main() {
|
|
console.log('\n')
|
|
console.log('╔════════════════════════════════════════════════╗')
|
|
console.log('║ ║')
|
|
console.log('║ Generator Validation Test Suite ║')
|
|
console.log('║ ║')
|
|
console.log('╚════════════════════════════════════════════════╝')
|
|
console.log('\n')
|
|
|
|
try {
|
|
await setup()
|
|
await testComponentGenerator()
|
|
await testMcpGenerator()
|
|
await testIntegrationGenerator()
|
|
await testToolGenerator()
|
|
printResults()
|
|
} catch (error) {
|
|
console.error('Fatal error:', error)
|
|
process.exit(1)
|
|
} finally {
|
|
await cleanup()
|
|
}
|
|
}
|
|
|
|
// Run tests
|
|
main()
|