Jazz UI Development

What it does

When your agent uses it

• Optimizing Jazz applications
• Tasks that involve Cross-platform mobile apps
• Tasks that involve Debugging

Example prompts

• “/jazz-ui-development”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

1. 1Check $isLoaded: Ensure you are checking if (coValue.$isLoaded) before rendering.
2. 2Deep Loading: If nested data is missing, use resolve in your hook (e.g. useCoState(..., { resolve: { items: true } })).
3. 3Provider Check: Ensure the component is wrapped in the appropriate .

What it can do on your machine

Read from SKILL.md and the folder at commit 4f90501. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  No scripts in the folder and no shell commands in SKILL.md (its code samples are typescript).

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Jazz UI Development loads about 1.7k tokens when it runs, and up to ~7.8k if it reads all its reference files. Until then it costs about 90 tokens; SKILL.md has 670 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~90

When it runs · the whole SKILL.md, loaded when a task matches

~1.7k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~7.8k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from garden-co/classic-jazz at commit 4f90501, republished under its MIT licence (© garden-co). 670 words, ~1,747 tokens.

name

jazz-ui-development

description

Use this skill when building, debugging, or optimizing Jazz applications. It covers Jazz's bindings with various different UI frameworks, as well as how to use Jazz without a framework. Look here for details on providers and context, hooks and reactive data fetching, authentication, and specialized UI components for media and inspection.

const detailedPost = await post.$jazz.ensureLoaded({
  resolve: {
    comments: {
      $each: {
        author: true 
      }
    }
  }
});

// Subscribing to all entries across all accounts
const allEntries = Object.values(feed.perAccount).flatMap(accountFeed => Array.from(accountFeed.all));

// Pushing a new entry
feed.$jazz.push({ message: "Hello", timestamp: Date.now() });

const list = co.list(MyUnion);
const item = list[0];

if (item.type === "text") {
  console.log(item.value); // item is narrowed to TextVariant
} else if (item.type === "image") {
  console.log(item.image.$jazz.id); // item is narrowed to ImageVariant
}

<Image imageId={productImage.$jazz.id} width={300} />

© garden-co, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (references) in .cursor/skills/jazz-ui-development of garden-co/classic-jazz.

• SKILL.md
• references/expo.md
• references/react-native.md
• references/react.md
• references/svelte.md
• references/vanilla.md

Open the folder on GitHubat commit 4f90501