SkillsAdd

flpbalada/fb-skills

project-structure

Organize React, Next.js, or TypeScript projects with feature-based architecture.

First seen May 4, 2026

Installation

$ npx skills add flpbalada/fb-skills --skill project-structure
View on skills.sh ↗ GitHub repository ↗

Summary

  • Organize React, Next.js, or TypeScript projects with feature-based architecture.
  • Use when starting or reorganizing an app, deciding where files belong, separating app/features/shared layers, preventing cross-feature imports, designing module boundaries, or applying Bulletproof React-style structure.
  • For high-level architecture tradeoffs use architecture-review; for single-component splitting use decompose.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
supabase Shared topics
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
prisma-compute Shared topics
prisma/skills

Prisma Compute deployment and hosting guide. Use whenever the user mentions Prisma Compute, `pr…

253.4K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs

Also in this package

Other skills from flpbalada/fb-skills · top by installs.

npx skills add flpbalada/fb-skills
progressive-disclosure 35 discuss-task 25 to-prd 22 code-simplifier 18 code-architecture-tailwind-v4-best-practices 18 discuss-code 17 five-whys 17 react-useeffect-avoid 17 typescript-advanced-types 16 deep-thinker 16

Browse all from flpbalada/fb-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 7
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 2,369 B
  • docs SUMMARY.md 434 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 20 installs

SKILL.md

Project Structure

Use feature-based architecture for React, Next.js, and TypeScript. Organize by domain, not file type.

Goal

Keep features independent. Keep shared code truly shared. Compose features at app layer.

Rules

  • Code flows one way: shared → features → app.
  • Features cannot import other features.
  • App can compose multiple features.
  • Shared code cannot import app or features.
  • Add only folders needed now.
  • Move one-feature code into that feature.

Base Structure

src/
  app/          routing, layouts, providers
  components/   shared UI
  features/     domain modules
  hooks/        shared hooks
  lib/          library clients and wrappers
  types/        shared types
  utils/        shared utilities

Feature:

src/features/users/
  api/
  components/
  hooks/
  types/
  utils/

Create only folders used by that feature.

Placement

  • Route/page: src/app/
  • Shared UI: src/components/
  • Feature UI: src/features/[feature]/components/
  • Feature API: src/features/[feature]/api/
  • Feature type: src/features/[feature]/types/
  • Feature utility: src/features/[feature]/utils/
  • Shared utility: src/utils/

Flow

  1. Identify domain or feature.
  2. Check if code is used by one feature or many.
  3. Put one-feature code inside feature.
  4. Put reused code in shared folders.
  5. Compose cross-feature screens in app layer.
  6. Add lint rules for import boundaries.

References

Output

## Project Structure Decision

Code: [thing being placed]
Scope: [feature-specific / shared / app]
Location: [path]
Reason: [why]
Import boundary:
- Can import from: [allowed]
- Must not import from: [blocked]