CtrlK
BlogDocsLog inGet started
Tessl Logo

design-guide

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).

68

Quality

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

87%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An excellent, dense design-system reference with highly actionable code and clean progressive disclosure to a verified bundle file. The only gap is the absence of an explicit verification checkpoint in the component-creation/design-guide workflow.

DimensionReasoningScore

Conciseness

The body is dense reference material — token tables, typography scale, status-color matrices, and exact Tailwind classes — with no explaining of concepts Claude already knows (React, Tailwind, shadcn are named, not tutored); every section earns its tokens; it is not level 2 because there is no padded or unnecessary explanation to trim.

3 / 3

Actionability

Provides copy-paste-ready TSX (EntityRow, grouped list, metric grid, progress bar), exact class strings (e.g., "text-xs text-muted-foreground"), file paths, and component APIs; it is not level 2 because examples are complete and executable rather than pseudocode.

3 / 3

Workflow Clarity

Component-creation and design-guide-update steps are sequenced (§11 numbered list, §10 rules), but the workflow is scattered across §6/§10/§11 with no explicit verification checkpoint (e.g., "confirm the component renders on /design-guide"); it is not level 3 because checkpoints/feedback are missing, and not level 1 because a clear sequence does exist.

2 / 3

Progressive Disclosure

13 well-organized sections form an overview, and the detailed component inventory is offloaded to a verified one-level-deep reference ("See references/component-index.md") signaled in §6 and §11; it is not level 2 because the split is appropriate and navigation is explicit rather than inline bloat.

3 / 3

Total

11

/

12

Passed

Description

77%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, well-structured description that clearly states both capabilities and explicit use-when triggers with concrete actions. Its main weakness is moderate overlap with sibling design skills and somewhat abstract rather than concrete trigger terms.

Suggestions

Add concrete trigger nouns users would actually say (e.g., "design tokens", "status badge colors", "the /design-guide page") alongside the abstract verbs to strengthen trigger term quality.

Clarify the boundary versus frontend-design and web-design-guidelines — state which decisions this skill owns (e.g., Paperclip-specific tokens, status/priority systems, component composition) vs. what the sibling skills own, to reduce conflict risk.

DimensionReasoningScore

Specificity

Lists multiple concrete actions such as "creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements," matching the multiple-specific-actions anchor; it is not level 2 because the actions are enumerated rather than naming only a domain.

3 / 3

Completeness

Explicitly answers "what" ("Covers: component creation, design tokens, typography...") and "when" ("Use when creating new UI components, modifying existing ones...") with explicit triggers; it is not level 2 because both halves are clearly present.

3 / 3

Trigger Term Quality

Phrases like "creating new UI components" and "styling UI elements" are natural, but the terms lean abstract ("frontend", "UI elements") and sit alongside jargon ("design tokens", "composition patterns"), so coverage is good but missing more concrete variations; it is not level 3 because the keywords are not as concrete as the PDF/forms exemplar.

2 / 3

Distinctiveness Conflict Risk

The Paperclip-specific framing carves a niche, but "Always use this skill alongside the frontend-design skill... and the web-design-guidelines skill" signals real overlap on triggers like "styling UI elements" or "creating UI components"; it is not level 3 because conflict with those sibling skills is plausible, and not level 1 because the product-specific niche is distinct.

2 / 3

Total

10

/

12

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
paperclipai/paperclip
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.