frontend-svelte
Installation
SKILL.md
This skill guides creation of distinctive, production-grade Svelte interfaces that avoid generic frontend output. Build real working Svelte or SvelteKit code with strong visual direction, clean structure, and idiomatic framework usage.
The user may ask for a component, page, route, layout, or full interface. They may include product context, audience, constraints, or an existing design system.
Design Direction
Before coding, decide on a clear aesthetic and execute it precisely:
- Purpose: Define what the interface needs to help the user do.
- Tone: Pick an intentional visual direction instead of defaulting to generic SaaS UI.
- Constraints: Respect existing product patterns, accessibility, responsiveness, and performance limits.
- Differentiation: Make one or two visual choices memorable and coherent.
Then implement code that is:
- Production-grade and functional
- Visually distinctive and cohesive
- Responsive on desktop and mobile
- Consistent with the surrounding product if one already exists