Expert AI assistant for developing SYMBIONT - a Chrome extension that creates evolving digital organisms using AI, WebGL, and neural networks. Handles TypeScript, React, WebGL, backend API, testing, and security best practices.
Expert AI assistant for working with the SYMBIONT codebase - a Chrome browser extension that creates evolving digital organisms using AI and WebGL.
This skill provides comprehensive guidance for developing, testing, and maintaining the SYMBIONT project, including:
SYMBIONT consists of multiple interconnected layers:
```
Content Script ←→ Background Script ←→ Popup UI
↓ ↓ ↓
Behavior Collection Neural Core User Interface
DOM Observation AI Processing React Components
User Tracking WebGL Render Dashboard/Settings
```
When working with SYMBIONT:
- `@/` → `src/`
- `@core/` → `src/core/`
- `@background/` → `src/background/`
- `@content/` → `src/content/`
- `@popup/` → `src/popup/`
- `@shared/` → `src/shared/`
- `@types/` → `src/types/`
**Build & Development:**
```bash
npm run build:all # Full build (extension + backend)
npm run build # Extension only
npm run dev # Development mode with watch
cd backend && npm run dev # Backend development
cd backend && npm run build # Backend build
```
**Testing:**
```bash
npm test # Run all tests
npm run test:ci # Tests with coverage
npm run test:watch # Watch mode
npm run test:e2e # E2E tests (Playwright)
cd backend && npm test # Backend tests
```
**Quality & Security:**
```bash
npm run lint # Lint TypeScript
npm run lint:fix # Fix linting issues
npm run check-manifest # Check manifest validity
node scripts/validate-security.js # Security validation
npm test -- __tests__/security/ # Test security modules
```
**Database (Backend):**
```bash
cd backend
npm run migrate # Run Prisma migrations
npm run generate # Generate Prisma client
npm run studio # Open Prisma Studio
npm run seed # Seed database
```
**ALWAYS follow these security patterns:**
#### Random Number Generation
```typescript
// ❌ NEVER use Math.random() for anything security-related
const bad = Math.random();
// ✅ ALWAYS use SecureRandom for cryptographic operations
import { SecureRandom } from '@/shared/utils/secureRandom';
const good = SecureRandom.random();
```
#### Secure Logging
```typescript
// ❌ NEVER use console.log() (can leak sensitive data)
console.log('User:', { email, token });
// ✅ ALWAYS use SecureLogger (auto-sanitizes)
import { logger } from '@/shared/utils/secureLogger';
logger.info('User logged in', { email, token }, 'AuthService');
```
#### UUID Generation
```typescript
// ✅ Use cryptographically secure UUID generation
import { generateSecureUUID } from '@/shared/utils/secureRandom';
const id = generateSecureUUID();
```
#### Environment Variables
```typescript
// ✅ Always validate and provide fallbacks
const apiKey = process.env.API_KEY || '';
if (!apiKey) {
logger.error('Missing API_KEY environment variable');
}
```
**Coverage Requirements:**
**Test Structure:**
When writing or modifying code:
1. Always write corresponding tests
2. Ensure coverage thresholds are met
3. Use appropriate test type (unit/integration/e2e)
4. Mock external dependencies properly
**Manifest V3 Structure:**
**WebGL Integration:**
**Permission Handling:**
**Technology Stack:**
**Key Services:**
**Error Handling:**
```typescript
import { errorHandler } from '@/shared/utils/errorHandler';
try {
// operation
} catch (error) {
errorHandler(error, 'ComponentName');
}
```
**Performance Optimization:**
**Dependency Injection:**
```typescript
// Use constructor injection in OrganismCore
constructor(
private readonly neuralMesh: NeuralMesh,
private readonly storage: SymbiontStorage,
private readonly messageBus: MessageBus
) {}
```
**When asked to add a new feature:**
1. Identify which layer(s) it affects (content/background/popup/backend)
2. Use appropriate path aliases for imports
3. Follow message-driven architecture for communication
4. Implement security patterns (SecureRandom, SecureLogger)
5. Write tests achieving required coverage
6. Run linting and security validation
**When asked to fix a bug:**
1. Review related tests first
2. Check for security implications
3. Use SecureLogger for debugging (never console.log)
4. Ensure fix doesn't break message flow
5. Add regression tests
6. Verify coverage remains above thresholds
**When asked to optimize performance:**
1. Profile using WebGL performance monitoring
2. Consider batching operations
3. Review neural network processing bottlenecks
4. Check storage caching strategy
5. Validate message bus circuit breaker behavior
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/symbiont-chrome-extension-development-assistant/raw