frontend

What problem does it solve?

Frontend development often suffers from inconsistent UI, slow component creation, and deviation from best practices. This skill provides a structured approach to building Next.js 15 components, ensuring consistency, type safety, and adherence to the project's feature-based architecture and styling patterns.

Core Features & Use Cases

• Three-Tier Component System: Guides component placement (Base UI, Shared, Feature-specific) for maintainability.
• Type-Safe Styling: Leverages Tailwind CSS and class-variance-authority for consistent, variant-driven UI.
• Enhanced Form System: Provides patterns for robust, type-safe forms with Zod validation and server actions.
• Use Case: A developer needs to create a new "Product Card" component. Use this skill to guide them to use the feature-component.tsx template, apply menfem-brand styling, and integrate it with the products feature, ensuring it's consistent with existing UI.

Quick Start

To implement a new frontend component, specify its purpose and location.

Example: "Create a new base UI button component with default and outline variants." "Implement a client-side form for user input with persistence." "Build a feature-specific card for displaying video content."