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.

74

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

85%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, lean instruction skill: a sequenced canonical path with validation checkpoints, copy-ready templates, and clean one-level-deep references that all resolve to real files. It sits just below the top anchor on conciseness and actionability because its reusable units are prose templates and abstract concepts rather than directly executable code.

Suggestions

Tighten abstract terms like 'greenfield composition', 'component-system collapse', and 'load-bearing interaction' with a one-line concrete gloss so the reader reads them rather than inferring them, which would lift conciseness toward the top anchor.

Add at least one concrete, copy-pasteable example of a collapse pass on a real markup snippet (before/after) to convert the prose templates into directly executable guidance.

Optional: include a one-line 'what good output looks like' example for the design-read template so the actionable unit is fully self-contained.

DimensionReasoningScore

Conciseness

The body is dense and assumes competence — no padding explaining what Svelte or Tailwind is — but recurring conceptual phrasing like 'greenfield composition', 'component-system collapse', and 'load-bearing interaction' is abstract enough to leave a reader inferring intent rather than reading it directly, keeping it just below the lean top anchor.

4 / 5

Actionability

It gives a concrete 7-step path, copy-ready txt templates (design read, collapse pass, pre-flight checklist), and exact prohibitions ('Does not import from packages/ui/src'), which is highly actionable for an instruction-only skill; it stops short of 5 because the actionable units are prose templates rather than executable code or commands.

4 / 5

Workflow Clarity

A clearly numbered 7-step sequence with explicit validation checkpoints — step 6 'Verify visible, responsive, and interactive results in the browser' and step 7 'Run UI pre-flight before final handoff or committing the change' — plus a dedicated pre-flight reference for feedback and exception handling.

5 / 5

Progressive Disclosure

A concise overview with well-signaled, one-level-deep references, each gated by a concrete trigger condition (e.g. 'Read references/comparable-apps.md when the design question depends on category fit'), and all referenced files exist in ./references/.

5 / 5

Total

18

/

20

Passed

Description

100%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 exemplary: it states a concrete, multi-action capability, supplies natural trigger phrases, answers both what and when explicitly, and carves a distinctive niche with a clear non-trigger boundary. It hits the top anchor on every dimension.

DimensionReasoningScore

Specificity

Lists multiple concrete actions across the full lifecycle — 'Design, explore, implement, polish, redesign, and review' plus 'co-designing a screen', 'choosing @epicenter/ui components', 'changing packages/ui', and 'replacing class-heavy markup' — for comprehensive coverage.

5 / 5

Completeness

Explicitly answers both 'what' (the design-to-review lifecycle of Epicenter interfaces) and 'when' via a concrete 'Use when...' clause, and adds a 'Not for...' boundary — matching the anchor that requires both with concrete trigger phrases.

5 / 5

Trigger Term Quality

Natural user phrasing is densely present — 'asking what do other apps do', 'comparing UI directions or comparable apps', 'turning a rough feature idea into a buildable Svelte surface' — covering the natural ways a user would request this skill.

5 / 5

Distinctiveness Conflict Risk

Tightly scoped to Epicenter interfaces and @epicenter/ui with explicit delegation boundaries and a 'Not for a tiny CSS-only repair unless it reveals a broader pattern' carve-out, giving it a clear niche with minimal conflict risk.

5 / 5

Total

20

/

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.

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.