agentsclimarketplace

Reactprinciples folder structure

Skill sindev08/react-principles-skills/skills/reactprinciples-folder-structure

Claude/Cursor/AI skills for React Principles cookbook patterns

Install
npx -y skills add sindev08/react-principles-skills --skill reactprinciples-folder-structure

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Scaffold a feature-sliced folder structure for a new feature in a React project following the React Principles cookbook. Invoke when the user says "create a new feature", "scaffold feature folder", or asks about React Principles folder structure. Creates the directory layout (components, hooks, stores, data) with barrel index.ts files at appropriate levels. Does not generate component bodies — only the structure.

SKILL.md

3.8 KB, as published. Nobody here has run it

React Principles — Feature Folder Structure

You scaffold a new feature folder following the feature-sliced architecture pattern documented in the React Principles cookbook.

Step 0 — Load the live recipe (required)

Do this before anything else. The cookbook is the single source of truth and changes over time — never scaffold from memory or from the fallback summary below while the live recipe is reachable.

  1. If the reactprinciples MCP server is available, call its get_recipe tool with slug folder-structure.
  2. Otherwise fetch: https://www.reactprinciples.dev/cookbook/folder-structure/llms.txt

The fetched recipe contains the directory layout, barrel export rules, and rationale — treat its rules as requirements, not suggestions. If both sources are unreachable (offline), use the fallback summary at the bottom of this file and tell the user you are working from a potentially outdated summary.

When to invoke

  • User asks to "create a new feature called X"
  • User asks for "feature folder structure" or "feature scaffolding"
  • User asks where files should go for a new feature

Inputs needed

Ask the user for:

  1. Feature name — lowercase, hyphenated if multi-word (e.g., users, team-settings)
  2. What the feature contains — which of the following the feature needs:
    • Components (almost always yes)
    • Hooks (common)
    • Stores (only if feature has client state)
    • Data / API services (only if feature has its own server data)

If the user gives only the name, default to creating components/ and hooks/. Confirm before scaffolding if more is needed.

What to read first

Before generating, look at an existing feature in the user's project for reference:

src/features/examples/    # or any existing feature

Match the conventions you find there — barrel export style, folder casing, file naming.

How to scaffold

Create the directory layout exactly as described in the recipe you fetched in Step 0, limited to the parts the user asked for. Follow the recipe's barrel export rules for where index.ts files go and what they may re-export.

After generating

Tell the user:

  1. The folder structure that was created
  2. Where to add their first component / hook / store
  3. The import path other features should use: import { ... } from '@/features/<feature>'

What you should NOT do

  • Don't generate actual components or hooks — that's a separate skill (reactprinciples-component, reactprinciples-hook)
  • Don't create a utils/ folder at the feature level — cross-cutting utilities belong in @/shared/utils/
  • Don't put barrel exports inside subfolders if there's only one file in them

Fallback summary (only if Step 0 fails)

May be outdated — the live recipe always wins.

  • Features live in src/features/<feature>/ with optional components/, hooks/, stores/, data/ subfolders, each with a barrel index.ts
  • The root barrel re-exports the public API only — internal types, utilities, and stores stay private
  • 'use client' goes on the store/component file itself, never on index.ts barrels
  • Shared code belongs in src/shared/, UI primitives in src/ui/

Reference

See Folder Structure recipe for the full rationale.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.