skills.rest
katsutoo
katsutooCOMMUNITY
Explore all skills by this author →
GitHub

svelte-frontend

Create SvelteKit frontends with TypeScript, Tailwind, Superforms, and TanStack Query.

5|Updated Jan 31, 2026
Search Tags:#typescript#frontend#svelte#web-development#tailwind#sveltekit#server-rendering
One-click install
npx skills add https://github.com/katsutoo/dotfiles --skill svelte-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-frontend
Source: https://github.com/katsutoo/dotfiles/tree/main/config/opencode/skills/svelte-frontend
Command: npx skills add https://github.com/katsutoo/dotfiles --skill svelte-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a comprehensive blueprint for building modern SvelteKit frontends with progressive enhancement, server-driven rendering, and a coherent architecture, reducing setup time and drift.

Core Features & Use Cases

  • SvelteKit + Svelte 5 runes: Enable highly reactive, granular UI with minimal boilerplate.
  • Progressive Enhancement: SSR/SSG with graceful degradation for non-JS environments.
  • Guided Architecture: Feature-based organization aligned to domain boundaries for scalable apps.
  • Tooling & Forms: Integrates TanStack Query, Superforms, and Tailwind CSS for robust data and UI patterns.
  • Use Case: Build a marketing site or dashboard with server-rendered pages, typed forms, and rich interactivity.

Quick Start

Create a new SvelteKit project configured with Bun, then scaffold features/ domains following the guidelines in this skill.

Frequently Asked Questions about svelte-frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a SvelteKit project for scalable frontend architecture?▼

SvelteKit frontend architecture should use feature-based domain organization aligned to business boundaries. This guided structure reduces setup time and drift while providing coherent patterns for scalable apps.

How does progressive enhancement work in server-rendered SvelteKit pages?▼

Progressive enhancement in SvelteKit uses SSR and SSG with graceful degradation for non-JS environments. Server-driven rendering delivers functional pages first, then enhances interactivity through Svelte 5 runes when JavaScript loads.

Can I use Superforms and TanStack Query together in a SvelteKit app?▼

Superforms and TanStack Query work together in SvelteKit for robust data and UI patterns. Superforms handles typed form submissions while TanStack Query manages asynchronous data fetching and caching across server-rendered pages.

Does this SvelteKit blueprint require TypeScript and Tailwind CSS?▼

This SvelteKit blueprint requires TypeScript-enabled setup and integrates Tailwind CSS for styling. These tools form a minimal, dependency-friendly toolchain alongside Svelte 5 runes, Superforms, and TanStack Query.

What's the best way to handle typed forms in a SvelteKit frontend?▼

Handle typed forms in SvelteKit frontends using Superforms. This integration provides validated, type-safe form submissions that work with server-rendered pages and progressive enhancement patterns out of the box.

When do I need server-rendered pages versus SSG in SvelteKit?▼

Server-rendered pages suit dynamic dashboards requiring fresh data, while SSG fits static marketing sites. This SvelteKit blueprint supports both, applying progressive enhancement to ensure graceful degradation in non-JS environments.

Related Skills

Explore More Software Engineering Skills→
Devarshi0-1Devarshi0-1

bun-development

Manage and build JavaScript/TypeScript projects with the Bun runtime.

Community
Advanced
WalshingtonWalshington

tanstack-start

Build and deploy TanStack Start full-stack React apps on Cloudflare Workers.

Community
Advanced
linehaul-ailinehaul-ai
4

shadcn-svelte-skill

Install and customize shadcn-svelte UI components in SvelteKit projects.

Official
Intermediate
martinholovskymartinholovsky
12

sota-web-frameworks

Build and audit React, Next.js, Vue, and Nuxt web applications.

Community
Advanced