skills.rest
endriwmsi
endriwmsiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

feature-architecture

Enforce feature-based directory structures with centralized public API exports.

Updated Aug 27, 2026
Search Tags:#typescript#frontend-backend#code-organization#feature-architecture#public-api#import-conventions#barrels
One-click install
npx skills add https://github.com/endriwmsi/hub-ln --skill feature-architecture-endriwmsi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: feature-architecture
Source: https://github.com/endriwmsi/hub-ln/tree/main/.agent/skills/feature-architecture
Command: npx skills add https://github.com/endriwmsi/hub-ln --skill feature-architecture-endriwmsi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing growing codebases becomes unwieldy without a consistent architectural pattern. This Skill enforces a feature-based structure, aligning components, hooks, actions, schemas, types, and public APIs to reduce coupling and improve maintainability.

Core Features & Use Cases

  • Feature-based directories: features/{feature-name}/ with components, hooks, actions, schemas, types, db, lib, and a public index.ts to export a stable API.
  • Import discipline: barrels and a single public export point to simplify imports and enforce stable public interfaces.
  • Public API guarantees: public exports are centralized through index.ts to support safe refactors and clear boundaries.
  • Use Case: A team onboarding a new feature can scaffold folders, add exports via the feature's index.ts, and ensure internal modules are not imported directly by consumers.

Quick Start

Create a new feature under features/{name}, add a components folder with reusable UI pieces, create hooks and actions, and expose a public API from features/{name}/index.ts.

Frequently Asked Questions about feature-architecture

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

FAQPage Schema
How do I organize a growing TypeScript codebase to prevent module coupling?▼

Feature-based architecture organizes directories by domain, grouping components, hooks, actions, and schemas under a single feature folder with a centralized public API. This enforces import discipline and reduces module coupling across frontend and backend projects.

What is the best way to enforce consistent imports and public APIs across frontend and backend modules?▼

Use barrels and a single public export point within each feature directory to enforce consistent imports. This centralizes public exports through an index.ts file, guaranteeing stable interfaces and safe refactoring boundaries across frontend and backend modules.

How do I scaffold a new feature folder with a stable public API in TypeScript?▼

To scaffold a new feature, create a directory under features/{name}, add subfolders for components, hooks, actions, and schemas, then expose the public API from features/{name}/index.ts. This ensures internal modules are not imported directly by consumers.

Does feature-based architecture work for both frontend and backend code organization?▼

Yes, feature-based architecture applies to both frontend and backend modules. It enforces consistent directory structures and import conventions across projects, ensuring organized boundaries and centralized public API exposure regardless of the application layer.

When should I use barrels and a centralized index.ts for code organization?▼

Use barrels and a centralized index.ts when managing growing codebases that become unwieldy without consistent architectural patterns. This approach simplifies imports, enforces stable public interfaces, and supports safe refactors by clearly defining feature boundaries.

Related Skills

Explore More Software Engineering Skills→
guichefferguicheffer
3

file-organization

Standardize React Native project structure with a 6-tier module system.

Community
Intermediate
TheOrcDevTheOrcDev
2.0k

bundle-barrel-imports

Replace barrel exports with direct source imports in React projects.

Community
Basic
scikrikciscikrikci

react-vite

Coordinates React+Vite builds in a pnpm monorepo with design subagent delegation.

Community
Intermediate
sasatech-labssasatech-labs
1

Feature-Based-Layered-Architecture

Organize Next.js applications into Handler, Service, Repository, and Adapter layers.

Official
Advanced