lwc-well-architected

Structure Salesforce LWC components using an atomic design framework that organizes elements into atoms, molecules, organisms, templates, pages, and utilities to enable reuse and consistency. This approach replaces monolithic components with a scalable, maintainable UI architecture.

Name Lightning Web Components using the {app}{Level}{PascalName} naming scheme to standardize component design across atoms, molecules, organisms, templates, pages, utilities, and Flow-integrated components. This convention clarifies role responsibilities per hierarchy level.

Refactor monolithic LWC components by applying the atomic design framework to break down large UI structures into discrete atoms, molecules, and organisms. Use the framework's review checklist to guide component creation and ensure role responsibilities are correctly assigned.

Yes, the LWC atomic design framework supports Salesforce Flow integration and provides specific guidance for building Flow bridging and Custom Property Editor (CPE) components. It ensures components integrate correctly within Flow-driven processes.

Yes, you can use atomic design for LWC code reviews and Jest testing as the framework includes a comprehensive review checklist and testing guidance. This ensures components meet accessibility, SLDS compliance, and cross-context rendering requirements for desktop and mobile.