Frontend Engineering

Detailed instructions for React, Tailwind CSS, and OlyBars UX implementation.

When to use this skill

• •Use this when modifying .tsx or .css files.
• •This is helpful for creating new components, pages, or adjusting styles.
• •Use this when tasked with "making it look good" or implementing specific UI designs.

How to use it

1. Visual Excellence & "Vibe"

• •Premium Aesthetic: Avoid generic layouts. Use overlays, glassmorphism, and correct spacing.
• •Fluid Typography: Always use the utility classes .display-title-fluid for headers.
• •Micro-Animations: Use framer-motion for subtle entrance animations.

2. Technical Standards

• •Mobile-First: Always write classes like text-sm md:text-base.
• •Tailwind Config: adhere to the custom colors in tailwind.config.js (brand-gold, brand-dark-bg).
• •Icons: Use dynamic imports for lucide-react icons to save bundle size.

3. File Structure

• •Components go in src/components/.
• •Domain-specific views go in src/pages/.
• •Hooks go in src/hooks/.