Paperclip UI design system guide for building consistent, reusable frontend components. Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements, or when you need to understand the design language and conventions. Covers: component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page. Always use this skill alongside the frontend-design skill (for visual quality) and the web-design-guidelines skill (for web best practices). --- # Paperclip Design Guide Paperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place. **Always use with:** `frontend-design` (visual polish) and `web-design-guidelines` (web best practices). --- ## 1. Design Principles - **Dense but scannable.** Maximum information without clicks to reveal. Whitespace separates, not pads. - **Keyboard-first.** Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse. - **Contextual, not modal.** Inline editing over dialog boxes. Dropdowns over page navigations. - **Dark theme default.** Neutral grays (OKLCH), not pure black. Accent colors for status/priority only. Text is the primary visual element. - **Component-driven.** Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic. --- ## 2. Tech Stack - **React 19** + **TypeScript** + **Vite** - **Tailwind CSS v4** with CSS variables (OKLCH color space) - **shadcn/ui** (new-york style, neutral base, CSS variables enabled) - **Radix UI** primitives (accessibility, focus management) - **Lucide React** icons (16px nav, 14px inline) - **class-variance-authority** (CVA) for component variants - **clsx + tailwind-merge** via `cn()` utility
- 📄 seed-test-db.ts
- 📄 SKILL.md
Use when mycelium sync fails, items not appearing in tools, enable/disable not working, MCP not connecting, config conflicts between levels, EACCES permission errors, or any unexpected mycelium CLI behavior.
Use when the user asks questions about a GitHub repository's architecture, API, or internals, or mentions deepwiki-cli or DeepWiki. Activates when the user needs to understand a codebase they haven't cloned locally, or asks how a library or framework works. Do NOT activate for local codebases already accessible on disk or private repositories. --- # deepwiki-cli Skill deepwiki-cli provides AI-generated wiki documentation for GitHub repositories. Use the `deepwiki-cli` to query it directly — this keeps only the result text in Claude's context, avoiding MCP protocol overhead. ## When This Skill Activates - User references a GitHub repository by name (owner/repo format) - User asks how a library or framework works - User needs to understand a codebase they haven't read locally - User asks architecture or API questions about an open-source project ## How to Use Run via `Bash` tool: ```bash # Ask a question about a repository deepwiki-cli ask <owner/repo> "<question>" # List wiki topics for a repository deepwiki-cli structure <owner/repo> # Read full wiki contents deepwiki-cli read <owner/repo> ``` ## Examples ```bash deepwiki-cli ask facebook/react "How does the reconciler work?" deepwiki-cli ask vercel/next.js "What is the App Router architecture?" deepwiki-cli structure rust-lang/rust deepwiki-cli read tokio-rs/tokio ``` ## Prerequisites The `deepwiki-cli` binary must be installed: ```bash cargo install deepwiki-cli ``` If the binary is not found, inform the user to install it first. ## When NOT to Use - Repository is already cloned locally — use Glob/Grep/Read tools directly - Repository is private — deepwiki-cli only works with public repositories - User is asking about their own code in the current working directory ## Error Handling If `deepwiki-cli` is not installed or a command fails: 1. Check if the binary exists: `which deepwiki-cli` 2. If not found, tell the user to install: `cargo install deepwiki-cli` 3. If the repository is not found, verify the owner/repo