frontend-structure

Organizes frontend projects with standardized directory structure and naming guidelines.

Updated Apr 11, 2026
One-click install
npx skills add https://github.com/airRnot1106/skills --skill frontend-structure-airrnot1106
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-structure
Source: https://github.com/airRnot1106/skills/tree/main/skills/frontend-structure
Command: npx skills add https://github.com/airRnot1106/skills --skill frontend-structure-airrnot1106

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provide a standardized, scalable blueprint for frontend project structure, guiding directory layouts and component naming to reduce ambiguity and onboarding time.

Core Features & Use Cases

  • Domain-driven directory guidelines (features/, components/, hooks/, lib/, utils/) with a clear Domain-Case-Base organization.
  • Backward-compatible nesting rules (e.g., user/_base, user/normal-user, user/premium-user) and _base symmetry to support multiple variants.
  • Consistent naming conventions via BCD Design to improve maintainability and cross-team collaboration.

Quick Start

Create a new frontend project and apply the package-by-feature directory structure and BCD Design naming rules to organize features, components, and utilities.

Frequently Asked Questions about frontend-structure

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

FAQPage Schema
How do I structure a scalable frontend project using domain-driven design?▼

To structure a scalable frontend project, apply a standardized package-by-feature directory layout. Organize code into features/, components/, hooks/, lib/, and utils/ folders using a Domain-Case-Base organization to reduce ambiguity and onboarding time.

What is the BCD Design naming convention for frontend components?▼

BCD Design is a consistent component naming convention used to improve maintainability and cross-team collaboration. It pairs with package-by-feature directory placement to ensure predictable frontend structure and maintainable code organization across initiatives.

How do I organize multiple variants of a frontend feature directory?▼

Organize multiple feature variants using backward-compatible nesting rules with _base symmetry. Structure directories like user/_base, user/normal-user, and user/premium-user to support multiple variants while maintaining a clear Domain-Case-Base hierarchy.

Does this frontend architecture approach work for existing projects?▼

Yes, this frontend architecture approach works for existing projects by applying backward-compatible nesting rules. You can incrementally adopt the package-by-feature structure and BCD Design naming rules to ensure predictable structure without breaking current functionality.

What is the best way to standardize frontend directory structure across teams?▼

The best way to standardize frontend directory structure is applying package-by-feature placement with Domain-Case-Base organization. This provides clear guidelines for directory layouts and component naming, reducing ambiguity and onboarding time across teams.