ai-devx 1.0.0 → 1.0.1

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

@@ -1,246 +0,0 @@
----
-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

package/templates/.agent/workflows/security.md

@@ -1,181 +0,0 @@
----
-command: /security
-description: Security audit, vulnerability scanning, and security fixes
-agent: security-auditor
-skills:
-  - vulnerability-scanner
-  - security-best-practices
-  - authentication-patterns
-mode: strict
----
-
-# /security Workflow
-
-## Purpose
-Perform security audits, scan for vulnerabilities, and implement security fixes.
-
-## Trigger
-User types: `/security` or `/security audit`
-
-## Execution Steps
-
-### Step 1: Code Scan
-Check for:
-- Hardcoded secrets
-- SQL injection vulnerabilities
-- XSS vulnerabilities
-- Insecure dependencies
-- Weak authentication
-- Missing authorization
-
-### Step 2: Dependency Scan
-Check for:
-- Known vulnerabilities in dependencies
-- Outdated packages
-- License compliance
-
-### Step 3: Configuration Review
-Check:
-- Environment variables
-- Security headers
-- CORS settings
-- SSL/TLS configuration
-- Authentication settings
-
-### Step 4: Vulnerability Assessment
-Classify findings:
-- **Critical**: Immediate action required
-- **High**: Fix within 24 hours
-- **Medium**: Fix within 1 week
-- **Low**: Fix when convenient
-- **Info**: Best practices
-
-### Step 5: Remediation
-Provide fixes for each vulnerability:
-- Code examples
-- Configuration changes
-- Dependency updates
-
-### Step 6: Validation
-Verify fixes:
-- Re-run security scans
-- Test application functionality
-- Check for regressions
-
-## Response Format
-
-```
-⚡ Executing /security
-
-🤖 Applying @security-auditor...
-
-## Security Audit Results
-
-### Summary
-🔴 Critical: 1
-🟠 High: 2
-🟡 Medium: 3
-🟢 Low: 5
-
-### Critical Issues
-
-#### 1. Hardcoded API Key
-**Location**: `src/config.ts:15`
-**Severity**: 🔴 Critical
-
-**Issue**:
-```typescript
-const API_KEY = "sk-1234567890abcdef";
-```
-
-**Fix**:
-```typescript
-const API_KEY = process.env.API_KEY;
-if (!API_KEY) {
-  throw new Error('API_KEY environment variable required');
-}
-```
-
-#### 2. SQL Injection Risk
-**Location**: `src/routes/users.ts:23`
-**Severity**: 🔴 Critical
-
-**Issue**:
-```typescript
-const query = `SELECT * FROM users WHERE id = ${userId}`;
-```
-
-**Fix**:
-```typescript
-const query = 'SELECT * FROM users WHERE id = $1';
-const result = await db.query(query, [userId]);
-```
-
-### Dependency Vulnerabilities
-
-| Package | Version | CVE | Severity | Fix |
-|---------|---------|-----|----------|-----|
-| lodash | 4.17.15 | CVE-2021-23337 | High | Upgrade to 4.17.21 |
-| express | 4.17.1 | CVE-2022-24999 | Medium | Upgrade to 4.18.2 |
-
-### Recommendations
-- Enable Dependabot
-- Set up security alerts
-- Regular dependency updates
-- Security training for team
-```
-
-## Security Checklist
-
-### Code Security
-- [ ] No hardcoded secrets
-- [ ] Input validation on all endpoints
-- [ ] Output encoding
-- [ ] Parameterized queries
-- [ ] CSRF protection
-- [ ] XSS prevention
-
-### Authentication
-- [ ] Strong password policy
-- [ ] Rate limiting on auth endpoints
-- [ ] Session timeout
-- [ ] Secure session storage
-- [ ] MFA available
-
-### Authorization
-- [ ] RBAC implemented
-- [ ] Resource-level checks
-- [ ] No privilege escalation
-
-### Infrastructure
-- [ ] HTTPS enforced
-- [ ] Security headers set
-- [ ] CORS configured
-- [ ] Secrets management
-- [ ] Logging enabled
-
-## Commands
-
-```bash
-# Scan dependencies
-npm audit
-
-# Fix vulnerabilities
-npm audit fix
-
-# Security headers check
-npx helmet
-
-# Secrets scanning
-git-secrets --scan
-
-# SAST scanning
-sonar-scanner
-```
-
-## Success Criteria
-- No critical vulnerabilities
-- No high vulnerabilities
-- All medium vulnerabilities planned
-- Dependencies up to date
-- Security headers configured