design-guide
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 with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
Review the Skillstore skill "design-guide" from https://skillstore.io/skills/getpaperclipai-design-guide.md and its manifest at https://skillstore.io/api/skills/getpaperclipai-design-guide/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "design-guide". Review a new issue row component for Paperclip.
Expected outcome:
The response identifies EntityRow as the right base pattern, requires StatusIcon before PriorityIcon, and recommends StatusBadge in the trailing slot.
Using "design-guide". Plan dashboard metric cards for an agents page.
Expected outcome:
The response recommends MetricCard in a responsive four-column grid, with semantic tokens, small shadows, and established typography for values and labels.
Using "design-guide". Update the design guide after adding a reusable selector.
Expected outcome:
The response lists the design guide section to add, variants to show, interactive states to include, and component index fields to update.
Security Audit
SafeReviewed 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.
Risk Factors
⚙️ External commands (80)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/getpaperclipai-design-guide/audits/3?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge)HTML badge
<a href="https://skillstore.io/skills/getpaperclipai-design-guide?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/getpaperclipai-design-guide/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Embed card
<iframe src="https://skillstore.io/embed/skills/getpaperclipai-design-guide.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Academic citations (APA · BibTeX · CFF)
APA citation
getpaperclipai. (2026). design-guide security audit report (audit version 3) [Author version unspecified]. Skillstore. https://skillstore.io/skills/getpaperclipai-design-guide/audits/3BibTeX citation
@techreport{getpaperclipai-getpaperclipai-design-guide-2026,
author = {getpaperclipai},
title = {design-guide security audit report (audit version 3)},
institution = {Skillstore},
year = {2026},
number = {3},
url = {https://skillstore.io/skills/getpaperclipai-design-guide/audits/3},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "design-guide security audit report (audit version 3)"
version: "unspecified"
type: report
authors:
- name: "getpaperclipai"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/getpaperclipai-design-guide/audits/3"
identifiers:
- type: other
value: "skillstore:getpaperclipai-design-guide:audit:3"
description: "Skillstore immutable audit report identifier"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
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.
Try These Prompts
Use the design-guide skill to review my plan for a new Paperclip component. Check tokens, typography, variants, file placement, and design guide updates.
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.
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.
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.
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.
Avoid
- 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.
Frequently Asked Questions
What does this skill help build?
Which stack does it assume?
Does it replace visual design review?
Can it create new components?
Does it include a component inventory?
Is it safe to use?
Developer Details
Author
getpaperclipaiLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
a06681402992ceae98ba04d54cfd4ab004862696
Maintenance freshness
7/18/2026
Usage
1 downloads · 0 views
File structure