hashintel/ark-ui
.claude/skills/ark-ui/SKILL.md
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 --global
skillsauthnpx skillsauth add hashintel/hash ark-uiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 3:27 PM235.4s1 file scanned
SKILL.md
- name:
- ark-ui
- description:
- 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.
- license:
- AGPL-3.0
- type:
- domain
- enforcement:
- suggest
- priority:
- medium
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
| 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
openclaw/openclaw-secret-scanning-maintainer
development
VerifiedTrustedCommunity
Maintainer-only workflow for handling GitHub Secret Scanning alerts on OpenClaw. Use when Codex needs to triage, redact, clean up, and resolve secret leakage found in issue comments, issue bodies, PR comments, or other GitHub content.
357,764SKILL.mdUpdated Apr 15, 2026
openclaw/openclaw-release-maintainer
development
VerifiedTrustedCommunity
Maintainer workflow for OpenClaw releases, prereleases, changelog release notes, and publish validation. Use when Codex needs to prepare or verify stable or beta release steps, align version naming, assemble release notes, check release auth requirements, or validate publish-time commands and artifacts.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-qa-testing
development
VerifiedTrustedCommunity
Run, watch, debug, and extend OpenClaw QA testing with qa-lab and qa-channel. Use when Codex needs to execute the repo-backed QA suite, inspect live QA artifacts, debug failing scenarios, add new QA scenarios, or explain the OpenClaw QA workflow. Prefer the live OpenAI lane with regular openai/gpt-5.4 in fast mode; do not use gpt-5.4-pro or gpt-5.4-mini unless the user explicitly overrides that policy.
357,764SKILL.mdUpdated Apr 10, 2026
openclaw/openclaw-parallels-smoke
development
VerifiedTrustedCommunity
End-to-end Parallels smoke, upgrade, and rerun workflow for OpenClaw across macOS, Windows, and Linux guests. Use when Codex needs to run, rerun, debug, or interpret VM-based install, onboarding, gateway smoke tests, latest-release-to-main upgrade checks, fresh snapshot retests, or optional Discord roundtrip verification under Parallels.
357,764SKILL.mdUpdated Apr 10, 2026