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

72

Quality

89%

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

90%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 high-quality, token-efficient reference with concrete executable examples and clean progressive disclosure via a verified component index file. Workflow clarity is strong but could add explicit validation steps for batch/component-creation operations.

Suggestions

Add an explicit validation checkpoint (e.g., 'Verify the component renders in /design-guide before considering it done') to the new-component workflow to support feedback loops.

Consider moving the long composition-pattern code blocks into the component index or a patterns reference to keep SKILL.md even leaner.

DimensionReasoningScore

Conciseness

Lean and dense throughout — uses compact tables for tokens, typography, and status colors, and never over-explains concepts Claude already knows; every section earns its place.

5 / 5

Actionability

Provides copy-paste-ready TSX examples, exact Tailwind class strings, real file paths, and named props/variants (e.g., EntityRow slots, MetricCard, StatusBadge), covering the common composition cases concretely.

5 / 5

Workflow Clarity

Multi-step processes are sequenced (e.g., creating a component requires updating both the index and /design-guide page), but workflows like bulk pattern application lack explicit validation checkpoints or feedback loops.

4 / 5

Progressive Disclosure

Well-organized into 13 sections with the bulk component inventory offloaded to a real, one-level-deep references/component-index.md that is clearly signaled twice; minor gaps remain in organizing the composition-pattern examples.

4 / 5

Total

18

/

20

Passed

Description

88%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, specific description that clearly states both what the skill covers and when to use it, with concrete domain language. It pairs well with companion skills but that creates minor overlap risk, and trigger term coverage could include more synonyms.

Suggestions

Add a few natural synonyms or file/extension triggers (e.g., 'tsx components', 'shadcn variants') to broaden trigger term coverage.

Clarify the boundary versus the companion frontend-design and web-design-guidelines skills to reduce overlap ambiguity.

DimensionReasoningScore

Specificity

Lists multiple concrete capabilities — 'component creation, design tokens, typography, status/priority systems, composition patterns, and the /design-guide showcase page' — giving comprehensive coverage of what the skill does.

5 / 5

Completeness

Explicitly answers both what ('Paperclip UI design system guide... Covers...') and when ('Use when creating new UI components, modifying existing ones, adding pages or features...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good natural trigger coverage ('creating new UI components, modifying existing ones, adding pages or features, styling UI elements'), but missing synonyms and file/extension variants a user might say.

4 / 5

Distinctiveness Conflict Risk

Has a clear Paperclip-specific niche, but explicitly pairs with 'frontend-design' and 'web-design-guidelines', creating minor overlap risk with those closely related skills.

4 / 5

Total

18

/

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.

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.