devflow-kit 1.8.3 → 2.0.1

package/src/assets/skills/react/references/sources.md

@@ -0,0 +1,35 @@
+# React — Sources
+
+## Primary References
+
+| # | Source | Author(s) | Year | Access | Topics |
+|---|--------|-----------|------|--------|--------|
+| 1 | react.dev Documentation | React Team | 2024 | [Free](https://react.dev) | Official docs: Thinking in React, hooks, escape hatches, Server Components |
+| 2 | "Thinking in React" | React Team | 2024 | [Free](https://react.dev/learn/thinking-in-react) | Composition model, component hierarchy, one-way data flow |
+| 3 | "A Complete Guide to useEffect" | Dan Abramov | 2019 | [Free](https://overreacted.io/a-complete-guide-to-useeffect/) | Mental model for effects, dependency array, stale closures |
+| 4 | "Before You memo()" | Dan Abramov | 2021 | [Free](https://overreacted.io/before-you-memo/) | Composition before optimization, lifting state down, passing children |
+| 5 | Patterns.dev | Lydia Hallie & Addy Osmani | 2024 | [Free](https://patterns.dev) | Design patterns, rendering patterns, performance patterns |
+| 6 | "The Two Reacts" | Dan Abramov | 2024 | [Free](https://overreacted.io/the-two-reacts/) | Server vs client mental model, component trees, rendering boundaries |
+| 7 | RFC 188: Server Components | React Team | 2020 | [Free](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) | Server/client boundary, zero-bundle components, data fetching model |
+| 8 | React Fiber Architecture | Andrew Clark | 2016 | [Free](https://github.com/acdlite/react-fiber-architecture) | Reconciliation algorithm, incremental rendering, work units |
+| 9 | "Algebraic Effects for the Rest of Us" | Dan Abramov | 2019 | [Free](https://overreacted.io/algebraic-effects-for-the-rest-of-us/) | Hooks design philosophy, effect systems, algebraic effects |
+| 10 | React Labs Blog Posts | React Team | 2023–2024 | [Free](https://react.dev/blog) | React Compiler, Actions, Server Components updates |
+| 11 | Kent C. Dodds Blog | Kent C. Dodds | 2024 | [Free](https://kentcdodds.com) | Testing philosophy, advanced patterns, practical React |
+| 12 | "Composition vs Inheritance" | React Team | 2024 | [Free](https://react.dev/learn/thinking-in-react) | Core composition principle, children prop, specialization |
+| 13 | "You Might Not Need an Effect" | React Team | 2024 | [Free](https://react.dev/learn/you-might-not-need-an-effect) | Derived state, event handlers, effect anti-patterns |
+| 14 | "Extracting State Logic into a Reducer" | React Team | 2024 | [Free](https://react.dev/learn/extracting-state-logic-into-a-reducer) | useReducer patterns, complex state transitions |
+| 15 | React Testing Library docs | Kent C. Dodds | 2024 | [Free](https://testing-library.com/docs/react-testing-library/intro/) | User-event based testing, accessibility queries, async testing |
+| 16 | "Making Sense of React Hooks" | Dan Abramov | 2018 | [Free](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) | Why hooks exist, rules of hooks, hook mental model |
+| 17 | React Compiler announcement | React Team | 2024 | [Free](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024) | Automatic memoization, React Forget, compiler-driven optimization |
+| 18 | "Presentational and Container Components" | Dan Abramov | 2015 | [Free](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0) | Historical split (now superseded by hooks); context for evolution |
+| 19 | ELM Architecture | Evan Czaplicki | 2015 | [Free](https://guide.elm-lang.org/architecture/) | Unidirectional data flow inspiration, Model-Update-View |
+| 20 | "Functional-Light JavaScript" | Kyle Simpson | 2018 | [Free](https://github.com/getify/Functional-Light-JS) | FP concepts applied to React: pure components, composition |
+
+## Standards & Specifications
+
+| # | Source | Org | Access | Topics |
+|---|--------|-----|--------|--------|
+| 21 | Web Content Accessibility Guidelines (WCAG) 2.2 | W3C | [Free](https://www.w3.org/TR/WCAG22/) | Accessibility requirements for interactive components |
+| 22 | WAI-ARIA Authoring Practices Guide | W3C | [Free](https://www.w3.org/WAI/ARIA/apg/) | ARIA patterns for custom widgets, keyboard navigation |
+| 23 | Core Web Vitals | Google | [Free](https://web.dev/vitals/) | LCP, CLS, INP — performance metrics tied to render quality |
+| 24 | React Hooks API Reference | React Team | [Free](https://react.dev/reference/react) | Authoritative hook signatures, rules, and guarantees |

package/src/assets/skills/react/references/violations.md

@@ -0,0 +1,570 @@
+# React Violation Examples
+
+Extended violation patterns for React reviews. Reference from main SKILL.md.
+Sources in `references/sources.md`.
+
+## Performance Violations [5][23]
+
+### Sequential Fetches [1]
+
+```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 [5]
+
+```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 [3][4]
+
+```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 [23]
+
+```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 [5]
+
+```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 [2][12]
+
+### Prop Drilling [2][4]
+
+```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 [2][12]
+
+```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 [1]
+
+```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 [1]
+
+```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 [3][16]
+
+### Missing Dependencies [3]
+
+```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 [16][24]
+
+```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 [3]
+
+```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 [3]
+
+```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 [13]
+
+```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
+
+See `references/forms.md` for full form violation patterns.
+
+### Uncontrolled to Controlled Switch [1]
+
+```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 [1]
+
+```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 [21][22]
+
+```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 [1]
+
+```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
+
+See `references/error-handling.md` for full error handling violation patterns.
+
+### Missing Error Boundaries [1]
+
+```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 [3]
+
+```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 [13]
+
+```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 [3]
+
+```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 [4][5]
+
+### Inline Objects in JSX [3][4]
+
+```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 [3][4]
+
+```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 [4][17]
+
+```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 [13]
+
+```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 [5]
+
+```tsx
+// VIOLATION: Fires on every scroll pixel
+function ParallaxEffect() {
+  useEffect(() => {
+    window.addEventListener('scroll', () => {
+      updateParallax();  // 60+ calls per second
+    });
+  }, []);
+}
+```