Agent skill
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.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/development/ark-ui
Metadata
Additional technical details for this skill
- triggers
-
{ "type": "domain", "keywords": [ "ark-ui", "@ark-ui/react", "headless components" ], "priority": "medium", "enforcement": "suggest", "intent-patterns": [ "\\b(use|create|build|implement)\\b.*?\\bark[-\\s]?ui\\b", "\\b(checkbox|combobox|dialog|popover|tooltip)\\b.*?\\b(headless|ark)\\b" ] }
SKILL.md
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
asChildto render as custom element while keeping behavior - State access: Use
Component.Contextwith 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
Overlays and Popups
Layout and Navigation
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 |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?