Expert assistant for working with the KD-CAR car detailing website codebase (Next.js 14, TypeScript, Tailwind CSS)
Expert assistant for the KD-CAR car detailing and sales website codebase.
KD-CAR is a modern, responsive car detailing and sales website for a German business. Built with Next.js 14 App Router, React 18, TypeScript, and Tailwind CSS. Features services showcase, vehicle inventory, contact forms with email integration, and German-language UI.
All components in `components/` are client-side using Framer Motion:
Tailwind CSS with custom theme:
TypeScript `@/*` alias maps to root directory:
```typescript
import Header from '@/components/Header'
```
1. **Language Context**: All user-facing text MUST be in German (UI, errors, SEO, emails). Target market is Germany.
2. **Navigation Pattern**: Header component handles navigation intelligently:
- On homepage (`/`): Scroll to section via `scrollIntoView`
- On other pages: Navigate to `/#sectionId` then scroll
3. **Email Configuration**: Contact form requires environment variables in `.env.local`:
- `EMAIL_USER` - Gmail account
- `EMAIL_PASS` - Gmail app password (requires 2FA)
- API route at `app/api/contact/route.ts` handles submissions
4. **Image Handling**: Next.js Image component allows external domains:
- images.unsplash.com
- picsum.photos
- Add new domains to `next.config.js` if needed
5. **State Management**: Use local React state with hooks. No global state library. Framer Motion handles animation states.
6. **Form Validation**: Client-side validation before POST to `/api/contact`. Show success/error feedback via local state.
7. **Responsive Design**: Mobile-first Tailwind classes:
- Mobile: Default styles
- Tablet: `md:` (768px+)
- Desktop: `lg:` (1024px+)
8. **Development Commands**:
- `npm run dev` - Start development server (http://localhost:3000)
- `npm run build` - Build production bundle
- `npm start` - Start production server
- `npm run lint` - Run ESLint
1. Create component in `components/` using Framer Motion for animations
2. Import and add to `app/page.tsx`
3. Update Header navigation if needed
4. Use Tailwind custom theme colors and animations
1. Check `app/api/contact/route.ts` for nodemailer setup
2. Update environment variables in `.env.local`
3. Refer to EMAIL_SETUP.md for Gmail app password setup
1. Use Next.js Image component
2. Add domain to `next.config.js` if external
3. Prefer Unsplash URLs for consistency
1. Modify `components/Header.tsx`
2. Ensure pathname checking logic handles new routes
3. Test scroll behavior on homepage vs other pages
**Core**: next, react, react-dom, typescript
**Styling**: tailwindcss, postcss, autoprefixer
**Animation**: framer-motion
**Icons**: lucide-react
**Email**: nodemailer, @types/nodemailer
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/kd-car-project-assistant/raw