ark-ui
Headless component library for React. Use when building UI components with @ark-ui/react, implementing accessible form inputs, overlays, navigation patterns, or needing guidance on Ark UI's data attributes, composition (asChild), and state management patterns.
Best use case
ark-ui is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Headless component library for React. Use when building UI components with @ark-ui/react, implementing accessible form inputs, overlays, navigation patterns, or needing guidance on Ark UI's data attributes, composition (asChild), and state management patterns.
Teams using ark-ui should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/ark-ui/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How ark-ui Compares
| Feature / Agent | ark-ui | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Headless component library for React. Use when building UI components with @ark-ui/react, implementing accessible form inputs, overlays, navigation patterns, or needing guidance on Ark UI's data attributes, composition (asChild), and state management patterns.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Ark UI Headless component library providing accessible, unstyled React primitives for building custom UI components with full control over styling and behavior. ## Key Patterns - **Root pattern**: `Slider.Root`, `Slider.Track`, etc. - **CSS styling**: `[data-scope="slider"][data-part="track"]` - **State styling**: `[data-state="open"]`, `[data-state="checked"]` - **Composition**: Use `asChild` to render as custom element while keeping behavior - **State access**: Use `Component.Context` with render props - **Programmatic control**: Use hooks like `useAccordion()` ## Core Concepts | Topic | URL | | --- | --- | | Getting Started | https://ark-ui.com/react/docs/overview/getting-started | | Styling (data attributes) | https://ark-ui.com/react/docs/guides/styling | | Composition (asChild) | https://ark-ui.com/react/docs/guides/composition | | Component State | https://ark-ui.com/react/docs/guides/component-state | | Animation | https://ark-ui.com/react/docs/guides/animation | | Forms Integration | https://ark-ui.com/react/docs/guides/forms | | Refs | https://ark-ui.com/react/docs/guides/ref | | Closed Components | https://ark-ui.com/react/docs/guides/closed-components | ## Components ### Form Inputs | Component | URL | | --- | --- | | Checkbox | https://ark-ui.com/react/docs/components/checkbox | | Combobox | https://ark-ui.com/react/docs/components/combobox | | Color Picker | https://ark-ui.com/react/docs/components/color-picker | | Date Picker | https://ark-ui.com/react/docs/components/date-picker | | Editable | https://ark-ui.com/react/docs/components/editable | | Field | https://ark-ui.com/react/docs/components/field | | Fieldset | https://ark-ui.com/react/docs/components/fieldset | | File Upload | https://ark-ui.com/react/docs/components/file-upload | | Listbox | https://ark-ui.com/react/docs/components/listbox | | Number Input | https://ark-ui.com/react/docs/components/number-input | | Password Input | https://ark-ui.com/react/docs/components/password-input | | Pin Input | https://ark-ui.com/react/docs/components/pin-input | | Radio Group | https://ark-ui.com/react/docs/components/radio-group | | Select | https://ark-ui.com/react/docs/components/select | | Signature Pad | https://ark-ui.com/react/docs/components/signature-pad | | Slider | https://ark-ui.com/react/docs/components/slider | | Switch | https://ark-ui.com/react/docs/components/switch | | Tags Input | https://ark-ui.com/react/docs/components/tags-input | ### Overlays and Popups | Component | URL | | --- | --- | | Dialog | https://ark-ui.com/react/docs/components/dialog | | Floating Panel | https://ark-ui.com/react/docs/components/floating-panel | | Hover Card | https://ark-ui.com/react/docs/components/hover-card | | Menu | https://ark-ui.com/react/docs/components/menu | | Popover | https://ark-ui.com/react/docs/components/popover | | Toast | https://ark-ui.com/react/docs/components/toast | | Tooltip | https://ark-ui.com/react/docs/components/tooltip | | Tour | https://ark-ui.com/react/docs/components/tour | ### Layout and Navigation | Component | URL | | --- | --- | | Accordion | https://ark-ui.com/react/docs/components/accordion | | Carousel | https://ark-ui.com/react/docs/components/carousel | | Collapsible | https://ark-ui.com/react/docs/components/collapsible | | Pagination | https://ark-ui.com/react/docs/components/pagination | | Scroll Area | https://ark-ui.com/react/docs/components/scroll-area | | Splitter | https://ark-ui.com/react/docs/components/splitter | | Steps | https://ark-ui.com/react/docs/components/steps | | Tabs | https://ark-ui.com/react/docs/components/tabs | | Tree View | https://ark-ui.com/react/docs/components/tree-view | ### Display and Feedback | Component | URL | | --- | --- | | Avatar | https://ark-ui.com/react/docs/components/avatar | | Clipboard | https://ark-ui.com/react/docs/components/clipboard | | Marquee | https://ark-ui.com/react/docs/components/marquee | | Progress Circular | https://ark-ui.com/react/docs/components/progress-circular | | Progress Linear | https://ark-ui.com/react/docs/components/progress-linear | | QR Code | https://ark-ui.com/react/docs/components/qr-code | | Rating Group | https://ark-ui.com/react/docs/components/rating-group | | Timer | https://ark-ui.com/react/docs/components/timer | ### Selection and Toggle | Component | URL | | --- | --- | | Angle Slider | https://ark-ui.com/react/docs/components/angle-slider | | Segment Group | https://ark-ui.com/react/docs/components/segment-group | | Toggle | https://ark-ui.com/react/docs/components/toggle | | Toggle Group | https://ark-ui.com/react/docs/components/toggle-group | ## Collections | Collection | URL | | --- | --- | | Async List | https://ark-ui.com/react/docs/collections/async-list | | List Collection | https://ark-ui.com/react/docs/collections/list-collection | | List Selection | https://ark-ui.com/react/docs/collections/list-selection | | Tree Collection | https://ark-ui.com/react/docs/collections/tree-collection | ## Utilities | Utility | URL | | --- | --- | | Client Only | https://ark-ui.com/react/docs/utilities/client-only | | Download Trigger | https://ark-ui.com/react/docs/utilities/download-trigger | | Environment | https://ark-ui.com/react/docs/utilities/environment | | Focus Trap | https://ark-ui.com/react/docs/utilities/focus-trap | | Format Byte | https://ark-ui.com/react/docs/utilities/format-byte | | Format Number | https://ark-ui.com/react/docs/utilities/format-number | | Format Relative Time | https://ark-ui.com/react/docs/utilities/format-relative-time | | Frame | https://ark-ui.com/react/docs/utilities/frame | | Highlight | https://ark-ui.com/react/docs/utilities/highlight | | JSON Tree View | https://ark-ui.com/react/docs/utilities/json-tree-view | | Locale | https://ark-ui.com/react/docs/utilities/locale | | Presence | https://ark-ui.com/react/docs/utilities/presence |
Related Skills
zod
Zod v4 TypeScript schema validation patterns and best practices. Use when writing or modifying Zod schemas, adding schema annotations/metadata, or validating data with Zod.
writing-hashql-jexpr
HashQL J-Expr syntax for writing queries. Use when writing J-Expr code, using #literal/#struct/#list constructs, understanding function call syntax, or working with HashQL query files (.jsonc).
writing-hashql-diagnostics
HashQL diagnostic writing patterns using hashql-diagnostics crate. Use when creating error messages, warnings, Labels, Messages, Severity levels, Patches, Suggestions, or improving diagnostic quality in HashQL code.
testing-hashql
HashQL testing strategies including compiletest (UI tests), unit tests, and snapshot tests. Use when writing tests for HashQL code, using //~ annotations, running --bless, debugging test failures, or choosing the right testing approach.
skill-creator
Guide for creating effective Agent Skills. Use when users want to create a new skill (or update an existing skill) that extends an AI agent's capabilities with specialized knowledge, workflows, or tool integrations. Covers skill structure, YAML frontmatter, trigger configuration, and the 500-line rule.
panda-css
Panda CSS styling framework guidance. Use when working with @pandacss packages, styled components, design tokens, or responsive/conditional styles.
mastra
Mastra TypeScript framework for AI agents with memory, tools, workflows, and RAG. Use when working with @mastra/* packages or building AI agents.
managing-git-workflow
Git workflow for HASH including branch naming, PR creation, and PR reviews. Use when creating branches, making commits, opening pull requests, or reviewing PRs.
managing-cargo-dependencies
Cargo.toml dependency management patterns for HASH workspace. Use when adding, updating, or removing dependencies, organizing Cargo.toml sections, configuring version pinning and default features, or managing public dependencies.
handling-rust-errors
HASH error handling patterns using error-stack crate. Use when working with Result types, Report types, defining custom errors, propagating errors with change_context, adding context with attach, implementing Error trait, or documenting error conditions in Rust code.
exploring-rust-crates
Generate Rust documentation to understand crate APIs, structure, and usage. Use when exploring Rust code, understanding crate organization, finding functions/types/traits, or needing context about a Rust package in the HASH workspace.
documenting-rust-code
Rust documentation practices for HASH codebase. Use when writing doc comments, documenting functions/types/traits/modules, creating error sections, using intra-doc links, or following rustdoc conventions.