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.
99
100%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Passed
No known issues
Quality
Discovery
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.
This is an excellent skill description that hits all the marks. It provides comprehensive coverage of capabilities, explicit trigger conditions with natural language examples, and project-specific context that makes it highly distinctive. The description effectively balances thoroughness with clarity.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'build or modify a dashboard page or component', 'style or layout website pages', 'create new React components', 'add pages to the dashboard', 'fix visual bugs'. Also specifies coverage areas like 'color tokens, typography, component API, page structure, accessibility, keyboard shortcuts, animations'. | 3 / 3 |
Completeness | Clearly answers both what (design system for React dashboard and Docusaurus website, covering tokens, typography, components, etc.) AND when with explicit 'Use this skill whenever you:' clause followed by detailed trigger scenarios. | 3 / 3 |
Trigger Term Quality | Excellent coverage of natural terms users would say: 'fix the styling', 'add a card', 'dashboard', 'component', 'visual bugs', 'CSS', 'React components', plus specific paths like 'ui/src/' and 'website/' that would appear in user requests. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive with clear niche: specifically targets 'Skillshare frontend design system' with explicit paths (ui/, website/), named technologies (React, Docusaurus), and project-specific context that would not conflict with generic frontend or styling skills. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
100%Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.
This is an exemplary skill file that efficiently documents a complex dual-frontend design system. It excels at providing concrete, actionable guidance through dense tables, specific component APIs, and clear decision frameworks. The anti-patterns section and checklist provide excellent guardrails for consistent implementation.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | Extremely efficient use of tokens with dense tables, code snippets, and checklists. No unnecessary explanations of concepts Claude would know—jumps straight to project-specific tokens, components, and patterns. | 3 / 3 |
Actionability | Highly actionable with concrete Tailwind classes, component APIs with exact props, executable code patterns, and specific file paths. The component library table and page structure template are copy-paste ready. | 3 / 3 |
Workflow Clarity | Clear page structure template with mandatory order, decision tables for choosing patterns (stats, status, lists, buttons), and a comprehensive pre-submission checklist that serves as validation steps. | 3 / 3 |
Progressive Disclosure | Well-organized with clear sections for each frontend system, references to companion skill and external style guide, and appropriate use of tables to compress information. Content is appropriately split between overview and detailed reference. | 3 / 3 |
Total | 12 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
- Repository
- runkids/skillshare
- Commit
053ecb4
- 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.