When is the best time to run this skill?

Run it before creating a new component, when starting a new feature with multiple files, or upon first entering a new repository to align with the existing developer experience.

Is this skill compatible with TypeScript?

Absolutely. It specifically looks for TypeScript conventions including interface vs. type definitions, prop types, and generic component patterns.

Will this skill make changes to my source code?

No, this is a discovery-only skill. It uses tools like Read, Glob, and Grep to analyze your project and provide a summary without modifying any files.

Can it detect specific state management libraries?

Yes, it is designed to recognize indicators for Redux, Zustand, Jotai, Recoil, TanStack Query, and standard React Context API usage.

What does the React Component Pattern Discovery skill do?

It scans your React project's codebase to identify established patterns in file structure, naming, state management, and component definitions to ensure new code matches your existing style.

React Component Pattern Discovery

Name: React Component Pattern Discovery
Author: pm7y

bypm7y

Developer Tools

Discovers and summarizes existing React architectural patterns, naming conventions, and state management practices within a codebase.

About

The pm7y-component-patterns skill automates the process of understanding a React project's architectural DNA. By scanning existing files, it identifies specific patterns for component definitions, TypeScript interfaces, file organization, and state management libraries like Redux or Zustand. This ensures that any new code generated by Claude remains perfectly consistent with the project's established style, making it an essential tool for onboarding to new repositories, starting complex features, or performing architectural audits.

Key Features

0 GitHub stars
Automatic detection of file structure and naming conventions
Analysis of component definition styles (Functional, Class, forwardRef)
Identification of TypeScript prop patterns and interface conventions
Mapping of state management usage and custom hook locations
Generation of actionable 'Use These Patterns' summaries for consistent coding

Use Cases

Standardizing architecture before generating a large set of new components
Onboarding to an unfamiliar React codebase to understand local standards
Ensuring consistency during code reviews by referencing existing project patterns

About

Key Features

0 GitHub stars
Automatic detection of file structure and naming conventions
Analysis of component definition styles (Functional, Class, forwardRef)
Identification of TypeScript prop patterns and interface conventions
Mapping of state management usage and custom hook locations
Generation of actionable 'Use These Patterns' summaries for consistent coding

Use Cases

Standardizing architecture before generating a large set of new components
Onboarding to an unfamiliar React codebase to understand local standards
Ensuring consistency during code reviews by referencing existing project patterns