1,950
Total TSX Files
205
Atoms
799
Components
909
Screens
Directory Structure by File Count
Screens
Components
Atoms
Other
Files by Directory
Atomic Design Layers
How This Data Was Gathered
This visualization analyzes 1,950 TSX files across the Acme frontend, organized according to Atomic Design methodology.
Data Sources
- Atoms:
find src/atoms -name "*.tsx" | wc -l= 205 - Components:
find src/components -name "*.tsx" | wc -l= 799 - Screens:
find src/screens -name "*.tsx" | wc -l= 909 - Other directories:
for dir in src/*/; do echo "$dir: $(find "$dir" -name "*.tsx" | wc -l)"; done
Atomic Design Structure
- Atoms: Basic building blocks (buttons, inputs, labels) - 205 files
- Components: Combinations of atoms forming reusable UI elements - 799 files
- Screens: Full page compositions using components - 909 files
Observations
- Screens contain the most files, reflecting feature-rich application
- Healthy ratio of atoms to components (1:3.9) indicates good abstraction
- Additional directories contain supporting code (antd overrides, redux, queries, etc.)
Data collected: January 05, 2026