CtrlK
BlogDocsLog inGet started
Tessl Logo

heroui-react

HeroUI v3 React component library (Tailwind CSS v4 + React Aria). Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs. Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles.

66

Quality

79%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Medium

Suggest reviewing before use

Fix and improve this skill with Tessl

tessl review fix ./skills/heroui-react/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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, actionable guide that leverages progressive disclosure effectively via real scripts and MDX URLs. The main weakness is conciseness: duplicate installation paths and repeated fetch-docs admonitions could be consolidated.

Suggestions

Consolidate the two installation sections (the curl pipe at the top and the npm/Framework Setup section) into a single install path to remove redundancy.

State the 'fetch v3 docs before implementing' directive once in the documentation-access section instead of repeating it across multiple sections.

Add a single verification checkpoint to the framework setup (e.g., run the dev build after globals.css/layout.tsx/postcss config) to surface misconfiguration early.

DimensionReasoningScore

Conciseness

Mostly efficient but has avoidable redundancy: two installation sections (curl pipe at top plus npm install later) and 'Always fetch v3 docs before implementing' stated three times across the body.

3 / 5

Actionability

Provides executable commands (npm i, node scripts/*.mjs) and copy-paste configs (globals.css, layout.tsx, postcss.config.mjs) with a concrete Card compound example; component usage beyond Card is deferred to fetched docs.

4 / 5

Workflow Clarity

The Next.js framework setup is a clear numbered sequence with a concrete command per step; no explicit validation checkpoints, but installation/setup is not a destructive or batch operation so the cap does not apply.

4 / 5

Progressive Disclosure

SKILL.md is an overview that defers detail to one-level-deep, clearly signaled references — real scripts/*.mjs bundle files (verified present) and concrete kebab-case MDX URLs — with content appropriately split into navigable sections.

5 / 5

Total

16

/

20

Passed

Description

87%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, third-person description that explicitly states both capabilities and use-when triggers with concrete package names and synonyms. Minor gaps in component coverage and natural task phrases keep specificity and trigger quality at 4 rather than 5.

DimensionReasoningScore

Specificity

Lists several concrete actions ('creating Buttons, Modals, Forms, Cards; installing @heroui/react; configuring dark/light themes with oklch variables; or fetching component docs'), but the component list is a sample rather than comprehensive.

4 / 5

Completeness

Explicitly answers both what ('HeroUI v3 React component library (Tailwind CSS v4 + React Aria)') and when ('Use when building UIs with HeroUI — creating Buttons, Modals, Forms, Cards; ...') with concrete trigger phrases.

5 / 5

Trigger Term Quality

Good keyword coverage with explicit synonyms ('Keywords: HeroUI, Hero UI, heroui, @heroui/react, @heroui/styles') plus component names; a few natural task phrases are absent.

4 / 5

Distinctiveness Conflict Risk

Clear v3-specific niche with package-name and brand triggers (@heroui/react, @heroui/styles, HeroUI v3), giving minimal conflict risk with other skills.

5 / 5

Total

18

/

20

Passed

Validation

100%

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

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
heroui-inc/heroui
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.