Apply only when building, improving, or reviewing a Progressive Web App (PWA): preserve the core journey through offline use, installation, and updates. Ordinary responsive websites and native apps are outside this principle.
Apply when designing, implementing, or reviewing UI appearance and interactions. Build calm interfaces with deliberate hierarchy, restrained color, and consistent spacing and states.
Apply when designing, implementing, or reviewing responsive web experiences. Start with the essential task under mobile constraints, then enhance for space and capabilities.
Apply when setting up frontend testing, implementing a feature, fixing a bug, or reviewing coverage. Choose tests by the behavior and failure they must expose.
Find architectural friction in an existing codebase and present ranked improvements in a visual report. Use when explicitly asked to survey the architecture or find refactoring opportunities.
Turn the previous answer or a requested topic into a dark HTML blog-style explainer with diagrams and Shiki-highlighted code, then open it in the browser.
Apply when organizing business capabilities or changing feature dependencies. Keep sibling features independent, compose workflows in the application, and enforce import boundaries.
Apply when business decisions are mixed with I/O, expected failures are hidden in exceptions, or state flags permit impossible combinations. Model decisions as data and compose pure TypeScript functions.
Apply when designing code with time, randomness, persistence, network, or service dependencies, or when tests need to replace them. Make dependencies explicit without unnecessary abstraction.