ai-factory 2.0.0 → 2.2.0

package/skills/_templates/react/react-patterns/SKILL.md

@@ -1,181 +0,0 @@
----
-name: react-patterns
-description: React development patterns and best practices. Covers hooks, state management, component design, and performance optimization.
-argument-hint: "[topic: hooks|state|components|performance]"
----
-
-# React Patterns Guide
-
-Modern React patterns and best practices for building scalable applications.
-
-## Topics
-
-### Hooks (`/react-patterns hooks`)
-
-**Custom Hook Pattern:**
-```typescript
-function useAsync<T>(asyncFn: () => Promise<T>, deps: unknown[]) {
-  const [state, setState] = useState<{
-    data: T | null;
-    loading: boolean;
-    error: Error | null;
-  }>({ data: null, loading: true, error: null });
-
-  useEffect(() => {
-    setState(prev => ({ ...prev, loading: true }));
-    asyncFn()
-      .then(data => setState({ data, loading: false, error: null }))
-      .catch(error => setState({ data: null, loading: false, error }));
-  }, deps);
-
-  return state;
-}
-```
-
-**Common Custom Hooks:**
-- `useLocalStorage` - Persist state to localStorage
-- `useDebounce` - Debounce rapidly changing values
-- `useMediaQuery` - Responsive breakpoints
-- `usePrevious` - Access previous value
-- `useOnClickOutside` - Detect outside clicks
-
-### State Management (`/react-patterns state`)
-
-**Context + Reducer Pattern:**
-```typescript
-// 1. Define types
-type State = { count: number };
-type Action = { type: 'increment' } | { type: 'decrement' };
-
-// 2. Create context
-const StateContext = createContext<State | null>(null);
-const DispatchContext = createContext<Dispatch<Action> | null>(null);
-
-// 3. Provider component
-function StateProvider({ children }: { children: ReactNode }) {
-  const [state, dispatch] = useReducer(reducer, { count: 0 });
-  return (
-    <StateContext.Provider value={state}>
-      <DispatchContext.Provider value={dispatch}>
-        {children}
-      </DispatchContext.Provider>
-    </StateContext.Provider>
-  );
-}
-
-// 4. Custom hooks for access
-function useAppState() {
-  const context = useContext(StateContext);
-  if (!context) throw new Error('Must be inside StateProvider');
-  return context;
-}
-```
-
-**When to use what:**
-- **useState**: Local component state
-- **useReducer**: Complex state logic
-- **Context**: Shared state (auth, theme)
-- **Zustand/Jotai**: Global state, simpler than Redux
-- **TanStack Query**: Server state
-
-### Components (`/react-patterns components`)
-
-**Composition Pattern:**
-```typescript
-// Instead of prop drilling, use composition
-function Card({ children }: { children: ReactNode }) {
-  return <div className="card">{children}</div>;
-}
-
-Card.Header = function CardHeader({ children }) {
-  return <div className="card-header">{children}</div>;
-};
-
-Card.Body = function CardBody({ children }) {
-  return <div className="card-body">{children}</div>;
-};
-
-// Usage
-<Card>
-  <Card.Header>Title</Card.Header>
-  <Card.Body>Content</Card.Body>
-</Card>
-```
-
-**Render Props Pattern:**
-```typescript
-function MouseTracker({ render }: { render: (pos: Position) => ReactNode }) {
-  const [position, setPosition] = useState({ x: 0, y: 0 });
-  // ... mouse tracking logic
-  return render(position);
-}
-
-// Usage
-<MouseTracker render={({ x, y }) => <div>Mouse: {x}, {y}</div>} />
-```
-
-### Performance (`/react-patterns performance`)
-
-**Memoization:**
-```typescript
-// Memoize expensive computations
-const expensiveResult = useMemo(() => {
-  return heavyComputation(data);
-}, [data]);
-
-// Memoize callbacks passed to children
-const handleClick = useCallback(() => {
-  doSomething(id);
-}, [id]);
-
-// Memoize components that receive same props
-const MemoizedChild = memo(function Child({ data }) {
-  return <div>{data}</div>;
-});
-```
-
-**Code Splitting:**
-```typescript
-// Lazy load components
-const HeavyComponent = lazy(() => import('./HeavyComponent'));
-
-function App() {
-  return (
-    <Suspense fallback={<Loading />}>
-      <HeavyComponent />
-    </Suspense>
-  );
-}
-```
-
-**Virtualization:**
-```typescript
-// For long lists, use virtualization
-import { useVirtualizer } from '@tanstack/react-virtual';
-
-function VirtualList({ items }) {
-  const virtualizer = useVirtualizer({
-    count: items.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 50,
-  });
-  // ... render only visible items
-}
-```
-
-## Best Practices
-
-1. **Single Responsibility** - One component, one job
-2. **Lift state up** - Share state via common ancestor
-3. **Colocation** - Keep related code together
-4. **Avoid prop drilling** - Use composition or context
-5. **Type everything** - Use TypeScript for safety
-6. **Test behavior** - Not implementation details
-
-## Anti-Patterns to Avoid
-
-- Mutating state directly
-- useEffect for derived state
-- Inline object/array props (causes re-renders)
-- Over-using context for frequently changing state
-- Giant components (break them down)

package/skills/aif-deploy/SKILL.md

@@ -1,138 +0,0 @@
----
-name: aif-deploy
-description: Prepare and execute deployments with pre-flight checks, release notes generation, and CI/CD integration. NEVER auto-deploy. Use when user explicitly says "deploy", "release", or "go live".
-argument-hint: "[staging|production]"
-allowed-tools: Bash(git *) Bash(npm *) Bash(docker *) Bash(gh *)
-disable-model-invocation: true
----
-
-# Deployment Assistant
-
-Help prepare and execute deployments safely with automated checks and documentation.
-
-## Behavior
-
-### Without Arguments (Pre-flight Checks Only)
-
-Run deployment readiness checks:
-
-1. **Git Status Check**
-   - Ensure working directory is clean
-   - Verify on correct branch
-   - Check if branch is up to date with remote
-
-2. **Build Check**
-   - Run build command (`npm run build`, `cargo build`, etc.)
-   - Report any build errors
-
-3. **Test Check**
-   - Run test suite
-   - Report coverage if available
-
-4. **Environment Check**
-   - Verify required environment variables
-   - Check `.env.example` vs actual env
-
-5. **Dependency Check**
-   - Look for security vulnerabilities (`npm audit`, etc.)
-   - Check for outdated critical packages
-
-### With Environment Argument
-
-#### `/aif-deploy staging`
-
-1. Run pre-flight checks
-2. Generate changelog since last staging deploy
-3. Provide deployment commands for staging environment
-4. Tag release as staging-{date}
-
-#### `/aif-deploy production`
-
-1. Run ALL pre-flight checks (more strict)
-2. Require clean git status
-3. Require all tests passing
-4. Generate full release notes
-5. Create git tag for release
-6. Provide production deployment commands
-
-## Pre-flight Check Output
-
-```markdown
-## Deployment Readiness Check
-
-### Git Status
-✅ Working directory clean
-✅ On branch: main
-✅ Up to date with origin/main
-
-### Build
-✅ Build successful
-⏱️ Build time: 45s
-
-### Tests
-✅ All tests passing (142/142)
-📊 Coverage: 78%
-
-### Environment
-✅ All required variables set
-⚠️ Optional: SENTRY_DSN not set
-
-### Dependencies
-✅ No known vulnerabilities
-⚠️ 3 packages have updates available
-
-## Verdict: ✅ Ready for deployment
-```
-
-## Release Notes Generation
-
-When deploying, generate release notes from:
-- Git commits since last tag/release
-- Merged PR titles and descriptions
-- Conventional commit messages
-
-Format:
-```markdown
-## Release v1.2.3
-
-### Features
-- feat(auth): Add OAuth2 support (#45)
-- feat(api): New user endpoints (#48)
-
-### Bug Fixes
-- fix(ui): Correct button alignment (#46)
-
-### Other Changes
-- chore(deps): Update dependencies
-- docs: Update API documentation
-```
-
-## CI/CD Integration
-
-Detect and provide commands for:
-
-- **Vercel**: `vercel --prod`
-- **Netlify**: `netlify deploy --prod`
-- **Railway**: `railway up`
-- **Docker**: Build and push commands
-- **Kubernetes**: `kubectl apply` commands
-- **GitHub Actions**: Trigger workflow
-
-## Safety Features
-
-- Never auto-deploy to production
-- Always show diff of what will be deployed
-- Require confirmation for destructive actions
-- Suggest rollback commands
-- Log deployment actions
-
-## Examples
-
-**User:** `/aif-deploy`
-Run all pre-flight checks, report readiness.
-
-**User:** `/aif-deploy staging`
-Prepare staging deployment with changelog.
-
-**User:** `/aif-deploy production`
-Full production deployment workflow with release notes.