TypeScript + React LLM Rules
A set of LLM agent rules to guide TypeScript and React development.
prefer-typescript-types
Rule:
Always suggest using strong TypeScript types and interfaces instead of using any. Provide type definitions for function parameters, return types, and React props.
Description:
Enforces type safety in all generated code snippets and suggestions.
Globs:
*.ts*.tsx
use-functional-components
Rule:
Prefer React functional components with hooks over class components when writing or refactoring React code.
Description:
Modern React development favors functional components.
Globs:
*.tsx
avoid-react-fc
Rule:
Do not use React.FC or React.FunctionComponent when typing React components. Prefer explicitly typing props via function parameters and specifying return types if needed.
Description:
Avoids unintended children typing, provides clearer props definition, and improves inference.
Globs:
*.tsx
enforce-presentation-logic-separation
Rule:
Encourage separating components into presentational and logic parts where appropriate. For complex logic, extract it into custom hooks, utility functions, or services.
Description:
Promotes cleaner, more maintainable code and single-responsibility components.
Globs:
*.tsx
enforce-move-logic-to-hooks
Rule:
When a React component contains non-trivial business logic, data fetching, or reusable behavior, move this logic into a separate custom hook. Keep components focused on rendering UI.
Description:
Improves code reuse, readability, and testability by isolating logic from UI layers.
Globs:
*.tsx
react-file-naming
Rule:
When suggesting new React components, use PascalCase for file and component names. For hooks, use camelCase with the prefix use.
Description:
Keeps project structure consistent.
Globs:
*.tsx*.ts
avoid-inline-css
Rule:
Avoid inline styles in React components unless absolutely necessary. Prefer CSS Modules, Styled Components, or Tailwind CSS.
Description:
Encourages maintainable styling practices.
Globs:
*.tsx
write-tests
Rule:
Always suggest writing unit or integration tests when creating new components or hooks, using testing libraries like Jest or React Testing Library.
Description:
Promotes test-driven development and robust code.
Globs:
*.ts*.tsx
strict-mode-compatible
Rule:
Ensure that any React code is compatible with React Strict Mode. Avoid deprecated lifecycle methods and side effects in render functions.
Description:
Future-proofs code for React upgrades.
Globs:
*.tsx
avoid-unused-imports
Rule:
Do not generate code with unused imports. Clean up imports to keep files minimal and readable.
Description:
Helps maintain clean and efficient code.
Globs:
*.ts*.tsx
prefer-arrow-functions
Rule:
Prefer using arrow functions for component declarations and callbacks for consistency and cleaner syntax.
Description:
Promotes modern syntax and concise code.
Globs:
*.tsx
suggest-component-splitting
Rule:
If a component grows too large (over ~200 lines or many nested JSX elements), suggest splitting it into smaller subcomponents.
Description:
Keeps components maintainable and improves readability.
Globs:
*.tsx
suggest-error-boundaries
Rule:
Recommend wrapping critical components with React Error Boundaries where appropriate, especially for app-level layout components.
Description:
Improves application resilience and error handling.
Globs:
*.tsx
prefer-use-effect-cleanup
Rule:
When using useEffect, always include cleanup logic if side effects could persist (e.g. subscriptions, timers).
Description:
Prevents memory leaks and unintended side effects.
Globs:
*.tsx
enforce-accessibility
Rule:
Generate JSX that complies with accessibility best practices (ARIA attributes, semantic tags, proper labeling).
Description:
Improves usability for all users and aligns with web standards.
Globs:
*.tsx
suggest-lazy-loading
Rule:
Suggest using React.lazy and Suspense for code splitting in large apps to improve initial load performance.
Description:
Optimizes bundle size and app speed.
Globs:
*.tsx
prefer-fragments
Rule:
Prefer React fragments (<>) instead of unnecessary wrapper <div> elements in JSX trees.
Description:
Keeps DOM output cleaner.
Globs:
*.tsx
prefer-strict-equality
Rule:
Recommend using strict equality checks (===) in TypeScript logic to avoid type coercion issues.
Description:
Prevents subtle bugs and improves code safety.
Globs:
*.ts*.tsx
suggest-prop-types-docs
Rule:
When defining React props or interfaces, generate meaningful JSDoc or comments explaining the purpose of each prop.
Description:
Helps improve developer experience and maintainability.
Globs:
*.tsx*.ts
enforce-security
Subrule 1 — Escape User Input
Rule:
Always escape user-generated content in JSX to prevent injection attacks. Never dangerously set inner HTML unless strictly necessary and safe.
Description:
Protects the application from cross-site scripting (XSS).
Globs:
*.tsx
Subrule 2 — Avoid Hardcoded Secrets
Rule:
Do not include secrets, tokens, or credentials in source code or configuration files. Suggest loading them from environment variables or secure storage.
Description:
Prevents accidental exposure of sensitive data.
Globs:
*.ts*.tsx
Subrule 3 — Secure External Requests
Rule:
When writing API calls, ensure proper handling of credentials, CORS policies, and HTTPS. Avoid passing tokens in URLs.
Description:
Keeps data exchanges secure.
Globs:
*.ts*.tsx
Subrule 4 — Validate Input
Rule:
Validate and sanitize all user input on both client and server sides, especially when dealing with forms or dynamic routes.
Description:
Helps prevent injection attacks and ensures data integrity.
Globs:
*.tsx
Subrule 5 — Set Secure Headers
Rule:
Suggest security headers like Content Security Policy (CSP), X-Frame-Options, and Strict-Transport-Security in any server-side rendering or API examples.
Description:
Strengthens application security posture.
Globs:
*.ts