CtrlK
BlogDocsLog inGet started
Tessl Logo

stave-design-system

Apply Stave's desktop-first design system when a task changes UI, layout, theme, dialogs, sidebars, empty states, settings, prompt input, or other visual UX in this repo. Use for prompts like "디자인", "UI", "redesign", "polish", "sidebar", "dialog", "settings", or whenever a new interface pattern is introduced. Always use existing shadcn components and the radix-vega preset first — never hand-roll a control that shadcn already provides.

67

Quality

81%

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

73%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 well-structured, highly actionable design-system skill with an excellent workflow and validation checklist. Its main flaw is redundancy — the component-first mandate and several rules are repeated across the inventory, workflow, Do/Don't, and QA sections — which inflates token cost without adding information.

Suggestions

State the component-first rule once in the Component-First section, and reduce the Do/Don't lists and QA Checklist to only items not already covered there (the QA checklist can reference the rule instead of restating it).

Replace the full component inventory table with a pointer to 'src/components/ui/index.ts' as the source of truth, keeping only the need→component decision map inline.

Add one short JSX snippet showing a token-based, variant-driven shadcn usage to make the styling rules ('className overrides, not source edits') concrete.

DimensionReasoningScore

Conciseness

The component-first rule is stated five times — '### Component-First Rule (MANDATORY)', Implementation Workflow steps 1–2 ('Check the component inventory', 'If a shadcn component is missing, generate it'), the Do list ('use existing shadcn components for every standard control', 'generate missing shadcn components via CLI'), the Don't list ('do not hand-write a `<select>`...'), and the QA Checklist ('Does the change use shadcn components for every standard control?'). Do/Don't/QA largely restate Core Visual Rules and Interaction Rules. This is more than the 'minor instances' of anchor 4 — a consolidation pass would cut roughly a third of the body — but the writing itself is directive, not padded explanation, so it is not anchor 2.

3 / 5

Actionability

Concrete and executable for a design skill: a need→component decision map ('Need a boolean toggle? → Use `Switch`'), an exact install command ('bunx --bun shadcn@latest add <component> --yes'), real paths ('src/components/layout/settings-dialog-sections.tsx', 'src/globals.css'), and specific utilities ('.sidebar-liquid-glass', 'h-7/h-8', 'supports-backdrop-filter:backdrop-blur-xl'). Not a 5 because there is no code example showing token/component usage in an actual JSX snippet, and some rules remain judgment calls ('Keep radii moderate and purposeful').

4 / 5

Workflow Clarity

The 8-step 'Implementation Workflow' is clearly sequenced with concrete commands, includes explicit validation steps ('Check the result in both light and dark themes', 'Check at desktop width and at narrower split-panel widths'), and is capped by a dedicated 'QA Checklist' that functions as a verification gate including doc-sync checks. This is not a destructive/batch skill, so no cap applies, and the checklist-plus-checkpoint structure matches the anchor-5 example's explicit validation pattern.

5 / 5

Progressive Disclosure

Well-sectioned with clear headers, no nested references, and all guidance one level deep. Not a 5 because at ~140 lines it exceeds the simple-skill exception, and the full 'shadcn Component Inventory' table plus some rule detail (e.g. the long Do/Don't lists) duplicate information that 'src/components/ui/' and 'src/components/ui/index.ts' already expose — content that could move to a reference file. Not a 3 because structure and navigation are genuinely good, not merely present.

4 / 5

Total

16

/

20

Passed

Description

88%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 strong description: it names the design system, scopes it to the repo, enumerates the surfaces it covers, gives an explicit 'Use for prompts like' trigger list including Korean terms, and states a hard component-first policy. The only weakness is missing a few natural trigger synonyms (design system, theme, dark mode).

DimensionReasoningScore

Specificity

Concrete actions are explicit: 'Apply Stave's desktop-first design system', 'Always use existing shadcn components and the radix-vega preset first', 'never hand-roll a control that shadcn already provides', with a named surface list (dialogs, sidebars, empty states, settings, prompt input). Not a 4 because the actions, scope, and constraints are all specific rather than leaving coverage gaps; not lower because this is the comprehensive end of the anchor set.

5 / 5

Completeness

Both halves are explicit: what — 'Apply Stave's desktop-first design system' with a specific constraint policy; when — 'when a task changes UI, layout, theme, dialogs, sidebars... in this repo' plus 'Use for prompts like...'. Matches the anchor-5 example's structure of concrete what followed by an explicit trigger clause with named phrases.

5 / 5

Trigger Term Quality

Good natural-term coverage: 'UI', 'redesign', 'polish', 'sidebar', 'dialog', 'settings', and the Korean '디자인'. Not a 5 because common variations users would say are missing — 'design system', 'theme', 'dark mode', 'empty state', 'CSS' — which the anchor-5 example (synonyms and file extensions) expects; not a 3 because the present terms are ones users naturally say in this domain.

4 / 5

Distinctiveness Conflict Risk

The product name ('Stave's'), repo scoping ('in this repo'), and preset name ('radix-vega') create a clear niche with distinct triggers. Not a 5 because generic terms like 'UI', 'polish', and 'redesign' could also fire general frontend/design skills; well above a 3 because the repo-local and brand-specific framing makes wrong-skill triggering unlikely.

4 / 5

Total

18

/

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

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository
sendbird/stave
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.