Installs into .claude/skills of the current project.
Are you the author of Agentstudio Bridgeweb React Ui?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/shravansunder-agentstudio-bridgeweb-react-ui)
---
name: agentstudio-bridgeweb-react-ui
description: Use when editing Agent Studio BridgeWeb React UI controls, chrome, toolbars, toggles, menus, inputs, or shared viewer components in this repo.
---
# Agent Studio BridgeWeb React UI
BridgeWeb React UI uses shadcn-style owned source primitives.
## Required Pattern
1. Inspect `BridgeWeb/src/components/ui/` before building a control.
2. If the needed shadcn primitive is missing, add the primitive source there.
3. Reuse the owned primitive unchanged when its recipe fits the intended role.
Change its tokens, sizing or states only to supply a missing reusable meaning,
not merely because the task edits a control.
4. Compose product-specific controls from those primitives. A shared wrapper
needs shared composition or behavior; styling parity alone does not justify it.
5. Keep FileViewer and ReviewViewer controls with the same interaction
semantics on the same primitive layer and visual scale.
## Prohibited Pattern
Do not hand-roll route-local toggles, segmented controls, buttons, menus,
inputs, or toolbar widgets because one route has nearby markup. A local wrapper
around `Button` is not enough when the interaction is really a shadcn primitive
such as ToggleGroup, Tabs, DropdownMenu, or Input.
## Proof
Any visible BridgeWeb UI checkpoint must include browser/native screenshots and
geometry or interaction proof for the changed controls. DOM-only or jsdom-only
proof is not sufficient for visual UX.
