# OpenCode Working Instructions for Full-Stack Development
**Guidelines for OpenCode when implementing full-stack features.**
---
## Core Principles
1. **Explore First** - Read existing code before modifying
2. **One Step at a Time** - Complete and verify each step before proceeding
3. **Verify Everything** - Read files back after writing
4. **Follow Patterns** - Match existing project conventions
5. **Security First** - Validate inputs, escape outputs, never trust user data
---
## Code Quality Standards
### TypeScript
- Use strict mode (`strict: true` in tsconfig)
- No `any` types - use proper typing
- Export types alongside implementations
- Use interfaces for object shapes
### Components (React/Vue/Svelte)
- One component per file
- Props interface at top of file
- Handle loading/error states
- Include accessibility attributes
- Use data-testid for testing
### API Endpoints
- Validate all inputs with Zod
- Return consistent response shapes
- Handle errors gracefully
- Log security events
- Rate limit sensitive endpoints
### Database
- Use parameterized queries (ORMs)
- Index columns used in WHERE/JOIN
- Migrations must be reversible
- Never delete data without backup
---
## File Naming Conventions
```
components/
Button/
Button.tsx # Component
Button.test.tsx # Tests
index.ts # Re-export
hooks/
useAuth.ts # Custom hook
services/
user.service.ts # Business logic
routes/
users.ts # API routes
schemas/
user.schema.ts # Validation schemas
```
---
## Verification Checklist
**Before completing a task:**
```
□ TypeScript compiles (npx tsc --noEmit)
□ ESLint passes (npx eslint . --ext .ts,.tsx)
□ Tests pass (npm test)
□ No console errors
□ File read back matches intent
```
---
## Security Reminders
- **Input Validation**: Use Zod for all user inputs
- **SQL Injection**: Use parameterized queries/ORM
- **XSS**: Escape output, use CSP
- **Auth**: Check authentication AND authorization
- **Secrets**: Never hardcode, use environment variables
- **Logging**: Never log passwords or tokens
---
## Common Patterns
### Error Handling
```typescript
try {
const result = await operation();
return { data: result };
} catch (error) {
logger.error(error);
throw new AppError('Operation failed', 500);
}
```
### API Response
```typescript
// Success
res.json({ data: user });
// Error
res.status(400).json({
error: { code: 'VALIDATION_ERROR', message: '...' }
});
```
### Validation
```typescript
const schema = z.object({
email: z.string().email(),
password: z.string().min(8),
});
const data = schema.parse(req.body);
```
---
## When Stuck
1. Read the error message completely
2. Check the relevant manager guide in `fullstack-guides/`
3. Look for similar patterns in existing code
4. Ask for clarification if requirements are unclear
---
**Remember**: Quality over speed. Verify before proceeding. Security is not optional.