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.

80

Quality

100%

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

100%

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

The content is lean and fully actionable, providing complete executable CSS for corner-cutting patterns with no concept fluff. It is well-organized into clear sections with validation-oriented "Quick Checks" and "Avoid" guidance appropriate to a single-purpose styling skill.

DimensionReasoningScore

Conciseness

The body is lean with no padding or explanation of concepts Claude already knows; every section (tokens, shapes, patterns, tuning, avoid, quick checks) earns its place and assumes competence.

3 / 3

Actionability

Provides complete, copy-paste-ready CSS including clip-path polygon definitions, design tokens, bordered shell and button patterns, and focus-visible states, all directly executable.

3 / 3

Workflow Clarity

As a single-purpose pattern-reference skill with no destructive multi-step operation, the unambiguous organization plus "Quick Checks" and "Avoid" sections serve as clear validation guidance, meeting the simple-skill allowance for a top score.

3 / 3

Progressive Disclosure

No bundle files are present (references/scripts/assets are empty), and the skill is well-organized into focused sections; per the simple-skill guidance, well-organized sections alone justify a top score without external references.

3 / 3

Total

12

/

12

Passed

Description

100%

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 concise, specific, and complete, naming concrete actions and surface types plus an explicit "Use when" trigger with natural design vocabulary. It carves a distinct niche that is unlikely to conflict with other styling skills.

DimensionReasoningScore

Specificity

"Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells" lists multiple concrete actions across named surface types, matching the anchor for listing several specific concrete actions.

3 / 3

Completeness

It explicitly answers what ("Apply diagonal-cut corners and chamfered edges to buttons, cards, panels, and container shells") and when ("Use when a design needs precise geometric framing, sci-fi UI surfaces, clipped-corner controls...") with an explicit trigger clause.

3 / 3

Trigger Term Quality

Natural design vocabulary like "sci-fi UI surfaces", "clipped-corner controls", "chamfered edges", and "rounded pills or plain rectangles" covers terms a user would actually say, rather than technical jargon.

3 / 3

Distinctiveness Conflict Risk

The geometric corner-cutting niche is clearly framed against rounded pills and plain rectangles, making it unlikely to trigger for unrelated styling skills.

3 / 3

Total

12

/

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