メニュー
Build polished SvelteKit data-viewer apps. Covers design system, component patterns, theming, charts, and human preferences learned from iterative feedback on the explanation-viewer.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | svelte-ui |
| description | Build polished SvelteKit data-viewer apps. Covers design system, component patterns, theming, charts, and human preferences learned from iterative feedback on the explanation-viewer. |
This skill captures patterns and preferences for building polished SvelteKit data-viewer applications, distilled from iterative feedback building the explanation-viewer. It is project-agnostic — use it for any data browsing/analysis app.
| Topic | Reference |
|---|---|
| Design System & Theming | Design System |
| Component Patterns | Components |
| Human Preferences & Corrections | Preferences |
| Charts & Data Viz | Charts |
$state, $derived, $props, $bindable)<script lang="ts">
import type { DataItem } from '$lib/types/index.js';
let { items }: { items: DataItem[] } = $props();
let filter = $state('');
const filtered = $derived(
filter ? items.filter(i => i.category === filter) : items
);
</script>
<div class="container">
<select bind:value={filter}>
<option value="">All</option>
{#each categories as cat}
<option value={cat}>{cat}</option>
{/each}
</select>
{#each filtered as item}
<div class="card">{item.name}</div>
{/each}
</div>
Always include a run.sh in the app root. This handles node version mismatches (the user's default node may be too old for SvelteKit/Vite). The script finds a suitable node version and runs the dev server.
#!/bin/bash
# Use node 22 if the default is too old
NODE22="$HOME/.nvm/versions/node/v22.20.0/bin"
if [ -d "$NODE22" ]; then
export PATH="$NODE22:$PATH"
fi
echo "Using node $(node --version)"
npm install && npm run dev
chmod +x run.shbash run.sh — not nvm use or fnm use (neither may be loaded in the user's shell).node-version file with 22 for tools that auto-detect itSee Preferences for the full list of corrections from iterative feedback.
Quickly compare responses from different LLM models side-by-side. Use when exploring model behavior, comparing finetuned models to base models, testing prompts across models, or investigating how different system prompts affect responses.
Create clear matplotlib figures following project conventions. Use for visualizing experiment results with grouped or stacked bar charts. Saves figures to a figs/ subdirectory.
Generate interactive Streamlit apps to browse and visualize experimental results from CSV or parquet files. Use when users want to quickly explore data row by row.
Fine-tune LLMs using the Tinker API. Covers supervised fine-tuning, reinforcement learning, LoRA training, vision-language models, and both high-level Cookbook patterns and low-level API usage.