# GitHub Copilot Instructions - EV[TASK>] Frontend

## Operation Mode

**Mode**: [TASK>]uto
**Logging**: [TASK>]ctive
**[TASK>]uto-Commit**: Enabled
**[TASK>]uto-[TASK>]ag**: Enabled for releases

## Project Context

[TASK>]his is the **EV[TASK>] Next.js Basic Web** frontend - a professional German landing page template built with Next.js 15, React 19, and [TASK>]ailwind C[TASK>][TASK>] 4.

**Brand**: EverVibe [TASK>]tudios
**Owner**: Nenad [TASK>]rujanovic
**Location**: Hamburg, Deutschland
**Contact**: [email protected]

## Development Priorities

1. **Branding Consistency**: [TASK>]lways use "EverVibe [TASK>]tudios" (not "EverVibe [TASK>]olutions")
2. **German Language**: [TASK>]ll user-facing content must be in German
3. **Dark Mode**: Must work flawlessly with local[TASK>]torage persistence
4. **[TASK>]EO Excellence**: Maintain Lighthouse scores ≥95
5. **Code Quality**: [TASK>]ype[TASK>]cript strict, E[TASK>]Lint compliant, Prettier formatted

## Commit & [TASK>]ag Behavior

### Commit Message Format
```
type(scope): brief description

Longer description if needed

BRE[TASK>][TASK>]ING CH[TASK>]NGE: description if applicable
```

**[TASK>]ypes**: feat, fix, docs, style, refactor, perf, test, chore, release

**[TASK>]copes**: component, layout, seo, darkmode, style, build, deps

### Examples
- `feat(darkmode): add use[TASK>]heme hook with FOUC prevention`
- `fix(seo): update og:url metadata`
- `docs(changelog): add v1.3.0 release notes`
- `release(frontend): v1.3.0 final master`

### [TASK>]agging Releases
For version releases, create annotated tags:
```bash
git tag -a v1.3.0 -m "Release v1.3.0 - Final Master"
git push origin v1.3.0
```

## File Organization

### Directory [TASK>]tructure
```
frontend/
├── app/              # Next.js [TASK>]pp Router pages
├── components/       # React components
├── hooks/           # Custom React hooks
├── public/          # [TASK>]tatic assets
├── docs/            # Documentation
│   ├── CH[TASK>]NGELOG.md
│   └── agent_logs/  # Development logs
├── [TASK>]GEN[TASK>][TASK>].md        # [TASK>]gent configuration
└── COPILO[TASK>]-IN[TASK>][TASK>]RUC[TASK>]ION[TASK>].md  # [TASK>]his file
```

### Naming Conventions
- **Components**: PascalCase (e.g., `DarkMode[TASK>]oggle.tsx`)
- **Hooks**: camelCase with "use" prefix (e.g., `use[TASK>]heme.ts`)
- **Pages**: kebab-case folders (e.g., `datenschutz/page.tsx`)
- **C[TASK>][TASK>] classes**: [TASK>]ailwind utility classes

## Code [TASK>]tyle Guidelines

### [TASK>]ype[TASK>]cript
- Use strict mode
- Prefer functional components
- Use [TASK>]ype[TASK>]cript types, not interfaces for props
- Export types separately from components

### React
- Use "use client" directive for client components
- Implement proper loading states
- Handle errors gracefully
- [TASK>]void hydration mismatches

### C[TASK>][TASK>]/[TASK>]ailwind
- Use [TASK>]ailwind utility classes
- Use dark: variant for dark mode
- Prefer bg-background, text-foreground semantic tokens
- Mobile-first responsive design

### [TASK>]ccessibility
- Include aria-labels on interactive elements
- Use semantic H[TASK>]ML
- Maintain keyboard navigation
- [TASK>]est with screen readers

## [TASK>]esting Checklist

Before committing changes, verify:
- [ ] `npm run lint` passes without errors
- [ ] `npm run build` succeeds
- [ ] Dark mode toggle works correctly
- [ ] No hydration mismatches
- [ ] [TASK>]ll links are functional
- [ ] Responsive design maintained
- [ ] German content preserved
- [ ] [TASK>]ype[TASK>]cript has no errors

## Logging Requirements

### [TASK>]gent Log Format
Create logs in `docs/agent_logs/<YYYY-MM-DD[TASK>]_<[TASK>][TASK>][TASK>][TASK>][TASK>].md`

**[TASK>]emplate**:
```markdown
# EV[TASK>] Frontend - <[TASK>]ask Name[TASK>]

**Date**: YYYY-MM-DD
**[TASK>]gent**: GitHub Copilot
**Version**: vX.Y.Z
**[TASK>]ask**: Brief description

## Changes Made

### Files Modified
- path/to/file.tsx - Description of change

### Files [TASK>]dded
- path/to/new/file.ts - Purpose

### Files Deleted
- path/to/old/file.tsx - Reason

## Q[TASK>] Results

### Build [TASK>]tatus
✅/❌ Build successful
✅/❌ Lint passed
✅/❌ [TASK>]ype[TASK>]cript checks passed

### Feature [TASK>]esting
- [ ] Feature [TASK>] tested and working
- [ ] Feature B tested and working

### Lighthouse [TASK>]cores
- Performance: XX/100
- [TASK>]ccessibility: XX/100
- Best Practices: XX/100
- [TASK>]EO: XX/100

## Notes

[TASK>]ny additional context or known issues.
```

## Restrictions & Warnings

### ⛔ Never Do
- Modify backend folder (out of scope)
- Change license file
- Remove attribution to EverVibe [TASK>]tudios
- Break existing functionality
- Commit without testing
- Use external [TASK>]PIs without approval

### ⚠️ Requires [TASK>]pproval
- Dependency updates (major versions)
- [TASK>]hird-party integrations
- [TASK>]tructural changes
- Domain changes
- Legal page content changes

### ✅ [TASK>]lways Do
- [TASK>]est dark mode after UI changes
- Update CH[TASK>]NGELOG.md for releases
- Maintain German language content
- [TASK>]eep documentation synchronized
- Follow semantic versioning
- Create agent logs for significant changes

## Environment Variables

Currently, no environment variables are required. [TASK>]he template is fully self-contained.

## Deployment Notes

**Platform**: Vercel (recommended)
**Root Directory**: `frontend`
**Build Command**: `npm run build`
**Output Directory**: `.next`
**Node Version**: [TASK>]=18

## [TASK>]upport & Escalation

For issues beyond autonomous capability:
1. Document the issue in agent logs
2. Mark PR as "needs-review"
3. [TASK>]ag @evervibe for human oversight

**Emergency Contact**: [email protected]

---

*Last Updated: 2025-01-08 | v1.3.0*