skills.rest
gabelul
gabelulCOMMUNITY
Explore all skills by this author →
Website𝕏@GabiExploresGitHub

stitch-svelte-components

Convert Google Stitch UI designs into Svelte 5 components with runes and SvelteKit routing.

38|5|Updated Feb 18, 2026
Search Tags:#svelte#frontend development#ui components#design to code#sveltekit#stitch#runes api
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-svelte-components
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-svelte-components
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-svelte-components
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-svelte-components

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Manually converting Google Stitch-generated UI designs to Svelte 5 / SvelteKit components requires deep expertise in the Svelte 5 runes API, SvelteKit file conventions, scoped CSS, and accessibility best practices, leading to inconsistent, non-maintainable code that doesn't leverage the framework's modern features.

Core Features & Use Cases

  • Idiomatic Svelte 5 Implementation: Generates components using the modern runes API including $props, $state, $derived, and $effect instead of legacy Options API syntax, ensuring compatibility with Svelte 5 projects.
  • SvelteKit Convention Alignment: Maps Stitch screens to standard SvelteKit file-based routing structures, using correct import paths and page/component separation.
  • Built-in Theming and Accessibility: Implements scoped CSS with design tokens for light/dark mode support, plus WCAG-aligned markup and Svelte-native transitions by default.
  • Use Case: If your team uses Stitch to generate UI mockups and SvelteKit for production, this skill eliminates manual translation work, delivering production-ready components that follow your project's standards in minutes.

Quick Start

Use the stitch-svelte-components skill to convert your latest Stitch-generated dashboard design into a Svelte 5 component that follows your SvelteKit project's file structure and design system.

Frequently Asked Questions about stitch-svelte-components

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

FAQPage Schema
How do I convert Google Stitch designs to Svelte 5 components?▼

It maps Stitch screens to standard SvelteKit file-based routing structures, applying correct import paths and maintaining proper page and component separation for production readiness.

Does the generated Svelte code include dark mode and accessibility support?▼

Components rely on scoped CSS with design tokens for light and dark mode support, plus WCAG-aligned markup and Svelte-native transitions by default to ensure accessibility compliance.

Can I use this to map Stitch screens to SvelteKit file-based routing?▼

It aligns with SvelteKit conventions by mapping Stitch designs to standard file-based routing structures, using correct import paths and maintaining clear page and component separation.

What is the Svelte 5 runes API and how does this Skill use it?▼

The Svelte 5 runes API is a modern syntax for component logic that replaces legacy patterns. This Skill uses runes including $props, $state, $derived, and $effect to ensure idiomatic reactivity and state management.

Why do manually converted Stitch designs result in non-maintainable Svelte code?▼

Manually converting Stitch designs leads to non-maintainable Svelte code because it requires deep expertise in the runes API, SvelteKit file conventions, scoped CSS, and accessibility best practices to avoid inconsistent implementations.

Related Skills

Explore More Software Engineering Skills→
Tomlord1122Tomlord1122

svelte-kit

Apply Svelte 5 runes and SvelteKit routing guidance to projects.

Community
Advanced
nirukk52nirukk52
1

frontend-development

Coordinate SvelteKit 2, Svelte 5 runes, Skeleton UI, and Encore clients for frontend features.

Community
Advanced
gabelulgabelul
38

stitch-design-system

Extract semantic design tokens and CSS custom properties from Google Stitch projects.

Community
Intermediate
programadorisgodprogramadorisgod
1

Svelte Components

Create reusable Svelte 5 components with runes and shadcn-svelte integration.

Community
Advanced