ai-flow-dev 2.1.2 → 2.1.4

package/templates/frontend/docs/components.template.md

@@ -1,17 +1,13 @@
 # Component Architecture
 
 > Component organization, patterns, and best practices for {{PROJECT_NAME}}
-
 ---
-
 ## 📐 Component Pattern
 
 **Pattern:** {{COMPONENT_PATTERN}}
 
 {{COMPONENT_PATTERN_DESCRIPTION}}
-
 ---
-
 ## 🏗️ Component Hierarchy
 
 ### Atomic Design (if using)
@@ -41,9 +37,7 @@ features/
     hooks/
     services/
 ```
-
 ---
-
 ## 📁 File Structure
 
 ### Component File Organization
@@ -86,9 +80,7 @@ src/
 ├── utils/               # Utility functions
 └── types/               # TypeScript types
 ```
-
 ---
-
 ## 🧩 Component Types
 
 ### 1. Presentational Components (Atoms/Molecules)
@@ -196,9 +188,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({
   );
 };
 ```
-
 ---
-
 ## 🎯 Component Design Principles
 
 ### 1. Single Responsibility
@@ -252,9 +242,7 @@ const auth = useAuth();
 ### 4. Keep It Simple
 
 Avoid premature abstraction. Extract only when pattern emerges 3+ times.
-
 ---
-
 ## 🔧 Component Patterns
 
 ### Pattern: Compound Components
@@ -358,9 +346,7 @@ const SearchInput = () => {
   return <input value={query} onChange={e => setQuery(e.target.value)} />;
 };
 ```
-
 ---
-
 ## 🎨 Styling Strategy
 
 **Approach:** {{STYLING_APPROACH}}
@@ -373,9 +359,7 @@ const SearchInput = () => {
 // Using {{STYLING_APPROACH}}
 {{STYLING_EXAMPLE}}
 ```
-
 ---
-
 ## 🧪 Component Testing
 
 ### What to Test
@@ -417,9 +401,7 @@ describe('Button', () => {
   });
 });
 ```
-
 ---
-
 ## 📦 Component Library
 
 {{#IF_COMPONENT_LIBRARY}}
@@ -437,9 +419,7 @@ describe('Button', () => {
 - ✅ Simple components (Button, Input)
 - ✅ Performance-critical components
 {{/IF_COMPONENT_LIBRARY}}
-
 ---
-
 ## 🚀 Performance Optimization
 
 ### Code Splitting
@@ -481,9 +461,7 @@ import { FixedSizeList } from 'react-window';
   )}
 </FixedSizeList>
 ```
-
 ---
-
 ## ♿ Accessibility Guidelines
 
 ### Semantic HTML
@@ -520,9 +498,7 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 };
 ```
-
 ---
-
 ## 📚 Component Documentation
 
 ### JSDoc Comments
@@ -547,9 +523,7 @@ Each feature directory should have a README explaining:
 - Key components
 - Data flow
 - API dependencies
-
 ---
-
 ## 🔗 Related Documents
 
 - [AI Instructions](../ai-instructions.md) - Development guidelines
@@ -557,11 +531,11 @@ Each feature directory should have a README explaining:
 - [Styling Guide](styling.md) - Styling conventions
 - [Testing Strategy](testing.md) - Testing approach
 - [Performance](performance.md) - Optimization techniques
-
 ---
-
 **Last Updated:** {{GENERATION_DATE}}
 
 **Pattern:** {{COMPONENT_PATTERN}}
 
 **Framework:** {{UI_FRAMEWORK}} {{UI_FRAMEWORK_VERSION}}
+
+

package/templates/frontend/docs/error-handling.template.md

@@ -1,17 +1,13 @@
 # Error Handling
 
 > Error handling strategies and best practices for {{PROJECT_NAME}}
-
----
-
+---
 ## 🎯 Error Handling Strategy
 
 **Approach:** {{ERROR_HANDLING_STRATEGY}}
 **Error Logging:** {{ERROR_LOGGING_TOOL}}
 **Recovery Strategy:** {{ERROR_RECOVERY_STRATEGY}}
-
----
-
+---
 ## 🛡️ Error Boundaries (React)
 
 ### Basic Error Boundary
@@ -75,9 +71,7 @@ export class ErrorBoundary extends Component<Props, State> {
   <App />
 </ErrorBoundary>
 ```
-
----
-
+---
 ## 🔄 Global Error Handlers
 
 ### React Global Error Handler
@@ -123,9 +117,7 @@ export class GlobalErrorHandler implements ErrorHandler {
   }
 }
 ```
-
----
-
+---
 ## 📡 API Error Handling
 
 ### Error Types
@@ -230,9 +222,7 @@ export function handleApiError(error: unknown): {
   };
 }
 ```
-
----
-
+---
 ## 🔁 Retry Logic
 
 ### Exponential Backoff Retry
@@ -282,9 +272,7 @@ const { data } = useQuery({
   retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
 });
 ```
-
----
-
+---
 ## 📝 Error Logging
 
 ### Error Logging Service
@@ -322,9 +310,7 @@ Sentry.setUser({
   username: user.username,
 });
 ```
-
----
-
+---
 ## 🎨 Error UI Components
 
 ### Error Display Component
@@ -368,18 +354,16 @@ export const ErrorFallback: React.FC<{ error: Error; resetError: () => void }> =
   );
 };
 ```
-
----
-
+---
 ## 🔗 Related Documents
 
 - [API Integration](api-integration.md) - API error handling
 - [State Management](state-management.md) - Error state management
 - [Security](security.md) - Security error handling
-
----
-
+---
 **Last Updated:** {{GENERATION_DATE}}
 
 **Error Handling Strategy:** {{ERROR_HANDLING_STRATEGY}}
 
+
+

package/templates/frontend/docs/operations.template.md

@@ -1,17 +1,13 @@
 # Operations & Deployment
 
 > Deployment procedures and operational guidelines for {{PROJECT_NAME}}
-
----
-
+---
 ## 🚀 Deployment Platform
 
 **Platform:** {{DEPLOYMENT_PLATFORM}}
 **CI/CD:** {{CI_CD_PLATFORM}}
 **Environments:** {{ENVIRONMENTS}}
-
----
-
+---
 ## 📦 Build Process
 
 ### Production Build
@@ -36,9 +32,7 @@ dist/
 VITE_API_BASE_URL=https://api.example.com
 VITE_APP_ENV=production
 ```
-
----
-
+---
 ## 🔄 CI/CD Pipeline
 
 ### GitHub Actions Example
@@ -67,9 +61,7 @@ jobs:
         with:
           vercel-token: ${{ secrets.VERCEL_TOKEN }}
 ```
-
----
-
+---
 ## 📊 Monitoring
 
 ### Error Tracking
@@ -107,17 +99,15 @@ onCLS(console.log);
 onFID(console.log);
 onLCP(console.log);
 ```
-
----
-
+---
 ## 🔗 Related Documents
 
 - [Performance](performance.md) - Performance optimization
 - [Configuration](../specs/configuration.md) - Environment configuration
-
----
-
+---
 **Last Updated:** {{GENERATION_DATE}}
 
 **Deployment Platform:** {{DEPLOYMENT_PLATFORM}}
 
+
+

package/templates/frontend/docs/performance.template.md

@@ -1,9 +1,7 @@
 # Performance Optimization
 
 > Performance optimization strategies and best practices for {{PROJECT_NAME}}
-
----
-
+---
 ## 🎯 Performance Targets
 
 **Core Web Vitals:**
@@ -12,9 +10,7 @@
 - **CLS:** < {{CLS_TARGET}}
 
 **Bundle Size:** < {{BUNDLE_SIZE_TARGET}}KB (gzipped)
-
----
-
+---
 ## 📦 Bundle Optimization
 
 ### Code Splitting
@@ -47,9 +43,7 @@ npm run build -- --analyze
 # Check bundle size in CI
 npm run build && du -sh dist/*
 ```
-
----
-
+---
 ## 🖼️ Image Optimization
 
 ### Next-gen Formats
@@ -79,9 +73,7 @@ const observer = new IntersectionObserver((entries) => {
   });
 });
 ```
-
----
-
+---
 ## ⚡ Performance Monitoring
 
 ### Core Web Vitals Tracking
@@ -124,17 +116,15 @@ module.exports = {
   },
 };
 ```
-
----
-
+---
 ## 🔗 Related Documents
 
 - [Operations](operations.md) - Performance monitoring setup
 - [Build Configuration](../specs/configuration.md) - Build optimization
-
----
-
+---
 **Last Updated:** {{GENERATION_DATE}}
 
 **Performance Targets:** LCP < {{LCP_TARGET}}s, FID < {{FID_TARGET}}ms, CLS < {{CLS_TARGET}}
 
+
+

package/templates/frontend/docs/pwa.template.md

@@ -1,18 +1,14 @@
 # Progressive Web App (PWA)
 
 > PWA features and offline capabilities for {{PROJECT_NAME}}
-
----
-
+---
 ## 🎯 PWA Strategy
 
 **Service Worker:** {{SERVICE_WORKER_ENABLED}}
 **Caching Strategy:** {{CACHING_STRATEGY}}
 **Install Prompt:** {{INSTALL_PROMPT}}
 **Offline Support:** {{OFFLINE_SUPPORT}}
-
----
-
+---
 ## 🔧 Service Worker
 
 ### Registration
@@ -63,9 +59,7 @@ self.addEventListener('fetch', (event) => {
   );
 });
 ```
-
----
-
+---
 ## 📱 Web App Manifest
 
 ```json
@@ -92,9 +86,7 @@ self.addEventListener('fetch', (event) => {
   ]
 }
 ```
-
----
-
+---
 ## 📲 Install Prompt
 
 ```typescript
@@ -119,17 +111,15 @@ export function showInstallPrompt() {
   }
 }
 ```
-
----
-
+---
 ## 🔗 Related Documents
 
 - [Performance](performance.md) - PWA performance
 - [Operations](operations.md) - PWA deployment
-
----
-
+---
 **Last Updated:** {{GENERATION_DATE}}
 
 **PWA Features:** {{PWA_FEATURES}}
 
+
+

package/templates/frontend/docs/state-management.template.md

@@ -1,17 +1,13 @@
 # State Management
 
 > State management patterns and best practices for {{PROJECT_NAME}}
-
 ---
-
 ## 🎯 State Management Solution
 
 **Solution:** {{STATE_MANAGEMENT}}
 
 {{STATE_MANAGEMENT_DESCRIPTION}}
-
 ---
-
 ## 📊 State Categories
 
 ### 1. Server State (Remote Data)
@@ -42,9 +38,7 @@ if (error) return <Error message={error.message} />;
 
 return <UserProfile user={data} />;
 ```
-
 ---
-
 ### 2. Client State (Local UI State)
 
 **Managed by:** {{STATE_MANAGEMENT}}
@@ -65,9 +59,7 @@ return <UserProfile user={data} />;
 // Using {{STATE_MANAGEMENT}}
 {{CLIENT_STATE_EXAMPLE}}
 ```
-
 ---
-
 ### 3. URL State (Query Params & Routes)
 
 **Managed by:** Router + URL
@@ -93,9 +85,7 @@ const query = searchParams.get('q') || '';
 const route = useRoute();
 const query = route.query.q || '';
 ```
-
 ---
-
 ### 4. Form State
 
 **Managed by:** {{FORM_LIBRARY}}
@@ -110,9 +100,7 @@ const query = route.query.q || '';
 // Using {{FORM_LIBRARY}}
 {{FORM_STATE_EXAMPLE}}
 ```
-
 ---
-
 ## 🏗️ State Architecture
 
 ### State Location Decision Tree
@@ -126,9 +114,7 @@ Is data from server?
         ├─ YES → Use router/query params (URL state)
         └─ NO → Use local component state
 ```
-
 ---
-
 ## 🎨 {{STATE_MANAGEMENT}} Patterns
 
 ### Store Structure
@@ -148,9 +134,7 @@ Is data from server?
 ```typescript
 {{UPDATE_STATE_EXAMPLE}}
 ```
-
 ---
-
 ## 🔄 Data Flow
 
 ### Unidirectional Data Flow
@@ -191,9 +175,7 @@ const addTodo = (text: string) => {
 
 // 3. State updated → Component re-renders
 ```
-
 ---
-
 ## 🚀 Performance Optimization
 
 ### 1. Avoid Over-Rendering
@@ -259,9 +241,7 @@ const state = {
   }
 };
 ```
-
 ---
-
 ## 🔐 State Persistence
 
 ### Local Storage
@@ -289,9 +269,7 @@ const useThemeStore = create(
   )
 );
 ```
-
 ---
-
 ## 🧪 Testing State
 
 ### Unit Testing Store Logic
@@ -329,9 +307,7 @@ test('displays todos from store', () => {
   expect(screen.getByText('Todo 2')).toBeInTheDocument();
 });
 ```
-
 ---
-
 ## ⚠️ Common Pitfalls
 
 ### 1. Storing Derived Data
@@ -377,18 +353,16 @@ const globalState = {
   notifications: [...]
 };
 ```
-
 ---
-
 ## 🔗 Related Documents
 
 - [AI Instructions](../ai-instructions.md) - State management rules
 - [Component Architecture](components.md) - Component/state interaction
 - [API Integration](api-integration.md) - Server state patterns
 - [Testing Strategy](testing.md) - Testing state logic
-
 ---
-
 **Last Updated:** {{GENERATION_DATE}}
 
 **Solution:** {{STATE_MANAGEMENT}}
+
+

package/templates/frontend/docs/styling.template.md

@@ -1,9 +1,7 @@
 # Styling & Design System
 
 > CSS architecture, theming, and design patterns for {{PROJECT_NAME}}
-
 ---
-
 ## 🎨 Styling Approach
 
 **Solution:** {{STYLING_APPROACH}}
@@ -14,9 +12,7 @@
 - **Design Tokens:** {{DESIGN_TOKENS}}
 - **Theme Support:** {{THEME_SUPPORT}}
 - **Responsive Strategy:** {{RESPONSIVE_STRATEGY}}
-
 ---
-
 ## 📐 CSS Architecture
 
 ### Styling Solutions Comparison
@@ -37,9 +33,7 @@
 
 **Why this approach:**
 {{STYLING_RATIONALE}}
-
 ---
-
 ## 🎨 Design Tokens
 
 {{#IF_DESIGN_TOKENS}}
@@ -159,9 +153,7 @@ const Button = styled.button`
 ```
 
 {{/IF_DESIGN_TOKENS}}
-
 ---
-
 ## 🌗 Theming
 
 ### Theme Implementation: {{THEME_SUPPORT}}
@@ -260,9 +252,7 @@ useEffect(() => {
 ```
 
 {{/IF_DARK_MODE}}
-
 ---
-
 ## 📱 Responsive Design
 
 ### Breakpoint Strategy
@@ -339,9 +329,7 @@ export const breakpoints = {
   }
 }
 ```
-
 ---
-
 ## 🧩 Component Styling Patterns
 
 ### Pattern 1: Compound Variants (Recommended)
@@ -449,9 +437,7 @@ const Button = styled.button<{ $variant?: 'primary' | 'secondary'; $size?: 'sm'
   }
 `;
 ```
-
 ---
-
 ## ⚡ Performance Optimization
 
 ### 1. Critical CSS
@@ -520,9 +506,7 @@ elements.forEach((el, i) => {
   el.style.height = heights[i] + 10 + 'px'; // Write all
 });
 ```
-
 ---
-
 ## ♿ Accessibility in Styling
 
 ### 1. Focus Indicators
@@ -569,9 +553,7 @@ const ratio = contrast(textColor, bgColor);
   }
 }
 ```
-
 ---
-
 ## 🎯 Common Patterns
 
 ### Layout Patterns
@@ -665,9 +647,7 @@ const ratio = contrast(textColor, bgColor);
   animation: spin 1s linear infinite;
 }
 ```
-
 ---
-
 ## ⚠️ Common Pitfalls
 
 ### 1. Over-Specificity
@@ -731,9 +711,7 @@ div.container > ul.list > li.item > a.link {
   Content
 </div>
 ```
-
 ---
-
 ## 🧪 Testing Styles
 
 ### Visual Regression Testing
@@ -762,18 +740,16 @@ test('button has no a11y violations', async () => {
   expect(results).toHaveNoViolations();
 });
 ```
-
 ---
-
 ## 🔗 Related Documents
 
 - [Component Architecture](components.md) - Component structure
 - [AI Instructions](../ai-instructions.md) - Styling rules
 - [Accessibility Spec](../specs/accessibility.md) - A11y requirements
 - [Testing Strategy](testing.md) - Visual regression tests
-
 ---
-
 **Last Updated:** {{GENERATION_DATE}}
 
 **Styling Approach:** {{STYLING_APPROACH}}
+
+