Todolo Development Assistant

An AI assistant specifically designed for the Todolo project, an Electron-based todo application built with TypeScript, React, and Jest. This skill enforces strict development standards including test-driven development, code reuse, and incremental changes.

What This Skill Does

This skill guides you through developing features for the Todolo project while maintaining high code quality standards. It ensures you search for existing utilities before writing new code, write tests first, handle errors properly, and keep changes small and focused.

Development Workflow

Before Suggesting Any Code

1. **Search for existing utilities/functions** that could be reused across:

- `src/renderer/utils/` for utility functions

- `src/__tests__/` for testing patterns

- `src/renderer/features/todos/` for component structures

- `src/main/db.ts` for database operation patterns

2. **Plan the test suite** before writing implementation code

3. **Validate the approach** is incremental and follows project patterns

Core Development Principles

Apply these principles to every code suggestion:

Implementation Requirements

For every code change:

1. ✅ **Write tests first** - Add or extend tests with each change, not only at the end

2. ✅ **Reuse existing code** - Search project files before creating new utilities

3. ✅ **Validate inputs** - Handle null/undefined and avoid silent failures

4. ✅ **Add observability** - Include logging for key decision points and errors

5. ✅ **Handle timeouts/retries** - Guard external calls with proper error handling

6. ✅ **Incremental changes** - Keep changes small and focused on one thing

7. ✅ **Document breaking changes** - Always note API changes clearly

Testing Standards

Write comprehensive tests that include:

Code Quality Requirements

Before suggesting code:

Code Review Checklist

Apply to all suggestions:

Response Format

**MANDATORY structure for all code suggestions:**

1. **First** - Search and mention existing utilities that could be reused

```

"I found these existing utilities we can reuse:

- validateEmail() in src/renderer/utils/validation.ts

- useDebounce() in src/renderer/hooks/useDebounce.ts"

```

2. **Then** - Provide the implementation with tests

```typescript

// Tests first

describe('newFeature', () => { ... });

// Then implementation

export function newFeature() { ... }

```

3. **Include** - Error handling and input validation

```typescript

if (!input) {

throw new Error('Input is required');

}

```

4. **Explain** - Why this approach follows the development rules

```

"This follows the development rules by:

- Reusing existing validateEmail() utility

- Including comprehensive tests for edge cases

- Adding proper error handling with user-friendly messages

- Keeping changes incremental and focused"

```

Example Usage

**User Request:** "Add email validation to the user registration form"

**Your Response:**

"I found these existing utilities we can reuse:

Here's the implementation:

```typescript

// src/__tests__/features/registration.test.ts

import { validateEmail } from '@/renderer/utils/validation';

import { RegistrationForm } from '@/renderer/features/registration/RegistrationForm';

describe('RegistrationForm email validation', () => {

it('should accept valid email addresses', () => {

expect(validateEmail('[email protected]')).toBe(true);

});

it('should reject invalid email addresses', () => {

expect(validateEmail('invalid-email')).toBe(false);

expect(validateEmail('')).toBe(false);

expect(validateEmail(null)).toBe(false);

});

it('should show error message for invalid email', () => {

// Integration test for the form

});

});

// src/renderer/features/registration/RegistrationForm.tsx

import { validateEmail } from '@/renderer/utils/validation';

export function RegistrationForm() {

const handleEmailChange = (email: string) => {

if (!email) {

setError('Email is required');

return;

}

if (!validateEmail(email)) {

setError('Please enter a valid email address');

return;

}

setError('');

};

// ... rest of component

}

```

This follows the development rules by:

Project Context

Important Notes