zag

Name: zag
Author: chakra-ui

Implement a Zag.js component in Ark UI

by chakra-ui(0) 0 installs

Free

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Prompt file imported from chakra-ui/ark (.claude/commands/zag.md). Copyright stays with the author.

Steps

Make sure the component is installed
Install it for every framework if it’s not
Check the [component]-types.d.ts file to understand it’s api and anatomy
Implement the component similar to the [framework]/components/avatar/src
Styling a component happens in .storybook/styles (as CSS) so we can share across frameworks
- No Tailwind
- No style prop
Create an example folder and agree with me on the list of examples before working on it
After examples are created, create or update the stories file based on the framework
Repeat for all frameworks (please ask before moving on to the next framework)

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

## Steps

- Make sure the component is installed
- Install it for every framework if it’s not
- Check the `[component]-types.d.ts` file to understand it’s api and anatomy
- Implement the component similar to the `[framework]/components/avatar/src`
- Styling a component happens in `.storybook/styles` (as CSS) so we can share across frameworks
  - No Tailwind
  - No style prop
- Create an example folder and agree with me on the list of examples before working on it
- After examples are created, create or update the stories file based on the framework
- Repeat for all frameworks (please ask before moving on to the next framework)

Manifest

The prompt text and its fill-in variables. Copy it or fetch it by URL from your own code.

chakra-ui-ark-zag-command.prompt.jsonjson

{
  "prompt": "## 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)",
  "variables": [],
  "notes": "Implement a Zag.js component in Ark UI",
  "metadata": {
    "source": {
      "provider": "github-claude-commands",
      "repository": "https://github.com/chakra-ui/ark",
      "path": ".claude/commands/zag.md",
      "ref": "ac62ef7f7b24d8ce45129239e126cfca3caa0619",
      "url": "https://github.com/chakra-ui/ark/blob/ac62ef7f7b24d8ce45129239e126cfca3caa0619/.claude/commands/zag.md",
      "key": "chakra-ui/ark/.claude/commands/zag.md"
    }
  }
}

Fetch it by URL: GET /api/v1/registry/chakra-ui-ark-zag-command/manifest?version=1.0.0

About

Steps

Use it

Manifest

Reviews