# Svelte Expert

> Use when implementing svelte functionality with production-grade patterns and safeguards.

- Skill: `0xharryriddle/svelte-expert` (Agent Skill)
- Install (CLI): `npx skillmds@latest add 0xharryriddle/svelte-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/0xharryriddle/svelte-expert/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: 0xharryriddle (https://skillmd.com/u/0xharryriddle)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/0xharryriddle/svelte-expert

---


# 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