react-patterns

Enforce modern React and TypeScript coding standards via static analysis.

11|1|Updated Feb 9, 2026
One-click install
npx skills add https://github.com/mindcockpit-ai/cognitive-core --skill react-patterns-mindcockpit-ai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/mindcockpit-ai/cognitive-core/tree/main/skills/cellular/templates/react-typescript
Command: npx skills add https://github.com/mindcockpit-ai/cognitive-core --skill react-patterns-mindcockpit-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a ready‑to‑use template that enforces consistent, type‑safe React functional component patterns, proper hook usage, and avoidance of common anti‑patterns, helping teams maintain high‑quality TypeScript React codebases.

Core Features & Use Cases

  • Typed functional components: ensures all components have explicit TypeScript interfaces.
  • Correct hook patterns: validates dependency arrays, use of useCallback, useMemo, and proper cleanup.
  • State management guidance: recommends local state, context, or React Query where appropriate.
  • Anti‑pattern detection: flags class components, any usage, inline objects, and improper keys.
  • Fitness criteria: defines measurable thresholds for strict TypeScript, functional components, typed props, hook dependencies, and test coverage.

Quick Start

Use the react-patterns skill to analyze your project's source files and generate a report of pattern compliance.

Frequently Asked Questions about react-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce strict TypeScript and functional component patterns in a React codebase?

You can enforce strict TypeScript and functional React patterns by analyzing source files to validate typed props interfaces and detect class components, ensuring type-safe React functional components across your project.

What is the best way to check React hook dependency arrays and prevent anti-patterns?

Checking React hook dependency arrays involves static analysis to validate useCallback, useMemo usage, and proper cleanup, flagging inline objects and improper keys to prevent common hook anti-patterns.

How do I ensure typed props and avoid 'any' usage in React 18+ projects?

To ensure typed props and avoid 'any' usage in React 18+ projects, apply strict TypeScript linting rules that require explicit interfaces for all functional components and flag any untyped declarations.

Does this React patterns analysis tool work with JavaScript files or only TypeScript?

This React patterns analysis applies to JavaScript/TypeScript projects using React 18+, evaluating components, hooks, and props to enforce modern coding standards regardless of strict TypeScript usage.

How do I measure React codebase fitness for strict TypeScript, hook dependencies, and test coverage?

Measuring React codebase fitness requires defining measurable thresholds for strict TypeScript compliance, functional components with typed props, correct hook dependencies, and adequate test coverage.

What state management guidance does this React TypeScript linter recommend?

The React TypeScript linter recommends state management guidance by suggesting local state, context, or React Query where appropriate, ensuring proper state handling patterns across your components.