New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Hero UI Craft

by hashgraph-online in hashgraph-online/awesome-codex-plugins

A skill your agent uses 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…

Apache-2.0Auto-check passedFrontend & Design

Install Hero UI Craft

skills CLI
$ npx skills add hashgraph-online/awesome-codex-plugins --skill hero-ui-craft -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install hashgraph-online/awesome-codex-plugins hero-ui-craft --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/hashgraph-online/awesome-codex-plugins.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/kevin592/codex-full-stack-workflow/skills/hero-ui-craft .claude/skills/hero-ui-craft && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hero-ui-craft
GitHub stars
1.3k
Token cost
~3.4k tokens
SKILL.md length
1,542 words
Files
1,651 (incl. references)
Skills in repo
716
Repo updated
First seen
Licence
Apache-2.0

At a glance

A skill your agent uses 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…

  • Works in 12 steps: You inspected the target project. → You read the bundled official HeroUI… → You synced project-local HeroUI context… → …
  • Codex works on any front-end implementation
  • SKILL.md covers Non-Negotiable Gate, Workflow, Hard Rules and When To Read References, plus 1 more section
  • Calls npx

What it does

Hero UI Craft is an agent skill from hashgraph-online/awesome-codex-plugins. 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.

Its SKILL.md is about 3.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1659 other files, including reference files (for example `references/hero-ui-official-workflow.md`).

It sits in Frontend & Design, covering Design systems, UI design and React components. It works with React, Figma, Tailwind CSS and shadcn/ui. The repository describes itself as: A curated list of awesome OpenAI Codex / ChatGPT plugins, skills, and resources. The 1 Codex Marketplace. See live plugins at: https://hol.org/plugins/best-codex-plugins. The licence is Apache-2.0.

When your agent uses it

  • Codex works on any front-end implementation
  • React component
  • Tailwind CSS v4 surface
  • HeroUI React v3 setup

Example prompts

  • “/hero-ui-craft”

Requirements

  • Node.js

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

  1. You inspected the target project.
  2. You read the bundled official HeroUI React references/official/react/AGENTS.md first.
  3. You synced project-local HeroUI context with npx heroui-cli@latest agents-md --react --output AGENTS.md when working in a target project…
  4. You used .heroui-docs/react/, the official heroui-react MCP server, or the bundled llms-components.txt docs to check the selected…
  5. You created or updated the fixed project requirement workspace at docs/full-stack-development/requirements//.
  6. You wrote 00-stage.json and kept it current. This stage file is the source of truth for whether the task is in rough intake, requirements…
  7. You completed the Requirement Pipeline inside that fixed workspace: 粗需求 -> 业务需求 -> 产品需求 -> 信息架构需求 -> 交互需求 -> 状态需求 -> 视觉需求 -> 工程需求 -> 验收需求.
  8. 00-stage.json has approvals.requirementsApproved: true or currentStage: "visual-design-ready" after user confirmation of the requirement…
  9. You ran review_requirement_workspace_stage and it passed for targetStage: "visual-design" before Pencil/Figma visual work.
  10. You mapped every visible UI need to an official HeroUI component or documented a verified HeroUI gap.
  11. You created or updated Pencil/Figma visuals before coding.
  12. The visuals include full desktop, full mobile, component-detail, and state-matrix images.

What it can do on your machine

Read from SKILL.md and the folder at commit 3e1456a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Hero UI Craft loads about 3.4k tokens when it runs, and up to ~2.9M if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 1,542 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~108
When it runs · the whole SKILL.md, loaded when a task matches
~3.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.9M

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from hashgraph-online/awesome-codex-plugins at commit 3e1456a, republished under its Apache-2.0 licence (© hashgraph-online). 1,542 words, ~3,390 tokens.

Download SKILL.mdSave it as .claude/skills/hero-ui-craft/SKILL.md (or your agent's skills folder). This skill also uses 1650 other files; get the full folder from GitHub.
name
hero-ui-craft
description
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.

hero-ui-craft

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.

Non-Negotiable Gate

Do not write or edit front-end implementation code until all of these are true:

  1. You inspected the target project.
  2. You read the bundled official HeroUI React references/official/react/AGENTS.md first.
  3. You synced project-local HeroUI context with 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.
  4. You used .heroui-docs/react/, the official heroui-react MCP server, or the bundled llms-components.txt docs to check the selected components.
  5. You created or updated the fixed project requirement workspace at docs/full-stack-development/requirements/<feature-slug>/.
  6. You wrote 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.
  7. You completed the Requirement Pipeline inside that fixed workspace: 粗需求 -> 业务需求 -> 产品需求 -> 信息架构需求 -> 交互需求 -> 状态需求 -> 视觉需求 -> 工程需求 -> 验收需求.
  8. 00-stage.json has approvals.requirementsApproved: true or currentStage: "visual-design-ready" after user confirmation of the requirement workspace.
  9. You ran review_requirement_workspace_stage and it passed for targetStage: "visual-design" before Pencil/Figma visual work.
  10. You mapped every visible UI need to an official HeroUI component or documented a verified HeroUI gap.
  11. You created or updated Pencil/Figma visuals before coding.
  12. The visuals include full desktop, full mobile, component-detail, and state-matrix images.
  13. The user approved the exported images.
  14. You ran 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.

Workflow

  1. Inspect the project.

    • Identify framework, package manager, React version, Tailwind version, CSS entry file, and existing component library.
    • If shadcn or @/components/ui/* is present, treat the task as a migration boundary and avoid adding new shadcn usage.

  2. Load official HeroUI context.

    • First read references/official/react/AGENTS.md, the official HeroUI React v3 agents-md output bundled with this plugin.
    • Use references/official/react/llms.txt as the quick index.
    • Use references/official/react/llms-components.txt for component selection and props.
    • Use references/official/react/llms-patterns.txt for recipes, composition, styling, and theming.
    • Use references/official/react/llms-full.txt only for deep lookup.
    • In the target project, prefer npx heroui-cli@latest agents-md --react --output AGENTS.md to sync project-local docs too.
    • Confirm @heroui/react and @heroui/styles are installed or plan installation.
    • Confirm CSS import order: @import "tailwindcss"; before @import "@heroui/styles";.
    • Use the official HeroUI MCP server heroui-react to inspect component docs, props, source styles, and theme variables.

  3. Create the requirement workspace before Pencil/Figma.

    • The user only needs to provide a rough goal, business context, corrections, and confirmations. Do not expect the user to already know information architecture, interaction structure, state coverage, engineering boundaries, or acceptance criteria.
    • Call generate_requirement_workspace from the rough request and write every returned file into docs/full-stack-development/requirements/<feature-slug>/ in the target project.
    • Required files: 00-stage.json, 01-rough-request.md, 02-business-requirements.md, 03-product-requirements.md, 04-information-architecture.md, 05-interaction-matrix.md, 06-state-requirements.md, 07-visual-requirements.md, 08-engineering-contract.md, 09-acceptance-contract.md, 10-visual-confirmation-plan.md, and changes/0000-initial-intake.md.
    • agent 必须起草信息架构、交互矩阵、状态需求、工程合同和验收合同；用户只负责确认、纠偏和回答聚焦问题。
    • Each Markdown file must include Agent draft, Assumptions to verify, Questions for user confirmation, and User confirmation.
    • Generated empty templates are not enough. Do not enter Pencil/Figma until the requirement workspace is drafted, user-confirmed, and 00-stage.json marks approvals.requirementsApproved: true or currentStage: "visual-design-ready".
    • Run review_requirement_workspace_stage before Pencil/Figma. If it returns blocked, keep drafting, asking focused questions, and updating the workspace.
    • Information architecture, interaction matrix, state requirements, engineering requirements, and acceptance requirements are requirement layers, not optional design extras.

  4. Plan the UI before design work.

    • Call plan_hero_ui_system for screens, redesigns, dashboards, tools, or ambiguous visual direction.
    • Call select_hero_ui_components to map product needs to official HeroUI components.
    • If the user provides TailwindUI/Tailwind Plus local material, call inspect_tailwind_ui_reference and plan_tailwind_hero_ui_adoption; use it as reference-only and translate all implementation back to HeroUI.
    • Keep operational software dense, quiet, and scannable.

  5. Produce visual confirmation before code.

    • Call plan_visual_confirmation.
    • Call plan_visual_design_orchestration before using Pencil or Figma.
    • Use Pencil or Figma.
    • With Pencil, call get_editor_state(include_schema: true) before other Pencil tools.
    • With Figma, load the required Figma skills before write operations.
    • Export images and ask the user to approve them before implementation.
    • Call review_visual_design_orchestration and review_visual_evidence before implementation.

  6. Implement with HeroUI.

    • Import components from @heroui/react.
    • Official Component First: use official HeroUI components for every UI primitive and composed product surface whenever HeroUI provides one.
    • Do not hand-write UI components, style variants, or local primitives that duplicate HeroUI components.
    • Hand-written UI is allowed only when HeroUI has no official component for the need, after checking official docs/MCP, and you must document the exception with the missing component, source checked, reason, and smallest possible local scope.
    • Use HeroUI v3 component APIs and Tailwind v4 styles.
    • Do not add HeroUIProvider for React v3. Use I18nProvider only when locale setup is required.
    • Use theme variables and semantic surfaces before raw Tailwind color families.
    • Use gap-*, not space-x-* or space-y-*.
    • Use size-* when width and height are equal.
    • Use icon buttons with tooltips where the symbol is not self-explanatory.

  7. Review and verify.

    • If the user changes or upgrades requirements, call plan_requirement_change, append the change record under docs/full-stack-development/requirements/<feature-slug>/changes/, update impacted requirement files, and 回退 00-stage.json to the earliest impacted stage.
    • Re-run review_requirement_workspace_stage after every requirement change.
    • Call review_hero_ui_quality on changed JSX/TSX/HTML/CSS.
    • Call review_hero_ui_component_graph_audit on changed TSX/JSX files.
    • Call review_visual_inspection_metrics when screenshot or image-analysis metrics exist.
    • Call review_hero_ui_docs_freshness before release when bundled official docs are used.
    • Call generate_frontend_verification_checklist before final QA.
    • Run npx heroui-cli@latest doctor when the HeroUI CLI can run in the target project.
    • Run the project's lint, typecheck, tests, build, and browser screenshots.
Show full SKILL.md (630 more words)Show less

Hard Rules

  • Do not code front-end implementation before user-approved Pencil/Figma images exist.
  • Do not start Pencil/Figma before the fixed requirement workspace exists and review_requirement_workspace_stage passes for visual design.
  • Do not write implementation before review_requirement_workspace_stage passes for implementation.
  • Do not keep requirement files only in chat or temporary output files. They must be written under docs/full-stack-development/requirements/<feature-slug>/ in the target project.
  • Do not ask the user to supply information architecture, interaction matrix, state matrix, engineering contract, or acceptance criteria from scratch. Draft them as agent-owned artifacts and ask focused confirmation questions.
  • Any 需求变更 after visual design or implementation must be recorded in changes/, must update 00-stage.json, and must regress the stage to the earliest impacted requirement layer before more design or code.
  • Do not treat information architecture, interaction matrix, state diagrams, engineering constraints, or acceptance criteria as optional. They are requirements.
  • Official Component First: Do not hand-write UI when an official HeroUI component exists.
  • Do not use Base UI, Radix UI, CVA, or local variant factories to recreate Button, Card, Badge, Input, Select, Tabs, Table, Drawer, Modal, Tooltip, Popover, Form, or other official HeroUI components.
  • Hand-written UI is only when HeroUI has no official component, and the implementation must document the exception.
  • Do not import local shadcn components such as @/components/ui/button.
  • Do not use @nextui-org/react for HeroUI v3 work.
  • Do not add HeroUIProvider for React v3 unless official docs have changed and you verified that change.
  • Do not skip HeroUI official docs/MCP checks for selected components.
  • Do not copy TailwindUI/Tailwind Plus or Catalyst source into the plugin or project; use it only as local visual reference and implement with HeroUI.
  • Do not let text overflow, overlap, or resize fixed-format controls.
  • Do not create decorative gradient orb, bokeh, or one-note color themes.
  • Do not use visible instructional text to explain basic UI controls.

When To Read References

Read references/hero-ui-official-workflow.md when setting up HeroUI, migrating from shadcn, or checking official consistency.

Read references/visual-confirmation.md when preparing Pencil/Figma images or deciding what must be shown before user approval.

Read references/requirements-to-visual-workflow.md when a front-end request starts from a rough idea, screenshot, product ask, or ambiguous workflow.

Read references/official/react/AGENTS.md before any HeroUI React front-end implementation. It is the official generated agent index and has priority over remembered HeroUI knowledge.

MCP Tools

  • generate_requirement_workspace: Use to create the fixed project requirement workspace from a rough user request.
  • review_requirement_workspace_stage: Use to block Pencil/Figma or implementation unless the fixed workspace stage passes.
  • plan_requirement_change: Use when requirements change or upgrade; records the change, identifies impacted artifacts, and regresses the stage.
  • plan_frontend_requirement_pipeline: Use for a high-level overview of the layered requirement contract.
  • generate_requirement_artifact_templates: Legacy compatibility only. Do not use as the primary gate for new work; use generate_requirement_workspace.
  • review_frontend_requirement_contract: Legacy compatibility only. Do not use as the primary gate for new work; use review_requirement_workspace_stage.
  • plan_hero_ui_system: Use before implementing a substantial HeroUI UI surface.
  • list_hero_ui_agent_docs: Use to see bundled official HeroUI React agent docs and their priority order.
  • get_hero_ui_agent_doc: Use with doc: "agents" before implementation; use other docs only as needed.
  • select_hero_ui_components: Use when mapping product needs to official HeroUI components.
  • plan_visual_confirmation: Use before coding to define Pencil/Figma image requirements.
  • plan_visual_design_orchestration: Use to plan the one-pass Pencil/Figma flow.
  • review_visual_design_orchestration: Use to verify the visual tool flow produced complete handoff evidence.
  • inspect_tailwind_ui_reference: Use to inspect local TailwindUI folders without copying source.
  • plan_tailwind_hero_ui_adoption: Use to map TailwindUI references back to HeroUI and Tailwind v4 rules.
  • review_hero_ui_quality: Use after editing UI code or before final review.
  • review_hero_ui_component_graph_audit: Use to audit official HeroUI imports and local shadow components.
  • review_visual_inspection_metrics: Use to block blank, high-diff, overlapping, clipped, or contrast-broken screenshots.
  • review_hero_ui_docs_freshness: Use to verify bundled HeroUI official docs are fresh and complete.
  • generate_frontend_verification_checklist: Use before final verification.

The local tools are read-only and deterministic. The plugin also exposes the official heroui-react MCP server for current component documentation and source inspection.

© hashgraph-online, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1,650 other files (references) in plugins/kevin592/codex-full-stack-workflow/skills/hero-ui-craft of hashgraph-online/awesome-codex-plugins.

  • SKILL.md
  • references/hero-ui-official-workflow.md
  • references/official/react/.heroui-docs/react/components/(buttons)/button-group.mdx
  • references/official/react/.heroui-docs/react/components/(buttons)/button.mdx
  • references/official/react/.heroui-docs/react/components/(buttons)/close-button.mdx
  • references/official/react/.heroui-docs/react/components/(buttons)/toggle-button-group.mdx
  • references/official/react/.heroui-docs/react/components/(buttons)/toggle-button.mdx
  • references/official/react/.heroui-docs/react/components/(collections)/dropdown.mdx
  • references/official/react/.heroui-docs/react/components/(collections)/list-box.mdx
  • references/official/react/.heroui-docs/react/components/(collections)/tag-group.mdx
  • references/official/react/.heroui-docs/react/components/(colors)/color-area.mdx
  • references/official/react/.heroui-docs/react/components/(colors)/color-field.mdx
  • … and 1,639 more

Open the folder on GitHubat commit 3e1456a

Compare with similar skills

Hero UI Craft next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Hero UI Craft compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Hero UI Craft this skillhashgraph-online/awesome-codex-plugins1.3k—~3.4kAutomated safety check: PassApache-2.0
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
Ss Learnbitjaru/styleseed973—~1.3kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
UI Design Systemtry-works/role-model118—~5kAutomated safety check: PassMIT

Similar skills

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    973 GitHub stars~1.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

  • UI Design System

    try-works/role-model

    React UI component systems with TailwindCSS + Radix + shadcn/ui.

    118 GitHub stars~5k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    154 GitHub stars~1.7k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

More from hashgraph-online/awesome-codex-plugins

All 716 skills in this repo

  • Anime Reaction Gif

    hashgraph-online/awesome-codex-plugins

    Create original anime-style reaction stickers as looping GIFs and MP4 previews, using generated character pose sheets and timed key poses.

    1.3k GitHub stars~922 tokensUpdated today
    Auto-check passed

  • Calibredb

    hashgraph-online/awesome-codex-plugins

    Manage and query Calibre libraries with the calibredb CLI (local paths or Calibre Content server URLs).

    1.3k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Rust API Test Harness

    hashgraph-online/awesome-codex-plugins

    A skill your agent uses when adding, changing, testing, or debugging Rust HTTP APIs and services, especially when Codex needs black-box integration tests, random-port app startup, real database test…

    1.3k GitHub stars~1.7k tokensUpdated today
    Auto-check passed

  • Art

    hashgraph-online/awesome-codex-plugins

    Make a studio's game look like something at build time — a cover from a real frame of the game (free), painted covers, backdrops, textures and character plates from image models through the…

    1.3k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Calle

    hashgraph-online/awesome-codex-plugins

    Use CALL-E from Codex through the calle CLI. An agent skill from hashgraph-online/awesome-codex-plugins.

    1.3k GitHub stars~2.9k tokensUpdated today
    Auto-check passed

  • Game Balance Economy

    hashgraph-online/awesome-codex-plugins

    Balance game difficulty, resources, rewards, probability, progression, economies, and dominant strategies.

    1.3k GitHub stars~618 tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Hero UI Craft

What does Hero UI Craft do?

A skill your agent uses 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…. Hero UI Craft is an agent skill from hashgraph-online/awesome-codex-plugins. 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.

When should I use Hero UI Craft?

Hero UI Craft fits situations like: Codex works on any front-end implementation; React component; tailwind CSS v4 surface; heroUI React v3 setup.

How do I install Hero UI Craft in Claude Code?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill hero-ui-craft -a claude-code`. Or copy the skill folder (plugins/kevin592/codex-full-stack-workflow/skills/hero-ui-craft in hashgraph-online/awesome-codex-plugins) into .claude/skills/hero-ui-craft in your project. Claude Code loads it when a task matches its description.

How do I install Hero UI Craft in Codex?

Run `npx skills add hashgraph-online/awesome-codex-plugins --skill hero-ui-craft -a codex`. Or copy the skill folder (plugins/kevin592/codex-full-stack-workflow/skills/hero-ui-craft in hashgraph-online/awesome-codex-plugins) into .agents/skills/hero-ui-craft in your project. Codex loads it when a task matches its description.

Can I use Hero UI Craft in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add hashgraph-online/awesome-codex-plugins --skill hero-ui-craft -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hero-ui-craft, .gemini/skills/hero-ui-craft, .github/skills/hero-ui-craft and .opencode/skills/hero-ui-craft in your project.

What does Hero UI Craft need to run?

Going by SKILL.md and its folder, Hero UI Craft needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Hero UI Craft access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Hero UI Craft safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Hero UI Craft use?

Hero UI Craft is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Hero UI Craft use?

About 3.4k tokens (SKILL.md is roughly 14k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.9M tokens, read only when the agent opens those files.

What are the alternatives to Hero UI Craft?

Skills that share tags, products or a category with Hero UI Craft: Creative Tim UI Blocks (creativetimofficial/ui, 12k stars), Ss Learn (bitjaru/styleseed, 973 stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hero UI Craft?

hashgraph-online (a GitHub organization) maintains it in hashgraph-online/awesome-codex-plugins, which has 1,267 GitHub stars. The repository holds 716 skills in this directory. The repository was last updated on October 10, 2026.

Source: hashgraph-online/awesome-codex-plugins on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.