ai-flow-dev 2.7.0 → 2.8.0

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

@@ -1,113 +1,113 @@
-# Operations & Deployment
-
-> Deployment procedures and operational guidelines for {{PROJECT_NAME}}
+# Operations & Deployment
+
+> Deployment procedures and operational guidelines for {{PROJECT_NAME}}
 ---
-## 🚀 Deployment Platform
-
-**Platform:** {{DEPLOYMENT_PLATFORM}}
-**CI/CD:** {{CI_CD_PLATFORM}}
-**Environments:** {{ENVIRONMENTS}}
+## 🚀 Deployment Platform
+
+**Platform:** {{DEPLOYMENT_PLATFORM}}
+**CI/CD:** {{CI_CD_PLATFORM}}
+**Environments:** {{ENVIRONMENTS}}
 ---
-## 📦 Build Process
-
-### Production Build
-
-```bash
-# Build for production
-npm run build
-
-# Output directory
-dist/
-├── index.html
-├── assets/
-│   ├── app-[hash].js
-│   ├── app-[hash].css
-│   └── images/
-```
-
-### Environment Variables
-
-```bash
-# .env.production
-VITE_API_BASE_URL=https://api.example.com
-VITE_APP_ENV=production
-```
+## 📦 Build Process
+
+### Production Build
+
+```bash
+# Build for production
+npm run build
+
+# Output directory
+dist/
+├── index.html
+├── assets/
+│   ├── app-[hash].js
+│   ├── app-[hash].css
+│   └── images/
+```
+
+### Environment Variables
+
+```bash
+# .env.production
+VITE_API_BASE_URL=https://api.example.com
+VITE_APP_ENV=production
+```
 ---
-## 🔄 CI/CD Pipeline
-
-### GitHub Actions Example
-
-```yaml
-# .github/workflows/deploy.yml
-name: Deploy
-
-on:
-  push:
-    branches: [main]
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 18
-      - run: npm ci
-      - run: npm run lint
-      - run: npm run test
-      - run: npm run build
-      - uses: vercel/action@v1
-        with:
-          vercel-token: ${{ secrets.VERCEL_TOKEN }}
-```
+## 🔄 CI/CD Pipeline
+
+### GitHub Actions Example
+
+```yaml
+# .github/workflows/deploy.yml
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run test
+      - run: npm run build
+      - uses: vercel/action@v1
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+```
 ---
-## 📊 Monitoring
-
-### Error Tracking
-
-**Tool:** {{ERROR_TRACKING_TOOL}}
-
-```typescript
-// Sentry setup
-import * as Sentry from '@sentry/react';
-
-Sentry.init({
-  dsn: import.meta.env.VITE_SENTRY_DSN,
-  environment: import.meta.env.VITE_APP_ENV,
-});
-```
-
-### Analytics
-
-**Tool:** {{ANALYTICS_TOOL}}
-
-```typescript
-// Google Analytics
-gtag('config', 'GA_MEASUREMENT_ID');
-```
-
-### Performance Monitoring
-
-**Tool:** {{PERFORMANCE_MONITORING_TOOL}}
-
-```typescript
-// Web Vitals
-import { onCLS, onFID, onLCP } from 'web-vitals';
-
-onCLS(console.log);
-onFID(console.log);
-onLCP(console.log);
-```
+## 📊 Monitoring
+
+### Error Tracking
+
+**Tool:** {{ERROR_TRACKING_TOOL}}
+
+```typescript
+// Sentry setup
+import * as Sentry from '@sentry/react';
+
+Sentry.init({
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  environment: import.meta.env.VITE_APP_ENV,
+});
+```
+
+### Analytics
+
+**Tool:** {{ANALYTICS_TOOL}}
+
+```typescript
+// Google Analytics
+gtag('config', 'GA_MEASUREMENT_ID');
+```
+
+### Performance Monitoring
+
+**Tool:** {{PERFORMANCE_MONITORING_TOOL}}
+
+```typescript
+// Web Vitals
+import { onCLS, onFID, onLCP } from 'web-vitals';
+
+onCLS(console.log);
+onFID(console.log);
+onLCP(console.log);
+```
 ---
-## 🔗 Related Documents
-
-- [Performance](performance.md) - Performance optimization
-- [Configuration](../specs/configuration.md) - Environment configuration
+## 🔗 Related Documents
+
+- [Performance](performance.md) - Performance optimization
+- [Configuration](../specs/configuration.md) - Environment configuration
 ---
-**Last Updated:** {{GENERATION_DATE}}
-
-**Deployment Platform:** {{DEPLOYMENT_PLATFORM}}
-
-
-
+**Last Updated:** {{GENERATION_DATE}}
+
+**Deployment Platform:** {{DEPLOYMENT_PLATFORM}}
+
+
+

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

@@ -1,130 +1,130 @@
-# Performance Optimization
-
-> Performance optimization strategies and best practices for {{PROJECT_NAME}}
+# Performance Optimization
+
+> Performance optimization strategies and best practices for {{PROJECT_NAME}}
 ---
-## 🎯 Performance Targets
-
-**Core Web Vitals:**
-- **LCP:** < {{LCP_TARGET}}s
-- **FID/INP:** < {{FID_TARGET}}ms
-- **CLS:** < {{CLS_TARGET}}
-
-**Bundle Size:** < {{BUNDLE_SIZE_TARGET}}KB (gzipped)
+## 🎯 Performance Targets
+
+**Core Web Vitals:**
+- **LCP:** < {{LCP_TARGET}}s
+- **FID/INP:** < {{FID_TARGET}}ms
+- **CLS:** < {{CLS_TARGET}}
+
+**Bundle Size:** < {{BUNDLE_SIZE_TARGET}}KB (gzipped)
 ---
-## 📦 Bundle Optimization
-
-### Code Splitting
-
-```typescript
-// Route-based splitting
-const Dashboard = lazy(() => import('./pages/Dashboard'));
-const Profile = lazy(() => import('./pages/Profile'));
-
-// Component-based splitting
-const HeavyChart = lazy(() => import('./components/HeavyChart'));
-```
-
-### Tree Shaking
-
-```typescript
-// ✅ Good - Tree shakeable
-import { debounce } from 'lodash-es';
-
-// ❌ Bad - Imports entire library
-import _ from 'lodash';
-```
-
-### Bundle Analysis
-
-```bash
-# Analyze bundle size
-npm run build -- --analyze
-
-# Check bundle size in CI
-npm run build && du -sh dist/*
-```
+## 📦 Bundle Optimization
+
+### Code Splitting
+
+```typescript
+// Route-based splitting
+const Dashboard = lazy(() => import('./pages/Dashboard'));
+const Profile = lazy(() => import('./pages/Profile'));
+
+// Component-based splitting
+const HeavyChart = lazy(() => import('./components/HeavyChart'));
+```
+
+### Tree Shaking
+
+```typescript
+// ✅ Good - Tree shakeable
+import { debounce } from 'lodash-es';
+
+// ❌ Bad - Imports entire library
+import _ from 'lodash';
+```
+
+### Bundle Analysis
+
+```bash
+# Analyze bundle size
+npm run build -- --analyze
+
+# Check bundle size in CI
+npm run build && du -sh dist/*
+```
 ---
-## 🖼️ Image Optimization
-
-### Next-gen Formats
-
-```typescript
-// Use WebP/AVIF with fallback
-<picture>
-  <source srcset="image.avif" type="image/avif" />
-  <source srcset="image.webp" type="image/webp" />
-  <img src="image.jpg" alt="Description" />
-</picture>
-```
-
-### Lazy Loading
-
-```typescript
-// Native lazy loading
-<img src="image.jpg" loading="lazy" alt="Description" />
-
-// Intersection Observer
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach(entry => {
-    if (entry.isIntersecting) {
-      entry.target.src = entry.target.dataset.src;
-      observer.unobserve(entry.target);
-    }
-  });
-});
-```
+## 🖼️ Image Optimization
+
+### Next-gen Formats
+
+```typescript
+// Use WebP/AVIF with fallback
+<picture>
+  <source srcset="image.avif" type="image/avif" />
+  <source srcset="image.webp" type="image/webp" />
+  <img src="image.jpg" alt="Description" />
+</picture>
+```
+
+### Lazy Loading
+
+```typescript
+// Native lazy loading
+<img src="image.jpg" loading="lazy" alt="Description" />
+
+// Intersection Observer
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach(entry => {
+    if (entry.isIntersecting) {
+      entry.target.src = entry.target.dataset.src;
+      observer.unobserve(entry.target);
+    }
+  });
+});
+```
 ---
-## ⚡ Performance Monitoring
-
-### Core Web Vitals Tracking
-
-```typescript
-// utils/webVitals.ts
-import { onCLS, onFID, onLCP } from 'web-vitals';
-
-function sendToAnalytics(metric: Metric) {
-  // Send to analytics service
-  gtag('event', metric.name, {
-    value: Math.round(metric.value),
-    event_label: metric.id,
-    non_interaction: true,
-  });
-}
-
-onCLS(sendToAnalytics);
-onFID(sendToAnalytics);
-onLCP(sendToAnalytics);
-```
-
-### Performance Budgets
-
-```javascript
-// .lighthouserc.js
-module.exports = {
-  ci: {
-    collect: {
-      numberOfRuns: 3,
-    },
-    assert: {
-      assertions: {
-        'categories:performance': ['error', { minScore: 0.9 }],
-        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
-        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
-        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
-      },
-    },
-  },
-};
-```
+## ⚡ Performance Monitoring
+
+### Core Web Vitals Tracking
+
+```typescript
+// utils/webVitals.ts
+import { onCLS, onFID, onLCP } from 'web-vitals';
+
+function sendToAnalytics(metric: Metric) {
+  // Send to analytics service
+  gtag('event', metric.name, {
+    value: Math.round(metric.value),
+    event_label: metric.id,
+    non_interaction: true,
+  });
+}
+
+onCLS(sendToAnalytics);
+onFID(sendToAnalytics);
+onLCP(sendToAnalytics);
+```
+
+### Performance Budgets
+
+```javascript
+// .lighthouserc.js
+module.exports = {
+  ci: {
+    collect: {
+      numberOfRuns: 3,
+    },
+    assert: {
+      assertions: {
+        'categories:performance': ['error', { minScore: 0.9 }],
+        'first-contentful-paint': ['error', { maxNumericValue: 2000 }],
+        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }],
+        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],
+      },
+    },
+  },
+};
+```
 ---
-## 🔗 Related Documents
-
-- [Operations](operations.md) - Performance monitoring setup
-- [Build Configuration](../specs/configuration.md) - Build optimization
+## 🔗 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}}
-
-
-
+**Last Updated:** {{GENERATION_DATE}}
+
+**Performance Targets:** LCP < {{LCP_TARGET}}s, FID < {{FID_TARGET}}ms, CLS < {{CLS_TARGET}}
+
+
+