ai-devx 1.0.0

package/templates/.agent/skills/docker-expert/SKILL.md

@@ -0,0 +1,286 @@
+---
+name: docker-expert
+description: Docker containerization, multi-stage builds, and container orchestration
+version: "1.0.0"
+requires: []
+related:
+  - deployment-procedures
+  - ci-cd
+---
+
+# Docker Expert Skill
+
+## Dockerfile Best Practices
+
+### Multi-Stage Build
+```dockerfile
+# Build stage
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM node:18-alpine AS production
+WORKDIR /app
+ENV NODE_ENV=production
+COPY package*.json ./
+RUN npm ci --only=production && npm cache clean --force
+COPY --from=builder /app/dist ./dist
+USER node
+EXPOSE 3000
+CMD ["node", "dist/main.js"]
+```
+
+### Optimization Tips
+
+**Use specific tags**
+```dockerfile
+# ✅ Good
+FROM node:18.19.0-alpine3.19
+
+# ❌ Avoid
+FROM node:latest
+FROM node:18
+```
+
+**Minimize layers**
+```dockerfile
+# ✅ Good - Single layer
+RUN apt-get update && apt-get install -y \
+    package1 \
+    package2 \
+    && rm -rf /var/lib/apt/lists/*
+
+# ❌ Bad - Multiple layers
+RUN apt-get update
+RUN apt-get install -y package1
+RUN apt-get install -y package2
+```
+
+**Leverage build cache**
+```dockerfile
+# Copy dependency files first (cache if unchanged)
+COPY package*.json ./
+RUN npm ci
+
+# Copy source code (invalidates cache on change)
+COPY . .
+RUN npm run build
+```
+
+**Use .dockerignore**
+```
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.git
+.gitignore
+README.md
+.env
+.env.local
+dist
+build
+coverage
+.nyc_output
+.vscode
+.idea
+*.md
+```
+
+## Docker Compose
+
+### Web Application Stack
+```yaml
+version: '3.8'
+
+services:
+  app:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=production
+      - DATABASE_URL=postgresql://user:pass@db:5432/mydb
+      - REDIS_URL=redis://redis:6379
+    depends_on:
+      - db
+      - redis
+    volumes:
+      - ./logs:/app/logs
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  db:
+    image: postgres:15-alpine
+    environment:
+      POSTGRES_USER: user
+      POSTGRES_PASSWORD: pass
+      POSTGRES_DB: mydb
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+      - ./init.sql:/docker-entrypoint-initdb.d/init.sql
+    ports:
+      - "5432:5432"
+    restart: unless-stopped
+
+  redis:
+    image: redis:7-alpine
+    volumes:
+      - redis_data:/data
+    restart: unless-stopped
+
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+      - ./ssl:/etc/nginx/ssl:ro
+    depends_on:
+      - app
+    restart: unless-stopped
+
+volumes:
+  postgres_data:
+  redis_data:
+```
+
+### Development vs Production
+
+**docker-compose.yml** (Production)
+```yaml
+version: '3.8'
+services:
+  app:
+    build: .
+    environment:
+      - NODE_ENV=production
+```
+
+**docker-compose.dev.yml** (Development)
+```yaml
+version: '3.8'
+services:
+  app:
+    build:
+      context: .
+      target: development
+    volumes:
+      - .:/app
+      - /app/node_modules
+    environment:
+      - NODE_ENV=development
+    command: npm run dev
+```
+
+Usage:
+```bash
+# Production
+docker-compose up -d
+
+# Development
+docker-compose -f docker-compose.yml -f docker-compose.dev.yml up -d
+```
+
+## Container Security
+
+### Non-root User
+```dockerfile
+FROM node:18-alpine
+
+# Create app user
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nodejs -u 1001
+
+WORKDIR /app
+COPY --chown=nodejs:nodejs . .
+RUN npm ci --only=production
+
+USER nodejs
+EXPOSE 3000
+CMD ["node", "server.js"]
+```
+
+### Read-only Filesystem
+```yaml
+services:
+  app:
+    read_only: true
+    tmpfs:
+      - /tmp
+    volumes:
+      - ./logs:/app/logs
+```
+
+### Scan for Vulnerabilities
+```bash
+# Using Trivy
+docker run --rm -v /var/run/docker.sock:/var/run/docker.sock \
+  aquasec/trivy image myapp:latest
+
+# Using Docker Scout
+docker scout cves myapp:latest
+```
+
+## Common Commands
+
+```bash
+# Build image
+docker build -t myapp:latest .
+
+# Run container
+docker run -d -p 3000:3000 --name myapp myapp:latest
+
+# View logs
+docker logs -f myapp
+
+# Execute command in container
+docker exec -it myapp sh
+
+# Remove stopped containers
+docker container prune
+
+# Remove unused images
+docker image prune
+
+# Clean everything
+docker system prune -a
+```
+
+## Health Checks
+
+```dockerfile
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:3000/health || exit 1
+```
+
+## Environment Variables
+
+```dockerfile
+# Set at build time
+ARG NODE_VERSION=18
+FROM node:${NODE_VERSION}-alpine
+
+# Set at runtime
+ENV NODE_ENV=production
+ENV PORT=3000
+```
+
+```bash
+# Pass at build
+docker build --build-arg NODE_VERSION=20 -t myapp .
+
+# Pass at runtime
+docker run -e NODE_ENV=production -e PORT=3000 myapp
+```

package/templates/.agent/skills/react-best-practices/SKILL.md

@@ -0,0 +1,246 @@
+---
+name: react-best-practices
+description: Modern React development patterns, hooks, and performance optimization
+version: "1.0.0"
+requires: []
+related:
+  - frontend-design
+  - testing-patterns
+---
+
+# React Best Practices Skill
+
+## Core Principles
+
+### 1. Functional Components
+Always use functional components with hooks instead of class components.
+
+```tsx
+// ✅ Good
+function UserCard({ user }: UserCardProps) {
+  return <div>{user.name}</div>;
+}
+
+// ❌ Avoid
+class UserCard extends React.Component {
+  render() {
+    return <div>{this.props.user.name}</div>;
+  }
+}
+```
+
+### 2. Hooks Rules
+- Only call hooks at the top level
+- Only call hooks from React functions
+- Use eslint-plugin-react-hooks
+
+```tsx
+// ✅ Good
+function Component() {
+  const [state, setState] = useState(0);
+  useEffect(() => {}, []);
+  return <div />;
+}
+
+// ❌ Bad - Hook inside condition
+function Component() {
+  if (condition) {
+    useEffect(() => {}, []);
+  }
+}
+```
+
+### 3. Custom Hooks
+Extract reusable logic into custom hooks.
+
+```tsx
+// useUser.ts
+export function useUser(userId: string) {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    fetchUser(userId)
+      .then(setUser)
+      .catch(setError)
+      .finally(() => setLoading(false));
+  }, [userId]);
+
+  return { user, loading, error };
+}
+
+// Usage
+function UserProfile({ userId }: { userId: string }) {
+  const { user, loading, error } = useUser(userId);
+  
+  if (loading) return <Spinner />;
+  if (error) return <Error message={error.message} />;
+  return <div>{user?.name}</div>;
+}
+```
+
+## State Management
+
+### useState
+- Use for simple, local state
+- Prefer multiple state variables over single object
+
+```tsx
+// ✅ Good
+const [name, setName] = useState('');
+const [email, setEmail] = useState('');
+
+// ❌ Avoid unless related
+const [form, setForm] = useState({ name: '', email: '' });
+```
+
+### useReducer
+- Use for complex state logic
+- Multiple related state transitions
+
+```tsx
+interface State {
+  loading: boolean;
+  data: Data | null;
+  error: Error | null;
+}
+
+type Action =
+  | { type: 'FETCH_START' }
+  | { type: 'FETCH_SUCCESS'; payload: Data }
+  | { type: 'FETCH_ERROR'; payload: Error };
+
+function reducer(state: State, action: Action): State {
+  switch (action.type) {
+    case 'FETCH_START':
+      return { ...state, loading: true, error: null };
+    case 'FETCH_SUCCESS':
+      return { ...state, loading: false, data: action.payload };
+    case 'FETCH_ERROR':
+      return { ...state, loading: false, error: action.payload };
+    default:
+      return state;
+  }
+}
+```
+
+### Context API
+- Use for global state (theme, auth, user)
+- Avoid prop drilling
+
+```tsx
+// ThemeContext.tsx
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setTheme] = useState('light');
+  
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) throw new Error('useTheme must be used within ThemeProvider');
+  return context;
+};
+```
+
+## Performance Optimization
+
+### 1. React.memo
+Prevent unnecessary re-renders for pure components.
+
+```tsx
+const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
+  // Only re-renders if data changes
+  return <div>{/* expensive rendering */}</div>;
+});
+```
+
+### 2. useMemo
+Cache expensive calculations.
+
+```tsx
+const sortedData = useMemo(() => {
+  return data.sort((a, b) => a.value - b.value);
+}, [data]);
+```
+
+### 3. useCallback
+Cache function references.
+
+```tsx
+const handleClick = useCallback(() => {
+  doSomething(id);
+}, [id]);
+
+// Now Child won't re-render unnecessarily
+<Child onClick={handleClick} />
+```
+
+### 4. Code Splitting
+```tsx
+const LazyComponent = lazy(() => import('./HeavyComponent'));
+
+function App() {
+  return (
+    <Suspense fallback={<Spinner />}>
+      <LazyComponent />
+    </Suspense>
+  );
+}
+```
+
+## Component Patterns
+
+### Compound Components
+```tsx
+function Select({ children }: { children: ReactNode }) {
+  const [selected, setSelected] = useState<string | null>(null);
+  return <SelectContext.Provider value={{ selected, setSelected }}>{children}</SelectContext.Provider>;
+}
+
+Select.Option = function Option({ value, children }: OptionProps) {
+  const { selected, setSelected } = useSelectContext();
+  return <div onClick={() => setSelected(value)}>{children}</div>;
+};
+
+// Usage
+<Select>
+  <Select.Option value="1">Option 1</Select.Option>
+  <Select.Option value="2">Option 2</Select.Option>
+</Select>
+```
+
+## File Organization
+```
+src/
+├── components/          # Reusable UI components
+│   ├── Button/
+│   │   ├── Button.tsx
+│   │   ├── Button.test.tsx
+│   │   └── index.ts
+│   └── Card/
+├── hooks/              # Custom hooks
+│   ├── useAuth.ts
+│   ├── useLocalStorage.ts
+│   └── index.ts
+├── contexts/           # React contexts
+│   ├── AuthContext.tsx
+│   └── ThemeContext.tsx
+├── lib/                # Utilities
+│   ├── api.ts
+│   └── utils.ts
+├── types/              # TypeScript types
+│   └── index.ts
+└── pages/              # Page components
+```
+
+## Related Skills
+- After coding: `frontend-design` for styling
+- Before deployment: `testing-patterns` for tests