CtrlK
BlogDocsLog inGet started
Tessl Logo

skillshare-ui-website-style

Skillshare frontend design system for the React dashboard (ui/) and Docusaurus website (website/). Use this skill whenever you: build or modify a dashboard page or component in ui/src/, style or layout website pages or custom CSS in website/, create new React components for the dashboard, add pages to the dashboard, fix visual bugs in either frontend, or need to know which design tokens, components, or patterns to use. This skill covers color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations, and anti-patterns for both frontends. Even if the user just says "fix the styling" or "add a card", use this skill to ensure consistency.

73

Quality

91%

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

88%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-organized, lean, table-driven design-system reference with a clear page-build workflow and a validation checklist. The two weakest dimensions are actionability (a few terse component APIs) and progressive disclosure (heavy inlined reference content).

Suggestions

Fill in the API for terse component entries (e.g. StatusBadge, FilterTagInput, Skeleton/PageSkeleton, Toast/useToast) with their actual props so every row in the component library table is equally actionable.

Consider moving the large token/component reference tables into references/STYLE_GUIDE.md (or a dedicated references/COMPONENTS.md) and keeping SKILL.md as a tighter overview that links to them, reducing inlined bulk while preserving one-level-deep navigation.

DimensionReasoningScore

Conciseness

The body is a dense, table-driven reference with no concept over-explanation (it never explains what React, Tailwind, or Docusaurus are) and assumes Claude's competence, so nearly every token earns its place.

5 / 5

Actionability

Provides copy-paste-ready templates (the mandatory page-structure JSX and the react-query data-fetching snippet) and concrete component APIs with props, but a few component entries are terse and lack full APIs (e.g. "StatusBadge — Status display", "FilterTagInput — Tag-based filter input").

4 / 5

Workflow Clarity

The "Page Structure (mandatory order)" section gives a clear build sequence and the "Checklist Before Submitting" section is an explicit validation checkpoint, satisfying the checklist-for-complex-processes anchor; no destructive/batch feedback-loop cap applies.

5 / 5

Progressive Disclosure

A clearly signaled one-level reference to references/STYLE_GUIDE.md (verified present) plus pointers to source files gives good navigation, but a large volume of token and component-API reference is inlined in the body rather than split into a deeper file.

4 / 5

Total

18

/

20

Passed

Description

95%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, specific description that clearly states both capabilities and triggering conditions across two frontends. Its only weakness is second-person voice ("you:"), which the rubric penalizes on specificity.

DimensionReasoningScore

Specificity

Lists multiple concrete actions ("build or modify a dashboard page or component in ui/src/", "style or layout website pages or custom CSS", "create new React components", "fix visual bugs") with comprehensive coverage, but the second-person phrasing ("Use this skill whenever you:") triggers the rubric's one-point specificity penalty.

4 / 5

Completeness

Explicitly answers both what ("design system... covers color tokens, typography, component API, page structure, accessibility...") and when ("Use this skill whenever you... Even if the user just says 'fix the styling' or 'add a card'") with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive natural-term coverage including casual phrases users actually say ("fix the styling", "add a card") alongside domain terms and path-based triggers, with synonyms across both frontends.

5 / 5

Distinctiveness Conflict Risk

Clear niche scoped to two named frontends (ui/ and website/) with distinct triggers, and the companion-skill boundary is explicit ("This skill handles what components and tokens to use"), giving minimal conflict risk.

5 / 5

Total

19

/

20

Passed

Validation

87%

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

Validation14 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

metadata_field

'metadata' should map string keys to string values

Warning

Total

14

/

16

Passed

Repository
runkids/skillshare
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.