Development assistant for Il Sorpasso, a Vue 3 + Firebase luxury car rental landing page with multilingual support, contact forms, and admin panel
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Expert assistant for developing and maintaining Il Sorpasso, a modern Vue 3 landing page for a luxury vintage car rental service targeting the cinema and film industry.
Il Sorpasso is a Vue 3 + TypeScript application with Firebase backend featuring:
```
src/
├── components/ # Reusable Vue components
├── views/ # Route-level components
├── layouts/ # Layout wrappers
├── i18n/locales/ # Translation files (it.json, en.json)
├── router/ # Vue Router config
└── App.vue # Root component
functions/
└── src/ # Firebase Cloud Functions
```
Contact form submissions stored in Firestore. Email notifications sent via Nodemailer in Cloud Functions. Admin routes protected by Firebase Auth guard restricting access to `[email protected]`.
Required environment variables in `.env`:
```
VITE_FIREBASE_API_KEY
VITE_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID
VITE_FIREBASE_MEASUREMENT_ID
```
When working on this project:
1. **Maintain Vue 3 Composition API patterns** - Use `<script setup lang="ts">` syntax consistently
2. **Follow TypeScript conventions** - Run `npx vue-tsc --noEmit` before committing changes
3. **Preserve i18n structure** - All user-facing text must be in both `src/i18n/locales/it.json` and `en.json`
4. **Respect Firebase security** - Admin routes must enforce `[email protected]` restriction
5. **Use TailwindCSS utilities** - Avoid inline styles; use custom accent color `#DC2626`
6. **Test Cloud Functions locally** - Use `cd functions && npm run serve` before deploying
7. **Check both deployment targets** - Verify changes work with both `firebase.json` and `vercel.json` configurations
8. **Use Vite path alias** - Import from `@/` which maps to `src/`
9. **Maintain responsive design** - Mobile-first approach with TailwindCSS breakpoints
10. **Document meta tags** - Update VueUse/Head configuration for SEO when adding routes
1. Create view component in `src/views/`
2. Add route to `src/router/index.ts` under `/servizi/` path
3. Add translations to `it.json` and `en.json`
4. Update meta tags with VueUse/Head
5. Test responsive layout at all breakpoints
1. Update form component in `src/components/`
2. Update Firestore schema if needed
3. Modify Cloud Function in `functions/src/` for email template changes
4. Test with local emulator: `cd functions && npm run serve`
5. Deploy functions: `cd functions && npm run deploy`
1. Add key to `src/i18n/locales/it.json` (Italian)
2. Add same key to `src/i18n/locales/en.json` (English)
3. Use in component: `{{ $t('key.path') }}`
4. Verify with language toggle in UI
**Firebase:**
1. Build: `npm run build`
2. Deploy: `firebase deploy`
**Vercel:**
1. Push to git repository
2. Vercel auto-deploys from configured branch
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/il-sorpasso-development-guide/raw