sveltekit by mindrally/skills
npx skills add https://github.com/mindrally/skills --skill sveltekit您是一位精通 SvelteKit、TypeScript、Tailwind CSS 和现代 Web 应用程序开发的专家。
src/
├── lib/
│ ├── components/ # 可复用的 Svelte 组件
│ ├── server/ # 仅限服务器的工具函数
│ ├── stores/ # Svelte 状态管理
│ └── utils/ # 共享工具函数
├── routes/
│ ├── +layout.svelte # 根布局
│ ├── +page.svelte # 主页
│ └── api/ # API 路由
├── app.html # HTML 模板
└── app.css # 全局样式
<script lang="ts">
import { onMount } from 'svelte';
import type { PageData } from './$types';
export let data: PageData;
let count = 0;
$: doubled = count * 2;
function increment() {
count += 1;
}
</script>
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let title: string;
export let disabled = false;
const dispatch = createEventDispatcher<{
submit: { value: string };
}>();
function handleSubmit() {
dispatch('submit', { value: title });
}
</script>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
routes/
├── +page.svelte # /
├── about/+page.svelte # /about
├── blog/
│ ├── +page.svelte # /blog
│ └── [slug]/
│ └── +page.svelte # /blog/:slug
<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<h1>{data.post.title}</h1>
// +page.server.ts
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, fetch }) => {
const response = await fetch(`/api/posts/${params.slug}`);
const post = await response.json();
return { post };
};
// +page.server.ts
export const ssr = true;
export const csr = true;
export const load: PageServerLoad = async ({ locals }) => {
return {
user: locals.user
};
};
// +page.ts
export const prerender = true;
export async function load() {
return {
// 静态数据
};
}
// +page.server.ts
export const prerender = true;
export async function entries() {
const posts = await getPosts();
return posts.map((post) => ({ slug: post.slug }));
}
// +page.server.ts
import type { Actions } from './$types';
export const actions: Actions = {
default: async ({ request, cookies }) => {
const data = await request.formData();
const email = data.get('email');
// 验证和处理
if (!email) {
return { success: false, error: 'Email required' };
}
return { success: true };
}
};
<!-- +page.svelte -->
<script lang="ts">
import { enhance } from '$app/forms';
import type { ActionData } from './$types';
export let form: ActionData;
</script>
<form method="POST" use:enhance>
<input name="email" type="email" />
<button type="submit">订阅</button>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
</form>
// lib/stores/counter.ts
import { writable, derived } from 'svelte/store';
export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);
export function increment() {
count.update((n) => n + 1);
}
<script lang="ts">
import { page } from '$app/stores';
$: currentPath = $page.url.pathname;
$: params = $page.params;
</script>
// routes/api/posts/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => {
const limit = url.searchParams.get('limit') ?? '10';
const posts = await getPosts(Number(limit));
return json(posts);
};
export const POST: RequestHandler = async ({ request }) => {
const body = await request.json();
const post = await createPost(body);
return json(post, { status: 201 });
};
<div class="flex flex-col gap-4 p-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
{title}
</h1>
<p class="text-gray-600 dark:text-gray-300">
{description}
</p>
</div>
<style>
/* 需要时的局部样式 */
:global(.prose) {
@apply max-w-none;
}
</style>
<!-- +error.svelte -->
<script lang="ts">
import { page } from '$app/stores';
</script>
<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>
// +page.server.ts
import { error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }) => {
const post = await getPost(params.slug);
if (!post) {
throw error(404, 'Post not found');
}
return { post };
};
{#key} 块进行组件重建$effect.pre 进行 DOM 测量@sveltejs/enhanced-img 优化图片data-sveltekit-preload-data 预取链接// 使用 Vitest 进行组件测试
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Button from './Button.svelte';
test('renders button with text', () => {
render(Button, { props: { label: 'Click me' } });
expect(screen.getByRole('button')).toHaveTextContent('Click me');
});
每周安装量
90
代码仓库
GitHub 星标数
43
首次出现
2026年1月25日
安全审计
已安装于
gemini-cli74
opencode74
codex69
github-copilot66
cursor65
claude-code65
You are an expert in SvelteKit, TypeScript, Tailwind CSS, and modern web application development.
src/
├── lib/
│ ├── components/ # Reusable Svelte components
│ ├── server/ # Server-only utilities
│ ├── stores/ # Svelte stores
│ └── utils/ # Shared utilities
├── routes/
│ ├── +layout.svelte # Root layout
│ ├── +page.svelte # Home page
│ └── api/ # API routes
├── app.html # HTML template
└── app.css # Global styles
<script lang="ts">
import { onMount } from 'svelte';
import type { PageData } from './$types';
export let data: PageData;
let count = 0;
$: doubled = count * 2;
function increment() {
count += 1;
}
</script>
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let title: string;
export let disabled = false;
const dispatch = createEventDispatcher<{
submit: { value: string };
}>();
function handleSubmit() {
dispatch('submit', { value: title });
}
</script>
routes/
├── +page.svelte # /
├── about/+page.svelte # /about
├── blog/
│ ├── +page.svelte # /blog
│ └── [slug]/
│ └── +page.svelte # /blog/:slug
<!-- routes/blog/[slug]/+page.svelte -->
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<h1>{data.post.title}</h1>
// +page.server.ts
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, fetch }) => {
const response = await fetch(`/api/posts/${params.slug}`);
const post = await response.json();
return { post };
};
// +page.server.ts
export const ssr = true;
export const csr = true;
export const load: PageServerLoad = async ({ locals }) => {
return {
user: locals.user
};
};
// +page.ts
export const prerender = true;
export async function load() {
return {
// Static data
};
}
// +page.server.ts
export const prerender = true;
export async function entries() {
const posts = await getPosts();
return posts.map((post) => ({ slug: post.slug }));
}
// +page.server.ts
import type { Actions } from './$types';
export const actions: Actions = {
default: async ({ request, cookies }) => {
const data = await request.formData();
const email = data.get('email');
// Validate and process
if (!email) {
return { success: false, error: 'Email required' };
}
return { success: true };
}
};
<!-- +page.svelte -->
<script lang="ts">
import { enhance } from '$app/forms';
import type { ActionData } from './$types';
export let form: ActionData;
</script>
<form method="POST" use:enhance>
<input name="email" type="email" />
<button type="submit">Subscribe</button>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
</form>
// lib/stores/counter.ts
import { writable, derived } from 'svelte/store';
export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);
export function increment() {
count.update((n) => n + 1);
}
<script lang="ts">
import { page } from '$app/stores';
$: currentPath = $page.url.pathname;
$: params = $page.params;
</script>
// routes/api/posts/+server.ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
export const GET: RequestHandler = async ({ url }) => {
const limit = url.searchParams.get('limit') ?? '10';
const posts = await getPosts(Number(limit));
return json(posts);
};
export const POST: RequestHandler = async ({ request }) => {
const body = await request.json();
const post = await createPost(body);
return json(post, { status: 201 });
};
<div class="flex flex-col gap-4 p-6">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">
{title}
</h1>
<p class="text-gray-600 dark:text-gray-300">
{description}
</p>
</div>
<style>
/* Scoped styles when needed */
:global(.prose) {
@apply max-w-none;
}
</style>
<!-- +error.svelte -->
<script lang="ts">
import { page } from '$app/stores';
</script>
<h1>{$page.status}</h1>
<p>{$page.error?.message}</p>
// +page.server.ts
import { error } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }) => {
const post = await getPost(params.slug);
if (!post) {
throw error(404, 'Post not found');
}
return { post };
};
{#key} blocks for component recreation$effect.pre for DOM measurements@sveltejs/enhanced-imgdata-sveltekit-preload-data// Component testing with Vitest
import { render, screen } from '@testing-library/svelte';
import { expect, test } from 'vitest';
import Button from './Button.svelte';
test('renders button with text', () => {
render(Button, { props: { label: 'Click me' } });
expect(screen.getByRole('button')).toHaveTextContent('Click me');
});
Weekly Installs
90
Repository
GitHub Stars
43
First Seen
Jan 25, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli74
opencode74
codex69
github-copilot66
cursor65
claude-code65
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
7,700 周安装
PostgreSQL优化助手 - JSONB操作、性能调优、窗口函数、全文搜索实战指南
9,600 周安装
GitHub Copilot create-readme:AI自动生成专业README文档工具
9,600 周安装
React Native 最佳实践与性能优化指南 | 提升应用FPS、启动速度与包体积
9,600 周安装
Web无障碍性(a11y)指南:WCAG 2.1原则、Lighthouse审计与代码实践
10,500 周安装
Vue Router 最佳实践指南:导航守卫、路由生命周期与常见陷阱解决方案
9,900 周安装
SEO优化指南:技术性SEO、页面优化与结构化数据实践
10,700 周安装