skills.rest
a6232241
a6232241COMMUNITY
Explore all skills by this author →
GitHub

Feature-First Architecture

Places components in feature-specific or shared directories using a decision tree.

Updated Aug 23, 2026
Search Tags:#typescript#architecture#project structure#component placement#code organization#feature-first
One-click install
npx skills add https://github.com/a6232241/resume --skill feature-first-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Feature-First Architecture
Source: https://github.com/a6232241/resume/tree/main/.agent/skills/feature-first-architecture
Command: npx skills add https://github.com/a6232241/resume --skill feature-first-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides clear guidelines for organizing project files and components, ensuring consistency and maintainability by adhering to a Feature-First Architecture.

Core Features & Use Cases

  • Component Placement Logic: Offers a decision tree for placing new components in the correct directory (components/ui/, components/shared/, or features/[name]/components/).
  • Export Rules: Enforces the use of named exports for better code management.
  • Use Case: When deciding where to put a new UserProfileCard component, this skill guides you to place it within features/user/components/ if it's specific to the user feature, or components/shared/ if it's used across multiple features.

Quick Start

Use the feature-first architecture skill to determine the correct directory for a new 'Modal' component.

Frequently Asked Questions about Feature-First Architecture

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

FAQPage Schema
What is feature-first architecture in TypeScript project structure?▼

Feature-first architecture organizes code by grouping files based on their functional domain, placing components into directories like features/[name]/components/ to ensure project scalability.

How do I decide where to place a new component in a feature-first project structure?▼

Use a component placement decision tree to route new components based on reusability and feature specificity, placing them in components/ui/, components/shared/, or features/[name]/components/ accordingly.

When should I use a shared components directory versus a feature-specific folder?▼

Place components in components/shared/ if they are utilized across multiple features, or within features/[name]/components/ if they serve a single specific feature domain.

Should I use named or default exports for UI components in feature-first architecture?▼

Feature-first architecture enforces the use of named exports for all components to provide better code management and maintain a scalable, organized codebase.

Does feature-first architecture work for scaling large TypeScript codebases?▼

Yes, feature-first architecture addresses challenges in maintaining a scalable and organized codebase by providing clear guidelines for organizing project files and components consistently.

Related Skills

Explore More Software Engineering Skills→
syeda-hoorain-alisyeda-hoorain-ali

nextjs-project-initialization-and-best-practices

Initialize and structure Next.js projects with TypeScript, Tailwind, and App Router.

Community
Intermediate
gileckgileck

react-component-organization

Organize React components into route, feature, and shared UI folders.

Community
Basic
Intense-VisionsIntense-Visions
18

check-mechanical-constraints

Validate linter rules, boundary schemas, and forbidden imports in code projects.

Official
Advanced
TrossitecTrossitec
1

vertical-slice

Reorganize .NET codebases into feature folders with isolated handlers and endpoints.

Official
Intermediate