Run any Skill in Manus with one click

repo-design-system-catalog

Stars17

Forks0

UpdatedApril 27, 2026 at 08:32

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/**`.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

emzinnia

emzinnia/emzinnia.dev

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

SKILL.md

readonly

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/`.

Repo Design System Catalog

Use this skill when

Adding or changing shared UI primitives in src/lib/components/ui/
Updating the /design route or design gallery components
Editing src/lib/registry/designComponents.ts
Updating design-system documentation under docs/components/**

Required companion workflow

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.

Source-of-truth split

Component implementations live in src/lib/components/ui/ and related component folders.
Public UI exports live in src/lib/components/ui/index.ts.
Design gallery metadata lives in src/lib/registry/designComponents.ts.
Design route components live in src/lib/components/design/ and src/routes/design/+page.svelte.
Design notes live in docs/components.md and docs/components/**.

Rules

When adding a reusable component, update the UI barrel export if it should be app-wide.
Keep design registry entries aligned with real component paths and prop names.
Prefer previewMode: "documented" for components that require app state, network data, WebGL, Mapbox, or browser-only side effects.
Prefer previewMode: "mocked" for components that can be shown with fixtures without mutating app state.
Keep examples short and valid enough to teach usage without pretending all dependencies are available.
Preserve accessibility contracts on primitives: labels for form controls, aria-label for icon-only actions, semantic landmarks where appropriate.

Verification

Run npm run check for component and registry changes.
Run the nearest .svelte.test.ts when changing component behavior.
Manually inspect /design after changing registry entries, categories, preview modes, or gallery UI.

More from this repository

same repository

repo-content-markdown-workflow

emzinnia/emzinnia.dev

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.

2026-04-2717

repo-homepage-grid-registry

emzinnia/emzinnia.dev

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`.

2026-04-2717

repo-performance-analytics-workflow

emzinnia/emzinnia.dev

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.

2026-04-2717

repo-api-route-patterns

emzinnia/emzinnia.dev

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.

2026-04-1117

repo-editor-dev-surface

emzinnia/emzinnia.dev

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.

2026-04-1117

repo-hero-3d-workflow

emzinnia/emzinnia.dev

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.

2026-04-1117

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/`.

Repo Design System Catalog

Use this skill when

Adding or changing shared UI primitives in src/lib/components/ui/
Updating the /design route or design gallery components
Editing src/lib/registry/designComponents.ts
Updating design-system documentation under docs/components/**

Required companion workflow

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.

Source-of-truth split

Component implementations live in src/lib/components/ui/ and related component folders.
Public UI exports live in src/lib/components/ui/index.ts.
Design gallery metadata lives in src/lib/registry/designComponents.ts.
Design route components live in src/lib/components/design/ and src/routes/design/+page.svelte.
Design notes live in docs/components.md and docs/components/**.

Rules

When adding a reusable component, update the UI barrel export if it should be app-wide.
Keep design registry entries aligned with real component paths and prop names.
Prefer previewMode: "documented" for components that require app state, network data, WebGL, Mapbox, or browser-only side effects.
Prefer previewMode: "mocked" for components that can be shown with fixtures without mutating app state.
Keep examples short and valid enough to teach usage without pretending all dependencies are available.
Preserve accessibility contracts on primitives: labels for form controls, aria-label for icon-only actions, semantic landmarks where appropriate.

Verification

Run npm run check for component and registry changes.
Run the nearest .svelte.test.ts when changing component behavior.
Manually inspect /design after changing registry entries, categories, preview modes, or gallery UI.