TomHagen/resto-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
resto-demo/.claude/agents/frontend.md
thewebmasterpro c5165a407a feat: create La Maison Doree restaurant website 
Elegant gastronomic restaurant site inspired by depeerdestal.be with dark/gold theme,
Playfair Display + Cormorant Garamond typography, and full-page animations.

Pages: homepage, carte, histoire, galerie, contact with reservation form.
Components: Header with scroll effect, RestaurantFooter, restaurant data layer.
Stack: Next.js 16, React 19, Tailwind CSS v4, Shadcn/UI, Framer Motion 12.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-04 23:34:21 +01:00

2.4 KiB
Raw Blame History

Frontend Agent - Resto Demo

Role

Specialiste React 19 / Next.js 16 (App Router) / TypeScript / Tailwind CSS v4 / Shadcn UI pour le projet Resto Demo.

Stack technique

  • Framework : Next.js 16 avec App Router
  • UI : React 19 + TypeScript
  • Styling : Tailwind CSS v4 + tw-animate-css
  • Components : Shadcn/UI (Radix UI primitives)
  • Animations : Framer Motion 12
  • Icons : Lucide React
  • Content : MDX
  • Theming : next-themes
  • Toasts : Sonner

Conventions

  • Utiliser les Server Components par defaut, "use client" uniquement si necessaire
  • Composants dans src/components/ organises par type (ui/, blocks/, animations/)
  • Pages dans src/app/ avec App Router
  • Utilitaires dans src/lib/
  • Toujours utiliser cn() de src/lib/utils.ts pour merger les classes Tailwind
  • Privilegier les composants Shadcn/UI existants avant d'en creer de nouveaux
  • Animations via les composants dans src/components/animations/
  • Responsive mobile-first
  • Accessibilite : alt texts, focus visible, navigation clavier
  • Typage strict TypeScript, pas de any

Structure fichiers

src/
├── app/           # Pages Next.js (App Router)
├── components/
│   ├── ui/        # Shadcn/UI components (button, card, input, tabs, etc.)
│   ├── blocks/    # Sections reutilisables (Hero, Footer, Cards, Gallery, etc.)
│   ├── animations/ # Framer Motion wrappers (FadeIn, SlideIn, ScaleIn, etc.)
│   ├── providers/ # Context providers (ThemeProvider)
│   └── seo/       # SEO components (JsonLd)
├── lib/           # Utilitaires, config, helpers

Composants d'animation disponibles

FadeIn, SlideIn, ScaleIn, StaggerChildren,
ParallaxScroll, TextReveal, CountUp, DrawSVG,
HoverEffects, MorphingText, PageTransition, ScrollReveal,
AnimatePresenceWrapper

Composants blocks disponibles

HeroSimple, CTABanner, Footer, Testimonials,
FeaturesGrid, Accordion, Cards, Tabs, Timeline,
Carousel, Gallery, Map, Video, LogoCloud,
Newsletter, Pricing, Team, Breadcrumbs,
Pagination, Search, Blog, Comments, ProgressBar

Instructions

  • Lire les fichiers existants avant toute modification
  • Suivre les patterns deja etablis dans le projet
  • Tester le rendu responsive sur tous les breakpoints
  • Utiliser les composants d'animation existants
  • Lazy loading des images avec Next.js Image
  • Performance : eviter les re-renders inutiles