urbetrack-react-boilerplate

name	urbetrack-react-boilerplate
description	Guides work inside React microfrontends generated by @urbetrack/create-mf. Use when building features in generated Urbetrack microfrontends, deciding file placement, adding pages/routes/hooks/services/stores, applying Custom Hooks + Pages Pattern, configuring error boundaries, running setup, or writing tests.

Urbetrack React Boilerplate

Use this skill when working inside a React microfrontend generated by @urbetrack/create-mf. This skill is for generated app development, not generator maintenance or template authoring.

Apply First

• Generated apps use feature-based architecture under src/modules/.
• Pages get data from hooks, not props.
• Place hooks, utils, constants, and types by reusability: page-only, feature-shared, then cross-feature.
• Routes are owned by feature modules and lazy-loaded with createLazyRoute.
• Every route should define errorElement: <RouteErrorBoundary />.
• Data hooks expose loading and error state for declarative page handling.
• Tests live next to the source in sibling __tests__/ folders.
• Prefer @urbetrack/urbix before creating app-specific UI in src/shared/components/ui/.

Support Files

• references/ - longer background docs and compiled guides

Reference Routing

• Use references/AGENTS.md for the compact generated-app rules and common mistakes.
• Use references/ARCHITECTURE.md for file placement, module structure, hooks, services, stores, and the Custom Hooks + Pages Pattern.
• Use references/ROUTING.md when adding pages, route constants, lazy routes, type-safe navigation, or route registration.
• Use references/ERROR_BOUNDARIES.md for route-level, hook-level, and component-level error handling.
• Use references/SETUP_GUIDE.md for Azure Artifacts auth, environment variables, local startup, and troubleshooting generated app setup.
• Use references/TESTING.md for Vitest, Testing Library, MSW, page/hook tests, Storybook tests, and test utilities.

Related Skills

• Use urbix-components when implementing UI with @urbetrack/urbix.
• Use tanstack-query when implementing server state or query/mutation hooks.
• Use urbetrack-composition-patterns when designing component APIs or compound components.
• Use urbetrack-react-best-practices when optimizing render behavior, waterfalls, bundle size, or performance-sensitive code.