メニュー
Svelte and SvelteKit development with built-in reactivity, stores, SSR/SSG, and modern web patterns.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/a5c-ai/babysitter --skill svelteコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Reference for querying the Atlas knowledge graph through its MCP tools — the SECONDARY enrichment/comparison layer that adds best-practice context to systems you have ALREADY scanned from your real sources (`az`, repos, dirs). Use when you need to look up nodes, edges, kinds, clusters, stats, or wiki pages in Atlas to compare against your real inventory. (atlas graph, query atlas, atlas mcp, search the graph, graph neighbors, atlas record, atlas kinds, enrichment layer)
Atlas turns your STATED NEED into a real systems atlas by SCANNING your actual sources (Azure via `az`, git repos, local dirs) and process/data mining them, THEN enriching against the Atlas knowledge graph. Use this skill when asked to inventory/map your real systems, scan your cloud + repos + directories, mine the real processes or data they contain, or collect their real constraints/gotchas. (atlas, scan my systems, inventory our azure account, map my repos, real systems atlas, process mining, data mining, collect nuances, system discovery)
This skill should be used when the user asks to "find skills in the wild", "assimilate popular workflows", "discover SKILL.md files in repos", "research external skills", "find workflow patterns", "survey the skill landscape", "what skills exist out there", or wants to investigate public repositories for extractable processes, babysitter plugins, and reusable procedural insights. Searches GitHub for SKILL.md files, classifies repos by archetype, and maintains structured research under docs/reference-repos/.
SKILL.md を表示中
SOC 職業分類に基づく
| name | svelte |
| description | Svelte and SvelteKit development with built-in reactivity, stores, SSR/SSG, and modern web patterns. |
| allowed-tools | Read, Write, Edit, Bash, Glob, Grep |
| graph | {"domains":["domain:web-development"],"specializations":["specialization:web-development"],"skillAreas":["skill-area:vue-components","skill-area:server-side-rendering"],"roles":["role:frontend-engineer"],"topics":["topic:component-based-architecture"]} |
Expert assistance for building applications with Svelte and SvelteKit.
Invoke this skill when you need to:
| Parameter | Type | Required | Description |
|---|---|---|---|
| componentName | string | Yes | Component name |
| sveltekit | boolean | No | Using SvelteKit (default: true) |
| typescript | boolean | No | Use TypeScript (default: true) |
| ssr | boolean | No | Enable SSR (default: true) |
<!-- src/lib/components/UserCard.svelte -->
<script lang="ts">
interface User {
id: string;
name: string;
email: string;
avatar?: string;
}
export let user: User;
export let editable = false;
let isEditing = false;
let editedName = user.name;
// Reactive declaration
$: initials = user.name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase();
function save() {
user = { ...user, name: editedName };
isEditing = false;
}
</script>
<div class="user-card">
<div class="avatar">
{#if user.avatar}
<img src={user.avatar} alt={user.name} />
{:else}
<span class="initials">{initials}</span>
{/if}
</div>
<div class="info">
{#if isEditing}
<input bind:value={editedName} on:keydown={(e) => e.key === 'Enter' && save()} />
<button on:click={save}>Save</button>
<button on:click={() => isEditing = false}>Cancel</button>
{:else}
<h2>{user.name}</h2>
<p>{user.email}</p>
{#if editable}
<button on:click={() => { editedName = user.name; isEditing = true; }}>
Edit
</button>
{/if}
{/if}
</div>
</div>
<style>
.user-card {
display: flex;
gap: 1rem;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
}
.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
overflow: hidden;
}
.initials {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: #e5e7eb;
font-weight: bold;
}
</style>
// src/lib/stores/user.ts
import { writable, derived, readable } from 'svelte/store';
interface User {
id: string;
name: string;
email: string;
}
// Writable store
function createUserStore() {
const { subscribe, set, update } = writable<User | null>(null);
return {
subscribe,
login: async (email: string, password: string) => {
const response = await fetch('/api/auth/login', {
method: 'POST',
body: JSON.stringify({ email, password }),
});
const user = await response.json();
set(user);
},
logout: () => set(null),
updateProfile: (data: Partial<User>) =>
update(user => user ? { ...user, ...data } : null),
};
}
export const user = createUserStore();
// Derived store
export const isAuthenticated = derived(user, $user => !!$user);
// Readable store (external data)
export const time = readable(new Date(), (set) => {
const interval = setInterval(() => set(new Date()), 1000);
return () => clearInterval(interval);
});
// src/routes/users/+page.server.ts
import type { PageServerLoad, Actions } from './$types';
import { fail, redirect } from '@sveltejs/kit';
import { db } from '$lib/server/db';
export const load: PageServerLoad = async ({ locals }) => {
if (!locals.user) {
throw redirect(302, '/login');
}
const users = await db.user.findMany();
return {
users,
};
};
export const actions: Actions = {
create: async ({ request }) => {
const data = await request.formData();
const name = data.get('name') as string;
const email = data.get('email') as string;
if (!name || !email) {
return fail(400, { error: 'Name and email required' });
}
const user = await db.user.create({
data: { name, email },
});
return { success: true, user };
},
delete: async ({ request }) => {
const data = await request.formData();
const id = data.get('id') as string;
await db.user.delete({ where: { id } });
return { success: true };
},
};
<!-- src/routes/users/+page.svelte -->
<script lang="ts">
import type { PageData, ActionData } from './$types';
import { enhance } from '$app/forms';
export let data: PageData;
export let form: ActionData;
</script>
<h1>Users</h1>
{#if form?.error}
<p class="error">{form.error}</p>
{/if}
<form method="POST" action="?/create" use:enhance>
<input name="name" placeholder="Name" required />
<input name="email" type="email" placeholder="Email" required />
<button type="submit">Add User</button>
</form>
<ul>
{#each data.users as user (user.id)}
<li>
{user.name} - {user.email}
<form method="POST" action="?/delete" use:enhance>
<input type="hidden" name="id" value={user.id} />
<button type="submit">Delete</button>
</form>
</li>
{/each}
</ul>
// src/routes/api/users/+server.ts
import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { db } from '$lib/server/db';
export const GET: RequestHandler = async ({ url }) => {
const search = url.searchParams.get('search');
const users = await db.user.findMany({
where: search ? { name: { contains: search } } : undefined,
});
return json(users);
};
export const POST: RequestHandler = async ({ request }) => {
const body = await request.json();
if (!body.name || !body.email) {
throw error(400, 'Name and email required');
}
const user = await db.user.create({
data: body,
});
return json(user, { status: 201 });
};
<script>
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
let items = [];
let showModal = false;
</script>
{#if showModal}
<div class="modal" transition:fade={{ duration: 200 }}>
<div class="content" in:fly={{ y: -50, duration: 300 }}>
Modal content
</div>
</div>
{/if}
<ul>
{#each items as item (item.id)}
<li
animate:flip={{ duration: 300 }}
in:slide={{ duration: 200 }}
out:fade={{ duration: 100 }}
>
{item.name}
</li>
{/each}
</ul>