feature-module-architect_skill

Overview

This skill scaffolds feature modules following a feature-based architecture with strong colocation and a strict 500 LOC file limit. It generates a standard directory layout (components, hooks, services, types, utils) and a single public API export to keep features encapsulated and easy to consume. Use it when creating new features or refactoring large, scattered code into cohesive modules.

How this skill works

The skill creates a feature folder under src/features/{feature-name} with subfolders for components, hooks, services, types, and utils plus an index.ts that exposes only the public API. It enforces a hard 500 lines-of-code limit per file and provides a refactoring pattern to split large files into hooks, handlers, and small components. It also adds test file placeholders beside implementations and recommends import practices to avoid leaking internals between features.

When to use it

• When creating a new feature module from scratch
• When a TypeScript/React file exceeds the 500 LOC limit
• When feature-related code is scattered across global directories
• When you need a consistent public API for a feature
• When preparing a large feature for easier testing and reuse

Best practices

• Colocate components, hooks, services, types, and utils inside the feature folder
• Keep each file under 500 LOC; split by responsibility (hooks, handlers, view)
• Export only what other features need from src/features/{feature}/index.ts
• Place test files next to the implementation files
• Prefer small presentational components and pull logic into hooks/services

Example use cases

• Scaffold an ai-generation feature with GenerationForm, useGeneration, and generationService
• Refactor a 600 LOC dashboard into useDashboard, dashboardHandlers, and a small Dashboard component
• Create a project-management feature with ProjectCard, useProjects, projectService, and project.types
• Organize a world-building feature so all maps, hooks, and types live under src/features/world-building/