Sveltekit Svelte5 Tailwind Skill

Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add claude-skills/sveltekit-svelte5-tailwind-skill --skill sveltekit-svelte5-tailwind-skill

Manual install

git clone --depth 1 https://github.com/claude-skills/sveltekit-svelte5-tailwind-skill.git /tmp/sveltekit-svelte5-tailwind-skill
mkdir -p ~/.claude/skills
cp -r /tmp/sveltekit-svelte5-tailwind-skill/. ~/.claude/skills/sveltekit-svelte5-tailwind-skill

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# SvelteKit 2 + Svelte 5 + Tailwind v4 Integration Skill

This skill provides comprehensive guidance for building modern web applications with the SvelteKit 2 + Svelte 5 + Tailwind CSS v4 stack.

## About This Integration Stack

**SvelteKit 2** is a modern full-stack framework with:
- File-based routing with layouts
- Server-side rendering (SSR) and static site generation (SSG)
- Form actions with progressive enhancement
- Multiple deployment adapters (Vercel, Cloudflare, Node, static)

**Svelte 5** introduces a new reactivity system with:
- Runes: `$state()`, `$derived()`, `$effect()`, `$props()`
- Simplified component authoring
- Better TypeScript support
- Snippets replacing slots

**Tailwind CSS v4** offers:
- CSS-first configuration
- New Vite plugin architecture
- Improved JIT performance
- Simplified setup

**Integration challenges this skill addresses:**
- Configuring all three tools to work together
- Understanding Svelte 5 runes in SSR context
- Progressive enhancement with form actions
- CSS loading in development and production
- Deployment across different platforms
- Migration from earlier versions

## How to Use This Skill

**CRITICAL: Research-First Methodology**

When a user asks you to build something with this stack:

1. **Research first** - Search the documentation to understand:
   - How SvelteKit handles this use case
   - What Svelte 5 runes patterns apply
   - How to style with Tailwind v4
   - Common integration pitfalls to avoid

Read the full skill on GitHub

Details

Skill name: sveltekit-svelte5-tailwind-skill
Repository: claude-skills/sveltekit-svelte5-tailwind-skill
Repo updated: 28 October 2025

FAQ

What does the Sveltekit Svelte5 Tailwind Skill skill do?

Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4

How do I install the Sveltekit Svelte5 Tailwind Skill skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add claude-skills/sveltekit-svelte5-tailwind-skill --skill sveltekit-svelte5-tailwind-skill. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Sveltekit Svelte5 Tailwind Skill popular?

It lives in claude-skills/sveltekit-svelte5-tailwind-skill, which has 30 GitHub stars and 6 forks.

Related skills

Blcaptain Ppt Skill

dososo/blcaptain-ppt-skill

把一个目标/主题/文章/截图/数据转成有观点、有节奏、有视觉约束的单文件 HTML 演示（网页 PPT、科技战报、产品拆解、行业观察、路演/发布会 deck、社媒可传播长图）。**7 套各锚定公认设计体系的视觉人格**——技术崇高派 Technical Sublime（工程冷光·技术战报/算力）/ 构成主义 Constructivism（宣言/号召）/ 信息·数据设计（Tufte·数据/图表）/ 判断震慑极简 Luxury（高端品牌/判断）/ De Stijl 新造型（标准/秩序）/ 编辑主义 Editorial（衬线·深度观察）/ 演示禅 Zen（暗墨·思想/品牌 keynote）——用户可指定，否则按内容自动判选并透明告知。token + validator 机检（P0/P1/P2）+ 32 维审计**机器强制设计一致性**；反伪造（不造数据/logo/截图/来源·示意标注）；字体本地子集；图按角色路由（默认 CSS/SVG·要图先探测生图环境）。Generates single-file HTML decks with 7 design-system-anchored visual personas, a semantic layout grammar, locked design tokens, evidence-grading, machine validation (P

Frontend & Design

Meme Sticker

shanliuling/meme-sticker

Turn one uploaded image into a complete 12-piece chat sticker pack by generating two 3x2 sticker sheets, extracting transparent PNGs, normalizing their canvases, and packaging the result as a ZIP. Use this skill whenever a user provides a photo and asks for chat stickers, reaction stickers, meme stickers, custom emoji, or messaging-app sticker packs, including requests that use terms such as 表情包, 贴纸包, 微信表情, QQ表情, or Telegram stickers.

Frontend & Design

SAAS Onboarding Diagnosis

Daqi029/saas-onboarding-diagnosis

Inspect and diagnose a SaaS product's new-user onboarding, activation path, candidate Aha Moment, time to value, blank states, setup friction, guidance, invitation timing, and measurement plan. Use when a founder or product team wants to improve first-use completion, activation, or early retention, or review onboarding before launch. Do not use for employee onboarding, generic UX review, or full-funnel growth diagnosis.

Frontend & Design

Lego Build

siliconbag/lego-build

Анимация, в которой объект собирается из деталей LEGO по шагам, в стиле фирменной инструкции. Все нарисовано кодом на Canvas 2D, без картинок и 3D-движка, рендер в mp4 вертикально 1080x1920 или горизонтально 1920x1080. Модель задается списком шагов из настоящих деталей LEGO (номера и цвета по каталогу BrickLink), на каждом шаге список деталей, желтая обводка новых и в конце поворот готовой модели. Используй, когда просят собрать что-то из лего в анимации или видео, сделать лего-инструкцию, ролик где из кубиков собирается кот, робот, логотип или любой объект, придумать лего-модель по картинке и

Frontend & Design

Smartisan UI

lemonteaau/smartisan-ui-skill

用 Smartisan OS（锤子科技 / 坚果手机）的 UI 风格做前端界面：轻拟物、细腻纵向渐变、极细描边、柔和投影与内凹阴影、灰阶为主 + 低饱和蓝强调 + 锤子红品牌色。当用户提到 Smartisan、锤子、锤子风格、坚果 OS、Smartisan OS、老罗/罗永浩那种拟物风、"像锤子手机一样的 UI"，或要求把网页/组件/App 原型做成这种风格时使用。适用于网页（HTML/CSS/Tailwind/任意前端框架）和 Flutter。内含完整的 Figma《Smartisan OS UI Kit (Unofficial)》（17 页、全部组件和变体）提取出的 token、组件规格、可直接引用的 CSS、Tailwind preset、图标和参考截图，并经 Smartisan R2 真机校对；还包括从 Smartisan OS 框架资源和社区 1:1 复刻应用中整理的交互层（按压时序、转场、主体不动部件分层过渡的组件编排、开关拖拽、右滑删除、回弹、滚轮、字母索引）和官方 6dp 间距 / 字号 / 文字色体系。

Frontend & Design

CSS Protips

PyModel/css-pro-tips

Use when writing, reviewing, refactoring, or modernizing CSS/Tailwind. Apply a policy-first approach: semantic tokens, explicit cascade order, static CSS, intrinsic component layouts, accessible state, measured performance, and progressive enhancement backed by current sources.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.