skills.rest
gileck
gileckCOMMUNITY
Explore all skills by this author →
GitHub

feature-based-structure

Organize client-side code into feature-based folders under src/client/features.

Updated Mar 28, 2025
Search Tags:#code-organization#feature-based#frontend-architecture#stores-hooks-components#src/client/features#exports-index
One-click install
npx skills add https://github.com/gileck/app-template-ai --skill feature-based-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feature-based-structure
Source: https://github.com/gileck/app-template-ai/tree/main/.ai/skills/template/feature-based-structure
Command: npx skills add https://github.com/gileck/app-template-ai --skill feature-based-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill reduces the complexity of organizing large frontend projects by grouping all code related to a feature in a single place, improving maintainability, readability, and onboarding.

Core Features & Use Cases

  • Feature-based organization: All code related to a feature lives under src/client/features/{name}/, including stores, hooks, components, and types.
  • Public API and exports: Each feature has an index.ts exposing its public API, encouraging imports from the feature root.
  • Scalable teamwork: Teams can work in parallel on different features without conflicts.
  • Use cases: For example migrating an existing monolithic frontend into feature modules; adding a new feature like settings; reorganizing a large repo.

Quick Start

Use the feature-based structure to organize your client code as described above. Create the directory src/client/features/{name}/ and add store.ts, hooks.ts, types.ts, index.ts. Ensure each feature exports are centralized in its index.ts and import code from the feature root instead of internal files. E.g., a new feature named payments would live at src/client/features/payments/.

Frequently Asked Questions about feature-based-structure

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

FAQPage Schema
What is feature-based frontend architecture and when should I use it?▼

Feature-based frontend architecture groups all code related to a feature—stores, hooks, components, and types—under a single directory like src/client/features/{name}/. Use it to reduce complexity and improve maintainability in large frontend projects.

How do I organize client-side code into feature folders?▼

Create a directory at src/client/features/{name}/ and add store.ts, hooks.ts, types.ts, and index.ts files inside. Centralize all feature exports in index.ts and import code from the feature root instead of internal files to ensure consistency.

What's the best way to structure stores and hooks in a feature-based folder?▼

Use a createStore-based store pattern within each feature directory, placing store logic in store.ts and hooks in hooks.ts. Coordinating stores, hooks, and types inside src/client/features/{name}/ ensures consistency and keeps feature modules self-contained.

Can I migrate an existing monolithic frontend into feature modules?▼

Yes, you can migrate a monolithic frontend into feature modules by progressively moving related stores, hooks, components, and types into src/client/features/{name}/ directories, exposing each feature's public API through an index.ts file.

Does feature-based code organization work for large teams working in parallel?▼

Feature-based code organization allows teams to work in parallel on different features without conflicts. Each feature lives under src/client/features/{name}/ with its own public exports, enabling scalable teamwork and easier onboarding.

Related Skills

Explore More Software Engineering Skills→
nachopalmerinachopalmeri

astro

Enforce standardized structure and best practices for Astro projects.

Community
Intermediate
btabaskabtabaska
1

rule-frontend-components

Enforce React component conventions for frontend/src/components files.

Community
Advanced
hackutdhackutd
5

frontend

Build React 19 frontend pages with TypeScript, Zustand, and shadcn/ui.

Official
Advanced
Let-s-internLet-s-intern
8

folder-structure

Organize frontend folders using domain-first and fractal architecture.

Official
Intermediate