[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BWE6D862MDNKB6YTPYAMW":3,"skill-same:01M69BWE6D862MDNKB6YTPYAMW":82},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":42,"linkOnly":43,"markdownContent":44,"markdownBody":45,"frontMatter":46,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":6,"ownerHtmlUrl":52,"ownerBlogUrl":53,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M69BWE6D862MDNKB6YTPYAMW","design-guide",null,"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\u002Fpriority systems, composition patterns, and the \u002Fdesign-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).","microsoft\u002Famplifier-app-paperclip","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69BVQW2AS8MMMYW9A4DSSHW",1,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fdesign-guide\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41],"design","design guide","frontend","web","components","component","status","design system","guidelines","best practices","2026-11-10 10:12:30",false,"---\nname: design-guide\ndescription: >\n  Paperclip UI design system guide for building consistent, reusable frontend\n  components. Use when creating new UI components, modifying existing ones,\n  adding pages or features to the frontend, styling UI elements, or when you\n  need to understand the design language and conventions. Covers: component\n  creation, design tokens, typography, status\u002Fpriority systems, composition\n  patterns, and the \u002Fdesign-guide showcase page. Always use this skill\n  alongside the frontend-design skill (for visual quality) and the\n  web-design-guidelines skill (for web best practices).\n---\n\n# Paperclip Design Guide\n\nPaperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place.\n\n**Always use with:** `frontend-design` (visual polish) and `web-design-guidelines` (web best practices).\n\n---\n\n## 1. Design Principles\n\n- **Dense but scannable.** Maximum information without clicks to reveal. Whitespace separates, not pads.\n- **Keyboard-first.** Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.\n- **Contextual, not modal.** Inline editing over dialog boxes. Dropdowns over page navigations.\n- **Dark theme default.** Neutral grays (OKLCH), not pure black. Accent colors for status\u002Fpriority only. Text is the primary visual element.\n- **Component-driven.** Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.\n\n---\n\n## 2. Tech Stack\n\n- **React 19** + **TypeScript** + **Vite**\n- **Tailwind CSS v4** with CSS variables (OKLCH color space)\n- **shadcn\u002Fui** (new-york style, neutral base, CSS variables enabled)\n- **Radix UI** primitives (accessibility, focus management)\n- **Lucide React** icons (16px nav, 14px inline)\n- **class-variance-authority** (CVA) for component variants\n- **clsx + tailwind-merge** via `cn()` utility\n\nConfig: `ui\u002Fcomponents.json` (aliases: `@\u002Fcomponents`, `@\u002Fcomponents\u002Fui`, `@\u002Flib`, `@\u002Fhooks`)\n\n---\n\n## 3. Design Tokens\n\nAll tokens defined as CSS variables in `ui\u002Fsrc\u002Findex.css`. Both light and dark themes use OKLCH.\n\n### Colors\n\nUse semantic token names, never raw color values:\n\n| Token | Usage |\n|-------|-------|\n| `--background` \u002F `--foreground` | Page background and primary text |\n| `--card` \u002F `--card-foreground` | Card surfaces |\n| `--primary` \u002F `--primary-foreground` | Primary actions, emphasis |\n| `--secondary` \u002F `--secondary-foreground` | Secondary surfaces |\n| `--muted` \u002F `--muted-foreground` | Subdued text, labels |\n| `--accent` \u002F `--accent-foreground` | Hover states, active nav items |\n| `--destructive` | Destructive actions |\n| `--border` | All borders |\n| `--ring` | Focus rings |\n| `--sidebar-*` | Sidebar-specific variants |\n| `--chart-1` through `--chart-5` | Data visualization |\n\n### Radius\n\nSingle `--radius` variable (0.625rem) with derived sizes:\n\n- `rounded-sm` — small inputs, pills\n- `rounded-md` — buttons, inputs, small components\n- `rounded-lg` — cards, dialogs\n- `rounded-xl` — card containers, large components\n- `rounded-full` — badges, avatars, status dots\n\n### Shadows\n\nMinimal shadows: `shadow-xs` (outline buttons), `shadow-sm` (cards). No heavy shadows.\n\n---\n\n## 4. Typography Scale\n\nUse these exact patterns — do not invent new ones:\n\n| Pattern | Classes | Usage |\n|---------|---------|-------|\n| Page title | `text-xl font-bold` | Top of pages |\n| Section title | `text-lg font-semibold` | Major sections |\n| Section heading | `text-sm font-semibold text-muted-foreground uppercase tracking-wide` | Section headers in design guide, sidebar |\n| Card title | `text-sm font-medium` or `text-sm font-semibold` | Card headers, list item titles |\n| Body | `text-sm` | Default body text |\n| Muted | `text-sm text-muted-foreground` | Descriptions, secondary text |\n| Tiny label | `text-xs text-muted-foreground` | Metadata, timestamps, property labels |\n| Mono identifier | `text-xs font-mono text-muted-foreground` | Issue keys (PAP-001), CSS vars |\n| Large stat | `text-2xl font-bold` | Dashboard metric values |\n| Code\u002Flog | `font-mono text-xs` | Log output, code snippets |\n\n---\n\n## 5. Status & Priority Systems\n\n### Status Colors (consistent across all entities)\n\nDefined in `StatusBadge.tsx` and `StatusIcon.tsx`:\n\n| Status | Color | Entity types |\n|--------|-------|-------------|\n| active, achieved, completed, succeeded, approved, done | Green shades | Agents, goals, issues, approvals |\n| running | Cyan | Agents |\n| paused | Orange | Agents |\n| idle, pending | Yellow | Agents, approvals |\n| failed, error, rejected, blocked | Red shades | Runs, agents, approvals, issues |\n| archived, planned, backlog, cancelled | Neutral gray | Various |\n| todo | Blue | Issues |\n| in_progress | Indigo | Issues |\n| in_review | Violet | Issues |\n\n### Priority Icons\n\nDefined in `PriorityIcon.tsx`: critical (red\u002FAlertTriangle), high (orange\u002FArrowUp), medium (yellow\u002FMinus), low (blue\u002FArrowDown).\n\n### Agent Status Dots\n\nInline colored dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).\n\n---\n\n## 6. Component Hierarchy\n\nThree tiers:\n\n1. **shadcn\u002Fui primitives** (`ui\u002Fsrc\u002Fcomponents\u002Fui\u002F`) — Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly; extend via composition.\n2. **Custom composites** (`ui\u002Fsrc\u002Fcomponents\u002F`) — StatusBadge, EntityRow, MetricCard, etc. These capture Paperclip-specific design language.\n3. **Page components** (`ui\u002Fsrc\u002Fpages\u002F`) — Compose primitives and composites into full views.\n\n**See [references\u002Fcomponent-index.md](references\u002Fcomponent-index.md) for the complete component inventory with usage guidance.**\n\n### When to Create a New Component\n\nCreate a reusable component when:\n- The same visual pattern appears in 2+ places\n- The pattern has interactive behavior (status changing, inline editing)\n- The pattern encodes domain logic (status colors, priority icons)\n\nDo NOT create a component for:\n- One-off layouts specific to a single page\n- Simple className combinations (use Tailwind directly)\n- Thin wrappers that add no semantic value\n\n---\n\n## 7. Composition Patterns\n\nThese patterns describe how components work together. They may not be their own component, but they must be used consistently across the app.\n\n### Entity Row with Status + Priority\n\nThe standard list item for issues and similar entities:\n\n```tsx\n\u003CEntityRow\n  leading={\u003C>\u003CStatusIcon status=\"in_progress\" \u002F>\u003CPriorityIcon priority=\"high\" \u002F>\u003C\u002F>}\n  identifier=\"PAP-001\"\n  title=\"Implement authentication flow\"\n  subtitle=\"Assigned to Agent Alpha\"\n  trailing={\u003CStatusBadge status=\"in_progress\" \u002F>}\n  onClick={() => {}}\n\u002F>\n```\n\nLeading slot always: StatusIcon first, then PriorityIcon. Trailing slot: StatusBadge or timestamp.\n\n### Grouped List\n\nIssues grouped by status header + entity rows:\n\n```tsx\n\u003Cdiv className=\"flex items-center gap-2 px-4 py-2 bg-muted\u002F50 rounded-t-md\">\n  \u003CStatusIcon status=\"in_progress\" \u002F>\n  \u003Cspan className=\"text-sm font-medium\">In Progress\u003C\u002Fspan>\n  \u003Cspan className=\"text-xs text-muted-foreground ml-1\">2\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cdiv className=\"border border-border rounded-b-md\">\n  \u003CEntityRow ... \u002F>\n  \u003CEntityRow ... \u002F>\n\u003C\u002Fdiv>\n```\n\n### Property Row\n\nKey-value pairs in properties panels:\n\n```tsx\n\u003Cdiv className=\"flex items-center justify-between py-1.5\">\n  \u003Cspan className=\"text-xs text-muted-foreground\">Status\u003C\u002Fspan>\n  \u003CStatusBadge status=\"active\" \u002F>\n\u003C\u002Fdiv>\n```\n\nLabel is always `text-xs text-muted-foreground`, value on the right. Wrap in a container with `space-y-1`.\n\n### Metric Card Grid\n\nDashboard metrics in a responsive grid:\n\n```tsx\n\u003Cdiv className=\"grid md:grid-cols-2 xl:grid-cols-4 gap-4\">\n  \u003CMetricCard icon={Bot} value={12} label=\"Active Agents\" description=\"+3 this week\" \u002F>\n  ...\n\u003C\u002Fdiv>\n```\n\n### Progress Bar (Budget)\n\nColor by threshold: green (\u003C60%), yellow (60-85%), red (>85%):\n\n```tsx\n\u003Cdiv className=\"w-full h-2 bg-muted rounded-full overflow-hidden\">\n  \u003Cdiv className=\"h-full rounded-full bg-green-400\" style={{ width: `${pct}%` }} \u002F>\n\u003C\u002Fdiv>\n```\n\n### Comment Thread\n\nAuthor header (name + timestamp) then body, in bordered cards with `space-y-3`. Add comment textarea + button below.\n\n### Cost Table\n\nStandard `\u003Ctable>` with `text-xs`, header row with `bg-accent\u002F20`, `font-mono` for numeric values.\n\n### Log Viewer\n\n`bg-neutral-950 rounded-lg p-3 font-mono text-xs` container. Color lines by level: default (foreground), WARN (yellow-400), ERROR (red-400), SYS (blue-300). Include live indicator dot when streaming.\n\n---\n\n## 8. Interactive Patterns\n\n### Hover States\n\n- Entity rows: `hover:bg-accent\u002F50`\n- Nav items: `hover:bg-accent\u002F50 hover:text-accent-foreground`\n- Active nav: `bg-accent text-accent-foreground`\n\n### Focus\n\n`focus-visible:ring-ring focus-visible:ring-[3px]` — standard Tailwind focus-visible ring.\n\n### Disabled\n\n`disabled:opacity-50 disabled:pointer-events-none`\n\n### Inline Editing\n\nUse `InlineEditor` component — click text to edit, Enter saves, Escape cancels.\n\n### Popover Selectors\n\nStatusIcon and PriorityIcon use Radix Popover for inline selection. Follow this pattern for any clickable property that opens a picker.\n\n---\n\n## 9. Layout System\n\nThree-zone layout defined in `Layout.tsx`:\n\n```\n┌──────────┬──────────────────────────────┬──────────────────────┐\n│ Sidebar  │  Breadcrumb bar              │                      │\n│ (w-60)   ├──────────────────────────────┤  Properties panel    │\n│          │  Main content (flex-1)       │  (w-80, optional)    │\n└──────────┴──────────────────────────────┴──────────────────────┘\n```\n\n- Sidebar: `w-60`, collapsible, contains CompanySwitcher + SidebarSections\n- Properties panel: `w-80`, shown on detail views, hidden on lists\n- Main content: scrollable, `flex-1`\n\n---\n\n## 10. The \u002Fdesign-guide Page\n\n**Location:** `ui\u002Fsrc\u002Fpages\u002FDesignGuide.tsx`\n**Route:** `\u002Fdesign-guide`\n\nThis is the living showcase of every component and pattern in the app. It is the source of truth for how things look.\n\n### Rules\n\n1. **When you add a new reusable component, you MUST add it to the design guide page.** Show all variants, sizes, and states.\n2. **When you modify an existing component's API, update its design guide section.**\n3. **When you add a new composition pattern, add a section demonstrating it.**\n4. Follow the existing structure: `\u003CSection title=\"...\">` wrapper with `\u003CSubSection>` for grouping.\n5. Keep sections ordered logically: foundational (colors, typography) first, then primitives, then composites, then patterns.\n\n### Adding a New Section\n\n```tsx\n\u003CSection title=\"My New Component\">\n  \u003CSubSection title=\"Variants\">\n    {\u002F* Show all variants *\u002F}\n  \u003C\u002FSubSection>\n  \u003CSubSection title=\"Sizes\">\n    {\u002F* Show all sizes *\u002F}\n  \u003C\u002FSubSection>\n  \u003CSubSection title=\"States\">\n    {\u002F* Show interactive\u002Fdisabled states *\u002F}\n  \u003C\u002FSubSection>\n\u003C\u002FSection>\n```\n\n---\n\n## 11. Component Index\n\n**See [references\u002Fcomponent-index.md](references\u002Fcomponent-index.md) for the full component inventory.**\n\nWhen you create a new reusable component:\n1. Add it to the component index reference file\n2. Add it to the \u002Fdesign-guide page\n3. Follow existing naming and file conventions\n\n---\n\n## 12. File Conventions\n\n- **shadcn primitives:** `ui\u002Fsrc\u002Fcomponents\u002Fui\u002F{component}.tsx` — lowercase, kebab-case\n- **Custom components:** `ui\u002Fsrc\u002Fcomponents\u002F{ComponentName}.tsx` — PascalCase\n- **Pages:** `ui\u002Fsrc\u002Fpages\u002F{PageName}.tsx` — PascalCase\n- **Utilities:** `ui\u002Fsrc\u002Flib\u002F{name}.ts`\n- **Hooks:** `ui\u002Fsrc\u002Fhooks\u002F{useName}.ts`\n- **API modules:** `ui\u002Fsrc\u002Fapi\u002F{entity}.ts`\n- **Context providers:** `ui\u002Fsrc\u002Fcontext\u002F{Name}Context.tsx`\n\nAll components use `cn()` from `@\u002Flib\u002Futils` for className merging. All components use CVA for variant definitions when they have multiple visual variants.\n\n---\n\n## 13. Common Mistakes to Avoid\n\n- Using raw hex\u002Frgb colors instead of CSS variable tokens\n- Creating ad-hoc typography styles instead of using the established scale\n- Hardcoding status colors instead of using StatusBadge\u002FStatusIcon\n- Building one-off styled elements when a reusable component exists\n- Adding components without updating the design guide page\n- Using `shadow-md` or heavier — keep shadows minimal (xs, sm only)\n- Using `rounded-2xl` or larger — max is `rounded-xl` (except `rounded-full` for pills)\n- Forgetting dark mode — always use semantic tokens, never hardcode light\u002Fdark values\n","# Paperclip Design Guide\n\nPaperclip's UI is a professional-grade control plane — dense, keyboard-driven, dark-themed by default. Every pixel earns its place.\n\n**Always use with:** `frontend-design` (visual polish) and `web-design-guidelines` (web best practices).\n\n---\n\n## 1. Design Principles\n\n- **Dense but scannable.** Maximum information without clicks to reveal. Whitespace separates, not pads.\n- **Keyboard-first.** Global shortcuts (Cmd+K, C, [, ]). Power users rarely touch the mouse.\n- **Contextual, not modal.** Inline editing over dialog boxes. Dropdowns over page navigations.\n- **Dark theme default.** Neutral grays (OKLCH), not pure black. Accent colors for status\u002Fpriority only. Text is the primary visual element.\n- **Component-driven.** Prefer reusable components that capture style conventions. Build at the right abstraction — not too granular, not too monolithic.\n\n---\n\n## 2. Tech Stack\n\n- **React 19** + **TypeScript** + **Vite**\n- **Tailwind CSS v4** with CSS variables (OKLCH color space)\n- **shadcn\u002Fui** (new-york style, neutral base, CSS variables enabled)\n- **Radix UI** primitives (accessibility, focus management)\n- **Lucide React** icons (16px nav, 14px inline)\n- **class-variance-authority** (CVA) for component variants\n- **clsx + tailwind-merge** via `cn()` utility\n\nConfig: `ui\u002Fcomponents.json` (aliases: `@\u002Fcomponents`, `@\u002Fcomponents\u002Fui`, `@\u002Flib`, `@\u002Fhooks`)\n\n---\n\n## 3. Design Tokens\n\nAll tokens defined as CSS variables in `ui\u002Fsrc\u002Findex.css`. Both light and dark themes use OKLCH.\n\n### Colors\n\nUse semantic token names, never raw color values:\n\n| Token | Usage |\n|-------|-------|\n| `--background` \u002F `--foreground` | Page background and primary text |\n| `--card` \u002F `--card-foreground` | Card surfaces |\n| `--primary` \u002F `--primary-foreground` | Primary actions, emphasis |\n| `--secondary` \u002F `--secondary-foreground` | Secondary surfaces |\n| `--muted` \u002F `--muted-foreground` | Subdued text, labels |\n| `--accent` \u002F `--accent-foreground` | Hover states, active nav items |\n| `--destructive` | Destructive actions |\n| `--border` | All borders |\n| `--ring` | Focus rings |\n| `--sidebar-*` | Sidebar-specific variants |\n| `--chart-1` through `--chart-5` | Data visualization |\n\n### Radius\n\nSingle `--radius` variable (0.625rem) with derived sizes:\n\n- `rounded-sm` — small inputs, pills\n- `rounded-md` — buttons, inputs, small components\n- `rounded-lg` — cards, dialogs\n- `rounded-xl` — card containers, large components\n- `rounded-full` — badges, avatars, status dots\n\n### Shadows\n\nMinimal shadows: `shadow-xs` (outline buttons), `shadow-sm` (cards). No heavy shadows.\n\n---\n\n## 4. Typography Scale\n\nUse these exact patterns — do not invent new ones:\n\n| Pattern | Classes | Usage |\n|---------|---------|-------|\n| Page title | `text-xl font-bold` | Top of pages |\n| Section title | `text-lg font-semibold` | Major sections |\n| Section heading | `text-sm font-semibold text-muted-foreground uppercase tracking-wide` | Section headers in design guide, sidebar |\n| Card title | `text-sm font-medium` or `text-sm font-semibold` | Card headers, list item titles |\n| Body | `text-sm` | Default body text |\n| Muted | `text-sm text-muted-foreground` | Descriptions, secondary text |\n| Tiny label | `text-xs text-muted-foreground` | Metadata, timestamps, property labels |\n| Mono identifier | `text-xs font-mono text-muted-foreground` | Issue keys (PAP-001), CSS vars |\n| Large stat | `text-2xl font-bold` | Dashboard metric values |\n| Code\u002Flog | `font-mono text-xs` | Log output, code snippets |\n\n---\n\n## 5. Status & Priority Systems\n\n### Status Colors (consistent across all entities)\n\nDefined in `StatusBadge.tsx` and `StatusIcon.tsx`:\n\n| Status | Color | Entity types |\n|--------|-------|-------------|\n| active, achieved, completed, succeeded, approved, done | Green shades | Agents, goals, issues, approvals |\n| running | Cyan | Agents |\n| paused | Orange | Agents |\n| idle, pending | Yellow | Agents, approvals |\n| failed, error, rejected, blocked | Red shades | Runs, agents, approvals, issues |\n| archived, planned, backlog, cancelled | Neutral gray | Various |\n| todo | Blue | Issues |\n| in_progress | Indigo | Issues |\n| in_review | Violet | Issues |\n\n### Priority Icons\n\nDefined in `PriorityIcon.tsx`: critical (red\u002FAlertTriangle), high (orange\u002FArrowUp), medium (yellow\u002FMinus), low (blue\u002FArrowDown).\n\n### Agent Status Dots\n\nInline colored dots: running (cyan, animate-pulse), active (green), paused (yellow), error (red), offline (neutral).\n\n---\n\n## 6. Component Hierarchy\n\nThree tiers:\n\n1. **shadcn\u002Fui primitives** (`ui\u002Fsrc\u002Fcomponents\u002Fui\u002F`) — Button, Card, Input, Badge, Dialog, Tabs, etc. Do not modify these directly; extend via composition.\n2. **Custom composites** (`ui\u002Fsrc\u002Fcomponents\u002F`) — StatusBadge, EntityRow, MetricCard, etc. These capture Paperclip-specific design language.\n3. **Page components** (`ui\u002Fsrc\u002Fpages\u002F`) — Compose primitives and composites into full views.\n\n**See [references\u002Fcomponent-index.md](references\u002Fcomponent-index.md) for the complete component inventory with usage guidance.**\n\n### When to Create a New Component\n\nCreate a reusable component when:\n- The same visual pattern appears in 2+ places\n- The pattern has interactive behavior (status changing, inline editing)\n- The pattern encodes domain logic (status colors, priority icons)\n\nDo NOT create a component for:\n- One-off layouts specific to a single page\n- Simple className combinations (use Tailwind directly)\n- Thin wrappers that add no semantic value\n\n---\n\n## 7. Composition Patterns\n\nThese patterns describe how components work together. They may not be their own component, but they must be used consistently across the app.\n\n### Entity Row with Status + Priority\n\nThe standard list item for issues and similar entities:\n\n```tsx\n\u003CEntityRow\n  leading={\u003C>\u003CStatusIcon status=\"in_progress\" \u002F>\u003CPriorityIcon priority=\"high\" \u002F>\u003C\u002F>}\n  identifier=\"PAP-001\"\n  title=\"Implement authentication flow\"\n  subtitle=\"Assigned to Agent Alpha\"\n  trailing={\u003CStatusBadge status=\"in_progress\" \u002F>}\n  onClick={() => {}}\n\u002F>\n```\n\nLeading slot always: StatusIcon first, then PriorityIcon. Trailing slot: StatusBadge or timestamp.\n\n### Grouped List\n\nIssues grouped by status header + entity rows:\n\n```tsx\n\u003Cdiv className=\"flex items-center gap-2 px-4 py-2 bg-muted\u002F50 rounded-t-md\">\n  \u003CStatusIcon status=\"in_progress\" \u002F>\n  \u003Cspan className=\"text-sm font-medium\">In Progress\u003C\u002Fspan>\n  \u003Cspan className=\"text-xs text-muted-foreground ml-1\">2\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\u003Cdiv className=\"border border-border rounded-b-md\">\n  \u003CEntityRow ... \u002F>\n  \u003CEntityRow ... \u002F>\n\u003C\u002Fdiv>\n```\n\n### Property Row\n\nKey-value pairs in properties panels:\n\n```tsx\n\u003Cdiv className=\"flex items-center justify-between py-1.5\">\n  \u003Cspan className=\"text-xs text-muted-foreground\">Status\u003C\u002Fspan>\n  \u003CStatusBadge status=\"active\" \u002F>\n\u003C\u002Fdiv>\n```\n\nLabel is always `text-xs text-muted-foreground`, value on the right. Wrap in a container with `space-y-1`.\n\n### Metric Card Grid\n\nDashboard metrics in a responsive grid:\n\n```tsx\n\u003Cdiv className=\"grid md:grid-cols-2 xl:grid-cols-4 gap-4\">\n  \u003CMetricCard icon={Bot} value={12} label=\"Active Agents\" description=\"+3 this week\" \u002F>\n  ...\n\u003C\u002Fdiv>\n```\n\n### Progress Bar (Budget)\n\nColor by threshold: green (\u003C60%), yellow (60-85%), red (>85%):\n\n```tsx\n\u003Cdiv className=\"w-full h-2 bg-muted rounded-full overflow-hidden\">\n  \u003Cdiv className=\"h-full rounded-full bg-green-400\" style={{ width: `${pct}%` }} \u002F>\n\u003C\u002Fdiv>\n```\n\n### Comment Thread\n\nAuthor header (name + timestamp) then body, in bordered cards with `space-y-3`. Add comment textarea + button below.\n\n### Cost Table\n\nStandard `\u003Ctable>` with `text-xs`, header row with `bg-accent\u002F20`, `font-mono` for numeric values.\n\n### Log Viewer\n\n`bg-neutral-950 rounded-lg p-3 font-mono text-xs` container. Color lines by level: default (foreground), WARN (yellow-400), ERROR (red-400), SYS (blue-300). Include live indicator dot when streaming.\n\n---\n\n## 8. Interactive Patterns\n\n### Hover States\n\n- Entity rows: `hover:bg-accent\u002F50`\n- Nav items: `hover:bg-accent\u002F50 hover:text-accent-foreground`\n- Active nav: `bg-accent text-accent-foreground`\n\n### Focus\n\n`focus-visible:ring-ring focus-visible:ring-[3px]` — standard Tailwind focus-visible ring.\n\n### Disabled\n\n`disabled:opacity-50 disabled:pointer-events-none`\n\n### Inline Editing\n\nUse `InlineEditor` component — click text to edit, Enter saves, Escape cancels.\n\n### Popover Selectors\n\nStatusIcon and PriorityIcon use Radix Popover for inline selection. Follow this pattern for any clickable property that opens a picker.\n\n---\n\n## 9. Layout System\n\nThree-zone layout defined in `Layout.tsx`:\n\n```\n┌──────────┬──────────────────────────────┬──────────────────────┐\n│ Sidebar  │  Breadcrumb bar              │                      │\n│ (w-60)   ├──────────────────────────────┤  Properties panel    │\n│          │  Main content (flex-1)       │  (w-80, optional)    │\n└──────────┴──────────────────────────────┴──────────────────────┘\n```\n\n- Sidebar: `w-60`, collapsible, contains CompanySwitcher + SidebarSections\n- Properties panel: `w-80`, shown on detail views, hidden on lists\n- Main content: scrollable, `flex-1`\n\n---\n\n## 10. The \u002Fdesign-guide Page\n\n**Location:** `ui\u002Fsrc\u002Fpages\u002FDesignGuide.tsx`\n**Route:** `\u002Fdesign-guide`\n\nThis is the living showcase of every component and pattern in the app. It is the source of truth for how things look.\n\n### Rules\n\n1. **When you add a new reusable component, you MUST add it to the design guide page.** Show all variants, sizes, and states.\n2. **When you modify an existing component's API, update its design guide section.**\n3. **When you add a new composition pattern, add a section demonstrating it.**\n4. Follow the existing structure: `\u003CSection title=\"...\">` wrapper with `\u003CSubSection>` for grouping.\n5. Keep sections ordered logically: foundational (colors, typography) first, then primitives, then composites, then patterns.\n\n### Adding a New Section\n\n```tsx\n\u003CSection title=\"My New Component\">\n  \u003CSubSection title=\"Variants\">\n    {\u002F* Show all variants *\u002F}\n  \u003C\u002FSubSection>\n  \u003CSubSection title=\"Sizes\">\n    {\u002F* Show all sizes *\u002F}\n  \u003C\u002FSubSection>\n  \u003CSubSection title=\"States\">\n    {\u002F* Show interactive\u002Fdisabled states *\u002F}\n  \u003C\u002FSubSection>\n\u003C\u002FSection>\n```\n\n---\n\n## 11. Component Index\n\n**See [references\u002Fcomponent-index.md](references\u002Fcomponent-index.md) for the full component inventory.**\n\nWhen you create a new reusable component:\n1. Add it to the component index reference file\n2. Add it to the \u002Fdesign-guide page\n3. Follow existing naming and file conventions\n\n---\n\n## 12. File Conventions\n\n- **shadcn primitives:** `ui\u002Fsrc\u002Fcomponents\u002Fui\u002F{component}.tsx` — lowercase, kebab-case\n- **Custom components:** `ui\u002Fsrc\u002Fcomponents\u002F{ComponentName}.tsx` — PascalCase\n- **Pages:** `ui\u002Fsrc\u002Fpages\u002F{PageName}.tsx` — PascalCase\n- **Utilities:** `ui\u002Fsrc\u002Flib\u002F{name}.ts`\n- **Hooks:** `ui\u002Fsrc\u002Fhooks\u002F{useName}.ts`\n- **API modules:** `ui\u002Fsrc\u002Fapi\u002F{entity}.ts`\n- **Context providers:** `ui\u002Fsrc\u002Fcontext\u002F{Name}Context.tsx`\n\nAll components use `cn()` from `@\u002Flib\u002Futils` for className merging. All components use CVA for variant definitions when they have multiple visual variants.\n\n---\n\n## 13. Common Mistakes to Avoid\n\n- Using raw hex\u002Frgb colors instead of CSS variable tokens\n- Creating ad-hoc typography styles instead of using the established scale\n- Hardcoding status colors instead of using StatusBadge\u002FStatusIcon\n- Building one-off styled elements when a reusable component exists\n- Adding components without updating the design guide page\n- Using `shadow-md` or heavier — keep shadows minimal (xs, sm only)\n- Using `rounded-2xl` or larger — max is `rounded-xl` (except `rounded-full` for pills)\n- Forgetting dark mode — always use semantic tokens, never hardcode light\u002Fdark values\n",{"name":5,"description":7},"main","d1d0e5a045f856af95eb693add053cc329774806",".claude\u002Fskills\u002Fdesign-guide",2,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-10-30 04:25:15",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add microsoft\u002Famplifier-app-paperclip --skill design-guide",{"tool":62,"command":63},"bunx","bunx skills add microsoft\u002Famplifier-app-paperclip --skill design-guide",{"tool":65,"command":66},"pnpm","pnpm dlx skills add microsoft\u002Famplifier-app-paperclip --skill design-guide","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fdesign-guide\u002FSKILL.md",true,[70,76],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"assets\u002Fverification-report-template.md","ASSET","资产文件",2726,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fdoublecheck\u002Fassets\u002Fverification-report-template.md",{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002Fcomponent-index.md","REFERENCE","参考文档",10692,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fdesign-guide\u002Freferences\u002Fcomponent-index.md",[83,98,113,124,133,147],{"skillNo":84,"name":85,"nameZh":6,"description":86,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":87,"categories":88,"keywords":89,"publishedAt":42},"01M69BXXE3997X52Z13XH9ZCK4","terminal-bench-loop","Run a single Terminal-Bench problem through Paperclip in a bounded, human-in-the-loop improvement cycle until the smoke passes, the board rejects the next fix, the iteration budget is exhausted, or a real blocker is named. Each iteration runs a bounded smoke against an isolated Paperclip App worktree, captures artifacts, diagnoses the exact stop point with `\u002Fdiagnose-why-work-stopped`, requests board confirmation before any product fix, then reruns against the same worktree. Use whenever an issue asks to \"run Terminal-Bench in a loop\", \"drive Terminal-Bench until it passes\", \"loop fix-git through Paperclip\", or otherwise points at a Terminal-Bench task and asks for bounded iteration with diagnosis.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fterminal-bench-loop\u002FSKILL.md",[],[90,91,92,93,94,95,96,97],"terminal bench loop","terminal","git","artifacts","paperclip","diagnose","run","product",{"skillNo":99,"name":100,"nameZh":6,"description":101,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":102,"categories":103,"keywords":104,"publishedAt":42},"01M69BXV7WMFG9YEPBB50Q40JY","para-memory-files","File-based memory system using Tiago Forte's PARA method. Use this skill whenever you need to store, retrieve, update, or organize knowledge across sessions. Covers three memory layers: (1) Knowledge graph in PARA folders with atomic YAML facts, (2) Daily notes as raw timeline, (3) Tacit knowledge about user patterns. Also handles planning files, memory decay, weekly synthesis, and recall via qmd. Trigger on any memory operation: saving facts, writing daily notes, creating entities, running weekly synthesis, recalling past context, or managing plans.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fpara-memory-files\u002FSKILL.md",[],[105,106,107,108,109,110,111,112],"memory","para memory files","planning","update","notes","sessions","qmd","writing",{"skillNo":114,"name":94,"nameZh":6,"description":115,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":116,"categories":117,"keywords":118,"publishedAt":42},"01M69BXRE769BJ5W05W2XQ85T6","Interact with the Paperclip control plane API to manage tasks, coordinate with other agents, and follow company governance. Use when you need to check assignments, update task status, delegate work, post comments, set up or manage routines (recurring scheduled tasks), or call any Paperclip API endpoint. Do NOT use for the actual domain work itself (writing code, research, etc.) — only for Paperclip coordination.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fpaperclip\u002FSKILL.md",[],[94,38,119,108,120,121,122,123,112],"code","tasks","governance","research","routines",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":130,"publishedAt":42},"01M69BXMREYNEVHE276GFTMFBZ","paperclip-dev","Develop and operate a local Paperclip instance — start and stop servers, pull updates from master, run builds and tests, manage worktrees, back up databases, and diagnose problems. Use whenever you need to work on the Paperclip codebase itself or keep a running instance healthy.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fpaperclip-dev\u002FSKILL.md",[],[131,94,132,96,95],"paperclip dev","dev",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":42},"01M69BXHSPWG60R76MMXJCBRG2","paperclip-create-plugin","Create and develop external Paperclip plugins with the CLI-first workflow. Use when scaffolding a new plugin, working on a local plugin against a running Paperclip instance, or updating plugin authoring docs. Covers `paperclipai plugin init`, the local install loop via `paperclipai plugin install \u003Cpath>`, worker\u002FUI rebuild and reload semantics, and the required success checklist.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fpaperclip-create-plugin\u002FSKILL.md",[],[140,94,141,142,143,144,145,146],"paperclip create plugin","plugin","create","init","workflow","docs","cli",{"skillNo":148,"name":149,"nameZh":6,"description":150,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":151,"categories":152,"keywords":156,"publishedAt":42},"01M69BXF0D8J59MN3MF30F6NGW","paperclip-create-agent","Create new agents in Paperclip with governance-aware hiring. Use when you need to inspect adapter configuration options, compare existing agent configs, draft a new agent prompt\u002Fconfig, and submit a hire request.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Famplifier-app-paperclip\u002Fblob\u002Fmain\u002Fskills\u002Fpaperclip-create-agent\u002FSKILL.md",[153],{"categoryNo":154,"categoryName":155,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[157,142,94,158,121,159],"create agent","paperclip create agent","config"]