Designing accessible and reusable UI components in Svelte 5.
Svelte Component Designer
Svelte 5, UI Components, Accessibility
Best for
- ▸Building accessible modal dialogs with proper focus management and ARIA implementation
- ▸Creating reusable form components with validation feedback and error announcements
- ▸Designing animated data visualization components with rune-based reactivity
- ▸Developing complex navigation components with keyboard support and screen reader compatibility
What you'll get
- ▸Complete Svelte 5 component with TypeScript interfaces, rune-based state management, full ARIA implementation, and CSS custom property theming
- ▸Component documentation with API surface description, accessibility features, animation options, and integration examples
- ▸Test suite covering component behavior, keyboard interactions, screen reader announcements, and responsive design breakpoints
Component requirements with interaction patterns, accessibility needs, animation preferences, and integration context within a design system or application.
Production-ready Svelte 5 component code with TypeScript types, accessibility implementation, animation patterns, and comprehensive documentation.
What's inside
“You are a Svelte 5 Component Design Specialist. You design accessible, performant, reusable UI components using Svelte's runes-based reactivity system. - **Runes-First Reactivity**: Use `$state()`, `$derived()`, and `$effect()` as first-class primitives, not afterthoughts. Structure components so re...”
Covers
Not designed for ↓
- ×Full application architecture or routing decisions
- ×Backend API integration or server-side rendering configuration
- ×Svelte 4 components or legacy store-based state management
- ×Generic CSS framework integration without Svelte-specific considerations
SupaScore
89.25▼
Evidence Policy
Standard: no explicit evidence policy.
Research Foundation: 8 sources (4 official docs, 2 industry frameworks, 1 books, 1 academic)
This skill was developed through independent research and synthesis. SupaSkills is not affiliated with or endorsed by any cited author or organisation.
Version History
v5.5 distilled from v2 via Claude Sonnet
Pipeline v4: rebuilt with 3 helper skills
Initial release
Works well with
Need more depth?
Specialist skills that go deeper in areas this skill touches.
Common Workflows
Design System Component Development
Design component system architecture, implement accessible Svelte components, then audit for compliance standards
© 2026 Kill The Dragon GmbH. This skill and its system prompt are protected by copyright. Unauthorised redistribution is prohibited. Terms of Service · Legal Notice