CtrlK
BlogDocsLog inGet started
Tessl Logo

corner-diagonals

Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells. Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls, or engineered sharp containers instead of rounded pills or plain rectangles.

70

Quality

85%

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.

The body is an efficient, executable pattern catalog with well-organized sections, working CSS, and useful tuning/checklist guidance. It is not a multi-step or destructive workflow, so the absence of explicit validation feedback loops is acceptable, though a touch of advisory prose could be trimmed.

Suggestions

Trim interpretive prose ('should feel engineered, sharp, and intentional', 'so it feels like a system') in favor of concrete thresholds to lift conciseness toward 5.

Consider moving the full token set and bordered-shell markup into a referenced file (e.g. reference/shapes.css) and keeping SKILL.md as a concise overview with one key example per pattern.

If used in production contexts with many components, add a brief validation note (e.g. confirm hit area, 44px height, and focus visibility after applying a polygon) to strengthen the checkpoint framing.

DimensionReasoningScore

Conciseness

Largely lean and assumes Claude's CSS competence, but advisory prose like 'Diagonal cuts should feel engineered, sharp, and intentional' and 'Reuse the same corner logic across surfaces so it feels like a system' adds a little padding that could be trimmed.

4 / 5

Actionability

Fully executable copy-paste CSS with real clip-path polygons, design tokens, and concrete tuning ranges (e.g. '6px-10px for small controls'); covers the common button/card/panel cases directly.

5 / 5

Workflow Clarity

This is a single-purpose pattern catalog, not a destructive or batch workflow, so the destructive-cap does not apply; 'Quick Checks' and 'Avoid' act as soft checkpoints, but there is no explicit sequenced workflow with validation feedback loops, capping it at 4.

4 / 5

Progressive Disclosure

A single self-contained file is appropriate here (no bundle files exist) with clearly headed sections (Scope, Cut Tokens, Core Shapes, Button Pattern, Tuning Knobs, Quick Checks); just below 5 because the large token/shell reference blocks could optionally live in a referenced file for a cleaner overview.

4 / 5

Total

17

/

20

Passed

Description

87%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.

The description is strong: third-person voice, concrete actions, an explicit 'Use when...' trigger, and a distinct niche that contrasts with rounded-corner styling. The only minor gap is that the core action is one operation applied to several surfaces rather than a broader menu of capabilities.

DimensionReasoningScore

Specificity

Lists several concrete actions ('Apply diagonal-cut corners and chamfered edges') across named surfaces (buttons, cards, panels, container shells); not quite 5 because the action set is essentially one operation applied to multiple targets rather than multiple distinct operations.

4 / 5

Completeness

Explicitly answers 'what' (apply diagonal-cut corners/chamfered edges to named surfaces) and 'when' with a concrete 'Use when...' clause listing precise geometric framing, sci-fi UI surfaces, and clipped-corner controls.

5 / 5

Trigger Term Quality

Strong natural terms users would say ('diagonal-cut corners', 'chamfered edges', 'sci-fi UI', 'clipped-corner controls'); a few synonyms or file-type-style variants are missing, keeping it just below comprehensive.

4 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (engineered/chamfered diagonal geometry) explicitly contrasted against 'rounded pills or plain rectangles', making conflict with adjacent styling skills minimal.

5 / 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
MengTo/Skills
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.