brokle-frontend-dev

What problem does it solve?

This Skill provides comprehensive guidance for Next.js/React frontend development, ensuring adherence to Brokle's feature-based architecture, best practices, and consistent code quality. It streamlines development and reduces technical debt.

Core Features & Use Cases

• Feature-Based Architecture: Defines the standard directory structure and public API exports for self-contained features, promoting modularity.
• State Management Strategy: Guides on using React Query for server state, Zustand for client state, and React Hook Form for form state.
• Component Patterns: Explains when to use Server Components vs. Client Components and provides templates for components, hooks, and API clients.
• Use Case: A frontend developer needs to build a new billing feature. This skill provides the exact structure for the feature, how to manage its state, interact with the API, and ensures all imports follow the mandatory feature index pattern.

Quick Start

I need to create a new notifications feature. Outline the directory structure, provide a component template, and explain how to manage its client-side state using Zustand.