skills.rest
Jasrags
JasragsCOMMUNITY
Explore all skills by this author →
GitHub

component-patterns

Codify standardized folder and export patterns for Shadow Master React components.

1|1|Updated Nov 14, 2025
Search Tags:#architecture#consistency#React#organize#component-patterns#exports#folder-structure
One-click install
npx skills add https://github.com/Jasrags/ShadowMaster --skill component-patterns-jasrags
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-patterns
Source: https://github.com/Jasrags/ShadowMaster/tree/main/.claude/skills/component-patterns
Command: npx skills add https://github.com/Jasrags/ShadowMaster --skill component-patterns-jasrags

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a standardized approach to organizing Shadow Master React components, solving inconsistencies in folder layout and export patterns across the codebase.

Core Features & Use Cases

  • Consistent root-level component structure and feature subfolders to promote reuse and maintainability.
  • Clear decision-flow guidance on when to create subfolders versus keeping single-file components.
  • Guidance on index exports and area-specific conventions to simplify imports across components/ui, components/creation, and components/character.

Quick Start

Review these patterns before creating or updating a component. Apply the decision flow and export conventions when structuring new components. For example, when starting a new feature, decide between a single-file component or a feature folder with an index.ts that re-exports key modules.

Frequently Asked Questions about component-patterns

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

FAQPage Schema
How do I organize React components for better folder structure and consistency?▼

Organize React components by adopting a standardized folder structure with clear root-level directories and feature subfolders. This approach enforces consistent export patterns across the codebase, promoting component reuse and maintainability during architecture decisions.

When should I create a feature subfolder versus a single-file component?▼

Use a decision-flow guidance to determine when to create a feature subfolder versus keeping a single-file component. If a component is complex with multiple modules, use a folder with an index.ts to re-export key modules; otherwise, keep it as a single file.

What is the best way to manage index exports for React UI components?▼

Manage React UI component index exports by applying area-specific conventions that simplify imports. Standardize index.ts files to re-export key modules across specific directories like components/ui, components/creation, and components/character.

How do I structure React component exports during a codebase refactoring?▼

Structure React component exports during refactoring by enforcing clear structural conventions for index exports. Apply a standardized approach to folder layout and export patterns to resolve inconsistencies and simplify imports across the project.

Does this React component architecture pattern work for large projects?▼

Yes, this React component architecture pattern works for large projects by enforcing project-wide consistency. It provides a clear set of structural conventions for folder layout and exports, which scales effectively for component creation, refactoring, and architecture decisions.

Related Skills

Explore More Software Engineering Skills→
kristijorgjikristijorgji

frontend-component-guidelines

Enforce React component structure, translations, Storybook, and test coverage.

Community
Intermediate
jorggerojasjorggerojas
1

components-ui

Organize React UI components with standardized folder structure and central exports.

Community
Intermediate
allenlin90allenlin90
1

frontend-code-quality

Enforces frontend code quality standards for React applications via ESLint and naming conventions.

Community
Intermediate
barrydobsonbarrydobson

Exploring Alternatives

Generate 2-3 design alternatives with trade-off documentation before implementation.

Community
Basic