react-best-practices
React Best Practices
Preconditions
Before applying these practices, confirm:
- Stack check - Verify React Router 7 is in use (or note if using different router/framework)
- TypeScript - Confirm TypeScript is configured with
strict: true - Existing patterns - Review existing codebase patterns for consistency
If the codebase uses a different data fetching approach (TanStack Query, SWR, etc.), adapt the data fetching guidance accordingly.
Steps
When writing or reviewing React code:
More from yonderlab/kota.agent.skills
react-router-7-framework
Apply React Router 7 framework mode best practices including server-first data fetching, type-safe loaders/actions, proper hydration strategies, middleware authentication, handle metadata, useMatches/useRouteLoaderData hooks, and maximum type safety. Use when working with React Router 7 framework mode, implementing loaders, actions, route protection, breadcrumbs, streaming with Suspense/Await, URL search params, form validation, optimistic UI, resource routes (API endpoints), route configuration, or building SSR applications.
22jsonlogic-validator
Implement, validate, and test JSONLogic rules for portable business logic. Use when working with JSONLogic syntax, creating rules for conditional logic, validating rule structures, testing rules against data, converting business requirements to JSONLogic, or using engine custom operations like today, age_from_date, months_since, date_diff, abs, match. Triggers on "write jsonlogic", "validate jsonlogic", "create a rule", "business logic as JSON", "conditional logic", "date calculation", "regex match", or any mention of JSONLogic rules.
16conventional-commit
Create one or more Conventional Commits following the spec and push the current branch. Use when the user asks to create commits, write a conventional commit message, commit and push changes, or prepare commits before opening a pull request.
16create-pull-request
Create a pull request following the team's PR template and validation rules. Use when the user asks to create a pull request, create a PR, open a pull request, draft a PR, or prepare changes for review.
15skill-creator
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
10template-skill
Replace with description of the skill and when the agent should use it.
9