devflow-kit 0.8.1 → 1.0.0

package/plugins/devflow-code-review/skills/react/references/violations.md

@@ -0,0 +1,565 @@
+# React Violation Examples
+
+Extended violation patterns for React reviews. Reference from main SKILL.md.
+
+## Vercel Performance Violations
+
+### Sequential Fetches
+
+```tsx
+// VIOLATION: Sequential fetches (waterfall)
+async function loadDashboard(userId: string) {
+  const user = await fetchUser(userId);
+  const orders = await fetchOrders(userId);  // Waits for user
+  const prefs = await fetchPreferences(userId);  // Waits for orders
+  return { user, orders, prefs };
+}
+// Total time: T(user) + T(orders) + T(prefs)
+// Should be: max(T(user), T(orders), T(prefs))
+
+// VIOLATION: Sequential in useEffect
+useEffect(() => {
+  async function load() {
+    setUser(await fetchUser(id));
+    setOrders(await fetchOrders(id));  // Sequential
+    setStats(await fetchStats(id));     // Sequential
+  }
+  load();
+}, [id]);
+```
+
+### Barrel Import Anti-Patterns
+
+```tsx
+// VIOLATION: Barrel import pulls entire library
+import { Button } from '@/components';
+import { formatDate, formatCurrency, formatNumber } from '@/utils';
+import { IconHome, IconUser } from '@/icons';
+
+// VIOLATION: Named imports from large packages
+import { debounce } from 'lodash';  // Imports entire lodash
+import { Button, Input, Select } from 'antd';  // Large bundle
+
+// VIOLATION: Not lazy loading heavy dependencies
+import Editor from '@monaco-editor/react';  // 2MB+ bundle
+import { Chart } from 'chart.js';  // Heavy charting library
+
+function Dashboard() {
+  const [showChart, setShowChart] = useState(false);
+  return (
+    <div>
+      {showChart && <Chart />}  {/* Loaded even when not shown */}
+    </div>
+  );
+}
+```
+
+### Re-render Causing Patterns
+
+```tsx
+// VIOLATION: Object literal in deps (new ref every render)
+useEffect(() => {
+  fetchData(config);
+}, [{ page: 1, limit: 10 }]);  // Always "changed"
+
+// VIOLATION: Array in deps
+useEffect(() => {
+  updateFilters(filters);
+}, [[filter1, filter2, filter3]]);  // New array every render
+
+// VIOLATION: Inline callback to memoized child
+const MemoChild = memo(Child);
+
+function Parent() {
+  return (
+    <MemoChild
+      onClick={() => console.log('clicked')}  // New fn = re-render
+      style={{ color: 'blue' }}  // New object = re-render
+    />
+  );
+}
+
+// VIOLATION: Computed value in render without memo
+function FilteredList({ items, filter }: Props) {
+  const filtered = items.filter(i => i.includes(filter));  // Every render
+  return <List items={filtered} />;
+}
+```
+
+### Unoptimized Images
+
+```tsx
+// VIOLATION: No dimensions (causes layout shift)
+<img src={url} alt={alt} />
+
+// VIOLATION: No lazy loading (loads all images immediately)
+{images.map(img => <img src={img.src} alt={img.alt} />)}
+
+// VIOLATION: No aspect ratio (jumps on load)
+<img
+  src={url}
+  width={400}
+  height={300}
+  // Missing: style={{ aspectRatio: '4/3' }}
+/>
+
+// VIOLATION: Eager loading below fold
+<img
+  src={heroImage}
+  alt="Hero"
+  loading="eager"  // Should be lazy for non-critical images
+/>
+```
+
+### Inefficient Data Structures
+
+```tsx
+// VIOLATION: Array.includes for frequent checks (O(n))
+function SelectableList({ items, selected }: Props) {
+  return (
+    <ul>
+      {items.map(item => (
+        <li className={selected.includes(item.id) ? 'selected' : ''}>
+          {/* O(n) check on every item render */}
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+// VIOLATION: Array.find for lookups (O(n))
+function UserDisplay({ userId, users }: Props) {
+  const user = users.find(u => u.id === userId);  // O(n) every render
+  return <span>{user?.name}</span>;
+}
+
+// VIOLATION: Filter + map in render (double iteration)
+function ActiveUsers({ users }: Props) {
+  return (
+    <ul>
+      {users
+        .filter(u => u.active)
+        .map(u => <li key={u.id}>{u.name}</li>)
+      }
+    </ul>
+  );
+}
+
+// VIOLATION: Recreating Set every render
+function Tags({ tags, selected }: Props) {
+  const selectedSet = new Set(selected);  // Created every render
+  return tags.map(tag => (
+    <Tag selected={selectedSet.has(tag)} />
+  ));
+}
+```
+
+---
+
+## Component Violations
+
+### Prop Drilling
+
+```tsx
+// VIOLATION: Passing data through multiple intermediate components
+function App() {
+  const [user, setUser] = useState<User | null>(null);
+
+  return (
+    <Layout user={user}>
+      <Sidebar user={user}>
+        <Navigation user={user}>
+          <UserMenu user={user} />  {/* Props drilled through 3 levels */}
+        </Navigation>
+      </Sidebar>
+    </Layout>
+  );
+}
+```
+
+### Rigid Component Structure
+
+```tsx
+// VIOLATION: Too many props, no composition
+function Card({
+  title,
+  subtitle,
+  content,
+  footer,
+  headerIcon,
+  showCloseButton,
+  onClose,
+  variant,
+  size,
+  className
+}: CardProps) {
+  return (
+    <div className={className}>
+      <header>
+        {headerIcon && <Icon name={headerIcon} />}
+        <h2>{title}</h2>
+        <p>{subtitle}</p>
+        {showCloseButton && <button onClick={onClose}>X</button>}
+      </header>
+      <div>{content}</div>
+      <footer>{footer}</footer>
+    </div>
+  );
+}
+```
+
+### Direct State Mutation
+
+```tsx
+// VIOLATION: Mutating state directly
+function UserList() {
+  const [users, setUsers] = useState<User[]>([]);
+
+  const updateUser = (index: number, name: string) => {
+    users[index].name = name;  // BAD: Direct mutation
+    setUsers(users);           // Won't trigger re-render
+  };
+}
+```
+
+### Missing Keys
+
+```tsx
+// VIOLATION: Index as key causes reconciliation issues
+{items.map((item, index) => (
+  <Item key={index} {...item} />  // Index key breaks reordering
+))}
+
+// VIOLATION: Missing key entirely
+{items.map((item) => (
+  <Item {...item} />  // React warning, poor performance
+))}
+```
+
+---
+
+## Hooks Violations
+
+### Missing Dependencies
+
+```tsx
+// VIOLATION: Missing dependency causes stale closure
+function SearchResults({ query }: { query: string }) {
+  const [results, setResults] = useState<Result[]>([]);
+
+  useEffect(() => {
+    fetchResults(query).then(setResults);
+  }, []);  // BAD: Missing 'query' dependency
+
+  return <ResultsList results={results} />;
+}
+```
+
+### Conditional Hooks
+
+```tsx
+// VIOLATION: Hook called conditionally
+function UserProfile({ user }: { user: User | null }) {
+  if (!user) {
+    return <LoginPrompt />;
+  }
+
+  // BAD: Hook called after conditional return
+  const [isEditing, setIsEditing] = useState(false);
+
+  return <ProfileEditor user={user} isEditing={isEditing} />;
+}
+```
+
+### Stale Closure in Callbacks
+
+```tsx
+// VIOLATION: Callback captures stale state
+function Counter() {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount(count + 1);  // BAD: Always references initial count (0)
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);  // Missing count dependency
+
+  return <span>{count}</span>;
+}
+```
+
+### Effects Without Cleanup
+
+```tsx
+// VIOLATION: Event listener never removed
+function WindowSize() {
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({ width: window.innerWidth, height: window.innerHeight });
+    };
+
+    window.addEventListener('resize', handleResize);
+    // BAD: Missing cleanup - memory leak
+  }, []);
+
+  return <span>{size.width} x {size.height}</span>;
+}
+```
+
+### Derived State in useState
+
+```tsx
+// VIOLATION: Storing computed value in state
+function ProductList({ products, filter }: Props) {
+  const [filteredProducts, setFilteredProducts] = useState<Product[]>([]);
+
+  useEffect(() => {
+    setFilteredProducts(products.filter(p => p.category === filter));
+  }, [products, filter]);  // BAD: Unnecessary state and effect
+
+  return <List items={filteredProducts} />;
+}
+```
+
+---
+
+## Forms Violations
+
+### Uncontrolled to Controlled Switch
+
+```tsx
+// VIOLATION: Switching from uncontrolled to controlled
+function SearchInput() {
+  const [value, setValue] = useState<string>();  // undefined initially
+
+  return (
+    <input
+      value={value}  // BAD: undefined -> string causes warning
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+}
+```
+
+### Missing Form Validation
+
+```tsx
+// VIOLATION: No validation, direct submission
+function LoginForm({ onSubmit }: Props) {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit({ email, password });  // BAD: No validation
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input value={email} onChange={(e) => setEmail(e.target.value)} />
+      <input value={password} onChange={(e) => setPassword(e.target.value)} />
+      <button type="submit">Login</button>
+    </form>
+  );
+}
+```
+
+### Missing Accessibility Attributes
+
+```tsx
+// VIOLATION: Form inputs without proper accessibility
+function ContactForm() {
+  return (
+    <form>
+      {/* BAD: No labels, no aria attributes, no error announcements */}
+      <input placeholder="Email" />
+      {error && <span style={{ color: 'red' }}>{error}</span>}
+      <button>Submit</button>
+    </form>
+  );
+}
+```
+
+### Form State Not Reset After Submit
+
+```tsx
+// VIOLATION: Form keeps stale data after successful submit
+function CommentForm({ onSubmit }: Props) {
+  const [comment, setComment] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    await onSubmit(comment);
+    // BAD: Missing state reset after successful submit
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <textarea value={comment} onChange={(e) => setComment(e.target.value)} />
+      <button type="submit">Post</button>
+    </form>
+  );
+}
+```
+
+---
+
+## Error Handling Violations
+
+### Missing Error Boundaries
+
+```tsx
+// VIOLATION: No error boundary around risky component
+function App() {
+  return (
+    <div>
+      <Header />
+      <main>
+        <UserProfile userId={userId} />  {/* If this crashes, entire app crashes */}
+        <OrderHistory userId={userId} />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+```
+
+### Swallowed Errors
+
+```tsx
+// VIOLATION: Error caught but not handled
+function DataLoader({ url }: { url: string }) {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    fetch(url)
+      .then(res => res.json())
+      .then(setData)
+      .catch(() => {});  // BAD: Silently swallows error
+  }, [url]);
+
+  return data ? <DataDisplay data={data} /> : <Spinner />;
+}
+```
+
+### No Loading/Error States
+
+```tsx
+// VIOLATION: Only handles success case
+function UserProfile({ userId }: { userId: string }) {
+  const [user, setUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    fetchUser(userId).then(setUser);
+  }, [userId]);
+
+  // BAD: No loading spinner, no error handling
+  return user ? <Profile user={user} /> : null;
+}
+```
+
+### Error State Not Cleared
+
+```tsx
+// VIOLATION: Error persists after retry
+function DataFetcher({ url }: { url: string }) {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchData = async () => {
+    try {
+      const result = await fetch(url).then(r => r.json());
+      setData(result);
+      // BAD: Error state not cleared on success
+    } catch (e) {
+      setError(e as Error);
+    }
+  };
+
+  return (
+    <div>
+      {error && <ErrorMessage error={error} />}
+      <button onClick={fetchData}>Retry</button>
+    </div>
+  );
+}
+```
+
+---
+
+## Performance Violations
+
+### Inline Objects in JSX
+
+```tsx
+// VIOLATION: New reference every render
+<Component
+  options={{ show: true, animate: false }}  // New object each render
+  items={[1, 2, 3]}  // New array each render
+/>
+```
+
+### Inline Arrow Functions in JSX
+
+```tsx
+// VIOLATION: New function every render
+<Button onClick={() => handleClick(item.id)} />
+
+// Also creates new function each render
+{items.map(item => (
+  <Item
+    key={item.id}
+    onClick={() => onSelect(item)}  // New function per item per render
+  />
+))}
+```
+
+### Missing useMemo for Expensive Computations
+
+```tsx
+// VIOLATION: Recalculates on every render
+function Dashboard({ data }: { data: DataPoint[] }) {
+  const stats = computeExpensiveStats(data);  // Runs every render
+  const chartData = transformForChart(data);   // Also runs every render
+
+  return (
+    <div>
+      <Stats data={stats} />
+      <Chart data={chartData} />
+    </div>
+  );
+}
+```
+
+### State Updates in Render
+
+```tsx
+// VIOLATION: Causes infinite loop
+function Sync({ value }: { value: string }) {
+  const [state, setState] = useState(value);
+
+  if (value !== state) {
+    setState(value);  // BAD: State update during render
+  }
+
+  return <span>{state}</span>;
+}
+```
+
+### Unthrottled Event Handlers
+
+```tsx
+// VIOLATION: Fires on every scroll pixel
+function ParallaxEffect() {
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      updateParallax();  // 60+ calls per second
+    });
+  }, []);
+}
+```

package/plugins/devflow-code-review/skills/regression-patterns/SKILL.md

@@ -0,0 +1,146 @@
+---
+name: regression-patterns
+description: Regression analysis patterns for code review. Detects lost functionality, removed exports, changed signatures, and behavioral changes that break existing consumers. Loaded by Reviewer agent when focus=regression.
+user-invocable: false
+allowed-tools: Read, Grep, Glob
+---
+
+# Regression Patterns
+
+Domain expertise for detecting functionality regressions and validating implementation intent. Use alongside `review-methodology` for complete regression reviews.
+
+## Iron Law
+
+> **WHAT WORKED BEFORE MUST WORK AFTER**
+>
+> Every change carries regression risk. Removed exports break consumers. Changed signatures
+> break callers. Modified behavior breaks expectations. The burden of proof is on the change:
+> demonstrate no regression, or document the intentional breaking change.
+
+---
+
+## Regression Categories
+
+### 1. Lost Functionality
+
+Features, exports, or capabilities that existed before but are missing after.
+
+| Type | Risk | Detection |
+|------|------|-----------|
+| Removed exports | Breaks consumers | Compare `export` statements |
+| Removed CLI options | Breaks scripts | Compare option definitions |
+| Removed API endpoints | Breaks clients | Compare route handlers |
+| Removed event handlers | Breaks integrations | Compare `.on()` calls |
+
+```typescript
+// VIOLATION: Export removed without deprecation
+// BEFORE: export function deleteUser(id: string): void { }
+// AFTER: (removed) - consumers will break!
+```
+
+### 2. Broken Behavior
+
+Code still exists but behaves differently in breaking ways.
+
+| Type | Risk | Detection |
+|------|------|-----------|
+| Changed return types | Null dereference | Compare function signatures |
+| Changed defaults | Unexpected behavior | Compare default values |
+| Removed side effects | Missing events/logs | Compare emit/log calls |
+| Changed error handling | Uncaught errors | Compare throw/return patterns |
+
+```typescript
+// VIOLATION: Return type widened without migration
+// BEFORE: function getUser(id: string): User { }
+// AFTER: function getUser(id: string): User | null { }
+// Callers assuming non-null will break!
+```
+
+### 3. Intent vs Reality Mismatch
+
+Commit message promises one thing, code does another.
+
+| Type | Risk | Detection |
+|------|------|-----------|
+| Commit says X, code does Y | False confidence | Compare message to diff |
+| Partial implementation | Incomplete feature | Check all stated changes |
+| Missing edge cases | Fragile code | Verify claimed coverage |
+
+```typescript
+// VIOLATION: Commit says "Add retry logic" but no retry implemented
+async function fetchData(): Promise<Data> {
+  return api.get('/data');  // No retry!
+}
+```
+
+### 4. Incomplete Migrations
+
+Old API deprecated but not all consumers updated.
+
+| Type | Risk | Detection |
+|------|------|-----------|
+| Some call sites updated | Mixed behavior | Search for old API usage |
+| Consumers not updated | Type errors | Check all importers |
+| Tests not updated | False passes | Compare test coverage |
+
+```typescript
+// VIOLATION: Migration incomplete
+// file1.ts: newFunction({ a, b })  // Updated
+// file2.ts: oldFunction(a, b)      // NOT updated!
+```
+
+---
+
+## Quick Detection Commands
+
+```bash
+# Find removed exports
+git diff main...HEAD | grep "^-export"
+
+# Find removed files
+git diff main...HEAD --name-status | grep "^D"
+
+# Find incomplete migration (old API still used)
+grep -r "oldFunction" src/ --include="*.ts"
+
+# Find new TODOs (incomplete work)
+git diff main...HEAD | grep "^\+.*TODO"
+```
+
+---
+
+## Extended References
+
+For extended examples and detection techniques:
+
+- **[violations.md](references/violations.md)** - Detailed violation examples for each category
+- **[patterns.md](references/patterns.md)** - Correct patterns for regression-safe changes
+- **[detection.md](references/detection.md)** - Comprehensive bash commands for detection
+
+---
+
+## Severity Guidelines
+
+| Severity | Criteria | Examples |
+|----------|----------|----------|
+| **CRITICAL** | Breaking changes without migration | Public exports removed, return types incompatible, required params added |
+| **HIGH** | Significant behavior changes | Defaults changed, error handling changed, side effects removed |
+| **MEDIUM** | Moderate regression risk | Internal APIs changed, logging reduced, performance changed |
+| **LOW** | Minor concerns | Documentation drift, internal refactoring |
+
+---
+
+## Regression Checklist
+
+Before approving changes:
+
+- [ ] No exports removed without deprecation
+- [ ] Return types backward compatible
+- [ ] Default values unchanged (or documented)
+- [ ] Side effects preserved (events, logging)
+- [ ] All consumers of changed code updated
+- [ ] Migration complete across codebase
+- [ ] CLI options preserved or deprecated
+- [ ] API endpoints preserved or versioned
+- [ ] Commit message matches implementation
+- [ ] Breaking changes documented in CHANGELOG