@riligar/agents-kit 1.4.0 → 1.5.1

package/.agent/skills/riligar-dev-frontend/SKILL.md

@@ -0,0 +1,198 @@
+---
+name: riligar-dev-react
+description: Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# React Patterns
+
+> Principles for building production-ready React applications.
+
+---
+
+## 1. Component Design Principles
+
+### Component Types
+
+| Type               | Use                   | State             |
+| ------------------ | --------------------- | ----------------- |
+| **Server**         | Data fetching, static | None              |
+| **Client**         | Interactivity         | useState, effects |
+| **Presentational** | UI display            | Props only        |
+| **Container**      | Logic/state           | Heavy state       |
+
+### Design Rules
+
+- One responsibility per component
+- Props down, events up
+- Composition over inheritance
+- Prefer small, focused components
+
+---
+
+## 2. Hook Patterns
+
+### When to Extract Hooks
+
+| Pattern             | Extract When              |
+| ------------------- | ------------------------- |
+| **useLocalStorage** | Same storage logic needed |
+| **useDebounce**     | Multiple debounced values |
+| **useFetch**        | Repeated fetch patterns   |
+| **useForm**         | Complex form state        |
+
+### Hook Rules
+
+- Hooks at top level only
+- Same order every render
+- Custom hooks start with "use"
+- Clean up effects on unmount
+
+---
+
+## 3. State Management Selection
+
+| Complexity     | Solution               |
+| -------------- | ---------------------- |
+| Simple         | useState, useReducer   |
+| Shared local   | Context                |
+| Server state   | React Query, SWR       |
+| Complex global | Zustand, Redux Toolkit |
+
+### State Placement
+
+| Scope            | Where         |
+| ---------------- | ------------- |
+| Single component | useState      |
+| Parent-child     | Lift state up |
+| Subtree          | Context       |
+| App-wide         | Global store  |
+
+---
+
+## 4. React 19 Patterns
+
+### New Hooks
+
+| Hook               | Purpose                  |
+| ------------------ | ------------------------ |
+| **useActionState** | Form submission state    |
+| **useOptimistic**  | Optimistic UI updates    |
+| **use**            | Read resources in render |
+
+### Compiler Benefits
+
+- Automatic memoization
+- Less manual useMemo/useCallback
+- Focus on pure components
+
+---
+
+## 5. Composition Patterns
+
+### Compound Components
+
+- Parent provides context
+- Children consume context
+- Flexible slot-based composition
+- Example: Tabs, Accordion, Dropdown
+
+### Render Props vs Hooks
+
+| Use Case           | Prefer                 |
+| ------------------ | ---------------------- |
+| Reusable logic     | Custom hook            |
+| Render flexibility | Render props           |
+| Cross-cutting      | Higher-order component |
+
+---
+
+## 6. Performance Principles
+
+### When to Optimize
+
+| Signal           | Action        |
+| ---------------- | ------------- |
+| Slow renders     | Profile first |
+| Large lists      | Virtualize    |
+| Expensive calc   | useMemo       |
+| Stable callbacks | useCallback   |
+
+### Optimization Order
+
+1. Check if actually slow
+2. Profile with DevTools
+3. Identify bottleneck
+4. Apply targeted fix
+
+---
+
+## 7. Error Handling
+
+### Error Boundary Usage
+
+| Scope     | Placement              |
+| --------- | ---------------------- |
+| App-wide  | Root level             |
+| Feature   | Route/feature level    |
+| Component | Around risky component |
+
+### Error Recovery
+
+- Show fallback UI
+- Log error
+- Offer retry option
+- Preserve user data
+
+---
+
+## 8. TypeScript Patterns
+
+### Props Typing
+
+| Pattern   | Use                 |
+| --------- | ------------------- |
+| Interface | Component props     |
+| Type      | Unions, complex     |
+| Generic   | Reusable components |
+
+### Common Types
+
+| Need          | Type               |
+| ------------- | ------------------ |
+| Children      | ReactNode          |
+| Event handler | MouseEventHandler  |
+| Ref           | RefObject<Element> |
+
+---
+
+## 9. Testing Principles
+
+| Level       | Focus                 |
+| ----------- | --------------------- |
+| Unit        | Pure functions, hooks |
+| Integration | Component behavior    |
+| E2E         | User flows            |
+
+### Test Priorities
+
+- User-visible behavior
+- Edge cases
+- Error states
+- Accessibility
+
+---
+
+## 10. Anti-Patterns
+
+| ❌ Don't                 | ✅ Do             |
+| ------------------------ | ----------------- |
+| Prop drilling deep       | Use context       |
+| Giant components         | Split smaller     |
+| useEffect for everything | Server components |
+| Premature optimization   | Profile first     |
+| Index as key             | Stable unique ID  |
+
+---
+
+> **Remember:** React is about composition. Build small, combine thoughtfully.