working-on-ui-components

A guide for changing the @rozenite/ui package, which contains reusable interface components, with Storybook, a tool for developing and checking components in isolation.

In plain words
What is it for?
Use it to update or add Storybook examples for UI changes and perform browser-based visual checks.
Why use it?
It provides a consistent way to check changed component behavior and appearance in a browser before relying on the full app.

Agent

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add agents/callstackincubator/rozenite/working-on-ui-components
Clone the repo
git clone --depth 1 https://github.com/callstackincubator/rozenite
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 116 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.00116
Opus 5 $0.00000 $0.00058
Sonnet 5 $0.00000 $0.00023
Haiku 4.5 $0.00000 $0.00012

Measured yesterday against content hash 1e5b07c4833a, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

working-on-ui-components scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

agents/working-on-ui-components.md · 12 lines

What it actually says

Working on UI components

When changing @rozenite/ui:

  • Use Storybook in apps/ui-storybook to develop and test the component.
  • Start it from the repo root: pnpm start:ui-storybook.
  • Find stories in apps/ui-storybook/src/stories.
  • Add or update the story for every behavior you change.
  • Use agent-browser for browser interactions and visual checks.
  • Load its CLI instructions first: agent-browser skills get agent-browser.
  • Open Storybook at http://localhost:6006.
Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 12 lines · 0 tokens per session scan A 1e5b07c4833a

Subscribe to this mod's changes

working-on-ui-components is an agent published in the GitHub repository callstackincubator/rozenite (653 stars, last pushed yesterday), licensed MIT. It costs nothing until one of its globs matches a file; then it loads 116 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other agents, from other repositories

stitch-kit

Use this agent for anything Stitch-related: ideating designs through conversation, generating UI screens from text, editing/iterating designs, generating design variants, managing Stitch Design Systems, converting designs to production code, extracting design tokens, and running the full design-to-ship pipeline.…

gabelul/stitch-kit · 237 tokens

form

FORM — Design. Visual system, UI architecture, motion, accessibility, design PRDs. Use when a human will see the work, when a landing page or product UI is requested, or when Forge is about to invent a look. Use proactively for any user-facing surface.

jmenzies722/shua-labs · 57 tokens

persona-review-orchestrator

Runs a citizen/user persona panel over a piece of UX, copy, or content — samples real-distribution-grounded Korean personas from a catalog, dispatches each as an independent panelist, and synthesizes their reactions into one report. Use for "how would ordinary users react", user-perspective / usability / copy-tone…

joymin5655/Agent · 102 tokens

beardrive-designer

Product designer who reviews the BearDrive web app's visual design, UX, and layout. Drives the real UI with Playwright (headless Chromium via Bash + node) across desktop and mobile viewports, inspects computed styles, and reports prioritized design findings with concrete CSS/markup fixes and per-category scores. Use…

runbear-io/beardrive · 81 tokens

beardrive-admin

Usability evaluator playing the ADMIN persona on a self-hosted BearDrive hub — an IT admin deploying BearDrive for their company. Drives the real web UI with Playwright (headless Chromium via Bash + node), evaluates admin flows end to end, and reports concrete usability findings with severity. Use when hands-on…

runbear-io/beardrive · 78 tokens

beardrive-user

Usability evaluator playing the END-USER persona on a self-hosted BearDrive hub — a non-admin employee onboarding for the first time. Drives the real web UI with Playwright (headless Chromium via Bash + node), walks the newcomer journey (signup, empty state, invite, browsing, sharing, palette), and reports usability…

runbear-io/beardrive · 90 tokens