CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-ui-design

Design or implement production-ready frontend screens and components. Use this skill when UI build, redesign, accessibility, layout, or state coverage is needed.

Quality

75%

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 ./Skills/frontend-ui/frontend-ui-design/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

62%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 lean, well-sectioned instruction-style skill with an exemplary sequenced workflow, explicit validation gates, and fix-and-rerun feedback loops. It is weakened by verbatim section duplication, guidance that stays too abstract to execute directly, and a Progressive Disclosure section whose reference paths don't match the actual bundle files.

Suggestions

Deduplicate the body: merge the verbatim-duplicate Anti-Patterns section into Avoid, and consolidate the repeated failed-gate language from Constraints, Validation, and Failure Mode into one authoritative statement.

Make guidance executable: specify concrete verification steps (e.g., the actual browser/screenshot command or accessibility checks to run in step 5) instead of "Use browser or screenshot verification" and "Run the smallest repo command that exercises changed behavior".

Fix the Progressive Disclosure references to point at files that actually exist in the bundle (references/contract.yaml, references/evals.yaml, references/task-profile.json) and flatten the "Archived full context" archive pointer, which adds a second level of nesting.

DimensionReasoningScore

Conciseness

The bullet style is mostly efficient and avoids explaining known concepts, but the "Avoid" and "Anti-Patterns" sections repeat the same three bullets verbatim ("Do not own backend-only work", "Do not own token-governance...", "Do not invent audience, task, or tone..."), and failed-gate language recurs nearly verbatim across Constraints, Validation, and Failure Mode — more than the minor trimming of a 4, less severe than the padding of a 2.

3 / 5

Actionability

There is some concrete guidance — named states ("empty, loading, error, mobile, or keyboard states"), concrete user-request examples, and specific failure-handling rules — but no executable commands or concrete verification methods, and steps like "Implement or hand off using repo-native patterns" and "Run the smallest repo command that exercises changed behavior" stay high-level, leaving key details missing.

3 / 5

Workflow Clarity

The six-step workflow is clearly sequenced with an explicit validation step ("Verify accessibility, mobile/desktop fit, and no overlapping text"), a dedicated Validation section, and explicit fix-and-rerun feedback loops ("fix the smallest layout, state, or accessibility issue within implementation scope and rerun the same check"; "Rerun the affected check after a repair"), plus gate-stopping ("Stop dependent actions and claims at a failed gate") — matching the top anchor.

5 / 5

Progressive Disclosure

The body itself is well-sectioned, but scored against the actual bundle: the "Progressive Disclosure" section points to paths like "Infrastructure/references/openai-cookbook-expert-lens-pack.md" that do not exist in this bundle's references/ directory, while the real bundle files (references/contract.yaml, references/evals.yaml, references/task-profile.json) are never referenced, and the "Archived full context" pointer adds a second nesting level — references are present but do not resolve, fitting the some-structure anchor rather than the well-signaled 4.

3 / 5

Total

14

/

20

Passed

Description

78%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 solid description that explicitly answers both what and when with natural trigger terms and a clearly bounded frontend-UI niche. Its main gaps are limited capability enumeration and a few missing common trigger synonyms.

Suggestions

Enumerate more concrete capabilities in the what-clause, e.g., 'Design or implement production-ready frontend screens and components, plan empty/loading/error states, and verify responsive and accessible layouts.'

Add common trigger variations users naturally say — 'frontend', 'responsive', 'fix the UI', 'component/screen' — to the when-clause to broaden trigger coverage.

DimensionReasoningScore

Specificity

"Design or implement production-ready frontend screens and components" names the domain and two concrete actions, matching the 1-2-actions anchor; it is not a 4 because coverage stops at two verbs with no finer-grained capabilities (e.g., state-coverage planning, responsive verification), and not a 2 because the actions are concrete rather than generic.

3 / 5

Completeness

It clearly answers what ("Design or implement production-ready frontend screens and components") and when ("Use this skill when UI build, redesign, accessibility, layout, or state coverage is needed") with concrete trigger phrases, matching the top anchor; the when-clause is explicit, not weakly implied, ruling out 4.

5 / 5

Trigger Term Quality

The when-clause surfaces natural user terms — "UI build, redesign, accessibility, layout, or state coverage" — giving good keyword coverage; it falls short of 5 because common variations users actually say ("frontend", "make it responsive", "fix the UI", "component") are absent.

4 / 5

Distinctiveness Conflict Risk

The frontend UI production-readiness niche is mostly distinct with clear triggers, but a 5 is not warranted given minor overlap risk with closely related skills (design-system/token governance, general web build skills) that share terms like "layout" and "accessibility".

4 / 5

Total

16

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

jscraik/Agent-Skills

Path

Skills/frontend-ui/frontend-ui-design/SKILL.md

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.