mcpField
A
ark-ui

ark-ui

github.com/fandhe-ai设计与 UI4151 次安装5 天前更新
代码仓库

关于 ark-ui

Ark UI 是基于 Zag.js 的无样式组件库，面向使用 React、Solid、Vue 或 Svelte 的开发者。它提供行为与无障碍基础组件，便于接入现有设计系统并自行设置样式。

主要功能

  1. 01无样式组件
  2. 02支持 React、Solid、Vue 和 Svelte
  3. 03行为与无障碍基础组件
  4. 04通过 asChild 组合
  5. 05指南与组件参考

适用场景

  1. 01为自定义设计系统添加组件行为
  2. 02在支持的框架中构建无障碍界面
  3. 03查阅组件 API 与样式指南

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fandhe-ai/agent-reference-skills --skill ark-ui

安装后在 Claude Code 中输入/ark-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/collections/
async-list.md
list-collection.md
list-selection.md
README.md
tree-collection.md
references/components/collections/
carousel.md
combobox.md
listbox.md
menu.md
navigation-menu.md
pagination.md
README.md
select.md
steps.md
toc.md
tree-view.md
references/components/date-time/
date-input.md
date-picker.md
README.md
timer.md
references/components/disclosure/
accordion.md
collapsible.md
README.md
scroll-area.md
splitter.md
tabs.md
toggle-group.md
toggle.md
references/components/display/
avatar.md
clipboard.md

详细介绍

Ark UI

Ark UI 是一个基于 Zag.js 的无头、无样式组件库，也是 Chakra UI v3 的无头实现基础。它支持 React / Solid / Vue / Svelte。

适用版本：@ark-ui/react 5.39.3 (2026-10-05)。6.0.0-next.0 为预发布版本，因此不在适用范围内。

如何选择 Ark UI 和 Chakra UI — Ark UI 仅提供无样式的行为和无障碍功能原语（通过 asChild 连接任意元素和设计系统）；Chakra UI v3 则是在相同 Zag.js 基础上构建的带样式实现。若要手动为现有设计系统添加样式，请使用本技能；若要直接使用 Chakra 的样式系统，请参阅 skills/chakra-ui/。

目录结构

skills/ark-ui/
  SKILL.md
  references/
    overview/
      README.md
      about.md
      getting-started.md
      changelog.md
      framework-differences.md
      mcp-server.md
      llms-txt.md
    guides/
      README.md
      styling.md
      composition.md
      component-state.md
      animation.md
      forms.md
      ref.md
    collections/
      README.md
      list-collection.md
      tree-collection.md
      async-list.md
      list-selection.md
    components/
      form/
        README.md
        checkbox.md
        field.md
        fieldset.md
        radio-group.md
        switch.md
        slider.md
        angle-slider.md
        number-input.md
        password-input.md
        pin-input.md
        rating-group.md
        segment-group.md
        tags-input.md
        editable.md
        file-upload.md
        signature-pad.md
        image-cropper.md
        color-picker.md
      collections/
        README.md
        select.md
        combobox.md
        listbox.md
        tree-view.md
        menu.md
        carousel.md
        pagination.md
        steps.md
        navigation-menu.md
        toc.md
      overlays/
        README.md
        dialog.md
        drawer.md
        popover.md
        hover-card.md
        tooltip.md
        toast.md
        tour.md
        floating-panel.md
      disclosure/
        README.md
        accordion.md
        collapsible.md
        tabs.md
        toggle.md
        toggle-group.md
        splitter.md
        scroll-area.md
      date-time/
        README.md
        date-picker.md
        date-input.md
        timer.md
      display/
        README.md
        avatar.md
        progress-linear.md
        progress-circular.md
        qr-code.md
        clipboard.md
        marquee.md
    utilities/
      README.md
      client-only.md
      download-trigger.md
      environment.md
      focus-trap.md
      format-byte.md
      format-number.md
      format-time.md
      format-relative-time.md
      frame.md
      highlight.md
      hotkeys.md
      json-tree-view.md
      locale.md
      presence.md
      swap.md
  samples/
    README.md
    provider-setup.md
    styling-with-panda-css.md
    styling-with-tailwind-css.md
    composition-with-aschild.md
    external-state-with-root-provider.md
    select-with-list-collection.md
    combobox-with-filtering.md
    react-hook-form-integration.md
    onboarding-tour.md
  scripts/
    README.md
    install.md
    mcp-server.md
    llms-txt-fetch.md

探索步骤

根据任务查找类别，再通过类别的 README.md 确定目标页面：

  1. 在下方映射表中查找与任务对应的类别（不要混淆 references/collections/“数据集合”与 references/components/collections/“集合类组件”，它们属于不同类别）
  2. 参阅该类别的 README.md，确定目标页面
  3. Read 对应的 .md 文件，查看详细信息

任务 → 类别映射

任务类别参考 README
想了解 Ark UI 是什么、其理念与架构 / 安装步骤 / 框架间的差异 / MCP Server・llms.txtoverviewreferences/overview/README.md
想了解样式规范（data-scope/data-part/data-state）/ 通过 asChild 进行组合 / 组件状态管理 / 动画 / 表单集成 / 获取 refguidesreferences/guides/README.md
想通过 createListCollection / createTreeCollection 构建数据 / 使用异步列表和选择状态钩子collections（数据）references/collections/README.md
想了解 Checkbox、Slider、Number Input、Tags Input、File Upload、Color Picker 等表单类组件 APIcomponents/formreferences/components/form/README.md
想了解 Select、Combobox、Tree View、Menu、Carousel、Pagination、Steps、Navigation Menu、TOC 等集合类组件 APIcomponents/collectionsreferences/components/collections/README.md
想了解 Dialog、Drawer、Popover、Tooltip、Toast、Tour、Floating Panel 等覆盖层类组件 APIcomponents/overlaysreferences/components/overlays/README.md
想了解 Accordion、Tabs、Toggle、Splitter、Scroll Area 等折叠类组件 APIcomponents/disclosurereferences/components/disclosure/README.md
想了解 Date Picker、Date Input、Timer 等日期时间类组件 APIcomponents/date-timereferences/components/date-time/README.md
想了解 Avatar、Progress、QR Code、Clipboard、Marquee 等展示类组件 APIcomponents/displayreferences/components/display/README.md
想使用 EnvironmentProvider、LocaleProvider、格式化工具（format-number 等）、Focus Trap、Presence（hideMode / onEnterComplete）、Highlight、Hotkeys（useHotkey / useHotkeys / 命令面板快捷键）、JSON Tree Viewutilitiesreferences/utilities/README.md
想了解典型用法和示例（Provider Setup、Panda/Tailwind 样式、通过 RootProvider 控制外部状态、React Hook Form 集成等）samplessamples/README.md
想了解安装、MCP Server 设置和获取 llms.txt 的命令scriptsscripts/README.md

评论

支持 Markdown