skills.rest
jacob-balslev
jacob-balslevCOMMUNITY
Explore all skills by this author →
GitHub

frontend-architecture

Define module boundaries and enforce import direction for frontend codebases.

1|Updated May 6, 2026
Search Tags:#frontend architecture#module boundaries#codebase organization#import rules#state ownership#component layering#dependency tangles
One-click install
npx skills add https://github.com/jacob-balslev/skill-graph --skill frontend-architecture-jacob-balslev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-architecture
Source: https://github.com/jacob-balslev/skill-graph/tree/main/marketplace/skills/frontend-architecture
Command: npx skills add https://github.com/jacob-balslev/skill-graph --skill frontend-architecture-jacob-balslev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend architecture prevents tangled dependencies and unclear state ownership by helping teams decide where code belongs, how modules may import, and who owns mutable state as the codebase grows.

Core Features & Use Cases

  • Module boundaries and import direction: Establish rules that keep shared primitives from depending on feature code, and enforce one-way dependencies to avoid architectural drift.
  • Component layering strategy: Separate primitives, composed components, and connected components so data fetching and routing live only where they should.
  • State shape ownership decisions: Choose state location (component, context, store), normalization (entity-keyed vs nested), derivation (computed vs stored), and write ownership to reduce rerender bugs and mutation inconsistencies.
  • Verification criteria for CI and PRs: Use linter/boundary checks plus measurable re-render behavior and test layering aligned to the architecture.

Quick Start

Use the frontend-architecture skill to design a dependency-safe folder and import model for your feature-by-feature UI, including explicit state ownership rules and layered component boundaries.

Frequently Asked Questions about frontend-architecture

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

FAQPage Schema
How do I fix dependency tangles and circular imports in a growing frontend codebase?▼

Frontend architecture resolves dependency tangles by defining module boundaries and enforcing one-way import direction rules. This prevents shared primitives from depending on feature code, eliminating circular imports as your project scales.

What is the best way to organize component layering to prevent data fetching in the wrong components?▼

Component layering separates primitives, composed components, and connected components. This strategy ensures data fetching and routing logic live only in connected components, keeping UI primitives isolated and reusable.

How do I decide where mutable state should live to reduce rerender bugs and mutation inconsistencies?▼

Assign clear state ownership by choosing state location, normalization, derivation, and write ownership. Defining these state shape axes explicitly reduces rerender bugs and prevents inconsistent mutations across modules.

Can I enforce module boundaries and import rules in CI for a feature-sliced frontend architecture?▼

Yes, you can verify module boundaries deterministically using import-boundary linting and CI checks. This enforces allowed import directions and architectural rules automatically on every pull request.

When do I need a formal frontend architecture strategy for my project?▼

You need frontend architecture when your project scales beyond a few features and starts experiencing dependency tangles, unclear module boundaries, and state duplication bugs that slow down development.

How do I structure state normalization and derivation in a layered frontend architecture?▼

Structure state by choosing between entity-keyed or nested normalization, and computed or stored derivation. These state shape decisions clarify write ownership and ensure consistent data flow across your component layers.

Related Skills

Explore More Software Engineering Skills→
nodatallnodatall
2

create-architecture

Create or update repo-specific architecture boundary documentation in docs/ARCHITECTURE.md.

Community
Intermediate
DevXojeDevXoje

clean-architecture

Validate dependency rules and layer boundaries for Clean Architecture compliance.

Community
Intermediate
zenobi-uszenobi-us
68

frontend-developer

Develop accessible React, Vue, or Angular components with TypeScript strict mode.

Official
Intermediate
MSamiulHasnatMSamiulHasnat
1

V3 Core Implementation

Generate a DDD-based claude-flow v3 core module template with dependency injection.

Community
Advanced