How does this skill improve Angular performance?

It enforces lazy loading of features from day one, which minimizes initial bundle sizes and optimizes the application's loading strategy.

Does this skill work with the latest versions of Angular?

Yes, it incorporates modern Angular practices including standalone components, signals, and functional route guards.

What is a 'walking-skeleton' in this context?

A walking-skeleton is a minimal, navigable version of the application with all routes defined and placeholder components to verify structure before adding business logic.

What is the Router-First Methodology?

It is an architectural approach for Angular that prioritizes designing the application routing structure before implementing individual components to ensure scalability and modularity.

How does it help with team collaboration?

By defining clear feature boundaries and routes early, different teams can work on separate modules in parallel with minimal merge conflicts.

Router-First Angular Architecture

Name: Router-First Angular Architecture
Author: EhssanAtassi

byEhssanAtassi

開発者ツール

Implements scalable, enterprise-grade Angular structures by prioritizing routing design before component implementation.

概要

This skill provides a comprehensive framework for building large-scale Angular applications using the Router-First Methodology. It guides developers through a 7-step process—from roadmap planning and walking-skeleton navigation to stateless design and smart/dumb component separation—ensuring applications are modular, lazy-loaded, and highly maintainable from the start. It is particularly effective for large teams where architectural consistency and parallel development are critical for project success.

主な機能

Stateless data-driven design implementation
Walking-skeleton navigation scaffolding
Lazy-loading optimization strategies
0 GitHub stars
Smart/Dumb component architectural patterns
Feature-based module and folder structuring

ユースケース

Refactoring monolithic Angular apps into modular, lazy-loaded architectures
Standardizing development workflows across large frontend teams
Designing complex enterprise Angular applications from scratch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ehssanatassi/angular-marketplace-developer router-first-methodology

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要