claude-autopm 2.8.2 → 2.8.3

package/packages/plugin-frameworks/rules/ui-development-standards.md

@@ -0,0 +1,281 @@
+# UI Development Standards Rule
+
+> **PURPOSE**: Mandatory standards for consistent UI/UX development across projects.
+
+## CRITICAL UI FRAMEWORK SELECTION
+
+### 1. FRAMEWORK DECISION MATRIX
+
+**Bootstrap** - Use `react-ui-expert` (framework=bootstrap):
+
+- Rapid prototyping and MVP development
+- Component-heavy applications (dashboards, admin panels)
+- Team prefers pre-built components
+- Consistent enterprise-grade design needed
+- Less custom design requirements
+
+**TailwindCSS** - Use `tailwindcss-expert`:
+
+- Custom design systems and unique branding
+- High-performance applications (smaller bundle sizes)
+- Design flexibility and utility-first approach needed
+- Developer team comfortable with utility classes
+- Modern, cutting-edge UI requirements
+
+**Selection Criteria**:
+
+```
+IF (rapid_development && pre_built_components) → Bootstrap
+IF (custom_design && performance_critical) → TailwindCSS
+IF (design_system_needed) → TailwindCSS
+IF (enterprise_consistency) → Bootstrap
+```
+
+### 2. RESPONSIVE DESIGN REQUIREMENTS
+
+**MANDATORY Responsive Breakpoints**:
+
+- Mobile First: Design for mobile, enhance for desktop
+- Breakpoints: 576px (sm), 768px (md), 992px (lg), 1200px (xl), 1400px (xxl)
+- Touch-friendly: Minimum 44px touch targets
+- Readable text: Minimum 16px font size on mobile
+
+**Testing Requirements**:
+
+- Test on actual devices, not just browser dev tools
+- Validate touch interactions on mobile devices
+- Ensure content reflows properly at all breakpoints
+- Test landscape and portrait orientations
+
+### 3. ACCESSIBILITY STANDARDS (WCAG 2.1 AA)
+
+**MANDATORY Accessibility Features**:
+
+- Semantic HTML structure (headings h1-h6 hierarchy)
+- Alt text for all images and meaningful graphics
+- Proper form labels and error messages
+- Keyboard navigation support
+- Color contrast ratio ≥ 4.5:1 for normal text
+- Focus indicators visible and high contrast
+
+**Implementation Requirements**:
+
+```html
+<!-- ALWAYS include proper ARIA labels -->
+<button aria-label="Close modal" aria-expanded="false">×</button>
+
+<!-- ALWAYS use semantic HTML -->
+<nav role="navigation">
+  <ul>
+    <li><a href="#section1">Section 1</a></li>
+  </ul>
+</nav>
+
+<!-- ALWAYS provide alternative text -->
+<img src="chart.png" alt="Sales increased 25% in Q3 2024">
+```
+
+### 4. PERFORMANCE STANDARDS
+
+**Bootstrap Projects**:
+
+- Bundle size limit: < 300KB (CSS + JS gzipped)
+- Custom builds: Include only required components
+- Optimize images: WebP format with fallbacks
+- Minimize DOM depth: < 15 levels deep
+
+**TailwindCSS Projects**:
+
+- PurgeCSS enabled: Remove unused utilities
+- Bundle size limit: < 50KB (CSS gzipped)
+- JIT mode enabled for development
+- Production builds must be optimized
+
+**Performance Metrics** (REQUIRED):
+
+- First Contentful Paint (FCP) < 1.5s
+- Largest Contentful Paint (LCP) < 2.5s
+- Cumulative Layout Shift (CLS) < 0.1
+- Time to Interactive (TTI) < 3.5s
+
+### 5. BROWSER COMPATIBILITY REQUIREMENTS
+
+**Supported Browsers** (MINIMUM):
+
+- Chrome/Edge: Last 2 versions
+- Firefox: Last 2 versions  
+- Safari: Last 2 versions
+- Mobile Safari (iOS): Last 2 versions
+- Chrome Mobile (Android): Last 2 versions
+
+**Fallback Strategies**:
+
+- Progressive enhancement approach
+- Graceful degradation for unsupported features
+- Polyfills for critical missing features
+- Alternative layouts for older browsers
+
+### 6. COMPONENT ARCHITECTURE STANDARDS
+
+**Bootstrap Components**:
+
+```html
+<!-- ALWAYS use consistent class patterns -->
+<div class="card h-100 shadow-sm">
+  <div class="card-header d-flex justify-content-between align-items-center">
+    <h5 class="card-title mb-0">Title</h5>
+    <button class="btn btn-sm btn-outline-secondary">Action</button>
+  </div>
+  <div class="card-body">
+    <p class="card-text">Content</p>
+  </div>
+</div>
+```
+
+**TailwindCSS Components**:
+
+```html
+<!-- ALWAYS extract component patterns -->
+<div class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow">
+  <div class="flex justify-between items-center mb-4">
+    <h3 class="text-lg font-semibold text-gray-900">Title</h3>
+    <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200">
+      Action
+    </button>
+  </div>
+  <p class="text-gray-600">Content</p>
+</div>
+```
+
+### 7. FORM VALIDATION STANDARDS
+
+**Client-Side Validation** (MANDATORY):
+
+- Real-time validation feedback
+- Clear error messages
+- Visual error indicators
+- Success confirmation states
+
+**Implementation Pattern**:
+
+```html
+<!-- Bootstrap form validation -->
+<form class="needs-validation" novalidate>
+  <div class="mb-3">
+    <label for="email" class="form-label">Email</label>
+    <input type="email" class="form-control" id="email" required>
+    <div class="invalid-feedback">Please provide a valid email.</div>
+    <div class="valid-feedback">Looks good!</div>
+  </div>
+</form>
+
+<!-- TailwindCSS form validation -->
+<form>
+  <div class="mb-4">
+    <label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+    <input 
+      type="email" 
+      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+      required
+    >
+    <p class="mt-1 text-sm text-red-600 hidden">Please provide a valid email.</p>
+  </div>
+</form>
+```
+
+### 8. DARK MODE IMPLEMENTATION
+
+**TailwindCSS Dark Mode**:
+
+```html
+<!-- ALWAYS support dark mode with TailwindCSS -->
+<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
+  <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Title</h1>
+  <p class="text-gray-600 dark:text-gray-300">Content</p>
+</div>
+```
+
+**Bootstrap Dark Mode**:
+
+```html
+<!-- Use Bootstrap 5.3+ dark mode support -->
+<html data-bs-theme="dark">
+<div class="card">
+  <div class="card-body">
+    <h5 class="card-title">Dark Mode Card</h5>
+  </div>
+</div>
+</html>
+```
+
+### 9. TESTING REQUIREMENTS
+
+**Visual Testing** (MANDATORY):
+
+- Screenshot testing across breakpoints
+- Cross-browser visual comparison
+- Accessibility audit with tools (axe, WAVE)
+- Color contrast validation
+
+**Functional Testing**:
+
+- Form submission and validation
+- Interactive component behavior
+- Navigation and routing
+- Mobile touch interactions
+
+**Performance Testing**:
+
+- Bundle size monitoring
+- Load time measurement
+- Core Web Vitals tracking
+- Lighthouse audit scores ≥ 90
+
+### 10. CODE ORGANIZATION STANDARDS
+
+**File Structure**:
+
+```
+src/
+├── styles/
+│   ├── bootstrap/          # Bootstrap customizations
+│   │   ├── variables.scss  # Custom variables
+│   │   └── custom.scss     # Custom components
+│   └── tailwind/           # TailwindCSS customizations
+│       ├── config.js       # Tailwind configuration
+│       └── components/     # Component patterns
+├── components/             # Reusable UI components
+└── assets/                 # Images, fonts, icons
+```
+
+**Code Quality**:
+
+- Consistent indentation (2 spaces)
+- Meaningful class names and comments
+- Component reusability and modularity
+- Documentation for complex components
+
+## VIOLATIONS AND ENFORCEMENT
+
+**CRITICAL VIOLATIONS** (Block deployment):
+
+- Missing responsive design implementation
+- Accessibility violations (WCAG 2.1 AA failures)
+- Bundle size exceeds limits
+- No fallback for unsupported browsers
+
+**MAJOR VIOLATIONS** (Require fixes):
+
+- Inconsistent design patterns
+- Missing form validation
+- No dark mode support (for TailwindCSS projects)
+- Performance metrics below thresholds
+
+**MINOR VIOLATIONS** (Address in next iteration):
+
+- Suboptimal component organization
+- Missing hover/focus states
+- Incomplete documentation
+- Non-semantic HTML usage
+
+These standards ensure consistent, accessible, and performant UI development across all projects.

package/packages/plugin-frameworks/rules/ui-framework-rules.md

@@ -0,0 +1,151 @@
+# UI Framework Agent Rules
+
+## MANDATORY BEHAVIORS
+
+### 1. Component-First Development
+
+- Always check existing components before creating new ones
+- Reuse and extend existing patterns
+- Follow the framework's component composition philosophy
+- Never mix multiple UI frameworks in the same project
+
+### 2. Theme Consistency
+
+- Always use the theme/design system for styling
+- Never use inline styles when theme tokens exist
+- Maintain consistent spacing, colors, and typography
+- Follow the framework's theming patterns
+
+### 3. Accessibility Standards
+
+- Every interactive element must be keyboard accessible
+- Maintain proper ARIA labels and roles
+- Ensure sufficient color contrast (WCAG 2.1 AA minimum)
+- Test with screen readers when implementing complex interactions
+
+### 4. Performance Optimization
+
+- Implement code splitting for large component libraries
+- Use lazy loading for heavy components
+- Optimize bundle size with tree-shaking
+- Monitor and minimize re-renders
+
+### 5. Responsive Design
+
+- Mobile-first approach for all layouts
+- Use framework's breakpoint system consistently
+- Test on multiple viewport sizes
+- Ensure touch-friendly interactions on mobile
+
+## PROHIBITED ACTIONS
+
+### Never
+
+- Mix CSS frameworks (e.g., Bootstrap with Tailwind)
+- Use deprecated component APIs
+- Ignore framework conventions for custom solutions
+- Create inaccessible UI patterns
+- Use hard-coded colors/spacing instead of theme values
+- Implement custom form validation when framework provides it
+- Build custom components when framework components exist
+
+## CONTEXT OPTIMIZATION
+
+### Data Return Limits
+
+- Return maximum 20% of analyzed component code
+- Summarize theme configurations instead of full dumps
+- Focus on changed/added components only
+- Use references to existing patterns rather than duplicating
+
+### Search Patterns
+
+- Search for existing similar components first
+- Check theme configuration before implementing styles
+- Review framework documentation for best practices
+- Look for community patterns and examples
+
+## FRAMEWORK-SPECIFIC RULES
+
+### Material-UI (MUI)
+
+- Always use sx prop or styled() for styling
+- Leverage MUI System utilities
+- Follow Material Design principles
+- Use ProComponents for complex features
+
+### Chakra UI
+
+- Use style props over CSS
+- Leverage Chakra hooks for common patterns
+- Follow the modular component approach
+- Maintain color mode compatibility
+
+### Ant Design
+
+- Use ConfigProvider for global configuration
+- Leverage ProComponents for enterprise features
+- Follow Ant Design patterns
+- Maintain form validation consistency
+
+### Bootstrap
+
+- Use utility classes over custom CSS
+- Follow Bootstrap's grid system
+- Maintain responsive breakpoints
+- Use Bootstrap variables for customization
+
+### Tailwind CSS
+
+- Follow utility-first methodology
+- Use @apply sparingly
+- Maintain consistent class ordering
+- Leverage Tailwind config for customization
+
+## TESTING REQUIREMENTS
+
+### Component Testing
+
+- Test all interactive components
+- Verify accessibility with automated tools
+- Test responsive behavior
+- Validate theme switching
+
+### Visual Testing
+
+- Capture screenshots for visual regression
+- Test dark/light mode variations
+- Verify responsive layouts
+- Check cross-browser compatibility
+
+## INTEGRATION RULES
+
+### With React Frontend Engineer
+
+- Coordinate on component architecture
+- Share state management patterns
+- Align on TypeScript interfaces
+- Maintain consistent file structure
+
+### With Playwright Test Engineer
+
+- Provide stable selectors for testing
+- Document component APIs
+- Ensure testability of interactions
+- Support visual regression testing
+
+## DOCUMENTATION STANDARDS
+
+### Component Documentation
+
+- Document all props with TypeScript
+- Provide usage examples
+- Include accessibility notes
+- Note performance considerations
+
+### Theme Documentation
+
+- Document custom theme values
+- Explain design decisions
+- Provide color/spacing scales
+- Include responsive breakpoints

package/packages/plugin-frameworks/scripts/examples/react-component-perf.sh

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# React component performance analysis
+# Usage: ./react-component-perf.sh [component-path]
+
+set -euo pipefail
+
+COMPONENT_PATH="${1:-.}"
+
+echo "⚛️  Analyzing React component performance patterns..."
+
+# Check for common performance issues
+echo ""
+echo "🔍 Checking for useMemo/useCallback opportunities..."
+grep -r "function.*{" "$COMPONENT_PATH" --include="*.jsx" --include="*.tsx" | wc -l | xargs -I {} echo "  Found {} inline functions (consider useCallback)"
+
+echo ""
+echo "🔍 Checking for React.memo usage..."
+MEMO_COUNT=$(grep -r "React.memo\|memo(" "$COMPONENT_PATH" --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l || echo "0")
+echo "  Components wrapped with memo: $MEMO_COUNT"
+
+echo ""
+echo "🔍 Checking for expensive calculations..."
+grep -r "\.map\|\.filter\|\.reduce" "$COMPONENT_PATH" --include="*.jsx" --include="*.tsx" 2>/dev/null | wc -l | xargs -I {} echo "  Array operations found: {} (consider useMemo)"
+
+echo ""
+echo "📋 Best practices from Context7:"
+echo "  ✓ Use useMemo for expensive calculations"
+echo "  ✓ Use useCallback for functions passed as props"
+echo "  ✓ Wrap components with React.memo when props don't change often"
+echo "  ✓ Avoid inline object/array creation in render"
+echo "  ✓ Use dependency arrays correctly in hooks"
+
+echo ""
+echo "✅ Analysis complete"

package/packages/plugin-frameworks/scripts/examples/tailwind-optimize.sh

@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+# Tailwind CSS optimization checker
+# Usage: ./tailwind-optimize.sh [src-path]
+
+set -euo pipefail
+
+SRC_PATH="${1:-./src}"
+
+echo "🎨 Analyzing Tailwind CSS usage and optimization..."
+
+# Check for responsive design patterns
+echo ""
+echo "🔍 Checking responsive design patterns..."
+RESPONSIVE_COUNT=$(grep -r "sm:\|md:\|lg:\|xl:\|2xl:" "$SRC_PATH" --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l || echo "0")
+echo "  Responsive utility classes: $RESPONSIVE_COUNT"
+
+echo ""
+echo "🔍 Checking for arbitrary values..."
+ARBITRARY_COUNT=$(grep -r "\[.*\]" "$SRC_PATH" --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | grep -E "className=|class=" | wc -l || echo "0")
+echo "  Arbitrary values used: $ARBITRARY_COUNT"
+
+echo ""
+echo "🔍 Checking container queries..."
+CONTAINER_COUNT=$(grep -r "@container\|@\[" "$SRC_PATH" --include="*.jsx" --include="*.tsx" --include="*.vue" --include="*.html" 2>/dev/null | wc -l || echo "0")
+echo "  Container query usage: $CONTAINER_COUNT"
+
+echo ""
+echo "🔍 Checking for utility-first patterns..."
+if [ -f "tailwind.config.js" ] || [ -f "tailwind.config.ts" ]; then
+    echo "  ✓ Tailwind config found"
+else
+    echo "  ⚠️  No tailwind.config found"
+fi
+
+echo ""
+echo "📋 Best practices from Context7:"
+echo "  ✓ Use responsive variants (sm:, md:, lg:) for mobile-first design"
+echo "  ✓ Leverage container queries (@container) for component-based responsiveness"
+echo "  ✓ Use arbitrary values sparingly [value] for one-off designs"
+echo "  ✓ Configure purge/content in tailwind.config for production optimization"
+echo "  ✓ Use @apply in components for repeated utility patterns"
+
+echo ""
+echo "✅ Tailwind optimization check complete"

package/packages/plugin-frameworks/scripts/examples/vue-composition-check.sh

@@ -0,0 +1,41 @@
+#!/usr/bin/env bash
+# Vue Composition API usage checker
+# Usage: ./vue-composition-check.sh [component-path]
+
+set -euo pipefail
+
+COMPONENT_PATH="${1:-.}"
+
+echo "🎭 Checking Vue Composition API patterns..."
+
+# Check for Composition API usage
+echo ""
+echo "🔍 Checking <script setup> usage..."
+SETUP_COUNT=$(grep -r "<script setup>" "$COMPONENT_PATH" --include="*.vue" 2>/dev/null | wc -l || echo "0")
+echo "  Components using <script setup>: $SETUP_COUNT"
+
+echo ""
+echo "🔍 Checking ref/reactive usage..."
+REF_COUNT=$(grep -r "ref(\|reactive(" "$COMPONENT_PATH" --include="*.vue" 2>/dev/null | wc -l || echo "0")
+echo "  Reactive state declarations: $REF_COUNT"
+
+echo ""
+echo "🔍 Checking computed properties..."
+COMPUTED_COUNT=$(grep -r "computed(" "$COMPONENT_PATH" --include="*.vue" 2>/dev/null | wc -l || echo "0")
+echo "  Computed properties: $COMPUTED_COUNT"
+
+echo ""
+echo "🔍 Checking lifecycle hooks..."
+LIFECYCLE_COUNT=$(grep -r "onMounted\|onBeforeMount\|onUnmounted" "$COMPONENT_PATH" --include="*.vue" 2>/dev/null | wc -l || echo "0")
+echo "  Lifecycle hooks: $LIFECYCLE_COUNT"
+
+echo ""
+echo "📋 Best practices from Context7:"
+echo "  ✓ Prefer <script setup> for cleaner syntax"
+echo "  ✓ Use ref() for primitives, reactive() for objects"
+echo "  ✓ Leverage computed() for derived state"
+echo "  ✓ Use defineProps() and defineEmits() for component API"
+echo "  ✓ Apply composition functions for reusable logic"
+
+echo ""
+echo "✅ Vue Composition API check complete"