CtrlK
BlogDocsLog inGet started
Tessl Logo

ui-design

Design, explore, implement, polish, redesign, and review Epicenter interfaces from product direction through component-system collapse. Use when co-designing a screen, asking "what do other apps do", comparing UI directions or comparable apps, turning a rough feature idea into a buildable Svelte surface, choosing @epicenter/ui components, changing packages/ui, or replacing class-heavy markup and local interface primitives. Not for a tiny CSS-only repair unless it reveals a broader pattern.

79

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.

A well-structured design-judgment skill: lean, concrete checklists and questions, a sequenced workflow with verification checkpoints, and clean one-level-deep references to real bundle files. No significant weaknesses relative to the rubric anchors.

DimensionReasoningScore

Conciseness

The ~115-line body assumes Claude's competence, explains no basic concepts, and keeps every section action-oriented; prose is lean with only minor abstract flourish that still drives decisions.

3 / 3

Actionability

Instruction-only guidance is concrete and specific: an enumerated state surface (loading, empty, error, disabled, pending, selected, filter-empty), four diagnostic collapse questions, a delegation table, and a design-read template.

3 / 3

Workflow Clarity

The seven-step Canonical Path is clearly sequenced with explicit validation checkpoints (browser verification in step 6, pre-flight in step 7), and UI work is not destructive/batch so the absence of a fix-retry loop is not penalized.

3 / 3

Progressive Disclosure

A clear overview points one level deep to five real references (direction-discovery, comparable-apps, component-system, anti-slop-tells, preflight), each signaled with when to read it; no nested references and easy navigation.

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.

A strong description: concrete actions, explicit trigger guidance, third-person voice, and a clear exclusion clause. It matches the rubric's good examples closely with no notable weaknesses.

DimensionReasoningScore

Specificity

"Design, explore, implement, polish, redesign, and review" lists six concrete actions rather than vague verbs, matching the multiple-specific-actions anchor.

3 / 3

Completeness

It states what the skill does (six named actions) and gives an explicit "Use when..." trigger clause, answering both what and when.

3 / 3

Trigger Term Quality

Natural user phrasings like "co-designing a screen", "what do other apps do", "comparable apps", "buildable Svelte surface", and "@epicenter/ui components" give strong coverage of terms users would actually say.

3 / 3

Distinctiveness Conflict Risk

A clear Epicenter/component-system niche with distinct triggers, plus the "Not for a tiny CSS-only repair..." exclusion, makes conflict with other skills unlikely.

3 / 3

Total

12

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 1 suspicious

Warning

Total

15

/

16

Passed

Repository
EpicenterHQ/epicenter
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.