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

83%

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

82%Weight 40%Scale 1-5

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

A well-crafted, information-dense design-system skill: concrete token tables, exact typography classes, real code patterns, clear component-creation workflows, and appropriate offloading of the component inventory to a single well-signaled reference file. Remaining gaps are minor — a few ellipsis placeholders in code examples, prose-only descriptions of some composition patterns, and a duplicated reference pointer.

Suggestions

Complete the partial code examples (replace '<EntityRow ... />' and the bare '...' with real props) or note that full prop signatures live in references/component-index.md.

Merge sections 6 and 11 into a single 'Component index & creation workflow' section to remove the duplicated reference pointer.

Convert the prose-only composition patterns (Comment Thread, Cost Table, Log Viewer) into short TSX snippets matching the style of EntityRow and Property Row.

DimensionReasoningScore

Conciseness

The body is dense, prescriptive tables and patterns with essentially zero explanation of concepts Claude already knows (no 'what is Tailwind' padding) — 'Every pixel earns its place' is its own stated ethos and the content practices it. Re-reading anchor 4 ('minor instances of over-explanation that could be trimmed'), there is no over-explanation to trim; the small redundancy of the component-index pointer in sections 6 and 11 does not rise to it.

5 / 5

Actionability

Mostly executable: exact Tailwind class strings, token tables, file paths, and copy-paste TSX snippets for EntityRow, grouped lists, and property rows. Minor gaps keep it below 5 — the grouped-list snippet uses '<EntityRow ... />', the metric grid has a bare '...', and Comment Thread / Cost Table / Log Viewer are described in prose with class hints rather than code.

4 / 5

Workflow Clarity

The 'When you create a new reusable component' steps (component index → design-guide page → conventions) and the five MUST rules for the /design-guide page are clear, numbered sequences with explicit requirements, and 'Common Mistakes to Avoid' serves as error prevention. No destructive or batch operations, so no validation cap applies; it falls just short of anchor 5's explicit validation checkpoints and error-recovery loops.

4 / 5

Progressive Disclosure

The component inventory — the bulkiest material — is properly externalized to the real, one-level-deep references/component-index.md and clearly signaled with markdown links, and the 13 numbered sections make navigation easy. It is not a 5 because the pointer is duplicated in sections 6 and 11 and a portion of the inline composition-pattern code examples could also live in a reference file.

4 / 5

Total

17

/

20

Passed

Description

83%Weight 40%Scale 1-5

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 description with explicit 'what' and multi-clause 'when' triggers and a concrete coverage list. The main deductions are a second-person clause ('when you need to understand') violating the third-person requirement and missing stack-specific trigger terms (React, Tailwind, shadcn/ui) that users would naturally say.

Suggestions

Rewrite 'when you need to understand the design language and conventions' in third person (e.g., 'when working with Paperclip UI code or applying the design language').

Add natural stack keywords users would say — React, Tailwind, shadcn/ui, dashboard, design tokens — to broaden trigger-term coverage.

DimensionReasoningScore

Specificity

The description lists concrete coverage areas — 'component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page' — which is comprehensive for the domain, but the second-person phrase 'when you need to understand the design language' triggers the rubric's third-person penalty, reducing an otherwise 5-level listing of specific capabilities.

4 / 5

Completeness

It explicitly answers both questions: the 'what' ('Paperclip UI design system guide for building consistent, reusable frontend components' plus the 'Covers:' list) and a detailed 'when' ('Use when creating new UI components, modifying existing ones, adding pages or features to the frontend, styling UI elements...'). This matches the anchor-5 example structure of concrete what + explicit trigger phrase.

5 / 5

Trigger Term Quality

Natural phrases users would say are present — 'creating new UI components', 'modifying existing ones', 'adding pages or features to the frontend', 'styling UI elements' — but common synonyms and stack keywords a user would naturally mention (React, Tailwind, shadcn/ui, dashboard, buttons) are missing, which keeps it at 'good coverage, a few natural terms missing' rather than 5.

4 / 5

Distinctiveness Conflict Risk

The 'Paperclip' qualifier and specific systems (design tokens, status/priority systems, /design-guide page) carve a clear niche, but phrases like 'styling UI elements' and 'design language' overlap with the sibling frontend-design / web-design-guidelines skills it explicitly names, so it is 'mostly distinct; minor overlap risk' rather than minimal conflict.

4 / 5

Total

17

/

20

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.

Validation — 16 / 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.