claude-autopm 2.8.1 → 2.8.2

package/autopm/.claude/rules/ui-framework-rules.md

@@ -1,151 +0,0 @@
-# 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/autopm/.claude/rules/ux-design-rules.md

@@ -1,209 +0,0 @@
-# UX Design Rules
-
-## MANDATORY PRINCIPLES
-
-### 1. User-First Approach
-
-- ALWAYS validate designs with user research or testing
-- NEVER assume user behavior without data
-- ALWAYS consider edge cases and error states
-- NEVER sacrifice usability for aesthetics
-
-### 2. Accessibility is Non-Negotiable
-
-- WCAG 2.1 AA is the minimum standard
-- Every interaction must be keyboard accessible
-- Color must never be the only indicator
-- Alt text and ARIA labels are mandatory
-- Test with screen readers
-
-### 3. Performance is UX
-
-- 3-second rule for initial load
-- 100ms response for user interactions
-- Optimize images and assets
-- Implement progressive loading
-- Monitor Core Web Vitals
-
-### 4. Mobile-First Design
-
-- Start with mobile constraints
-- Touch targets minimum 44x44px (iOS) or 48x48px (Android)
-- Consider thumb reach zones
-- Account for various screen sizes
-- Test on real devices
-
-### 5. Consistency Over Creativity
-
-- Follow established patterns in the system
-- Maintain consistent spacing, colors, typography
-- Reuse components before creating new ones
-- Document any new patterns introduced
-
-## PROHIBITED PRACTICES
-
-### Never
-
-- Use placeholder text as labels
-- Disable browser zoom
-- Hide important content behind hover
-- Use auto-playing media with sound
-- Create custom scrollbars without necessity
-- Implement infinite scroll without alternatives
-- Use justified text alignment for body content
-- Create forms without validation feedback
-- Implement dark patterns or deceptive UX
-- Ignore browser back button behavior
-
-## DESIGN EVALUATION CRITERIA
-
-### Before Implementation
-
-1. **Purpose Clear**: Can users understand the purpose within 5 seconds?
-2. **Task Completion**: Can users complete primary tasks without help?
-3. **Error Recovery**: Can users recover from mistakes easily?
-4. **Accessibility**: Does it pass automated accessibility checks?
-5. **Performance**: Will it meet performance budgets?
-
-### After Implementation
-
-1. **Usability Testing**: Has it been tested with real users?
-2. **Analytics Review**: Are success metrics improving?
-3. **Accessibility Audit**: Manual testing completed?
-4. **Device Testing**: Verified on target devices?
-5. **A/B Testing**: Validated against alternatives?
-
-## INFORMATION HIERARCHY
-
-### Content Organization
-
-- F-pattern for text-heavy pages
-- Z-pattern for landing pages
-- Progressive disclosure for complex information
-- Chunking for better comprehension
-- Visual hierarchy through size, color, spacing
-
-### Navigation Rules
-
-- Maximum 7±2 items in primary navigation
-- Breadcrumbs for deep hierarchies
-- Search for content-heavy sites
-- Clear active states
-- Predictable placement
-
-## INTERACTION DESIGN RULES
-
-### Feedback & Response
-
-- Immediate feedback for all interactions (<100ms)
-- Loading indicators for operations >1 second
-- Success/error messages clearly visible
-- Progress indicators for multi-step processes
-- Confirmation for destructive actions
-
-### Form Design
-
-- One column layout for better completion
-- Inline validation where possible
-- Clear error messages with solutions
-- Optional fields clearly marked
-- Smart defaults and auto-complete
-- Progress save for long forms
-
-## VISUAL DESIGN STANDARDS
-
-### Typography
-
-- Maximum 2-3 typefaces
-- 16px minimum for body text
-- 45-75 characters per line for readability
-- 1.5x line height for body text
-- Sufficient contrast (4.5:1 for normal text)
-
-### Color Usage
-
-- Maximum 3-4 primary colors
-- 60-30-10 rule for color distribution
-- Consider color blindness (8% of men)
-- Test in grayscale
-- Maintain brand consistency
-
-### Spacing & Layout
-
-- 8-point grid system
-- Consistent padding and margins
-- Adequate white space (30-40% minimum)
-- Logical grouping with proximity
-- Responsive breakpoints at standard sizes
-
-## CONVERSION OPTIMIZATION
-
-### Call-to-Action
-
-- One primary CTA per view
-- Action-oriented text
-- Contrasting colors
-- Adequate size and padding
-- Above the fold placement for critical CTAs
-
-### Trust Signals
-
-- Security badges for payments
-- Customer testimonials
-- Clear return policies
-- Contact information visible
-- Professional design quality
-
-## TESTING REQUIREMENTS
-
-### Usability Testing
-
-- 5 users minimum for qualitative insights
-- Task-based scenarios
-- Think-aloud protocol
-- Success rate measurement
-- Time-on-task tracking
-
-### A/B Testing
-
-- Statistical significance required
-- Test one variable at a time
-- Run for complete business cycles
-- Consider seasonal variations
-- Document learnings
-
-## DOCUMENTATION STANDARDS
-
-### Design Specifications
-
-- Exact measurements and spacing
-- Color codes and opacity values
-- Font sizes and weights
-- Animation durations and easing
-- Interaction states (hover, active, focus, disabled)
-
-### Handoff Requirements
-
-- Exported assets in required formats
-- Design tokens documented
-- Component behavior described
-- Edge cases specified
-- Accessibility requirements noted
-
-## CONTEXT OPTIMIZATION
-
-### When Analyzing Designs
-
-- Return key issues and recommendations only
-- Prioritize problems by impact
-- Provide specific, actionable feedback
-- Reference established principles
-- Include quick wins and long-term improvements
-
-### When Implementing Designs
-
-- Focus on changed elements only
-- Reference existing patterns
-- Document new patterns created
-- Note accessibility implementations
-- Track performance impacts

package/autopm/.claude/rules/visual-testing.md

@@ -1,223 +0,0 @@
-# Visual Testing & UI Development Standards
-
-> **CRITICAL**: All UI changes require visual verification and testing.
-
-## Quick Visual Check Protocol
-
-**IMMEDIATELY after implementing any front-end change:**
-
-1. **Identify what changed** - Review modified components/pages
-2. **Navigate to affected pages** - Use browser tools or MCP Playwright
-3. **Verify design compliance** - Check against design system/style guide
-4. **Validate feature implementation** - Ensure change fulfills requirements
-5. **Check acceptance criteria** - Review requirements and context
-6. **Capture evidence** - Screenshots at standard viewports:
-   - Mobile: 375px
-   - Tablet: 768px
-   - Desktop: 1440px
-7. **Check for errors** - Review browser console for JavaScript errors
-8. **Test interactions** - Verify hover states, animations, transitions
-
-## Visual Testing Requirements
-
-### Pre-Commit Checklist
-
-```bash
-# Before committing any UI changes:
-- [ ] Responsive design verified (mobile, tablet, desktop)
-- [ ] Cross-browser testing completed (Chrome, Firefox, Safari, Edge)
-- [ ] Accessibility standards met (WCAG 2.1 AA)
-- [ ] Dark mode compatibility (if applicable)
-- [ ] Loading states implemented
-- [ ] Error states designed
-- [ ] Empty states handled
-- [ ] Animation performance optimized (<60fps)
-- [ ] Images optimized and lazy-loaded
-- [ ] Touch targets minimum 44x44px
-```
-
-## Visual Regression Testing
-
-### Implementation with Playwright
-
-```javascript
-// Visual regression test example
-describe('Component Visual Tests', () => {
-  it('should match visual snapshot', async () => {
-    await page.goto('/component');
-    const screenshot = await page.screenshot();
-    expect(screenshot).toMatchImageSnapshot();
-  });
-  
-  it('should handle responsive breakpoints', async () => {
-    const viewports = [375, 768, 1440];
-    for (const width of viewports) {
-      await page.setViewport({ width, height: 800 });
-      const screenshot = await page.screenshot();
-      expect(screenshot).toMatchImageSnapshot(`viewport-${width}`);
-    }
-  });
-  
-  it('should capture interaction states', async () => {
-    // Normal state
-    await page.screenshot({ path: 'button-normal.png' });
-    
-    // Hover state
-    await page.hover('button');
-    await page.screenshot({ path: 'button-hover.png' });
-    
-    // Focus state
-    await page.focus('button');
-    await page.screenshot({ path: 'button-focus.png' });
-  });
-});
-```
-
-## UI/UX Best Practices
-
-### Core Principles
-
-1. **Consistency**: Use established patterns and components
-2. **Feedback**: Provide immediate visual feedback for interactions
-3. **Progressive Enhancement**: Core functionality works without JavaScript
-4. **Performance**: Optimize for perceived performance
-5. **Accessibility**: Design for all users from the start
-
-### CSS Architecture
-
-```scss
-// Follow BEM methodology
-.block {}
-.block__element {}
-.block--modifier {}
-
-// Component structure example
-.card {
-  &__header {}
-  &__body {}
-  &__footer {}
-  
-  &--featured {
-    .card__header {}
-  }
-}
-```
-
-## Component Development Standards
-
-### Component Checklist
-
-```typescript
-// Every UI component must have:
-- [ ] Props validated with TypeScript/PropTypes
-- [ ] Default props defined
-- [ ] Error boundaries implemented
-- [ ] Memoization applied where needed
-- [ ] Accessibility attributes (ARIA)
-- [ ] Keyboard navigation support
-- [ ] RTL support considered
-- [ ] Theme variables used
-- [ ] Storybook story created
-- [ ] Visual regression tests
-- [ ] Unit tests written
-```
-
-## Accessibility Requirements
-
-### WCAG 2.1 AA Compliance
-
-```html
-<!-- Accessibility checklist -->
-- [ ] Semantic HTML used
-- [ ] ARIA labels where needed
-- [ ] Keyboard navigation works
-- [ ] Focus indicators visible
-- [ ] Color contrast ratios met (4.5:1 normal, 3:1 large)
-- [ ] Alt text for images
-- [ ] Form labels associated
-- [ ] Error messages announced
-- [ ] Skip links implemented
-- [ ] Page language declared
-```
-
-### Automated Accessibility Testing
-
-```javascript
-// Using axe-core for automated testing
-import { axe } from '@axe-core/react';
-
-describe('Accessibility', () => {
-  it('should have no violations', async () => {
-    const results = await axe(container);
-    expect(results).toHaveNoViolations();
-  });
-});
-```
-
-## Design System Compliance
-
-### Required Elements
-
-- **Colors**: Use only defined color tokens
-- **Typography**: Use only defined type scales
-- **Spacing**: Use only defined spacing units
-- **Components**: Use existing components before creating new
-- **Icons**: Use icon system, no inline SVGs
-- **Animations**: Use defined timing functions
-
-## Performance Metrics
-
-### Visual Performance Targets
-
-- First Contentful Paint (FCP): < 1.5s
-- Largest Contentful Paint (LCP): < 2.5s
-- Cumulative Layout Shift (CLS): < 0.1
-- First Input Delay (FID): < 100ms
-- Time to Interactive (TTI): < 5s
-
-## Agent Integration
-
-### Required Agents for Visual Testing
-
-- **frontend-testing-engineer**: Visual regression tests
-- **frontend-testing-engineer**: Browser automation
-- **react-frontend-engineer**: Component development
-- **code-analyzer**: Review UI code quality
-
-### Visual Testing Pipeline
-
-```
-1. Implement UI change following TDD
-2. frontend-testing-engineer → Create visual tests
-3. Run visual regression tests at all breakpoints
-4. code-analyzer → Verify accessibility
-5. Capture screenshots for PR
-6. Document visual changes
-```
-
-## Screenshot Documentation
-
-### When to Include Screenshots
-
-- ✅ Any UI/UX change
-- ✅ New components or features
-- ✅ Style or layout modifications
-- ✅ Responsive design updates
-- ✅ Animation or interaction changes
-- ✅ Error or edge case handling
-
-### Screenshot Requirements
-
-- Show before and after states
-- Include all responsive breakpoints
-- Capture interaction states
-- Annotate important changes
-- Use consistent naming convention
-
-## Success Metrics
-
-- ✅ 100% visual test coverage for UI components
-- ✅ Zero visual regressions in production
-- ✅ All accessibility tests passing
-- ✅ Performance budgets maintained
-- ✅ Design system compliance verified