# Build Consistent Paperclip UI Components

Paperclip UI work can drift when components, tokens, and layouts are created ad hoc. This skill gives Claude, Codex, and Claude Code a shared design guide for consistent frontend implementation.

## Install

```bash
npx skillstore add getpaperclipai/design-guide
```

## Metadata

- Status: approved
- Slug: getpaperclipai-design-guide
- Skillstore revision: r1
- Version status: missing
- Tree hash: 428585f81a2f5450d38295562f5689b2edd7ef4a42946da2202ca7b6cb57eca7
- Author: getpaperclipai
- GitHub username: getpaperclipai
- License: MIT
- Repository: https://github.com/getpaperclipai/paperclip/tree/master/.claude/skills/design-guide/
- Ref: a06681402992ceae98ba04d54cfd4ab004862696
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 74
- Public page: https://skillstore.pages.dev/skills/getpaperclipai-design-guide
- Manifest: https://skillstore.pages.dev/api/skills/getpaperclipai-design-guide/manifest

## Capabilities

- Documents Paperclip design principles, React stack choices, and Tailwind token usage.
- Defines typography, radius, shadow, color, status, and priority conventions.
- Explains when to create reusable components and when to use direct Tailwind classes.
- Provides composition patterns for rows, lists, property panels, metrics, progress bars, comments, tables, and logs.
- Describes the app layout, design guide page rules, file naming conventions, and component index maintenance.
- Lists available UI primitives, custom components, layout components, form components, utilities, and hooks.

## Use Cases

- Create a New Component: Use the guide to choose tokens, variants, file names, states, and design guide examples for a new Paperclip component.
- Review UI Consistency: Compare a page or feature against Paperclip typography, layout, status, priority, and interaction patterns.
- Document Component Changes: Update the component index and design guide page when a reusable UI pattern changes or expands.

## Prompt Templates

### Check a Component Plan

```
Use the design-guide skill to review my plan for a new Paperclip component. Check tokens, typography, variants, file placement, and design guide updates.
```

### Build a Reusable Component

```
Use the design-guide skill to implement this Paperclip component. Follow existing shadcn/ui composition, CVA variants, cn usage, status conventions, and file naming rules.
```

### Align a Page Layout

```
Use the design-guide skill to refactor this Paperclip page layout. Align it with the sidebar, breadcrumb, main content, properties panel, spacing, and responsive patterns.
```

### Audit a Complex UI Change

```
Use the design-guide skill to audit this UI change for design system drift. Identify duplicated patterns, missing documentation, inconsistent tokens, weak states, and component reuse opportunities.
```

## Limitations

- Guidance is specific to Paperclip and its React, Tailwind CSS, shadcn/ui, and Radix stack.
- The skill does not execute tests, inspect the live app, or enforce design rules automatically.
- The component inventory can become stale if authors do not update the reference file.
- It expects separate frontend quality and web best practice skills for broader review.

## Best Practices

- Start with existing primitives and custom composites before creating a new component.
- Use semantic tokens, established typography, and shared status or priority components.
- Update both the design guide page and component index when reusable UI changes.

## Anti Patterns

- Do not hardcode raw colors, custom type scales, or one-off status styling.
- Do not modify shadcn/ui primitives directly when composition can extend them.
- Do not add reusable components without examples, states, variants, and reference documentation.

## Security Audit

- Audited at: 2026-07-06T15:29:38.234\+00:00
- Summary: Reviewed all 84 static findings in SKILL.md and references/component-index.md. The findings are false positives caused by markdown inline code, TSX examples, CSS class names, file paths, and responsive grid guidance. No prompt injection, data exfiltration, command execution intent, or malicious instructions were found.

## Stats

- Views: 0
- Downloads: 4
- Favorites: 0
- Popularity score: 0