菜单
Maintains this repo's UI component library, design page, component documentation registry, and design-system docs. Use when editing `src/lib/components/ui/**`, `src/lib/components/design/**`, `src/lib/registry/designComponents.ts`, `src/routes/design/**`, or `docs/components/**`.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Maintains article, project, and markdown-backed content flows in this SvelteKit portfolio. Use when editing `src/articles/**`, blog/project routes, `src/lib/articles.ts`, `src/lib/markdown.ts`, content reader panels, or the dev content editor.
Maintains homepage registry data, grid item types, shuffled layout behavior, reader panels, and homepage block wiring. Use when editing `src/lib/registry/homepage.ts`, `src/lib/types/homepage.ts`, grid components, homepage blocks, or `src/routes/+page.svelte`.
Maintains the dev performance analytics pipeline across browser instrumentation, persisted analytics API, Prisma storage, and editor analytics UI. Use when editing `performanceAnalytics`, `/api/performance-analytics`, analytics Prisma models, or editor analytics sections.
Implements SvelteKit API routes in this repo using the existing server, env, and response conventions. Use when editing `src/routes/api/**/+server.ts`, adding new endpoints, or connecting server routes to Prisma or GitHub-backed data.
Maintains the dev-only editor route and its shared homepage customization state. Use when changing `/editor`, grid layout behavior, local user settings, debug toggles, or editor section components.
Updates the homepage hero 3D effect across Threlte scene code, parameter stores, and persisted debug settings. Use when changing `Hero3D`, shader parameters, presets, motion tuning, or hero debug controls.
| name | repo-design-system-catalog |
| description | Maintains this repo's UI component library, design page, component documentation registry, and design-system docs. Use when editing `src/lib/components/ui/**`, `src/lib/components/design/**`, `src/lib/registry/designComponents.ts`, `src/routes/design/**`, or `docs/components/**`. |
src/lib/components/ui//design route or design gallery componentssrc/lib/registry/designComponents.tsdocs/components/**This skill usually involves Svelte code. Also use repo-svelte-change-workflow for the required Svelte MCP documentation and autofixer loop before finishing Svelte edits.
src/lib/components/ui/ and related component folders.src/lib/components/ui/index.ts.src/lib/registry/designComponents.ts.src/lib/components/design/ and src/routes/design/+page.svelte.docs/components.md and docs/components/**.previewMode: "documented" for components that require app state, network data, WebGL, Mapbox, or browser-only side effects.previewMode: "mocked" for components that can be shown with fixtures without mutating app state.aria-label for icon-only actions, semantic landmarks where appropriate.npm run check for component and registry changes..svelte.test.ts when changing component behavior./design after changing registry entries, categories, preview modes, or gallery UI.