Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →hashgraph-online/hero-ui-craft
Use when Codex works on any front-end implementation, UI polish, dashboard, product screen, internal tool, design system, React component, Tailwind CSS v4 surface, HeroUI React v3 setup, shadcn-to-HeroUI migration, or any task that should use HeroUI. Enforces official HeroUI context, Pencil/Figma component-detail visual approval before coding, HeroUI component selection, and final visual/accessibility verification.
Passed 16 of 19 test cases with the skill, and 8 of 19 without it.
and 7 more in the full report
10 fixed9 passed either way3 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 10 test cases the skill fixed. Same model, same prompt, with and without the skill.
When initiating visual canvas inspection inside the Pencil design editor tool during visual confirmation planning, which parameter flag must be set when calling `get_editor_state`?
| Checked | Without skill | With skill |
|---|---|---|
| The response specifies calling `get_editor_state(include_schema: true)` | Missed | Passed |
The instructions your model reads when the skill loads.
Use this skill as the front-end craft layer for HeroUI React v3 and Tailwind CSS v4 work.
Core principle: front-end quality starts before design. Requirements are a layered, testable contract, not one sentence.
Do not write or edit front-end implementation code until all of these are true:
references/official/react/AGENTS.md first.npx heroui-cli@latest agents-md --react --output AGENTS.md when working in a target project, or explained why the target is not a React web project..heroui-docs/react/, the official heroui-react MCP server, or the bundled llms-components.txt docs to check the selected components.docs/full-stack-development/requirements/<feature-slug>/.00-stage.json and kept it current. This stage file is the source of truth for whether the task is in rough intake, requirements, visual design, visual approval, implementation, or verification.00-stage.json has approvals.requirementsApproved: true or currentStage: "visual-design-ready" after user confirmation of the requirement workspace.review_requirement_workspace_stage and it passed for targetStage: "visual-design" before Pencil/Figma visual work.review_requirement_workspace_stage and it passed for targetStage: "implementation" before writing implementation code.If any item is missing, stop before implementation and complete the missing step.
Inspect the project.
@/components/ui/* is present, treat the task as a migration boundary and avoid adding new shadcn usage.Load official HeroUI context.
references/official/react/AGENTS.md, the official HeroUI React v3 agents-md output bundled with this plugin.references/official/react/llms.txt as the quick index.references/official/react/llms-components.txt for component selection and props.references/official/react/llms-patterns.txt for recipes, composition, styling, and theming.references/official/react/llms-full.txt only for deep lookup.npx heroui-cli@latest agents-md --react --output AGENTS.md to sync project-local docs too.test cases passed, vs 8 / 19 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.