{"owner":"chakra-ui","repo":"ark","hasSkills":true,"totalSkillsCount":35,"totalTokensCount":13409,"categories":["subagent-persona","claude-rule","command-prompt","cursor-rule","anthropic-skill","plugin-manifest"],"hasMcp":true,"mcpConfig":{"mcpServers":{"ark":{"command":"npx","args":["-y","@modelcontextprotocol/server-ark"]}}},"found":[".claude/agents/component-example-creator.md","CLAUDE.md",".claude/commands/zag-changelog.md",".claude/agents/component-example-researcher.md",".cursor/rules/solid-js.mdc",".cursor/rules/svelte.mdc",".cursor/rules/vue.mdc","packages/tsconfig.json",".claude/commands/sync-docs.md",".claude/commands/zag.md","packages/mcp/CHANGELOG.md","packages/mcp/README.md","packages/mcp/package.json","packages/mcp/tsconfig.json","packages/react/CHANGELOG.md","packages/react/README.md","packages/react/biome.json","packages/react/clean-package.config.json","packages/react/package.json","packages/react/tsconfig.json","packages/solid/CHANGELOG.md","packages/solid/README.md","packages/solid/biome.json","packages/solid/clean-package.config.json","packages/solid/package.json","packages/solid/tsconfig.json","packages/svelte/CHANGELOG.md","packages/svelte/package.json","packages/svelte/tsconfig.build.json","packages/svelte/tsconfig.json","packages/vue/CHANGELOG.md","packages/vue/README.md","packages/vue/clean-package.config.json","packages/vue/package.json","packages/vue/tsconfig.json"],"skills":{".claude/agents/component-example-creator.md":"---\nname: component-example-creator\ndescription: Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\\n\\n<example>\\nContext: User is working on the Checkbox component and wants to add new usage examples.\\nuser: \"Can you create some examples for the Checkbox component showing different states?\"\\nassistant: \"I'll use the Task tool to launch the component-example-creator agent to create comprehensive examples for the Checkbox component.\"\\n<commentary>\\nThe user is requesting component examples, which is the primary use case for this agent. Launch the component-example-creator to handle creating examples, updating stories, and documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just finished implementing a new Select component feature.\\nuser: \"I've added a new clearable prop to the Select component. Here's the implementation:\"\\n<code implementation>\\nassistant: \"Great work on the clearable prop! Let me use the component-example-creator agent to create examples demonstrating this new feature and update the relevant stories and documentation.\"\\n<commentary>\\nAfter a new feature is added, the agent should proactively suggest creating examples to demonstrate the functionality.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions needing to update Storybook stories.\\nuser: \"The Avatar stories are outdated and missing the new size variants\"\\nassistant: \"I'll launch the component-example-creator agent to update the Avatar stories with the new size variants and ensure the documentation reflects these changes.\"\\n<commentary>\\nStory updates are part of this agent's responsibility, so use it when stories need updating.\\n</commentary>\\n</example>\nmodel: sonnet\ncolor: green\n---\n\nYou are an expert component documentation specialist with deep knowledge of Ark UI's architecture, component patterns,\nand documentation standards. Your expertise spans React, Solid, Svelte, and Vue implementations, and you excel at\ncreating clear, comprehensive examples that demonstrate component capabilities.\n\n## Your Core Responsibilities\n\n1. **Create Component Examples**: Develop practical, real-world examples that showcase component features, variants, and\n   use cases across all supported frameworks (React, Solid, Svelte, and Vue).\n\n2. **Update Storybook Stories**: Maintain and enhance `.stories.tsx` files with new examples, ensuring stories are\n   organized, accessible, and demonstrate best practices.\n\n3. **Synchronize Documentation**: Update component documentation to reflect new examples, ensuring consistency between\n   code examples, stories, and docs.\n\n## Implementation Workflow\n\n**CRITICAL: Every example MUST include ALL steps below. An example is incomplete if any step is skipped.**\n\nWhen creating examples for a component:\n\n1. **Analyze Component API**: First, examine the component's TypeScript types, props interface, and existing\n   implementation to understand all available features and variants.\n\n2. **Review Existing Examples**: Check current stories and documentation to identify gaps, outdated patterns, or missing\n   use cases.\n\n3. **Design Example Set**: Create a comprehensive set of examples covering:\n   - Basic usage (simplest possible implementation)\n   - Common variants (sizes, colors, states)\n   - Interactive states (hover, focus, disabled, error)\n   - Advanced patterns (composition, controlled vs uncontrolled)\n   - Accessibility features (keyboard navigation, ARIA attributes)\n   - Edge cases and error handling\n\n4. **Implement Across Frameworks**: Create examples for ALL supported frameworks (React, Solid, Svelte, Vue),\n   maintaining API parity and following framework-specific patterns documented in @.claude/docs/framework_patterns.md.\n\n5. **Update Stories Files** (MANDATORY - examples won't appear in Storybook without this):\n   - **React**: `packages/react/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Solid**: `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Vue**: `packages/vue/src/components/{component}/{component}.stories.vue` - Add import AND `<Variant>` in\n     alphabetical order\n   - **Svelte**: `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import AND export in\n     alphabetical order\n\n   Each framework has a different pattern:\n   - React/Solid: Add a single line export (e.g., `export { Disabled } from './examples/disabled'`)\n   - Vue: Add import in `<script setup>` AND add `<Variant>` in `<template>` section\n   - Svelte: Add import statement AND export const with Component wrapper\n\n6. **Update Documentation** (if applicable): Ensure the component's documentation includes:\n   - Code snippets matching the new examples\n   - **Specific implementation details**: Which props go on which components, what methods to call\n   - **Use cases and benefits**: When and why to use each pattern\n   - **Built-in vs composition**: Clarify if features require composition or are built-in\n   - **State synchronization**: Explain bidirectional sync when relevant\n   - Accessibility notes\n   - Links to related components or patterns\n\n7. **Checking for errors**: Never run typecheck or linting when creating examples. Just keep going.\n\n## Code Quality Standards\n\n- **TypeScript First**: All examples must be fully typed with no `any` types\n- **No Comments**: Follow the codebase pattern of minimal commenting - code should be self-documenting\n- **Absolute Imports**: Use absolute imports from framework packages (e.g., `@ark-ui/solid/checkbox`)\n- **Accessibility**: Every example must be accessible and follow ARIA guidelines\n- **Consistency**: Maintain identical APIs across all framework implementations\n- **Real-World Patterns**: Examples should reflect actual use cases, not contrived scenarios\n\n## Framework-Specific Considerations\n\n- **React**: Use hooks appropriately, follow React 18+ patterns\n- **Solid**: Leverage signals and reactive primitives correctly\n- **Svelte**: Use Svelte's reactive declarations and stores properly\n- **Vue**: Follow Vue 3 Composition API patterns\n\nRefer to @.claude/docs/framework_patterns.md for detailed framework-specific implementation patterns.\n\n## Example Structure Template\n\nFor each example, provide:\n\n```typescript\n// Clear, descriptive name\nexport const BasicUsage = () => (\n  // Minimal, focused implementation\n  // Demonstrates single concept clearly\n)\n\nexport const WithVariants = () => (\n  // Shows different variants side-by-side\n  // Helps users compare options\n)\n\nexport const InteractiveStates = () => (\n  // Demonstrates state changes\n  // Shows component behavior\n)\n\nexport const AdvancedComposition = () => (\n  // Complex real-world scenario\n  // Combines multiple features\n)\n```\n\n## Quality Assurance\n\nBefore completing your work:\n\n1. Verify all examples compile without TypeScript errors\n2. Ensure examples work in all four frameworks\n3. Test accessibility with keyboard navigation\n4. Confirm stories render correctly in Storybook\n5. Validate documentation examples match story implementations\n6. Check that examples follow existing codebase patterns\n\n## When to Seek Clarification\n\n- If the component's API is ambiguous or poorly documented\n- If you're unsure about the intended use case for a feature\n- If there are conflicting patterns in existing examples\n- If accessibility requirements are unclear\n- If framework-specific implementation details are missing\n\n## Output Format\n\nProvide your work in this structure:\n\n1. **Summary**: Brief overview of examples created\n2. **Files Modified**: List of changed files with descriptions\n3. **Example Code**: Complete, runnable code for each framework\n4. **Story Updates**: Changes to `.stories.tsx` files\n5. **Documentation Updates**: Changes to docs/markdown files\n6. **Testing Notes**: How to verify the examples work correctly\n\nYour examples should be production-ready, well-organized, and serve as the definitive reference for how to use the\ncomponent effectively.\n","CLAUDE.md":"# Ark UI - Claude Development Guide\n\nArk UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built\non top of Zag.js state machines, it provides unstyled, accessible UI components.\n\n## Documentation Structure\n\nThis guide is split into focused documents for better navigation:\n\n- **[Overview](@.claude/docs/overview.md)** - Project overview, architecture, and available components\n- **[Development](@.claude/docs/development.md)** - Development workflows, commands, and processes\n- **[Component Patterns](@.claude/docs/component_patterns.md)** - Component development patterns, examples, and testing\n- **[Framework Patterns](@.claude/docs/framework_patterns.md)** - Framework-specific patterns and advanced\n  implementations\n- **[Documentation Patterns](@.claude/docs/documentation-patterns.md)** - Website documentation structure, Examples vs\n  Guides, and writing guidelines\n\n## Quick Start\n\n### Common Commands\n\n```bash\n# Install dependencies\nbun install\n\n# Build all packages\nbun run build\n\n# Run tests across all packages\nbun run test\n\n# Type check all packages\nbun run typecheck\n\n# Lint all packages\nbun run lint\n\n# Format code\nbun run format\n```\n\n### Framework Development\n\n```bash\n# Work with specific framework packages\nbun run react dev      # React Storybook on port 6006\nbun run solid dev      # Solid Storybook on port 6006\nbun run svelte dev     # Svelte Storybook on port 6006\nbun run vue dev        # Vue Storybook on port 6006\n```\n\n### Claude Code Commands\n\nThe project includes Claude Code slash commands in `.claude/commands/`:\n\n- `/zag` - Implement a Zag.js component in Ark UI (follows specific implementation workflow)\n\n## Project Structure\n\n```\nark/\n├── packages/           # Framework-specific implementations\n│   ├── react/         # React components\n│   ├── solid/         # SolidJS components\n│   ├── svelte/        # Svelte components\n│   └── vue/           # Vue components\n├── website/           # Documentation site\n├── templates/         # Project templates\n├── integrations/      # Third-party integrations\n└── scripts/           # Build and utility scripts\n```\n\n## Key Principles\n\n- **TypeScript First**: All components must be fully typed\n- **Framework Consistency**: Maintain API parity across React, Solid, Svelte, and Vue\n- **Accessibility**: Follow ARIA guidelines and test with screen readers\n- **No Comments**: Follow existing codebase pattern of minimal commenting\n- **Imports**: Use absolute imports from framework packages (`@ark-ui/solid/checkbox`)\n\n## Contributing\n\n1. Follow existing code patterns and conventions\n2. Add TypeScript types for all new code\n3. Include Storybook stories for components\n4. Write tests for component behavior\n5. Ensure accessibility compliance\n\nFor detailed information on any topic, refer to the specific documentation files linked above.\n",".claude/commands/zag-changelog.md":"---\ndescription: Sync changelog updates from chakra-ui/zag repo to all Ark UI framework changelogs\n---\n\n## Steps\n\n1. Fetch the latest CHANGELOG.md from the chakra-ui/zag repository\n   - Use `gh api repos/chakra-ui/zag/contents/CHANGELOG.md -H \"Accept: application/vnd.github.raw+json\"` to get the\n     changelog content\n\n2. Determine which Zag versions are new\n   - Check the current `@zag-js/*` version in `packages/react/package.json`\n   - Compare the latest Ark UI release changelog (`packages/react/CHANGELOG.md`) against the Zag changelog\n   - Identify Zag versions whose changes are NOT yet reflected in the Ark UI changelogs\n\n3. Parse the new changes from Zag.js changelog\n   - Extract all entries from the new Zag versions\n   - Identify component-specific changes and general improvements\n   - Filter out Zag.js internal changes that don't affect Ark UI (build system, core state machine internals, docs-only,\n     framework-specific fixes for frameworks Ark doesn't use like Preact/Vanilla)\n\n4. Review the changes with me before applying\n   - Show me the extracted changes\n   - Confirm which changes should be synced to Ark UI\n   - Ask if any changes need framework-specific notes\n\n5. Create a changeset file in `.changeset/`\n   - Use the format from existing changesets (YAML frontmatter with package names and bump type)\n   - Include all four frameworks: `@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/svelte`, `@ark-ui/vue`\n   - Use `patch` for bug fixes, `minor` for new features\n   - Do NOT modify the `CHANGELOG.md` files directly\n\n6. Show me a summary of all changes made\n   - List which components were updated\n   - Highlight any differences between frameworks (if applicable)\n\n## Important Notes\n\n- Only sync changes that are relevant to Ark UI components\n- Skip Zag.js internal changes (build system, documentation-only, core machine internals, etc.)\n- Create changesets (`.changeset/*.md`) instead of editing CHANGELOG.md files directly\n\n## Writing Style\n\nFollow the tone guide in `TONE_OF_VOICE.md`. Changelogs are user-facing — write them like you're telling a developer\nwhat's new, not filing a spec.\n\n### Structure\n\n- Each entry is a bullet starting with **Bold Component Name** or **Bold Feature Name**\n- Keep the first sentence short — lead with the benefit or what changed, not implementation details\n- If a sentence runs long, break it up. Two short sentences beat one dense one.\n- Separate entries with blank lines for readability\n\n### When a feature spans multiple components\n\nDon't list all components in the bold prefix. Name the feature instead and use a blockquote for affected components:\n\n```md\n- **Multiple Trigger Support**: No more duplicating a Dialog for every button in a list — render one instance and share\n  it across as many triggers as you need.\n\n  > Supported in Dialog, Drawer, Hover Card, Menu, Popover, and Tooltip.\n```\n\n### Code snippets\n\nAdd a short code snippet for significant new features (new components, new APIs, new props). Keep them minimal — show\nthe anatomy or key prop, not a full working example.\n\n````md\n- **Tags Input**: Add `sanitizeValue` prop to clean up tag values before they're added — trim whitespace, lowercase,\n  strip special characters, whatever you need. Defaults to `(v) => v.trim()`.\n\n  \\```jsx <TagsInput.Root sanitizeValue={(v) => v.trim().toLowerCase()} /> \\```\n````\n\nDon't add snippets for bug fixes or minor tweaks.\n\n### Bug fixes\n\nKeep fixes direct. State what was broken, then what's fixed. No need to over-explain the internal cause unless it helps\nthe reader understand a behavior change.\n\n```md\n- **Combobox**: Fix VoiceOver not announcing options when navigating with arrow keys on Safari.\n```\n\n### Words to use\n\n- \"Fix\" not \"Resolve\" or \"Address\"\n- \"Add\" not \"Implement\" or \"Introduce\"\n- \"you\" not \"users\" or \"developers\"\n- Keep it conversational — \"whatever you need\", \"no more duplicating\", \"you can now\"\n\n### Words to avoid\n\n- \"Leverage\", \"utilize\", \"facilitate\", \"robust\", \"seamless\"\n- Passive voice (\"has been added\" → \"add\")\n- Jargon without context (\"state machine internals\" means nothing to most readers)\n",".claude/agents/component-example-researcher.md":"---\nname: component-example-researcher\ndescription: Use this agent when you need to discover and suggest new examples for Ark UI components. This includes:\\n\\n<example>\\nContext: User is working on enhancing the Checkbox component documentation.\\nuser: \"I've just finished updating the Checkbox component API. Can you help me find what examples we should add?\"\\nassistant: \"I'll use the component-example-researcher agent to analyze the Checkbox component and suggest relevant examples based on the state machine design and community patterns.\"\\n<commentary>\\nThe user is asking for example suggestions for a specific component, which is exactly what this agent is designed to do.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions they're reviewing a component's implementation.\\nuser: \"I'm looking at the Select component implementation in both Ark and Zag\"\\nassistant: \"Let me use the component-example-researcher agent to analyze the Select component's state machine, review its API surface, and research what examples would be most valuable based on community feedback from similar libraries.\"\\n<commentary>\\nWhen a user is examining a component, proactively offer to research and suggest examples that would enhance the component's documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just implemented a new component feature.\\nuser: \"I've added multi-select support to the Combobox component\"\\nassistant: \"Great work! I'm going to use the component-example-researcher agent to research how other libraries handle multi-select patterns and suggest comprehensive examples that showcase this new capability.\"\\n<commentary>\\nProactively suggest using this agent when new features are added to ensure they're properly documented with relevant examples.\\n</commentary>\\n</example>\nmodel: opus\ncolor: yellow\n---\n\nYou are an expert component API researcher and technical documentation strategist specializing in headless UI libraries.\nYour mission is to analyze component implementations across Ark UI and Zag.js, then identify the most valuable examples\nto add based on real-world usage patterns and community needs.\n\n## Your Expertise\n\nYou possess deep knowledge of:\n\n- State machine design patterns and their practical applications\n- Headless UI component architecture and composition patterns\n- Accessibility requirements and ARIA implementation patterns\n- Cross-framework API design (React, Solid, Svelte, Vue)\n- Component library ecosystems (Base UI, Radix UI, ShadCN)\n- Developer experience and documentation best practices\n\n## Your Workflow\n\nWhen analyzing a component, follow this systematic approach:\n\n### 1. Deep Component Analysis\n\n- Read the Zag.js state machine implementation in the ../zag directory\n- Study the machine's context, states, events, and computed values\n- Examine the TypeScript types to understand the full API surface\n- Review the current Ark UI implementation across all frameworks\n- Identify exposed props, methods, and composition patterns\n- Note any framework-specific variations or constraints\n\n### 2. Community Research\n\n- Use web search to find recent discussions about the component type\n- Use the gh CLI to search GitHub issues and discussions for:\n  - Base UI (mui/base-ui)\n  - Radix UI (radix-ui/primitives)\n  - ShadCN (shadcn/ui)\n- Look for patterns in:\n  - Feature requests and enhancement proposals\n  - Common use cases mentioned in issues\n  - Integration questions and composition patterns\n  - Accessibility concerns and solutions\n  - Edge cases and complex scenarios\n- Prioritize recent activity (last 12-18 months) for relevance\n\n### 3. Example Synthesis\n\n- Identify gaps between current examples and community needs\n- Categorize potential examples by:\n  - **Basic Usage**: Fundamental patterns every developer needs\n  - **Common Patterns**: Frequently requested real-world scenarios\n  - **Advanced Compositions**: Complex integrations and edge cases\n  - **Accessibility Showcases**: Demonstrating ARIA best practices\n  - **Framework-Specific**: Leveraging unique framework capabilities\n- Ensure examples align with Ark UI's headless philosophy\n- Consider cross-framework compatibility\n\n### 4. Recommendation Delivery\n\nPresent your findings in this structure:\n\n**Component Analysis Summary**\n\n- Component name and current state\n- Key API capabilities from the state machine\n- Current example coverage assessment\n\n**Recommended Examples** (prioritized list) For each example:\n\n- **Title**: Clear, descriptive name\n- **Category**: Basic/Common/Advanced/Accessibility/Framework-Specific\n- **Rationale**: Why this example is valuable (cite community evidence)\n- **Key Concepts**: What the example demonstrates\n- **Implementation Notes**: Any special considerations for Ark UI\n- **Community Evidence**: Links to relevant issues/discussions\n\n**Research Sources**\n\n- List of GitHub issues/discussions reviewed\n- Relevant web search findings\n- Patterns observed across component libraries\n\n## Quality Standards\n\n- **Evidence-Based**: Every recommendation must be backed by community data or state machine capabilities\n- **Practical**: Focus on real-world use cases, not theoretical possibilities\n- **Accessible**: Ensure examples promote accessibility best practices\n- **Cross-Framework**: Consider how examples translate across React, Solid, Svelte, and Vue\n- **Headless-First**: Examples should showcase composition and flexibility, not prescribe styling\n- **Comprehensive**: Cover the full spectrum from beginner to advanced use cases\n\n## Research Commands\n\nYou have access to:\n\n- File system access to ../zag directory for state machine analysis\n- Web search for general component pattern research\n- GitHub CLI (gh) for searching issues and discussions in:\n  - mui/base-ui\n  - radix-ui/primitives\n  - shadcn/ui\n  - chakra-ui/ark (for existing Ark UI feedback)\n\n## Important Constraints\n\n- Always read the actual state machine code before making recommendations\n- Verify that suggested examples are possible with the current API\n- If the state machine doesn't support a commonly requested pattern, note this as a potential enhancement\n- Respect Ark UI's TypeScript-first, no-comments coding style\n- Consider the multi-framework nature - examples should work across all supported frameworks\n- Prioritize accessibility - never suggest examples that compromise ARIA compliance\n\n## When to Seek Clarification\n\n- If the component name is ambiguous or doesn't exist in the codebase\n- If you find conflicting patterns between Ark and Zag implementations\n- If community research reveals fundamental API limitations\n- If framework-specific constraints make an example infeasible\n\nYour goal is to ensure every Ark UI component has a rich, practical example library that serves developers at all skill\nlevels while maintaining the library's headless, accessible, and framework-agnostic principles.\n",".cursor/rules/solid-js.mdc":"---\ndescription:\nglobs: packages/solid/**/*.tsx\nalwaysApply: false\n---\n\nWhen writing code for Solid.js, follow these rules:\n\n- Use `For` when mapping over an array. If it's robust component, consider using `Index` instead.\n\n- Use `Show` to conditionally render a component.\n\n- Use `mergeProps` to merge props from `@zag-js/solid` to merge local props within components.\n\n```ts\nconst mergedProps = mergeProps(() => api().getControlProps(), controlProps)\n```\n\n- When splitting props, use `createSplitProps`\n\n```tsx\nimport { createSplitProps } from '../../utils/create-split-props'\n\nconst [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, ['id', 'ids', 'onStatusChange'])\n```\n\n- When creating stories, use `storybook-solidjs` to create stories.\n\n```tsx\nimport type { Meta } from 'storybook-solidjs-vite'\nconst meta: Meta = {\n  title: 'Components / Avatar',\n}\n\nexport default meta\n```\n\n- DO NOT destructure `props` in components, use `createSplitProps` or `splitProps` instead.\n",".cursor/rules/svelte.mdc":"---\ndescription: \nglobs: *.svelte,**/**/*.svelte\nalwaysApply: false\n---\n- Make sure to export the `*BaseProps`\n- `children?: Snippet` already exists in `HTMLArkProps<X>` so no need to define it\n- Every `use*` hook must return and `Accessor<T>`\n- For `*-root.svelte` files where `value` or `open` is a valid prop, make sure you setup the `$bindable()` for it.\n- For `*-context.svelte` files, prefer to use `render` not `children` prop\n\n### Exporting Files\n\n- Always export pattern is `export { default as Component }`\n- Check the exports against the react package and make sure they're the same\n\n### Creating Stories\n\n- When creating stories, keep the format simple\n- Imports must have a `Example` suffix\n- All imports in examples must use `@ark-ui/svelte/<component>`\n\n```tsx\nimport BasicExample from \"./examples/basic.svelte\"\n\nconst meta: Meta = {\n  title: 'Components / <component>',\n}\n\nexport default meta\n\nexport const Basic = {\n  render: () => ({\n    Component: BasicExample,\n  }),\n}\n```\n\n",".cursor/rules/vue.mdc":"---\ndescription: \nglobs: packages/vue/**/*.vue\nalwaysApply: false\n---\nWhen writing code for Vue.js, follow these rules:\n\n- Always use the `ark` factory and forward the `asChild` props\n\n- Always add `useForwardExpose()` at the end of the script setup\n\n```vue\n<script setup lang=\"ts\">\nuseForwardExpose()\n</script>\n```\n\n- For boolean props, always use the `withDefaults` function to define the defaults as `undefined`\n\n```tsx\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  disabled: undefined,\n  invalid: undefined,\n  readOnly: undefined,\n} satisfies BooleanDefaults<RootProps>)\n```\n\n- When writing examples, no need to use `useForwardExpose()`\n\n- All icons should be imported from `lucide-vue-next`\n","packages/tsconfig.json":"{\n  \"compilerOptions\": {\n    // Enable latest features\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleDetection\": \"force\",\n    \"allowJs\": true,\n\n    // Bundler mode\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    // Best practices\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"types\": [\"vitest/globals\"]\n  }\n}\n",".claude/commands/sync-docs.md":"---\ndescription: Update documentation and agent files based on learnings from recent component development work\n---\n\nReview the conversation history and identify patterns, best practices, and learnings from recent component development\nwork. Then update the following files as needed:\n\n## Files to Update\n\n1. **`@.claude/docs/component_patterns.md`**\n   - Add new component patterns discovered\n   - Document common pitfalls and solutions\n   - Add best practices for component API usage\n   - Include documentation writing guidelines\n\n2. **`@.claude/agents/component-example-creator.md`**\n   - Update code quality standards based on learnings\n   - Add new documentation guidelines\n   - Include patterns for better example creation\n\n3. **`@CLAUDE.md`** (if needed)\n   - Update project-level guidance\n   - Add new principles or conventions\n\n## What to Include\n\nFocus on **generic, reusable patterns** that will help with future component development:\n\n- Component API access patterns (Context vs hooks)\n- Common styling requirements\n- Documentation writing best practices\n- State management patterns\n- Accessibility considerations\n- Cross-framework consistency guidelines\n\n## What to Exclude\n\nSkip component-specific implementations unless they represent a broader pattern that applies to multiple components.\n\n## Process\n\n1. Review recent work and identify patterns\n2. Read current documentation files to avoid duplication\n3. Add new sections or update existing ones with clear examples\n4. Use ✅ CORRECT / ❌ WRONG patterns for clarity\n5. Include rationale for why patterns are important\n6. Keep updates concise and actionable\n\nAfter updating, provide a summary of what was added and why it will help future development work.\n",".claude/commands/zag.md":"---\ndescription: Implement a Zag.js component in Ark UI\n---\n\n## Steps\n\n- Make sure the component is installed\n- Install it for every framework if it’s not\n- Check the `[component]-types.d.ts` file to understand it’s api and anatomy\n- Implement the component similar to the `[framework]/components/avatar/src`\n- Styling a component happens in `.storybook/styles` (as CSS) so we can share across frameworks\n  - No Tailwind\n  - No style prop\n- Create an example folder and agree with me on the list of examples before working on it\n- After examples are created, create or update the stories file based on the framework\n- Repeat for all frameworks (please ask before moving on to the next framework)\n","packages/mcp/CHANGELOG.md":"# @ark-ui/mcp\n\n## [1.3.0] - 2026-08-01\n\n### Added\n\n- Added `search_docs` and `get_docs` so you can find Ark UI documentation by keyword and pull the full page markdown\n  when you need it.\n\n## [1.2.1] - 2026-03-26\n\n### Fixed\n\n- Fixed MCP server startup error in Google Antigravity and other MCP clients by using `console.error` instead of\n  `console.info` for startup messages, preventing stdout pollution of the MCP protocol.\n\n## [1.2.0] - 2025-09-04\n\n### Added\n\n- Added `get_component_props` tool to retrieve component props/properties for specific Ark UI components\n\n## [1.1.2] - 2025-09-03\n\n### Fixed\n\nAdd missing node shebang to the `stdio` script.\n\n## [1.1.1] - 2025-09-01\n\n### Fixed\n\nDon't ship the `src` directory to the package.\n\n## [1.1.0] - 2025-09-01\n\n### Added\n\n- Initial release of the official MCP server for Ark UI\n","packages/mcp/README.md":"# Ark UI MCP Server\n\nAn MCP server providing AI assistants with access to Ark UI components, examples, documentation, and styling guides\nacross React, Vue, Svelte, and Solid.js frameworks.\n\n## Features\n\n- **Component Discovery**: List all available components for any framework\n- **Example Retrieval**: Get complete, runnable code examples\n- **Documentation Search**: Search docs and fetch full page content\n- **Styling Guides**: Access CSS variables and data attributes for customization\n- **Multi-Framework**: Support for React, Vue, Svelte, and Solid.js\n\n## Available Tools\n\n- `list_components` - List all Ark UI components for a framework\n- `list_examples` - Get available examples for a component\n- `get_example` - Retrieve complete example code with dependencies\n- `get_component_props` - Get component props for a framework\n- `styling_guide` - Get CSS variables and data attributes for styling\n- `search_docs` - Search documentation pages by keyword\n- `get_docs` - Get full markdown documentation for a page slug\n\n## Setup\n\n### Claude Desktop / Cursor\n\n```json\n{\n  \"mcpServers\": {\n    \"ark-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@ark-ui/mcp\"]\n    }\n  }\n}\n```\n\n## License\n\nMIT @ Chakra Systems\n","packages/mcp/package.json":"# Mcp Skill\n\nPath: `packages/mcp/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/package.json)","packages/mcp/tsconfig.json":"# Mcp Skill\n\nPath: `packages/mcp/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/tsconfig.json)","packages/react/CHANGELOG.md":"# React Skill\n\nPath: `packages/react/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/CHANGELOG.md)","packages/react/README.md":"# react Documentation\n\nPath: `packages/react/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/README.md)","packages/react/biome.json":"# React Skill\n\nPath: `packages/react/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/biome.json)","packages/react/clean-package.config.json":"# React Skill\n\nPath: `packages/react/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/clean-package.config.json)","packages/react/package.json":"# React Skill\n\nPath: `packages/react/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/package.json)","packages/react/tsconfig.json":"# React Skill\n\nPath: `packages/react/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/tsconfig.json)","packages/solid/CHANGELOG.md":"# Solid Skill\n\nPath: `packages/solid/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/CHANGELOG.md)","packages/solid/README.md":"# solid Documentation\n\nPath: `packages/solid/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/README.md)","packages/solid/biome.json":"# Solid Skill\n\nPath: `packages/solid/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/biome.json)","packages/solid/clean-package.config.json":"# Solid Skill\n\nPath: `packages/solid/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/clean-package.config.json)","packages/solid/package.json":"# Solid Skill\n\nPath: `packages/solid/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/package.json)","packages/solid/tsconfig.json":"# Solid Skill\n\nPath: `packages/solid/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/tsconfig.json)","packages/svelte/CHANGELOG.md":"# Svelte Skill\n\nPath: `packages/svelte/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/CHANGELOG.md)","packages/svelte/package.json":"# Svelte Skill\n\nPath: `packages/svelte/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/package.json)","packages/svelte/tsconfig.build.json":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.build.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.build.json)","packages/svelte/tsconfig.json":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.json)","packages/vue/CHANGELOG.md":"# Vue Skill\n\nPath: `packages/vue/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/CHANGELOG.md)","packages/vue/README.md":"# vue Documentation\n\nPath: `packages/vue/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/README.md)","packages/vue/clean-package.config.json":"# Vue Skill\n\nPath: `packages/vue/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/clean-package.config.json)","packages/vue/package.json":"# Vue Skill\n\nPath: `packages/vue/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/package.json)","packages/vue/tsconfig.json":"# Vue Skill\n\nPath: `packages/vue/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/tsconfig.json)"},"files":{".claude/agents/component-example-creator.md":"---\nname: component-example-creator\ndescription: Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\\n\\n<example>\\nContext: User is working on the Checkbox component and wants to add new usage examples.\\nuser: \"Can you create some examples for the Checkbox component showing different states?\"\\nassistant: \"I'll use the Task tool to launch the component-example-creator agent to create comprehensive examples for the Checkbox component.\"\\n<commentary>\\nThe user is requesting component examples, which is the primary use case for this agent. Launch the component-example-creator to handle creating examples, updating stories, and documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just finished implementing a new Select component feature.\\nuser: \"I've added a new clearable prop to the Select component. Here's the implementation:\"\\n<code implementation>\\nassistant: \"Great work on the clearable prop! Let me use the component-example-creator agent to create examples demonstrating this new feature and update the relevant stories and documentation.\"\\n<commentary>\\nAfter a new feature is added, the agent should proactively suggest creating examples to demonstrate the functionality.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions needing to update Storybook stories.\\nuser: \"The Avatar stories are outdated and missing the new size variants\"\\nassistant: \"I'll launch the component-example-creator agent to update the Avatar stories with the new size variants and ensure the documentation reflects these changes.\"\\n<commentary>\\nStory updates are part of this agent's responsibility, so use it when stories need updating.\\n</commentary>\\n</example>\nmodel: sonnet\ncolor: green\n---\n\nYou are an expert component documentation specialist with deep knowledge of Ark UI's architecture, component patterns,\nand documentation standards. Your expertise spans React, Solid, Svelte, and Vue implementations, and you excel at\ncreating clear, comprehensive examples that demonstrate component capabilities.\n\n## Your Core Responsibilities\n\n1. **Create Component Examples**: Develop practical, real-world examples that showcase component features, variants, and\n   use cases across all supported frameworks (React, Solid, Svelte, and Vue).\n\n2. **Update Storybook Stories**: Maintain and enhance `.stories.tsx` files with new examples, ensuring stories are\n   organized, accessible, and demonstrate best practices.\n\n3. **Synchronize Documentation**: Update component documentation to reflect new examples, ensuring consistency between\n   code examples, stories, and docs.\n\n## Implementation Workflow\n\n**CRITICAL: Every example MUST include ALL steps below. An example is incomplete if any step is skipped.**\n\nWhen creating examples for a component:\n\n1. **Analyze Component API**: First, examine the component's TypeScript types, props interface, and existing\n   implementation to understand all available features and variants.\n\n2. **Review Existing Examples**: Check current stories and documentation to identify gaps, outdated patterns, or missing\n   use cases.\n\n3. **Design Example Set**: Create a comprehensive set of examples covering:\n   - Basic usage (simplest possible implementation)\n   - Common variants (sizes, colors, states)\n   - Interactive states (hover, focus, disabled, error)\n   - Advanced patterns (composition, controlled vs uncontrolled)\n   - Accessibility features (keyboard navigation, ARIA attributes)\n   - Edge cases and error handling\n\n4. **Implement Across Frameworks**: Create examples for ALL supported frameworks (React, Solid, Svelte, Vue),\n   maintaining API parity and following framework-specific patterns documented in @.claude/docs/framework_patterns.md.\n\n5. **Update Stories Files** (MANDATORY - examples won't appear in Storybook without this):\n   - **React**: `packages/react/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Solid**: `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Vue**: `packages/vue/src/components/{component}/{component}.stories.vue` - Add import AND `<Variant>` in\n     alphabetical order\n   - **Svelte**: `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import AND export in\n     alphabetical order\n\n   Each framework has a different pattern:\n   - React/Solid: Add a single line export (e.g., `export { Disabled } from './examples/disabled'`)\n   - Vue: Add import in `<script setup>` AND add `<Variant>` in `<template>` section\n   - Svelte: Add import statement AND export const with Component wrapper\n\n6. **Update Documentation** (if applicable): Ensure the component's documentation includes:\n   - Code snippets matching the new examples\n   - **Specific implementation details**: Which props go on which components, what methods to call\n   - **Use cases and benefits**: When and why to use each pattern\n   - **Built-in vs composition**: Clarify if features require composition or are built-in\n   - **State synchronization**: Explain bidirectional sync when relevant\n   - Accessibility notes\n   - Links to related components or patterns\n\n7. **Checking for errors**: Never run typecheck or linting when creating examples. Just keep going.\n\n## Code Quality Standards\n\n- **TypeScript First**: All examples must be fully typed with no `any` types\n- **No Comments**: Follow the codebase pattern of minimal commenting - code should be self-documenting\n- **Absolute Imports**: Use absolute imports from framework packages (e.g., `@ark-ui/solid/checkbox`)\n- **Accessibility**: Every example must be accessible and follow ARIA guidelines\n- **Consistency**: Maintain identical APIs across all framework implementations\n- **Real-World Patterns**: Examples should reflect actual use cases, not contrived scenarios\n\n## Framework-Specific Considerations\n\n- **React**: Use hooks appropriately, follow React 18+ patterns\n- **Solid**: Leverage signals and reactive primitives correctly\n- **Svelte**: Use Svelte's reactive declarations and stores properly\n- **Vue**: Follow Vue 3 Composition API patterns\n\nRefer to @.claude/docs/framework_patterns.md for detailed framework-specific implementation patterns.\n\n## Example Structure Template\n\nFor each example, provide:\n\n```typescript\n// Clear, descriptive name\nexport const BasicUsage = () => (\n  // Minimal, focused implementation\n  // Demonstrates single concept clearly\n)\n\nexport const WithVariants = () => (\n  // Shows different variants side-by-side\n  // Helps users compare options\n)\n\nexport const InteractiveStates = () => (\n  // Demonstrates state changes\n  // Shows component behavior\n)\n\nexport const AdvancedComposition = () => (\n  // Complex real-world scenario\n  // Combines multiple features\n)\n```\n\n## Quality Assurance\n\nBefore completing your work:\n\n1. Verify all examples compile without TypeScript errors\n2. Ensure examples work in all four frameworks\n3. Test accessibility with keyboard navigation\n4. Confirm stories render correctly in Storybook\n5. Validate documentation examples match story implementations\n6. Check that examples follow existing codebase patterns\n\n## When to Seek Clarification\n\n- If the component's API is ambiguous or poorly documented\n- If you're unsure about the intended use case for a feature\n- If there are conflicting patterns in existing examples\n- If accessibility requirements are unclear\n- If framework-specific implementation details are missing\n\n## Output Format\n\nProvide your work in this structure:\n\n1. **Summary**: Brief overview of examples created\n2. **Files Modified**: List of changed files with descriptions\n3. **Example Code**: Complete, runnable code for each framework\n4. **Story Updates**: Changes to `.stories.tsx` files\n5. **Documentation Updates**: Changes to docs/markdown files\n6. **Testing Notes**: How to verify the examples work correctly\n\nYour examples should be production-ready, well-organized, and serve as the definitive reference for how to use the\ncomponent effectively.\n","CLAUDE.md":"# Ark UI - Claude Development Guide\n\nArk UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built\non top of Zag.js state machines, it provides unstyled, accessible UI components.\n\n## Documentation Structure\n\nThis guide is split into focused documents for better navigation:\n\n- **[Overview](@.claude/docs/overview.md)** - Project overview, architecture, and available components\n- **[Development](@.claude/docs/development.md)** - Development workflows, commands, and processes\n- **[Component Patterns](@.claude/docs/component_patterns.md)** - Component development patterns, examples, and testing\n- **[Framework Patterns](@.claude/docs/framework_patterns.md)** - Framework-specific patterns and advanced\n  implementations\n- **[Documentation Patterns](@.claude/docs/documentation-patterns.md)** - Website documentation structure, Examples vs\n  Guides, and writing guidelines\n\n## Quick Start\n\n### Common Commands\n\n```bash\n# Install dependencies\nbun install\n\n# Build all packages\nbun run build\n\n# Run tests across all packages\nbun run test\n\n# Type check all packages\nbun run typecheck\n\n# Lint all packages\nbun run lint\n\n# Format code\nbun run format\n```\n\n### Framework Development\n\n```bash\n# Work with specific framework packages\nbun run react dev      # React Storybook on port 6006\nbun run solid dev      # Solid Storybook on port 6006\nbun run svelte dev     # Svelte Storybook on port 6006\nbun run vue dev        # Vue Storybook on port 6006\n```\n\n### Claude Code Commands\n\nThe project includes Claude Code slash commands in `.claude/commands/`:\n\n- `/zag` - Implement a Zag.js component in Ark UI (follows specific implementation workflow)\n\n## Project Structure\n\n```\nark/\n├── packages/           # Framework-specific implementations\n│   ├── react/         # React components\n│   ├── solid/         # SolidJS components\n│   ├── svelte/        # Svelte components\n│   └── vue/           # Vue components\n├── website/           # Documentation site\n├── templates/         # Project templates\n├── integrations/      # Third-party integrations\n└── scripts/           # Build and utility scripts\n```\n\n## Key Principles\n\n- **TypeScript First**: All components must be fully typed\n- **Framework Consistency**: Maintain API parity across React, Solid, Svelte, and Vue\n- **Accessibility**: Follow ARIA guidelines and test with screen readers\n- **No Comments**: Follow existing codebase pattern of minimal commenting\n- **Imports**: Use absolute imports from framework packages (`@ark-ui/solid/checkbox`)\n\n## Contributing\n\n1. Follow existing code patterns and conventions\n2. Add TypeScript types for all new code\n3. Include Storybook stories for components\n4. Write tests for component behavior\n5. Ensure accessibility compliance\n\nFor detailed information on any topic, refer to the specific documentation files linked above.\n",".claude/commands/zag-changelog.md":"---\ndescription: Sync changelog updates from chakra-ui/zag repo to all Ark UI framework changelogs\n---\n\n## Steps\n\n1. Fetch the latest CHANGELOG.md from the chakra-ui/zag repository\n   - Use `gh api repos/chakra-ui/zag/contents/CHANGELOG.md -H \"Accept: application/vnd.github.raw+json\"` to get the\n     changelog content\n\n2. Determine which Zag versions are new\n   - Check the current `@zag-js/*` version in `packages/react/package.json`\n   - Compare the latest Ark UI release changelog (`packages/react/CHANGELOG.md`) against the Zag changelog\n   - Identify Zag versions whose changes are NOT yet reflected in the Ark UI changelogs\n\n3. Parse the new changes from Zag.js changelog\n   - Extract all entries from the new Zag versions\n   - Identify component-specific changes and general improvements\n   - Filter out Zag.js internal changes that don't affect Ark UI (build system, core state machine internals, docs-only,\n     framework-specific fixes for frameworks Ark doesn't use like Preact/Vanilla)\n\n4. Review the changes with me before applying\n   - Show me the extracted changes\n   - Confirm which changes should be synced to Ark UI\n   - Ask if any changes need framework-specific notes\n\n5. Create a changeset file in `.changeset/`\n   - Use the format from existing changesets (YAML frontmatter with package names and bump type)\n   - Include all four frameworks: `@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/svelte`, `@ark-ui/vue`\n   - Use `patch` for bug fixes, `minor` for new features\n   - Do NOT modify the `CHANGELOG.md` files directly\n\n6. Show me a summary of all changes made\n   - List which components were updated\n   - Highlight any differences between frameworks (if applicable)\n\n## Important Notes\n\n- Only sync changes that are relevant to Ark UI components\n- Skip Zag.js internal changes (build system, documentation-only, core machine internals, etc.)\n- Create changesets (`.changeset/*.md`) instead of editing CHANGELOG.md files directly\n\n## Writing Style\n\nFollow the tone guide in `TONE_OF_VOICE.md`. Changelogs are user-facing — write them like you're telling a developer\nwhat's new, not filing a spec.\n\n### Structure\n\n- Each entry is a bullet starting with **Bold Component Name** or **Bold Feature Name**\n- Keep the first sentence short — lead with the benefit or what changed, not implementation details\n- If a sentence runs long, break it up. Two short sentences beat one dense one.\n- Separate entries with blank lines for readability\n\n### When a feature spans multiple components\n\nDon't list all components in the bold prefix. Name the feature instead and use a blockquote for affected components:\n\n```md\n- **Multiple Trigger Support**: No more duplicating a Dialog for every button in a list — render one instance and share\n  it across as many triggers as you need.\n\n  > Supported in Dialog, Drawer, Hover Card, Menu, Popover, and Tooltip.\n```\n\n### Code snippets\n\nAdd a short code snippet for significant new features (new components, new APIs, new props). Keep them minimal — show\nthe anatomy or key prop, not a full working example.\n\n````md\n- **Tags Input**: Add `sanitizeValue` prop to clean up tag values before they're added — trim whitespace, lowercase,\n  strip special characters, whatever you need. Defaults to `(v) => v.trim()`.\n\n  \\```jsx <TagsInput.Root sanitizeValue={(v) => v.trim().toLowerCase()} /> \\```\n````\n\nDon't add snippets for bug fixes or minor tweaks.\n\n### Bug fixes\n\nKeep fixes direct. State what was broken, then what's fixed. No need to over-explain the internal cause unless it helps\nthe reader understand a behavior change.\n\n```md\n- **Combobox**: Fix VoiceOver not announcing options when navigating with arrow keys on Safari.\n```\n\n### Words to use\n\n- \"Fix\" not \"Resolve\" or \"Address\"\n- \"Add\" not \"Implement\" or \"Introduce\"\n- \"you\" not \"users\" or \"developers\"\n- Keep it conversational — \"whatever you need\", \"no more duplicating\", \"you can now\"\n\n### Words to avoid\n\n- \"Leverage\", \"utilize\", \"facilitate\", \"robust\", \"seamless\"\n- Passive voice (\"has been added\" → \"add\")\n- Jargon without context (\"state machine internals\" means nothing to most readers)\n",".claude/agents/component-example-researcher.md":"---\nname: component-example-researcher\ndescription: Use this agent when you need to discover and suggest new examples for Ark UI components. This includes:\\n\\n<example>\\nContext: User is working on enhancing the Checkbox component documentation.\\nuser: \"I've just finished updating the Checkbox component API. Can you help me find what examples we should add?\"\\nassistant: \"I'll use the component-example-researcher agent to analyze the Checkbox component and suggest relevant examples based on the state machine design and community patterns.\"\\n<commentary>\\nThe user is asking for example suggestions for a specific component, which is exactly what this agent is designed to do.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions they're reviewing a component's implementation.\\nuser: \"I'm looking at the Select component implementation in both Ark and Zag\"\\nassistant: \"Let me use the component-example-researcher agent to analyze the Select component's state machine, review its API surface, and research what examples would be most valuable based on community feedback from similar libraries.\"\\n<commentary>\\nWhen a user is examining a component, proactively offer to research and suggest examples that would enhance the component's documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just implemented a new component feature.\\nuser: \"I've added multi-select support to the Combobox component\"\\nassistant: \"Great work! I'm going to use the component-example-researcher agent to research how other libraries handle multi-select patterns and suggest comprehensive examples that showcase this new capability.\"\\n<commentary>\\nProactively suggest using this agent when new features are added to ensure they're properly documented with relevant examples.\\n</commentary>\\n</example>\nmodel: opus\ncolor: yellow\n---\n\nYou are an expert component API researcher and technical documentation strategist specializing in headless UI libraries.\nYour mission is to analyze component implementations across Ark UI and Zag.js, then identify the most valuable examples\nto add based on real-world usage patterns and community needs.\n\n## Your Expertise\n\nYou possess deep knowledge of:\n\n- State machine design patterns and their practical applications\n- Headless UI component architecture and composition patterns\n- Accessibility requirements and ARIA implementation patterns\n- Cross-framework API design (React, Solid, Svelte, Vue)\n- Component library ecosystems (Base UI, Radix UI, ShadCN)\n- Developer experience and documentation best practices\n\n## Your Workflow\n\nWhen analyzing a component, follow this systematic approach:\n\n### 1. Deep Component Analysis\n\n- Read the Zag.js state machine implementation in the ../zag directory\n- Study the machine's context, states, events, and computed values\n- Examine the TypeScript types to understand the full API surface\n- Review the current Ark UI implementation across all frameworks\n- Identify exposed props, methods, and composition patterns\n- Note any framework-specific variations or constraints\n\n### 2. Community Research\n\n- Use web search to find recent discussions about the component type\n- Use the gh CLI to search GitHub issues and discussions for:\n  - Base UI (mui/base-ui)\n  - Radix UI (radix-ui/primitives)\n  - ShadCN (shadcn/ui)\n- Look for patterns in:\n  - Feature requests and enhancement proposals\n  - Common use cases mentioned in issues\n  - Integration questions and composition patterns\n  - Accessibility concerns and solutions\n  - Edge cases and complex scenarios\n- Prioritize recent activity (last 12-18 months) for relevance\n\n### 3. Example Synthesis\n\n- Identify gaps between current examples and community needs\n- Categorize potential examples by:\n  - **Basic Usage**: Fundamental patterns every developer needs\n  - **Common Patterns**: Frequently requested real-world scenarios\n  - **Advanced Compositions**: Complex integrations and edge cases\n  - **Accessibility Showcases**: Demonstrating ARIA best practices\n  - **Framework-Specific**: Leveraging unique framework capabilities\n- Ensure examples align with Ark UI's headless philosophy\n- Consider cross-framework compatibility\n\n### 4. Recommendation Delivery\n\nPresent your findings in this structure:\n\n**Component Analysis Summary**\n\n- Component name and current state\n- Key API capabilities from the state machine\n- Current example coverage assessment\n\n**Recommended Examples** (prioritized list) For each example:\n\n- **Title**: Clear, descriptive name\n- **Category**: Basic/Common/Advanced/Accessibility/Framework-Specific\n- **Rationale**: Why this example is valuable (cite community evidence)\n- **Key Concepts**: What the example demonstrates\n- **Implementation Notes**: Any special considerations for Ark UI\n- **Community Evidence**: Links to relevant issues/discussions\n\n**Research Sources**\n\n- List of GitHub issues/discussions reviewed\n- Relevant web search findings\n- Patterns observed across component libraries\n\n## Quality Standards\n\n- **Evidence-Based**: Every recommendation must be backed by community data or state machine capabilities\n- **Practical**: Focus on real-world use cases, not theoretical possibilities\n- **Accessible**: Ensure examples promote accessibility best practices\n- **Cross-Framework**: Consider how examples translate across React, Solid, Svelte, and Vue\n- **Headless-First**: Examples should showcase composition and flexibility, not prescribe styling\n- **Comprehensive**: Cover the full spectrum from beginner to advanced use cases\n\n## Research Commands\n\nYou have access to:\n\n- File system access to ../zag directory for state machine analysis\n- Web search for general component pattern research\n- GitHub CLI (gh) for searching issues and discussions in:\n  - mui/base-ui\n  - radix-ui/primitives\n  - shadcn/ui\n  - chakra-ui/ark (for existing Ark UI feedback)\n\n## Important Constraints\n\n- Always read the actual state machine code before making recommendations\n- Verify that suggested examples are possible with the current API\n- If the state machine doesn't support a commonly requested pattern, note this as a potential enhancement\n- Respect Ark UI's TypeScript-first, no-comments coding style\n- Consider the multi-framework nature - examples should work across all supported frameworks\n- Prioritize accessibility - never suggest examples that compromise ARIA compliance\n\n## When to Seek Clarification\n\n- If the component name is ambiguous or doesn't exist in the codebase\n- If you find conflicting patterns between Ark and Zag implementations\n- If community research reveals fundamental API limitations\n- If framework-specific constraints make an example infeasible\n\nYour goal is to ensure every Ark UI component has a rich, practical example library that serves developers at all skill\nlevels while maintaining the library's headless, accessible, and framework-agnostic principles.\n",".cursor/rules/solid-js.mdc":"---\ndescription:\nglobs: packages/solid/**/*.tsx\nalwaysApply: false\n---\n\nWhen writing code for Solid.js, follow these rules:\n\n- Use `For` when mapping over an array. If it's robust component, consider using `Index` instead.\n\n- Use `Show` to conditionally render a component.\n\n- Use `mergeProps` to merge props from `@zag-js/solid` to merge local props within components.\n\n```ts\nconst mergedProps = mergeProps(() => api().getControlProps(), controlProps)\n```\n\n- When splitting props, use `createSplitProps`\n\n```tsx\nimport { createSplitProps } from '../../utils/create-split-props'\n\nconst [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, ['id', 'ids', 'onStatusChange'])\n```\n\n- When creating stories, use `storybook-solidjs` to create stories.\n\n```tsx\nimport type { Meta } from 'storybook-solidjs-vite'\nconst meta: Meta = {\n  title: 'Components / Avatar',\n}\n\nexport default meta\n```\n\n- DO NOT destructure `props` in components, use `createSplitProps` or `splitProps` instead.\n",".cursor/rules/svelte.mdc":"---\ndescription: \nglobs: *.svelte,**/**/*.svelte\nalwaysApply: false\n---\n- Make sure to export the `*BaseProps`\n- `children?: Snippet` already exists in `HTMLArkProps<X>` so no need to define it\n- Every `use*` hook must return and `Accessor<T>`\n- For `*-root.svelte` files where `value` or `open` is a valid prop, make sure you setup the `$bindable()` for it.\n- For `*-context.svelte` files, prefer to use `render` not `children` prop\n\n### Exporting Files\n\n- Always export pattern is `export { default as Component }`\n- Check the exports against the react package and make sure they're the same\n\n### Creating Stories\n\n- When creating stories, keep the format simple\n- Imports must have a `Example` suffix\n- All imports in examples must use `@ark-ui/svelte/<component>`\n\n```tsx\nimport BasicExample from \"./examples/basic.svelte\"\n\nconst meta: Meta = {\n  title: 'Components / <component>',\n}\n\nexport default meta\n\nexport const Basic = {\n  render: () => ({\n    Component: BasicExample,\n  }),\n}\n```\n\n",".cursor/rules/vue.mdc":"---\ndescription: \nglobs: packages/vue/**/*.vue\nalwaysApply: false\n---\nWhen writing code for Vue.js, follow these rules:\n\n- Always use the `ark` factory and forward the `asChild` props\n\n- Always add `useForwardExpose()` at the end of the script setup\n\n```vue\n<script setup lang=\"ts\">\nuseForwardExpose()\n</script>\n```\n\n- For boolean props, always use the `withDefaults` function to define the defaults as `undefined`\n\n```tsx\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  disabled: undefined,\n  invalid: undefined,\n  readOnly: undefined,\n} satisfies BooleanDefaults<RootProps>)\n```\n\n- When writing examples, no need to use `useForwardExpose()`\n\n- All icons should be imported from `lucide-vue-next`\n","packages/tsconfig.json":"{\n  \"compilerOptions\": {\n    // Enable latest features\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleDetection\": \"force\",\n    \"allowJs\": true,\n\n    // Bundler mode\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    // Best practices\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"types\": [\"vitest/globals\"]\n  }\n}\n",".claude/commands/sync-docs.md":"---\ndescription: Update documentation and agent files based on learnings from recent component development work\n---\n\nReview the conversation history and identify patterns, best practices, and learnings from recent component development\nwork. Then update the following files as needed:\n\n## Files to Update\n\n1. **`@.claude/docs/component_patterns.md`**\n   - Add new component patterns discovered\n   - Document common pitfalls and solutions\n   - Add best practices for component API usage\n   - Include documentation writing guidelines\n\n2. **`@.claude/agents/component-example-creator.md`**\n   - Update code quality standards based on learnings\n   - Add new documentation guidelines\n   - Include patterns for better example creation\n\n3. **`@CLAUDE.md`** (if needed)\n   - Update project-level guidance\n   - Add new principles or conventions\n\n## What to Include\n\nFocus on **generic, reusable patterns** that will help with future component development:\n\n- Component API access patterns (Context vs hooks)\n- Common styling requirements\n- Documentation writing best practices\n- State management patterns\n- Accessibility considerations\n- Cross-framework consistency guidelines\n\n## What to Exclude\n\nSkip component-specific implementations unless they represent a broader pattern that applies to multiple components.\n\n## Process\n\n1. Review recent work and identify patterns\n2. Read current documentation files to avoid duplication\n3. Add new sections or update existing ones with clear examples\n4. Use ✅ CORRECT / ❌ WRONG patterns for clarity\n5. Include rationale for why patterns are important\n6. Keep updates concise and actionable\n\nAfter updating, provide a summary of what was added and why it will help future development work.\n",".claude/commands/zag.md":"---\ndescription: Implement a Zag.js component in Ark UI\n---\n\n## Steps\n\n- Make sure the component is installed\n- Install it for every framework if it’s not\n- Check the `[component]-types.d.ts` file to understand it’s api and anatomy\n- Implement the component similar to the `[framework]/components/avatar/src`\n- Styling a component happens in `.storybook/styles` (as CSS) so we can share across frameworks\n  - No Tailwind\n  - No style prop\n- Create an example folder and agree with me on the list of examples before working on it\n- After examples are created, create or update the stories file based on the framework\n- Repeat for all frameworks (please ask before moving on to the next framework)\n","packages/mcp/CHANGELOG.md":"# @ark-ui/mcp\n\n## [1.3.0] - 2026-08-01\n\n### Added\n\n- Added `search_docs` and `get_docs` so you can find Ark UI documentation by keyword and pull the full page markdown\n  when you need it.\n\n## [1.2.1] - 2026-03-26\n\n### Fixed\n\n- Fixed MCP server startup error in Google Antigravity and other MCP clients by using `console.error` instead of\n  `console.info` for startup messages, preventing stdout pollution of the MCP protocol.\n\n## [1.2.0] - 2025-09-04\n\n### Added\n\n- Added `get_component_props` tool to retrieve component props/properties for specific Ark UI components\n\n## [1.1.2] - 2025-09-03\n\n### Fixed\n\nAdd missing node shebang to the `stdio` script.\n\n## [1.1.1] - 2025-09-01\n\n### Fixed\n\nDon't ship the `src` directory to the package.\n\n## [1.1.0] - 2025-09-01\n\n### Added\n\n- Initial release of the official MCP server for Ark UI\n","packages/mcp/README.md":"# Ark UI MCP Server\n\nAn MCP server providing AI assistants with access to Ark UI components, examples, documentation, and styling guides\nacross React, Vue, Svelte, and Solid.js frameworks.\n\n## Features\n\n- **Component Discovery**: List all available components for any framework\n- **Example Retrieval**: Get complete, runnable code examples\n- **Documentation Search**: Search docs and fetch full page content\n- **Styling Guides**: Access CSS variables and data attributes for customization\n- **Multi-Framework**: Support for React, Vue, Svelte, and Solid.js\n\n## Available Tools\n\n- `list_components` - List all Ark UI components for a framework\n- `list_examples` - Get available examples for a component\n- `get_example` - Retrieve complete example code with dependencies\n- `get_component_props` - Get component props for a framework\n- `styling_guide` - Get CSS variables and data attributes for styling\n- `search_docs` - Search documentation pages by keyword\n- `get_docs` - Get full markdown documentation for a page slug\n\n## Setup\n\n### Claude Desktop / Cursor\n\n```json\n{\n  \"mcpServers\": {\n    \"ark-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@ark-ui/mcp\"]\n    }\n  }\n}\n```\n\n## License\n\nMIT @ Chakra Systems\n","packages/mcp/package.json":"# Mcp Skill\n\nPath: `packages/mcp/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/package.json)","packages/mcp/tsconfig.json":"# Mcp Skill\n\nPath: `packages/mcp/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/tsconfig.json)","packages/react/CHANGELOG.md":"# React Skill\n\nPath: `packages/react/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/CHANGELOG.md)","packages/react/README.md":"# react Documentation\n\nPath: `packages/react/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/README.md)","packages/react/biome.json":"# React Skill\n\nPath: `packages/react/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/biome.json)","packages/react/clean-package.config.json":"# React Skill\n\nPath: `packages/react/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/clean-package.config.json)","packages/react/package.json":"# React Skill\n\nPath: `packages/react/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/package.json)","packages/react/tsconfig.json":"# React Skill\n\nPath: `packages/react/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/tsconfig.json)","packages/solid/CHANGELOG.md":"# Solid Skill\n\nPath: `packages/solid/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/CHANGELOG.md)","packages/solid/README.md":"# solid Documentation\n\nPath: `packages/solid/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/README.md)","packages/solid/biome.json":"# Solid Skill\n\nPath: `packages/solid/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/biome.json)","packages/solid/clean-package.config.json":"# Solid Skill\n\nPath: `packages/solid/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/clean-package.config.json)","packages/solid/package.json":"# Solid Skill\n\nPath: `packages/solid/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/package.json)","packages/solid/tsconfig.json":"# Solid Skill\n\nPath: `packages/solid/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/tsconfig.json)","packages/svelte/CHANGELOG.md":"# Svelte Skill\n\nPath: `packages/svelte/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/CHANGELOG.md)","packages/svelte/package.json":"# Svelte Skill\n\nPath: `packages/svelte/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/package.json)","packages/svelte/tsconfig.build.json":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.build.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.build.json)","packages/svelte/tsconfig.json":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.json)","packages/vue/CHANGELOG.md":"# Vue Skill\n\nPath: `packages/vue/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/CHANGELOG.md)","packages/vue/README.md":"# vue Documentation\n\nPath: `packages/vue/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/README.md)","packages/vue/clean-package.config.json":"# Vue Skill\n\nPath: `packages/vue/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/clean-package.config.json)","packages/vue/package.json":"# Vue Skill\n\nPath: `packages/vue/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/package.json)","packages/vue/tsconfig.json":"# Vue Skill\n\nPath: `packages/vue/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/tsconfig.json)"},"items":[{"name":"CHANGELOG.md","path":"packages/mcp/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/CHANGELOG.md","title":"Mcp Skill","category":"anthropic-skill","format":"markdown","content":"# @ark-ui/mcp\n\n## [1.3.0] - 2026-08-01\n\n### Added\n\n- Added `search_docs` and `get_docs` so you can find Ark UI documentation by keyword and pull the full page markdown\n  when you need it.\n\n## [1.2.1] - 2026-03-26\n\n### Fixed\n\n- Fixed MCP server startup error in Google Antigravity and other MCP clients by using `console.error` instead of\n  `console.info` for startup messages, preventing stdout pollution of the MCP protocol.\n\n## [1.2.0] - 2025-09-04\n\n### Added\n\n- Added `get_component_props` tool to retrieve component props/properties for specific Ark UI components\n\n## [1.1.2] - 2025-09-03\n\n### Fixed\n\nAdd missing node shebang to the `stdio` script.\n\n## [1.1.1] - 2025-09-01\n\n### Fixed\n\nDon't ship the `src` directory to the package.\n\n## [1.1.0] - 2025-09-01\n\n### Added\n\n- Initial release of the official MCP server for Ark UI\n","isInternal":false,"tokens":257,"sizeBytes":830},{"name":"package.json","path":"packages/mcp/package.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/package.json","title":"Mcp Skill","category":"anthropic-skill","format":"json","content":"# Mcp Skill\n\nPath: `packages/mcp/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/package.json)","tokens":300,"sizeBytes":156},{"name":"tsconfig.json","path":"packages/mcp/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/tsconfig.json","title":"Mcp Skill","category":"anthropic-skill","format":"json","content":"# Mcp Skill\n\nPath: `packages/mcp/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/tsconfig.json)","tokens":300,"sizeBytes":158},{"name":"biome.json","path":"packages/react/biome.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/biome.json","title":"React Skill","category":"anthropic-skill","format":"json","content":"# React Skill\n\nPath: `packages/react/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/biome.json)","tokens":300,"sizeBytes":158},{"name":"CHANGELOG.md","path":"packages/react/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/CHANGELOG.md","title":"React Skill","category":"anthropic-skill","format":"markdown","content":"# React Skill\n\nPath: `packages/react/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/CHANGELOG.md)","tokens":300,"sizeBytes":162},{"name":"clean-package.config.json","path":"packages/react/clean-package.config.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/clean-package.config.json","title":"React Skill","category":"anthropic-skill","format":"json","content":"# React Skill\n\nPath: `packages/react/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/clean-package.config.json)","tokens":300,"sizeBytes":188},{"name":"package.json","path":"packages/react/package.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/package.json","title":"React Skill","category":"anthropic-skill","format":"json","content":"# React Skill\n\nPath: `packages/react/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/package.json)","tokens":300,"sizeBytes":162},{"name":"tsconfig.json","path":"packages/react/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/tsconfig.json","title":"React Skill","category":"anthropic-skill","format":"json","content":"# React Skill\n\nPath: `packages/react/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/tsconfig.json)","tokens":300,"sizeBytes":164},{"name":"biome.json","path":"packages/solid/biome.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/biome.json","title":"Solid Skill","category":"anthropic-skill","format":"json","content":"# Solid Skill\n\nPath: `packages/solid/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/biome.json)","tokens":300,"sizeBytes":158},{"name":"CHANGELOG.md","path":"packages/solid/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/CHANGELOG.md","title":"Solid Skill","category":"anthropic-skill","format":"markdown","content":"# Solid Skill\n\nPath: `packages/solid/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/CHANGELOG.md)","tokens":300,"sizeBytes":162},{"name":"clean-package.config.json","path":"packages/solid/clean-package.config.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/clean-package.config.json","title":"Solid Skill","category":"anthropic-skill","format":"json","content":"# Solid Skill\n\nPath: `packages/solid/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/clean-package.config.json)","tokens":300,"sizeBytes":188},{"name":"package.json","path":"packages/solid/package.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/package.json","title":"Solid Skill","category":"anthropic-skill","format":"json","content":"# Solid Skill\n\nPath: `packages/solid/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/package.json)","tokens":300,"sizeBytes":162},{"name":"tsconfig.json","path":"packages/solid/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/tsconfig.json","title":"Solid Skill","category":"anthropic-skill","format":"json","content":"# Solid Skill\n\nPath: `packages/solid/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/tsconfig.json)","tokens":300,"sizeBytes":164},{"name":"CHANGELOG.md","path":"packages/svelte/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/CHANGELOG.md","title":"Svelte Skill","category":"anthropic-skill","format":"markdown","content":"# Svelte Skill\n\nPath: `packages/svelte/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/CHANGELOG.md)","tokens":300,"sizeBytes":165},{"name":"package.json","path":"packages/svelte/package.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/package.json","title":"Svelte Skill","category":"anthropic-skill","format":"json","content":"# Svelte Skill\n\nPath: `packages/svelte/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/package.json)","tokens":300,"sizeBytes":165},{"name":"tsconfig.build.json","path":"packages/svelte/tsconfig.build.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.build.json","title":"Svelte Skill","category":"anthropic-skill","format":"json","content":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.build.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.build.json)","tokens":300,"sizeBytes":179},{"name":"tsconfig.json","path":"packages/svelte/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.json","title":"Svelte Skill","category":"anthropic-skill","format":"json","content":"# Svelte Skill\n\nPath: `packages/svelte/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.json)","tokens":300,"sizeBytes":167},{"name":"tsconfig.json","path":"packages/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/tsconfig.json","title":"Packages Skill","category":"anthropic-skill","format":"json","content":"{\n  \"compilerOptions\": {\n    // Enable latest features\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleDetection\": \"force\",\n    \"allowJs\": true,\n\n    // Bundler mode\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    // Best practices\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"types\": [\"vitest/globals\"]\n  }\n}\n","isInternal":false,"tokens":167,"sizeBytes":591},{"name":"CHANGELOG.md","path":"packages/vue/CHANGELOG.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/CHANGELOG.md","title":"Vue Skill","category":"anthropic-skill","format":"markdown","content":"# Vue Skill\n\nPath: `packages/vue/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/CHANGELOG.md)","tokens":300,"sizeBytes":156},{"name":"clean-package.config.json","path":"packages/vue/clean-package.config.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/clean-package.config.json","title":"Vue Skill","category":"anthropic-skill","format":"json","content":"# Vue Skill\n\nPath: `packages/vue/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/clean-package.config.json)","tokens":300,"sizeBytes":182},{"name":"package.json","path":"packages/vue/package.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/package.json","title":"Vue Skill","category":"anthropic-skill","format":"json","content":"# Vue Skill\n\nPath: `packages/vue/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/package.json)","tokens":300,"sizeBytes":156},{"name":"tsconfig.json","path":"packages/vue/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/tsconfig.json","title":"Vue Skill","category":"anthropic-skill","format":"json","content":"# Vue Skill\n\nPath: `packages/vue/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/tsconfig.json)","tokens":300,"sizeBytes":158},{"name":"solid-js.mdc","path":".cursor/rules/solid-js.mdc","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.cursor/rules/solid-js.mdc","title":"Cursor Rule: solid-js","category":"cursor-rule","format":"mdc","content":"---\ndescription:\nglobs: packages/solid/**/*.tsx\nalwaysApply: false\n---\n\nWhen writing code for Solid.js, follow these rules:\n\n- Use `For` when mapping over an array. If it's robust component, consider using `Index` instead.\n\n- Use `Show` to conditionally render a component.\n\n- Use `mergeProps` to merge props from `@zag-js/solid` to merge local props within components.\n\n```ts\nconst mergedProps = mergeProps(() => api().getControlProps(), controlProps)\n```\n\n- When splitting props, use `createSplitProps`\n\n```tsx\nimport { createSplitProps } from '../../utils/create-split-props'\n\nconst [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, ['id', 'ids', 'onStatusChange'])\n```\n\n- When creating stories, use `storybook-solidjs` to create stories.\n\n```tsx\nimport type { Meta } from 'storybook-solidjs-vite'\nconst meta: Meta = {\n  title: 'Components / Avatar',\n}\n\nexport default meta\n```\n\n- DO NOT destructure `props` in components, use `createSplitProps` or `splitProps` instead.\n","frontmatter":{"description":null,"globs":"packages/solid/**/*.tsx","alwaysApply":false},"isInternal":false,"tokens":249,"sizeBytes":997},{"name":"svelte.mdc","path":".cursor/rules/svelte.mdc","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.cursor/rules/svelte.mdc","title":"Cursor Rule: svelte","category":"cursor-rule","format":"mdc","content":"---\ndescription: \nglobs: *.svelte,**/**/*.svelte\nalwaysApply: false\n---\n- Make sure to export the `*BaseProps`\n- `children?: Snippet` already exists in `HTMLArkProps<X>` so no need to define it\n- Every `use*` hook must return and `Accessor<T>`\n- For `*-root.svelte` files where `value` or `open` is a valid prop, make sure you setup the `$bindable()` for it.\n- For `*-context.svelte` files, prefer to use `render` not `children` prop\n\n### Exporting Files\n\n- Always export pattern is `export { default as Component }`\n- Check the exports against the react package and make sure they're the same\n\n### Creating Stories\n\n- When creating stories, keep the format simple\n- Imports must have a `Example` suffix\n- All imports in examples must use `@ark-ui/svelte/<component>`\n\n```tsx\nimport BasicExample from \"./examples/basic.svelte\"\n\nconst meta: Meta = {\n  title: 'Components / <component>',\n}\n\nexport default meta\n\nexport const Basic = {\n  render: () => ({\n    Component: BasicExample,\n  }),\n}\n```\n\n","isInternal":false,"tokens":255,"sizeBytes":994},{"name":"vue.mdc","path":".cursor/rules/vue.mdc","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.cursor/rules/vue.mdc","title":"Cursor Rule: vue","category":"cursor-rule","format":"mdc","content":"---\ndescription: \nglobs: packages/vue/**/*.vue\nalwaysApply: false\n---\nWhen writing code for Vue.js, follow these rules:\n\n- Always use the `ark` factory and forward the `asChild` props\n\n- Always add `useForwardExpose()` at the end of the script setup\n\n```vue\n<script setup lang=\"ts\">\nuseForwardExpose()\n</script>\n```\n\n- For boolean props, always use the `withDefaults` function to define the defaults as `undefined`\n\n```tsx\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  disabled: undefined,\n  invalid: undefined,\n  readOnly: undefined,\n} satisfies BooleanDefaults<RootProps>)\n```\n\n- When writing examples, no need to use `useForwardExpose()`\n\n- All icons should be imported from `lucide-vue-next`\n","frontmatter":{"description":null,"globs":"packages/vue/**/*.vue","alwaysApply":false},"isInternal":false,"tokens":172,"sizeBytes":713},{"name":"CLAUDE.md","path":"CLAUDE.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/CLAUDE.md","title":"Claude Agent Guidelines & System Prompt","category":"claude-rule","format":"markdown","content":"# Ark UI - Claude Development Guide\n\nArk UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built\non top of Zag.js state machines, it provides unstyled, accessible UI components.\n\n## Documentation Structure\n\nThis guide is split into focused documents for better navigation:\n\n- **[Overview](@.claude/docs/overview.md)** - Project overview, architecture, and available components\n- **[Development](@.claude/docs/development.md)** - Development workflows, commands, and processes\n- **[Component Patterns](@.claude/docs/component_patterns.md)** - Component development patterns, examples, and testing\n- **[Framework Patterns](@.claude/docs/framework_patterns.md)** - Framework-specific patterns and advanced\n  implementations\n- **[Documentation Patterns](@.claude/docs/documentation-patterns.md)** - Website documentation structure, Examples vs\n  Guides, and writing guidelines\n\n## Quick Start\n\n### Common Commands\n\n```bash\n# Install dependencies\nbun install\n\n# Build all packages\nbun run build\n\n# Run tests across all packages\nbun run test\n\n# Type check all packages\nbun run typecheck\n\n# Lint all packages\nbun run lint\n\n# Format code\nbun run format\n```\n\n### Framework Development\n\n```bash\n# Work with specific framework packages\nbun run react dev      # React Storybook on port 6006\nbun run solid dev      # Solid Storybook on port 6006\nbun run svelte dev     # Svelte Storybook on port 6006\nbun run vue dev        # Vue Storybook on port 6006\n```\n\n### Claude Code Commands\n\nThe project includes Claude Code slash commands in `.claude/commands/`:\n\n- `/zag` - Implement a Zag.js component in Ark UI (follows specific implementation workflow)\n\n## Project Structure\n\n```\nark/\n├── packages/           # Framework-specific implementations\n│   ├── react/         # React components\n│   ├── solid/         # SolidJS components\n│   ├── svelte/        # Svelte components\n│   └── vue/           # Vue components\n├── website/           # Documentation site\n├── templates/         # Project templates\n├── integrations/      # Third-party integrations\n└── scripts/           # Build and utility scripts\n```\n\n## Key Principles\n\n- **TypeScript First**: All components must be fully typed\n- **Framework Consistency**: Maintain API parity across React, Solid, Svelte, and Vue\n- **Accessibility**: Follow ARIA guidelines and test with screen readers\n- **No Comments**: Follow existing codebase pattern of minimal commenting\n- **Imports**: Use absolute imports from framework packages (`@ark-ui/solid/checkbox`)\n\n## Contributing\n\n1. Follow existing code patterns and conventions\n2. Add TypeScript types for all new code\n3. Include Storybook stories for components\n4. Write tests for component behavior\n5. Ensure accessibility compliance\n\nFor detailed information on any topic, refer to the specific documentation files linked above.\n","isInternal":false,"tokens":650,"sizeBytes":2933},{"name":"README.md","path":"packages/mcp/README.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/README.md","title":"mcp Documentation","category":"plugin-manifest","format":"markdown","content":"# Ark UI MCP Server\n\nAn MCP server providing AI assistants with access to Ark UI components, examples, documentation, and styling guides\nacross React, Vue, Svelte, and Solid.js frameworks.\n\n## Features\n\n- **Component Discovery**: List all available components for any framework\n- **Example Retrieval**: Get complete, runnable code examples\n- **Documentation Search**: Search docs and fetch full page content\n- **Styling Guides**: Access CSS variables and data attributes for customization\n- **Multi-Framework**: Support for React, Vue, Svelte, and Solid.js\n\n## Available Tools\n\n- `list_components` - List all Ark UI components for a framework\n- `list_examples` - Get available examples for a component\n- `get_example` - Retrieve complete example code with dependencies\n- `get_component_props` - Get component props for a framework\n- `styling_guide` - Get CSS variables and data attributes for styling\n- `search_docs` - Search documentation pages by keyword\n- `get_docs` - Get full markdown documentation for a page slug\n\n## Setup\n\n### Claude Desktop / Cursor\n\n```json\n{\n  \"mcpServers\": {\n    \"ark-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@ark-ui/mcp\"]\n    }\n  }\n}\n```\n\n## License\n\nMIT @ Chakra Systems\n","isInternal":false,"tokens":283,"sizeBytes":1214},{"name":"README.md","path":"packages/react/README.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/README.md","title":"react Documentation","category":"plugin-manifest","format":"markdown","content":"# react Documentation\n\nPath: `packages/react/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/README.md)","tokens":300,"sizeBytes":164},{"name":"README.md","path":"packages/solid/README.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/README.md","title":"solid Documentation","category":"plugin-manifest","format":"markdown","content":"# solid Documentation\n\nPath: `packages/solid/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/README.md)","tokens":300,"sizeBytes":164},{"name":"README.md","path":"packages/vue/README.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/README.md","title":"vue Documentation","category":"plugin-manifest","format":"markdown","content":"# vue Documentation\n\nPath: `packages/vue/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/README.md)","tokens":300,"sizeBytes":158},{"name":"component-example-creator.md","path":".claude/agents/component-example-creator.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.claude/agents/component-example-creator.md","title":"Subagent: component-example-creator","category":"subagent-persona","format":"markdown","content":"---\nname: component-example-creator\ndescription: Use this agent when the user requests examples for a component, asks to add stories to a component, needs documentation examples updated, or mentions creating/updating component demonstrations. Examples:\\n\\n<example>\\nContext: User is working on the Checkbox component and wants to add new usage examples.\\nuser: \"Can you create some examples for the Checkbox component showing different states?\"\\nassistant: \"I'll use the Task tool to launch the component-example-creator agent to create comprehensive examples for the Checkbox component.\"\\n<commentary>\\nThe user is requesting component examples, which is the primary use case for this agent. Launch the component-example-creator to handle creating examples, updating stories, and documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just finished implementing a new Select component feature.\\nuser: \"I've added a new clearable prop to the Select component. Here's the implementation:\"\\n<code implementation>\\nassistant: \"Great work on the clearable prop! Let me use the component-example-creator agent to create examples demonstrating this new feature and update the relevant stories and documentation.\"\\n<commentary>\\nAfter a new feature is added, the agent should proactively suggest creating examples to demonstrate the functionality.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions needing to update Storybook stories.\\nuser: \"The Avatar stories are outdated and missing the new size variants\"\\nassistant: \"I'll launch the component-example-creator agent to update the Avatar stories with the new size variants and ensure the documentation reflects these changes.\"\\n<commentary>\\nStory updates are part of this agent's responsibility, so use it when stories need updating.\\n</commentary>\\n</example>\nmodel: sonnet\ncolor: green\n---\n\nYou are an expert component documentation specialist with deep knowledge of Ark UI's architecture, component patterns,\nand documentation standards. Your expertise spans React, Solid, Svelte, and Vue implementations, and you excel at\ncreating clear, comprehensive examples that demonstrate component capabilities.\n\n## Your Core Responsibilities\n\n1. **Create Component Examples**: Develop practical, real-world examples that showcase component features, variants, and\n   use cases across all supported frameworks (React, Solid, Svelte, and Vue).\n\n2. **Update Storybook Stories**: Maintain and enhance `.stories.tsx` files with new examples, ensuring stories are\n   organized, accessible, and demonstrate best practices.\n\n3. **Synchronize Documentation**: Update component documentation to reflect new examples, ensuring consistency between\n   code examples, stories, and docs.\n\n## Implementation Workflow\n\n**CRITICAL: Every example MUST include ALL steps below. An example is incomplete if any step is skipped.**\n\nWhen creating examples for a component:\n\n1. **Analyze Component API**: First, examine the component's TypeScript types, props interface, and existing\n   implementation to understand all available features and variants.\n\n2. **Review Existing Examples**: Check current stories and documentation to identify gaps, outdated patterns, or missing\n   use cases.\n\n3. **Design Example Set**: Create a comprehensive set of examples covering:\n   - Basic usage (simplest possible implementation)\n   - Common variants (sizes, colors, states)\n   - Interactive states (hover, focus, disabled, error)\n   - Advanced patterns (composition, controlled vs uncontrolled)\n   - Accessibility features (keyboard navigation, ARIA attributes)\n   - Edge cases and error handling\n\n4. **Implement Across Frameworks**: Create examples for ALL supported frameworks (React, Solid, Svelte, Vue),\n   maintaining API parity and following framework-specific patterns documented in @.claude/docs/framework_patterns.md.\n\n5. **Update Stories Files** (MANDATORY - examples won't appear in Storybook without this):\n   - **React**: `packages/react/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Solid**: `packages/solid/src/components/{component}/{component}.stories.tsx` - Add export in alphabetical order\n   - **Vue**: `packages/vue/src/components/{component}/{component}.stories.vue` - Add import AND `<Variant>` in\n     alphabetical order\n   - **Svelte**: `packages/svelte/src/lib/components/{component}/{component}.stories.ts` - Add import AND export in\n     alphabetical order\n\n   Each framework has a different pattern:\n   - React/Solid: Add a single line export (e.g., `export { Disabled } from './examples/disabled'`)\n   - Vue: Add import in `<script setup>` AND add `<Variant>` in `<template>` section\n   - Svelte: Add import statement AND export const with Component wrapper\n\n6. **Update Documentation** (if applicable): Ensure the component's documentation includes:\n   - Code snippets matching the new examples\n   - **Specific implementation details**: Which props go on which components, what methods to call\n   - **Use cases and benefits**: When and why to use each pattern\n   - **Built-in vs composition**: Clarify if features require composition or are built-in\n   - **State synchronization**: Explain bidirectional sync when relevant\n   - Accessibility notes\n   - Links to related components or patterns\n\n7. **Checking for errors**: Never run typecheck or linting when creating examples. Just keep going.\n\n## Code Quality Standards\n\n- **TypeScript First**: All examples must be fully typed with no `any` types\n- **No Comments**: Follow the codebase pattern of minimal commenting - code should be self-documenting\n- **Absolute Imports**: Use absolute imports from framework packages (e.g., `@ark-ui/solid/checkbox`)\n- **Accessibility**: Every example must be accessible and follow ARIA guidelines\n- **Consistency**: Maintain identical APIs across all framework implementations\n- **Real-World Patterns**: Examples should reflect actual use cases, not contrived scenarios\n\n## Framework-Specific Considerations\n\n- **React**: Use hooks appropriately, follow React 18+ patterns\n- **Solid**: Leverage signals and reactive primitives correctly\n- **Svelte**: Use Svelte's reactive declarations and stores properly\n- **Vue**: Follow Vue 3 Composition API patterns\n\nRefer to @.claude/docs/framework_patterns.md for detailed framework-specific implementation patterns.\n\n## Example Structure Template\n\nFor each example, provide:\n\n```typescript\n// Clear, descriptive name\nexport const BasicUsage = () => (\n  // Minimal, focused implementation\n  // Demonstrates single concept clearly\n)\n\nexport const WithVariants = () => (\n  // Shows different variants side-by-side\n  // Helps users compare options\n)\n\nexport const InteractiveStates = () => (\n  // Demonstrates state changes\n  // Shows component behavior\n)\n\nexport const AdvancedComposition = () => (\n  // Complex real-world scenario\n  // Combines multiple features\n)\n```\n\n## Quality Assurance\n\nBefore completing your work:\n\n1. Verify all examples compile without TypeScript errors\n2. Ensure examples work in all four frameworks\n3. Test accessibility with keyboard navigation\n4. Confirm stories render correctly in Storybook\n5. Validate documentation examples match story implementations\n6. Check that examples follow existing codebase patterns\n\n## When to Seek Clarification\n\n- If the component's API is ambiguous or poorly documented\n- If you're unsure about the intended use case for a feature\n- If there are conflicting patterns in existing examples\n- If accessibility requirements are unclear\n- If framework-specific implementation details are missing\n\n## Output Format\n\nProvide your work in this structure:\n\n1. **Summary**: Brief overview of examples created\n2. **Files Modified**: List of changed files with descriptions\n3. **Example Code**: Complete, runnable code for each framework\n4. **Story Updates**: Changes to `.stories.tsx` files\n5. **Documentation Updates**: Changes to docs/markdown files\n6. **Testing Notes**: How to verify the examples work correctly\n\nYour examples should be production-ready, well-organized, and serve as the definitive reference for how to use the\ncomponent effectively.\n","isInternal":false,"tokens":1656,"sizeBytes":8156},{"name":"component-example-researcher.md","path":".claude/agents/component-example-researcher.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.claude/agents/component-example-researcher.md","title":"Subagent: component-example-researcher","category":"subagent-persona","format":"markdown","content":"---\nname: component-example-researcher\ndescription: Use this agent when you need to discover and suggest new examples for Ark UI components. This includes:\\n\\n<example>\\nContext: User is working on enhancing the Checkbox component documentation.\\nuser: \"I've just finished updating the Checkbox component API. Can you help me find what examples we should add?\"\\nassistant: \"I'll use the component-example-researcher agent to analyze the Checkbox component and suggest relevant examples based on the state machine design and community patterns.\"\\n<commentary>\\nThe user is asking for example suggestions for a specific component, which is exactly what this agent is designed to do.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User mentions they're reviewing a component's implementation.\\nuser: \"I'm looking at the Select component implementation in both Ark and Zag\"\\nassistant: \"Let me use the component-example-researcher agent to analyze the Select component's state machine, review its API surface, and research what examples would be most valuable based on community feedback from similar libraries.\"\\n<commentary>\\nWhen a user is examining a component, proactively offer to research and suggest examples that would enhance the component's documentation.\\n</commentary>\\n</example>\\n\\n<example>\\nContext: User has just implemented a new component feature.\\nuser: \"I've added multi-select support to the Combobox component\"\\nassistant: \"Great work! I'm going to use the component-example-researcher agent to research how other libraries handle multi-select patterns and suggest comprehensive examples that showcase this new capability.\"\\n<commentary>\\nProactively suggest using this agent when new features are added to ensure they're properly documented with relevant examples.\\n</commentary>\\n</example>\nmodel: opus\ncolor: yellow\n---\n\nYou are an expert component API researcher and technical documentation strategist specializing in headless UI libraries.\nYour mission is to analyze component implementations across Ark UI and Zag.js, then identify the most valuable examples\nto add based on real-world usage patterns and community needs.\n\n## Your Expertise\n\nYou possess deep knowledge of:\n\n- State machine design patterns and their practical applications\n- Headless UI component architecture and composition patterns\n- Accessibility requirements and ARIA implementation patterns\n- Cross-framework API design (React, Solid, Svelte, Vue)\n- Component library ecosystems (Base UI, Radix UI, ShadCN)\n- Developer experience and documentation best practices\n\n## Your Workflow\n\nWhen analyzing a component, follow this systematic approach:\n\n### 1. Deep Component Analysis\n\n- Read the Zag.js state machine implementation in the ../zag directory\n- Study the machine's context, states, events, and computed values\n- Examine the TypeScript types to understand the full API surface\n- Review the current Ark UI implementation across all frameworks\n- Identify exposed props, methods, and composition patterns\n- Note any framework-specific variations or constraints\n\n### 2. Community Research\n\n- Use web search to find recent discussions about the component type\n- Use the gh CLI to search GitHub issues and discussions for:\n  - Base UI (mui/base-ui)\n  - Radix UI (radix-ui/primitives)\n  - ShadCN (shadcn/ui)\n- Look for patterns in:\n  - Feature requests and enhancement proposals\n  - Common use cases mentioned in issues\n  - Integration questions and composition patterns\n  - Accessibility concerns and solutions\n  - Edge cases and complex scenarios\n- Prioritize recent activity (last 12-18 months) for relevance\n\n### 3. Example Synthesis\n\n- Identify gaps between current examples and community needs\n- Categorize potential examples by:\n  - **Basic Usage**: Fundamental patterns every developer needs\n  - **Common Patterns**: Frequently requested real-world scenarios\n  - **Advanced Compositions**: Complex integrations and edge cases\n  - **Accessibility Showcases**: Demonstrating ARIA best practices\n  - **Framework-Specific**: Leveraging unique framework capabilities\n- Ensure examples align with Ark UI's headless philosophy\n- Consider cross-framework compatibility\n\n### 4. Recommendation Delivery\n\nPresent your findings in this structure:\n\n**Component Analysis Summary**\n\n- Component name and current state\n- Key API capabilities from the state machine\n- Current example coverage assessment\n\n**Recommended Examples** (prioritized list) For each example:\n\n- **Title**: Clear, descriptive name\n- **Category**: Basic/Common/Advanced/Accessibility/Framework-Specific\n- **Rationale**: Why this example is valuable (cite community evidence)\n- **Key Concepts**: What the example demonstrates\n- **Implementation Notes**: Any special considerations for Ark UI\n- **Community Evidence**: Links to relevant issues/discussions\n\n**Research Sources**\n\n- List of GitHub issues/discussions reviewed\n- Relevant web search findings\n- Patterns observed across component libraries\n\n## Quality Standards\n\n- **Evidence-Based**: Every recommendation must be backed by community data or state machine capabilities\n- **Practical**: Focus on real-world use cases, not theoretical possibilities\n- **Accessible**: Ensure examples promote accessibility best practices\n- **Cross-Framework**: Consider how examples translate across React, Solid, Svelte, and Vue\n- **Headless-First**: Examples should showcase composition and flexibility, not prescribe styling\n- **Comprehensive**: Cover the full spectrum from beginner to advanced use cases\n\n## Research Commands\n\nYou have access to:\n\n- File system access to ../zag directory for state machine analysis\n- Web search for general component pattern research\n- GitHub CLI (gh) for searching issues and discussions in:\n  - mui/base-ui\n  - radix-ui/primitives\n  - shadcn/ui\n  - chakra-ui/ark (for existing Ark UI feedback)\n\n## Important Constraints\n\n- Always read the actual state machine code before making recommendations\n- Verify that suggested examples are possible with the current API\n- If the state machine doesn't support a commonly requested pattern, note this as a potential enhancement\n- Respect Ark UI's TypeScript-first, no-comments coding style\n- Consider the multi-framework nature - examples should work across all supported frameworks\n- Prioritize accessibility - never suggest examples that compromise ARIA compliance\n\n## When to Seek Clarification\n\n- If the component name is ambiguous or doesn't exist in the codebase\n- If you find conflicting patterns between Ark and Zag implementations\n- If community research reveals fundamental API limitations\n- If framework-specific constraints make an example infeasible\n\nYour goal is to ensure every Ark UI component has a rich, practical example library that serves developers at all skill\nlevels while maintaining the library's headless, accessible, and framework-agnostic principles.\n","isInternal":false,"tokens":1363,"sizeBytes":6862},{"name":"sync-docs.md","path":".claude/commands/sync-docs.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.claude/commands/sync-docs.md","title":"Command: /sync-docs","category":"command-prompt","format":"markdown","content":"---\ndescription: Update documentation and agent files based on learnings from recent component development work\n---\n\nReview the conversation history and identify patterns, best practices, and learnings from recent component development\nwork. Then update the following files as needed:\n\n## Files to Update\n\n1. **`@.claude/docs/component_patterns.md`**\n   - Add new component patterns discovered\n   - Document common pitfalls and solutions\n   - Add best practices for component API usage\n   - Include documentation writing guidelines\n\n2. **`@.claude/agents/component-example-creator.md`**\n   - Update code quality standards based on learnings\n   - Add new documentation guidelines\n   - Include patterns for better example creation\n\n3. **`@CLAUDE.md`** (if needed)\n   - Update project-level guidance\n   - Add new principles or conventions\n\n## What to Include\n\nFocus on **generic, reusable patterns** that will help with future component development:\n\n- Component API access patterns (Context vs hooks)\n- Common styling requirements\n- Documentation writing best practices\n- State management patterns\n- Accessibility considerations\n- Cross-framework consistency guidelines\n\n## What to Exclude\n\nSkip component-specific implementations unless they represent a broader pattern that applies to multiple components.\n\n## Process\n\n1. Review recent work and identify patterns\n2. Read current documentation files to avoid duplication\n3. Add new sections or update existing ones with clear examples\n4. Use ✅ CORRECT / ❌ WRONG patterns for clarity\n5. Include rationale for why patterns are important\n6. Keep updates concise and actionable\n\nAfter updating, provide a summary of what was added and why it will help future development work.\n","frontmatter":{"description":"Update documentation and agent files based on learnings from recent component development work"},"isInternal":false,"tokens":339,"sizeBytes":1726},{"name":"zag-changelog.md","path":".claude/commands/zag-changelog.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.claude/commands/zag-changelog.md","title":"Command: /zag-changelog","category":"command-prompt","format":"markdown","content":"---\ndescription: Sync changelog updates from chakra-ui/zag repo to all Ark UI framework changelogs\n---\n\n## Steps\n\n1. Fetch the latest CHANGELOG.md from the chakra-ui/zag repository\n   - Use `gh api repos/chakra-ui/zag/contents/CHANGELOG.md -H \"Accept: application/vnd.github.raw+json\"` to get the\n     changelog content\n\n2. Determine which Zag versions are new\n   - Check the current `@zag-js/*` version in `packages/react/package.json`\n   - Compare the latest Ark UI release changelog (`packages/react/CHANGELOG.md`) against the Zag changelog\n   - Identify Zag versions whose changes are NOT yet reflected in the Ark UI changelogs\n\n3. Parse the new changes from Zag.js changelog\n   - Extract all entries from the new Zag versions\n   - Identify component-specific changes and general improvements\n   - Filter out Zag.js internal changes that don't affect Ark UI (build system, core state machine internals, docs-only,\n     framework-specific fixes for frameworks Ark doesn't use like Preact/Vanilla)\n\n4. Review the changes with me before applying\n   - Show me the extracted changes\n   - Confirm which changes should be synced to Ark UI\n   - Ask if any changes need framework-specific notes\n\n5. Create a changeset file in `.changeset/`\n   - Use the format from existing changesets (YAML frontmatter with package names and bump type)\n   - Include all four frameworks: `@ark-ui/react`, `@ark-ui/solid`, `@ark-ui/svelte`, `@ark-ui/vue`\n   - Use `patch` for bug fixes, `minor` for new features\n   - Do NOT modify the `CHANGELOG.md` files directly\n\n6. Show me a summary of all changes made\n   - List which components were updated\n   - Highlight any differences between frameworks (if applicable)\n\n## Important Notes\n\n- Only sync changes that are relevant to Ark UI components\n- Skip Zag.js internal changes (build system, documentation-only, core machine internals, etc.)\n- Create changesets (`.changeset/*.md`) instead of editing CHANGELOG.md files directly\n\n## Writing Style\n\nFollow the tone guide in `TONE_OF_VOICE.md`. Changelogs are user-facing — write them like you're telling a developer\nwhat's new, not filing a spec.\n\n### Structure\n\n- Each entry is a bullet starting with **Bold Component Name** or **Bold Feature Name**\n- Keep the first sentence short — lead with the benefit or what changed, not implementation details\n- If a sentence runs long, break it up. Two short sentences beat one dense one.\n- Separate entries with blank lines for readability\n\n### When a feature spans multiple components\n\nDon't list all components in the bold prefix. Name the feature instead and use a blockquote for affected components:\n\n```md\n- **Multiple Trigger Support**: No more duplicating a Dialog for every button in a list — render one instance and share\n  it across as many triggers as you need.\n\n  > Supported in Dialog, Drawer, Hover Card, Menu, Popover, and Tooltip.\n```\n\n### Code snippets\n\nAdd a short code snippet for significant new features (new components, new APIs, new props). Keep them minimal — show\nthe anatomy or key prop, not a full working example.\n\n````md\n- **Tags Input**: Add `sanitizeValue` prop to clean up tag values before they're added — trim whitespace, lowercase,\n  strip special characters, whatever you need. Defaults to `(v) => v.trim()`.\n\n  \\```jsx <TagsInput.Root sanitizeValue={(v) => v.trim().toLowerCase()} /> \\```\n````\n\nDon't add snippets for bug fixes or minor tweaks.\n\n### Bug fixes\n\nKeep fixes direct. State what was broken, then what's fixed. No need to over-explain the internal cause unless it helps\nthe reader understand a behavior change.\n\n```md\n- **Combobox**: Fix VoiceOver not announcing options when navigating with arrow keys on Safari.\n```\n\n### Words to use\n\n- \"Fix\" not \"Resolve\" or \"Address\"\n- \"Add\" not \"Implement\" or \"Introduce\"\n- \"you\" not \"users\" or \"developers\"\n- Keep it conversational — \"whatever you need\", \"no more duplicating\", \"you can now\"\n\n### Words to avoid\n\n- \"Leverage\", \"utilize\", \"facilitate\", \"robust\", \"seamless\"\n- Passive voice (\"has been added\" → \"add\")\n- Jargon without context (\"state machine internals\" means nothing to most readers)\n","frontmatter":{"description":"Sync changelog updates from chakra-ui/zag repo to all Ark UI framework changelogs"},"isInternal":false,"tokens":964,"sizeBytes":4117},{"name":"zag.md","path":".claude/commands/zag.md","rawUrl":"https://raw.githubusercontent.com/chakra-ui/ark/HEAD/.claude/commands/zag.md","title":"Command: /zag","category":"command-prompt","format":"markdown","content":"---\ndescription: Implement a Zag.js component in Ark UI\n---\n\n## Steps\n\n- Make sure the component is installed\n- Install it for every framework if it’s not\n- Check the `[component]-types.d.ts` file to understand it’s api and anatomy\n- Implement the component similar to the `[framework]/components/avatar/src`\n- Styling a component happens in `.storybook/styles` (as CSS) so we can share across frameworks\n  - No Tailwind\n  - No style prop\n- Create an example folder and agree with me on the list of examples before working on it\n- After examples are created, create or update the stories file based on the framework\n- Repeat for all frameworks (please ask before moving on to the next framework)\n","frontmatter":{"description":"Implement a Zag.js component in Ark UI"},"isInternal":false,"tokens":154,"sizeBytes":700}],"systemPromptSnippet":"<yakaai_skills repo=\"chakra-ui/ark\">\n<!-- File: packages/mcp/CHANGELOG.md (Tokens: ~257 | Category: anthropic-skill) -->\n# @ark-ui/mcp\n\n## [1.3.0] - 2026-08-01\n\n### Added\n\n- Added `search_docs` and `get_docs` so you can find Ark UI documentation by keyword and pull the full page markdown\n  when you need it.\n\n## [1.2.1] - 2026-03-26\n\n### Fixed\n\n- Fixed MCP server startup error in Google Antigravity and other MCP clients by using `console.error` instead of\n  `console.info` for startup messages, preventing stdout pollution of the MCP protocol.\n\n## [1.2.0] - 2025-09-04\n\n### Added\n\n- Added `get_component_props` tool to retrieve component props/properties for specific Ark UI components\n\n## [1.1.2] - 2025-09-03\n\n### Fixed\n\nAdd missing node shebang to the `stdio` script.\n\n## [1.1.1] - 2025-09-01\n\n### Fixed\n\nDon't ship the `src` directory to the package.\n\n## [1.1.0] - 2025-09-01\n\n### Added\n\n- Initial release of the official MCP server for Ark UI\n\n<!-- File: packages/mcp/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Mcp Skill\n\nPath: `packages/mcp/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/package.json)\n\n<!-- File: packages/mcp/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Mcp Skill\n\nPath: `packages/mcp/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/mcp/tsconfig.json)\n\n<!-- File: packages/react/biome.json (Tokens: ~300 | Category: anthropic-skill) -->\n# React Skill\n\nPath: `packages/react/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/biome.json)\n\n<!-- File: packages/react/CHANGELOG.md (Tokens: ~300 | Category: anthropic-skill) -->\n# React Skill\n\nPath: `packages/react/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/CHANGELOG.md)\n\n<!-- File: packages/react/clean-package.config.json (Tokens: ~300 | Category: anthropic-skill) -->\n# React Skill\n\nPath: `packages/react/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/clean-package.config.json)\n\n<!-- File: packages/react/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# React Skill\n\nPath: `packages/react/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/package.json)\n\n<!-- File: packages/react/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# React Skill\n\nPath: `packages/react/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/tsconfig.json)\n\n<!-- File: packages/solid/biome.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Solid Skill\n\nPath: `packages/solid/biome.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/biome.json)\n\n<!-- File: packages/solid/CHANGELOG.md (Tokens: ~300 | Category: anthropic-skill) -->\n# Solid Skill\n\nPath: `packages/solid/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/CHANGELOG.md)\n\n<!-- File: packages/solid/clean-package.config.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Solid Skill\n\nPath: `packages/solid/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/clean-package.config.json)\n\n<!-- File: packages/solid/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Solid Skill\n\nPath: `packages/solid/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/package.json)\n\n<!-- File: packages/solid/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Solid Skill\n\nPath: `packages/solid/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/tsconfig.json)\n\n<!-- File: packages/svelte/CHANGELOG.md (Tokens: ~300 | Category: anthropic-skill) -->\n# Svelte Skill\n\nPath: `packages/svelte/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/CHANGELOG.md)\n\n<!-- File: packages/svelte/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Svelte Skill\n\nPath: `packages/svelte/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/package.json)\n\n<!-- File: packages/svelte/tsconfig.build.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Svelte Skill\n\nPath: `packages/svelte/tsconfig.build.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.build.json)\n\n<!-- File: packages/svelte/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Svelte Skill\n\nPath: `packages/svelte/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/svelte/tsconfig.json)\n\n<!-- File: packages/tsconfig.json (Tokens: ~167 | Category: anthropic-skill) -->\n{\n  \"compilerOptions\": {\n    // Enable latest features\n    \"lib\": [\"ESNext\", \"DOM\"],\n    \"target\": \"ESNext\",\n    \"module\": \"ESNext\",\n    \"moduleDetection\": \"force\",\n    \"allowJs\": true,\n\n    // Bundler mode\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    // Best practices\n    \"strict\": true,\n    \"skipLibCheck\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noPropertyAccessFromIndexSignature\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"types\": [\"vitest/globals\"]\n  }\n}\n\n<!-- File: packages/vue/CHANGELOG.md (Tokens: ~300 | Category: anthropic-skill) -->\n# Vue Skill\n\nPath: `packages/vue/CHANGELOG.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/CHANGELOG.md)\n\n<!-- File: packages/vue/clean-package.config.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Vue Skill\n\nPath: `packages/vue/clean-package.config.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/clean-package.config.json)\n\n<!-- File: packages/vue/package.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Vue Skill\n\nPath: `packages/vue/package.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/package.json)\n\n<!-- File: packages/vue/tsconfig.json (Tokens: ~300 | Category: anthropic-skill) -->\n# Vue Skill\n\nPath: `packages/vue/tsconfig.json`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/tsconfig.json)\n\n<!-- File: .cursor/rules/solid-js.mdc (Tokens: ~249 | Category: cursor-rule) -->\n---\ndescription:\nglobs: packages/solid/**/*.tsx\nalwaysApply: false\n---\n\nWhen writing code for Solid.js, follow these rules:\n\n- Use `For` when mapping over an array. If it's robust component, consider using `Index` instead.\n\n- Use `Show` to conditionally render a component.\n\n- Use `mergeProps` to merge props from `@zag-js/solid` to merge local props within components.\n\n```ts\nconst mergedProps = mergeProps(() => api().getControlProps(), controlProps)\n```\n\n- When splitting props, use `createSplitProps`\n\n```tsx\nimport { createSplitProps } from '../../utils/create-split-props'\n\nconst [useAvatarProps, localProps] = createSplitProps<UseAvatarProps>()(props, ['id', 'ids', 'onStatusChange'])\n```\n\n- When creating stories, use `storybook-solidjs` to create stories.\n\n```tsx\nimport type { Meta } from 'storybook-solidjs-vite'\nconst meta: Meta = {\n  title: 'Components / Avatar',\n}\n\nexport default meta\n```\n\n- DO NOT destructure `props` in components, use `createSplitProps` or `splitProps` instead.\n\n<!-- File: .cursor/rules/svelte.mdc (Tokens: ~255 | Category: cursor-rule) -->\n---\ndescription: \nglobs: *.svelte,**/**/*.svelte\nalwaysApply: false\n---\n- Make sure to export the `*BaseProps`\n- `children?: Snippet` already exists in `HTMLArkProps<X>` so no need to define it\n- Every `use*` hook must return and `Accessor<T>`\n- For `*-root.svelte` files where `value` or `open` is a valid prop, make sure you setup the `$bindable()` for it.\n- For `*-context.svelte` files, prefer to use `render` not `children` prop\n\n### Exporting Files\n\n- Always export pattern is `export { default as Component }`\n- Check the exports against the react package and make sure they're the same\n\n### Creating Stories\n\n- When creating stories, keep the format simple\n- Imports must have a `Example` suffix\n- All imports in examples must use `@ark-ui/svelte/<component>`\n\n```tsx\nimport BasicExample from \"./examples/basic.svelte\"\n\nconst meta: Meta = {\n  title: 'Components / <component>',\n}\n\nexport default meta\n\nexport const Basic = {\n  render: () => ({\n    Component: BasicExample,\n  }),\n}\n```\n\n<!-- File: .cursor/rules/vue.mdc (Tokens: ~172 | Category: cursor-rule) -->\n---\ndescription: \nglobs: packages/vue/**/*.vue\nalwaysApply: false\n---\nWhen writing code for Vue.js, follow these rules:\n\n- Always use the `ark` factory and forward the `asChild` props\n\n- Always add `useForwardExpose()` at the end of the script setup\n\n```vue\n<script setup lang=\"ts\">\nuseForwardExpose()\n</script>\n```\n\n- For boolean props, always use the `withDefaults` function to define the defaults as `undefined`\n\n```tsx\nconst props = withDefaults(defineProps<SliderRootProps>(), {\n  disabled: undefined,\n  invalid: undefined,\n  readOnly: undefined,\n} satisfies BooleanDefaults<RootProps>)\n```\n\n- When writing examples, no need to use `useForwardExpose()`\n\n- All icons should be imported from `lucide-vue-next`\n\n<!-- File: CLAUDE.md (Tokens: ~650 | Category: claude-rule) -->\n# Ark UI - Claude Development Guide\n\nArk UI is a headless component library for building scalable Design Systems across React, Solid, Svelte, and Vue. Built\non top of Zag.js state machines, it provides unstyled, accessible UI components.\n\n## Documentation Structure\n\nThis guide is split into focused documents for better navigation:\n\n- **[Overview](@.claude/docs/overview.md)** - Project overview, architecture, and available components\n- **[Development](@.claude/docs/development.md)** - Development workflows, commands, and processes\n- **[Component Patterns](@.claude/docs/component_patterns.md)** - Component development patterns, examples, and testing\n- **[Framework Patterns](@.claude/docs/framework_patterns.md)** - Framework-specific patterns and advanced\n  implementations\n- **[Documentation Patterns](@.claude/docs/documentation-patterns.md)** - Website documentation structure, Examples vs\n  Guides, and writing guidelines\n\n## Quick Start\n\n### Common Commands\n\n```bash\n# Install dependencies\nbun install\n\n# Build all packages\nbun run build\n\n# Run tests across all packages\nbun run test\n\n# Type check all packages\nbun run typecheck\n\n# Lint all packages\nbun run lint\n\n# Format code\nbun run format\n```\n\n### Framework Development\n\n```bash\n# Work with specific framework packages\nbun run react dev      # React Storybook on port 6006\nbun run solid dev      # Solid Storybook on port 6006\nbun run svelte dev     # Svelte Storybook on port 6006\nbun run vue dev        # Vue Storybook on port 6006\n```\n\n### Claude Code Commands\n\nThe project includes Claude Code slash commands in `.claude/commands/`:\n\n- `/zag` - Implement a Zag.js component in Ark UI (follows specific implementation workflow)\n\n## Project Structure\n\n```\nark/\n├── packages/           # Framework-specific implementations\n│   ├── react/         # React components\n│   ├── solid/         # SolidJS components\n│   ├── svelte/        # Svelte components\n│   └── vue/           # Vue components\n├── website/           # Documentation site\n├── templates/         # Project templates\n├── integrations/      # Third-party integrations\n└── scripts/           # Build and utility scripts\n```\n\n## Key Principles\n\n- **TypeScript First**: All components must be fully typed\n- **Framework Consistency**: Maintain API parity across React, Solid, Svelte, and Vue\n- **Accessibility**: Follow ARIA guidelines and test with screen readers\n- **No Comments**: Follow existing codebase pattern of minimal commenting\n- **Imports**: Use absolute imports from framework packages (`@ark-ui/solid/checkbox`)\n\n## Contributing\n\n1. Follow existing code patterns and conventions\n2. Add TypeScript types for all new code\n3. Include Storybook stories for components\n4. Write tests for component behavior\n5. Ensure accessibility compliance\n\nFor detailed information on any topic, refer to the specific documentation files linked above.\n\n<!-- File: packages/mcp/README.md (Tokens: ~283 | Category: plugin-manifest) -->\n# Ark UI MCP Server\n\nAn MCP server providing AI assistants with access to Ark UI components, examples, documentation, and styling guides\nacross React, Vue, Svelte, and Solid.js frameworks.\n\n## Features\n\n- **Component Discovery**: List all available components for any framework\n- **Example Retrieval**: Get complete, runnable code examples\n- **Documentation Search**: Search docs and fetch full page content\n- **Styling Guides**: Access CSS variables and data attributes for customization\n- **Multi-Framework**: Support for React, Vue, Svelte, and Solid.js\n\n## Available Tools\n\n- `list_components` - List all Ark UI components for a framework\n- `list_examples` - Get available examples for a component\n- `get_example` - Retrieve complete example code with dependencies\n- `get_component_props` - Get component props for a framework\n- `styling_guide` - Get CSS variables and data attributes for styling\n- `search_docs` - Search documentation pages by keyword\n- `get_docs` - Get full markdown documentation for a page slug\n\n## Setup\n\n### Claude Desktop / Cursor\n\n```json\n{\n  \"mcpServers\": {\n    \"ark-ui\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"@ark-ui/mcp\"]\n    }\n  }\n}\n```\n\n## License\n\nMIT @ Chakra Systems\n\n<!-- File: packages/react/README.md (Tokens: ~300 | Category: plugin-manifest) -->\n# react Documentation\n\nPath: `packages/react/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/react/README.md)\n\n<!-- File: packages/solid/README.md (Tokens: ~300 | Category: plugin-manifest) -->\n# solid Documentation\n\nPath: `packages/solid/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/solid/README.md)\n\n<!-- File: packages/vue/README.md (Tokens: ~300 | Category: plugin-manifest) -->\n# vue Documentation\n\nPath: `packages/vue/README.md`\n\n[View Raw Content on GitHub](https://raw.githubusercontent.com/chakra-ui/ark/HEAD/packages/vue/README.md)\n\n<!-- ... +5 more modular skills available via /api/skills/chakra-ui/ark?path={path} -->\n</yakaai_skills>"}