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

0•

Developer Tools

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

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

010 GitHub stars

02Automatic detection of file structure and naming conventions

03Analysis of component definition styles (Functional, Class, forwardRef)

04Identification of TypeScript prop patterns and interface conventions

05Mapping of state management usage and custom hook locations

06Generation of actionable 'Use These Patterns' summaries for consistent coding

Use Cases

01Standardizing architecture before generating a large set of new components

02Onboarding to an unfamiliar React codebase to understand local standards

03Ensuring consistency during code reviews by referencing existing project patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add pm7y/pm7y-marketplace pm7y-component-patterns

For use in Claude.ai and ChatGPT

Download Skill