CtrlK
BlogDocsLog inGet started
Tessl Logo

framed-tech-dark-border-gradient

Create a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.

56

Quality

63%

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

Fix and improve this skill with Tessl

tessl review fix ./agent-skills/web-design/framed-tech-dark-border-gradient/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

68%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 a well-structured, concise design-direction reference with concrete, actionable visual guidance, undermined mainly by an empty Workflow section that leaves application sequencing implicit.

Suggestions

Fill the '## Workflow' section with a short ordered sequence (define shell → set palette → place panels → apply border-gradient motifs → add line-led interactive states) or remove the empty header.

Add a concrete before/after or component-level example (e.g. a border-gradient card markup snippet) to lift actionability from guidance to copy-paste ready.

Consider a single 'Quick reference' block summarizing the signature motifs so the key moves are discoverable at a glance.

DimensionReasoningScore

Conciseness

The body is lean and organized into purposeful bullet sections with no padding of concepts Claude already knows; a few phrases ('make the whole composition feel engineered', 'reads as part of one measured container system') could be trimmed without losing meaning.

4 / 5

Actionability

Guidance is concrete and specific for a design direction — 'one-pixel gradient borders', 'vertical rails that extend slightly beyond the main shell', 'tiny corner squares', 'left-edge bar' active rows — giving mostly executable design instructions with only minor gaps.

4 / 5

Workflow Clarity

The '## Workflow' section is an empty header and guidance is spread across Scope/Visual target/Implementation rather than sequenced; while the skill is single-purpose, the missing workflow body leaves the application sequence implicit.

3 / 5

Progressive Disclosure

Content is well-organized into clearly labeled sections (Scope, Visual target, Implementation guidance, Recommended patterns, Tuning knobs, Avoid) with no bundle files needed and no nested references; the empty Workflow header is the main organization gap.

4 / 5

Total

15

/

20

Passed

Description

58%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 specific and distinctive about the design direction it produces, but it omits any 'Use when...' trigger guidance, so it answers 'what' clearly without answering 'when'.

Suggestions

Add an explicit trigger clause, e.g. 'Use when the interface should feel premium, technical, dark, and engineered around visible boundaries.'

Include natural user-facing terms and synonyms (dark mode, technical UI, dashboard, control panel) alongside the specialized design vocabulary.

Frame the features as concrete actions or outcomes a user can recognize, rather than only as attributes of a single 'Create' verb.

DimensionReasoningScore

Specificity

The description names the domain and lists several concrete design features — 'border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere' — but these are attributes of a single 'Create' action rather than multiple discrete actions, leaving minor coverage gaps.

4 / 5

Completeness

It gives a clear 'what' (create a framed dark technical design system) but no 'when' / 'Use when...' trigger clause, which per the rubric caps completeness at 3.

3 / 5

Trigger Term Quality

Terms like 'dark technical design system', 'border-gradient', and 'mono utility labeling' are relevant but specialized; common natural phrasings a user would actually say (e.g. 'dark mode', 'dashboard', 'tech UI') and synonyms are missing.

3 / 5

Distinctiveness Conflict Risk

The framed-border-gradient / monochrome aesthetic is a fairly specific niche with minimal conflict risk, though it could overlap with other generic dark-mode or design-system skills.

4 / 5

Total

14

/

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.