# Phantom Design System > Use this skill for UI or frontend development in the Phantom repository, especially packages/app changes, React components, shadcn/ui usage, sidebar/chat/worktree screens, styling, responsive behavior, or UX copy. Always read the repository DESIGN.md before making or reviewing UI/frontend changes. - Skill: `tomevault-io/phantom-design-system` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/phantom-design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/phantom-design-system/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/phantom-design-system --- # Phantom Design System Use this skill when working on UI or frontend code in the Phantom repository. ## Required Context Before proposing, editing, or reviewing UI/frontend work: 1. Confirm the current repository root. 2. Read `DESIGN.md` from the repository root. 3. Apply its guidance to the change, especially layout, components, typography, color, motion, accessibility, and shadcn/ui usage. If `DESIGN.md` is missing, stop and tell the user that the required design system file is unavailable. ## Workflow - Prefer existing Phantom UI patterns and shadcn/ui-based components before adding new primitives. - Keep UI changes consistent with the sidebar, project/worktree hierarchy, agent chat, command input, and diff/code surfaces described in `DESIGN.md`. - Remove or revise UI text, spacing, color, and component choices that conflict with `DESIGN.md`. - For visual changes, verify in the app when a dev server or browser context is available. Use the repository's default Portless development flow (`pnpm dev`) unless the user explicitly asks to bypass it or Portless itself is the issue being debugged. - Mention in the final response that `DESIGN.md` was consulted for UI/frontend decisions. ## Scope This skill is for Phantom UI/frontend work only. Do not use it for backend-only changes, CLI behavior, Git orchestration, or documentation-only edits unless the documentation describes UI/frontend behavior. --- > Source: [phantompane/phantom](https://github.com/phantompane/phantom) — distributed by [TomeVault](https://tomevault.io).