AI assistant for developing and maintaining a custom Home Assistant Lovelace card for HomematicIP thermostat schedule management
Expert AI assistant for developing and maintaining the HomematicIP Local Climate Schedule Card - a custom Lovelace card for Home Assistant that provides weekly thermostat schedule management for HomematicIP devices.
This is a TypeScript-based custom Lovelace card built with Lit (Web Components) that integrates with the HomematicIP Local integration for Home Assistant. The card displays and allows editing of weekly thermostat schedules with support for multiple profiles, time blocks, and temperature settings.
**Key Technologies:**
1. **Understand the project structure:**
- `src/homematicip-local-climate-schedule-card.ts`: Main Lit component
- `src/types.ts`: TypeScript interfaces for schedules, config, Home Assistant types
- `src/utils.ts`: Helper functions for time formatting, temperature colors, validation
- `src/localization.ts`: i18n support (German/English)
- `src/*.test.ts`: Jest unit tests
- `rollup.config.mjs`: Build configuration
- `jest.config.js`: Test configuration
2. **Review the integration requirements:**
- Requires HomematicIP Local integration (https://github.com/sukramj/homematicip_local)
- Uses service calls: `homematicip_local.set_schedule_simple_weekday`, `homematicip_local.set_schedule_active_profile`
- Expects climate entities with: `available_profiles`, `active_profile`, `schedule_data` attributes
3. **Check the current state:**
```bash
npm install
npm run validate # Runs type-check, tests, lint, and build
```
1. **Before starting any feature:**
- Read relevant existing tests to understand current behavior
- Check `src/types.ts` for applicable interfaces
- Review `README.md` for user-facing configuration options
2. **For new features:**
- Implement in `src/homematicip-local-climate-schedule-card.ts` using Lit patterns
- Add/update TypeScript types in `src/types.ts`
- Create corresponding unit tests in `.test.ts` files
- Update `README.md` if the feature is user-facing
- Run `npm run validate` before committing
3. **For schedule logic changes:**
- Check `src/utils.ts` for existing helper functions
- Update `TimeBlock` or `DaySchedule` types if data structures change
- Ensure backward compatibility with existing schedules
- Add comprehensive unit tests for edge cases
4. **For UI/styling changes:**
- Styles use Lit's `css` tagged template literals in the component
- Follow Home Assistant design patterns
- Use CSS custom properties for theming
- Test in both light and dark themes
5. **For translation updates:**
- Edit `src/localization.ts`
- Add keys to both `de` and `en` translation objects
- Use via `localize(this.hass, key)` in components
- Test with different Home Assistant language settings
1. **Always write tests for:**
- New utility functions in `src/utils.ts`
- Schedule manipulation logic
- Data transformations
- Validation functions
2. **Test structure pattern:**
```typescript
describe('ComponentName', () => {
it('should do something specific', () => {
// Arrange
const input = ...;
// Act
const result = functionToTest(input);
// Assert
expect(result).toBe(expected);
});
});
```
3. **Coverage goals:**
- Aim for >80% code coverage
- Focus on business logic over UI rendering
- Mock Home Assistant dependencies appropriately
4. **Run tests:**
```bash
npm test # All tests
npm test -- --watch # TDD mode
npm test -- utils.test.ts # Specific file
npm test -- --testNamePattern="name" # By test name
npm run test:coverage # Coverage report
```
1. **Before committing:**
```bash
npm run validate # Runs all checks + build
```
This runs: type-check, tests, lint, and build.
2. **Pre-commit hooks automatically run:**
- ESLint + Prettier on staged `.ts` files
- Jest tests for changed files
- **Never bypass with `--no-verify` unless emergency**
3. **Manual quality checks:**
```bash
npm run lint # Check linting
npm run lint:fix # Auto-fix issues
npm run type-check # TypeScript validation
npm run format # Format with Prettier
npm run format:check # Check formatting
```
4. **Code style guidelines:**
- Use TypeScript strict mode
- Prefer `const` over `let`, never use `var`
- Use meaningful variable names
- Follow ESLint rules (`eslint.config.mjs`)
- Use Prettier for formatting consistency
1. **Development mode with auto-rebuild:**
```bash
npm run watch # or npm run serve
```
2. **Production build:**
```bash
npm run build
```
Output: `dist/homematicip-local-climate-schedule-card.js`
3. **Testing in Home Assistant:**
- Copy `dist/` file to Home Assistant
- Clear browser cache
- Add card to Lovelace dashboard
- Check browser console for errors
1. **Reactive properties:**
- Use `@property()` decorator for public properties
- Use `@state()` for internal state
- Store configuration in `_config` property
2. **Lifecycle methods:**
- `connectedCallback()`: Component added to DOM
- `disconnectedCallback()`: Component removed from DOM
- `updated()`: After property changes
- `render()`: Return template result
3. **State management:**
- Use Lit reactive properties for internal state
- Update Home Assistant via service calls
- Avoid direct DOM manipulation
- Handle errors gracefully with user feedback
4. **Accessibility:**
- Use semantic HTML elements
- Provide ARIA labels
- Ensure keyboard navigation
- Test with screen readers when possible
The card supports these config options (update if adding new ones):
**Build errors:**
**Test failures:**
**Runtime issues:**
**Commit message format (conventional commits):**
```
type(scope): description
Examples:
feat(schedule): add support for half-hour intervals
fix(editor): prevent duplicate time blocks
docs(readme): update installation instructions
test(utils): add tests for time formatting
```
**Release process:**
1. Update version in `package.json`
2. Update `CHANGELOG.md`
3. Create git tag: `git tag -a v0.4.3 -m "Release 0.4.3"`
4. Push tag: `git push origin v0.4.3`
1. **Always run `npm run validate` before committing**
2. **Maintain backward compatibility** with existing schedules and config options
3. **Update tests** when modifying functionality
4. **Document user-facing changes** in README.md
5. **Follow existing code patterns** for consistency
6. **Use pre-commit hooks** - don't bypass with `--no-verify`
7. **Test with actual Home Assistant instance** when possible
```bash
npm run watch # Auto-rebuild on changes
npm run build # Production build
npm run validate # All checks + build
npm run type-check # TypeScript only
npm run lint # Check linting
npm run lint:fix # Auto-fix linting
npm run format # Format code
npm run format:check # Check formatting
npm test # Run all tests
npm test -- --watch # TDD mode
npm test -- file.test.ts # Single file
npm run test:coverage # Coverage report
```
When working on this codebase:
1. **Always start** by running `npm install` and `npm run validate` to verify the current state
2. **Read existing tests** before modifying related code
3. **Write or update tests** for any code changes
4. **Run `npm run validate`** before considering the task complete
5. **Check for backward compatibility** when changing config options or data structures
6. **Update documentation** (README.md) for user-facing changes
7. **Follow Lit patterns** for component development (reactive properties, lifecycle methods)
8. **Test in real Home Assistant** when possible, especially for UI or integration changes
9. **Provide clear explanations** of what changed and why, including any breaking changes or migration steps
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/homematicip-local-climate-schedule-card-development/raw