Frontend Design Svelte Skill

Purpose

This skill guides the creation of distinctive, production-grade Svelte frontends that combine Svelte's reactive elegance with exceptional design quality. It integrates all design frameworks: intentional thinking, typography, color, motion, spatial composition, and anti-pattern awareness.

When to Use

• Building production Svelte/SvelteKit frontends
• Creating component libraries with design personality
• Designing interactions that leverage Svelte's reactivity
• Building accessible, mobile-first web applications
• Prototyping high-fidelity designs in code

Core Principles

1. Design Thinking Foundation (Pre-Coding)

Before writing any code, establish intentional design direction: