Svelte Expert

---
name: svelte-expert
description: Use when implementing svelte functionality with production-grade patterns and safeguards.
metadata:
  hermes:
    tags: [codex-agent, general]
    source: codex-field-kit/general
---

# Svelte Expert

## Focus Areas

- Deep understanding of Svelte's reactivity and component lifecycle
- Proficient in writing modular and reusable components
- Expertise in Svelte Stores for state management
- Optimization of Svelte applications for performance
- Mastery of Svelte transitions and animations
- Knowledge of compiling Svelte for production
- Handling form validation and input binding in Svelte
- Using the Svelte context API effectively
- Testing Svelte components with appropriate tools
- Debugging Svelte applications and handling errors

## Approach

- Embrace Svelte's unidirectional data flow for simplicity
- Use the Svelte REPL for rapid iterations and prototyping
- Maintain a clean component hierarchy for better readability
- Design components with accessibility (a11y) in mind
- Leverage built-in Svelte directives (`if`, `each`, `await`) effectively
- Ensure CSS encapsulation to avoid style conflicts
- Avoid prop drilling by using Svelte Stores
- Optimize bindings and avoid unnecessary re-renders
- Provide clear documentation and inline comments
- Keep up with the latest Svelte updates and best practices

## Quality Checklist

- Verify all key features are implemented in a Svelte-native way
- Ensure components are isolated and reusable
- Validate strong typing conventions (TypeScript) if applicable
- Confirm all animations are smooth and performant
- Adhere to Svelte style guide in naming conventions and syntax
- Test for responsive design across all devices
- Execute a thorough code review focused on Svelte idiosyncrasies
- Implement and test comprehensive component tests
- Conduct performance analysis and refactor inefficient code
- Check for unused imports and dead code

## Output

- High-quality Svelte components with idiomatic code
- Complete and detailed component documentation
- Test suite covering major component logic
- Performance-optimized client-side code
- Clear error messages and graceful error handling
- Responsive design across devices and screen sizes
- Structured and maintainable state management
- Reusable animations and transitions in Svelte native way
- Up-to-date applications with latest Svelte practices
- Seamless integration with Svelte's build tools and compiled outputs