Guidelines and patterns for maintaining and scaling the MINDFLU Next.js architecture.
This skill provides the architectural foundation for the MINDFLU project. Follow these patterns to ensure consistency, speed, and premium UX.
ui/: Pure atomic components. No business logic.layout/: Structural components. High reuse.sections/: Composable page blocks. Use framer-motion for reveal animations.products/: Business-aware components related to the product lifecycle.Keep it subtle, premium, and human-centric.
initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} for sections.whileHover={{ scale: 1.02 }}).layoutId for smooth transitions between related layouts (e.g., product detail).t('key').namespace.section.element (e.g., common.hero.title).t('products.item', { title: product.title }) for placeholders.data/products.json.slug is unique and URL-friendly./products page.Use the predefined brand palette:
bg-brand-primary (#2EC4B6)bg-brand-secondary (#FF7F7F)bg-brand-background (#F8F9FA)text-brand-text (#2B2B2B)next/image with proper priority for Hero sections.suspense for dynamic sections.