toolbox-browser-ui-designer

Stars12

Forks9

UpdatedJuly 7, 2026 at 14:51

UI standards for the Vault Toolbox Browser Extension focusing on Chakra UI and the Nested Pillar layout.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

veeva

veeva/Vault-Toolbox

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web and Digital Interface DesignersComputer and Mathematical Occupations·SOC 15-1255

SKILL.md

readonly

name	toolbox-browser-ui-designer
description	UI standards for the Vault Toolbox Browser Extension focusing on Chakra UI and the Nested Pillar layout.
applicable_apps	["toolbox-browser"]

Skill: toolbox-browser-ui-designer

This skill defines the architectural patterns and styling standards for the Vault Toolbox Browser Extension.

1. The Nested Pillar Layout

The application uses a Nested Pillar approach to separate the main workspace from contextual tools.

Outer Layout (Horizontal Split)

Pillar A (Workspace): A VStack with flex: 1 and minWidth: 0.
Pillar B (Right Sidebar): A Box with flex: 0 0 auto housing contextual actions.

Inner Layout (Vertical Workspace Stack - Pillar A)

Header Row: Outside the main island container. Margin-left: 25px.
Main Island: White background, borderRadius: 8px, shadow 0 0 5px rgba(0,0,0,0.25). Width: calc(100% - 200px). Margins: 0px 10px 5px 10px.
Status Island: Fixed-height (42px) bottom bar.

2. Chakra UI and Semantic Tokens

No Raw CSS: Always use Chakra UI v3 style props.
Mandatory Token Usage: Use semantic tokens from src/app/utils/shared/VeevaTheme.ts (e.g., white_color_mode, veeva_orange_color_mode).
Depth: Pillar A MUST use the StackStyle with inset shadows for visual depth.

3. Component Reuse & React Integrity

Pattern Reuse over Invention: Do not invent new, ad-hoc UI implementations or custom DOM manipulation tricks. Reuse existing components and patterns (e.g., the standard file upload button/component from the file staging tool) to ensure UI and UX consistency across the extension.
Declarative React Integrity: NEVER break out of React by using raw DOM selectors (document.querySelector, custom ref mutations to bypass state, etc.) unless specifically approved or required by low-level Chrome Extension APIs. Manage UI elements declaratively through React state and props.

4. UI Checklist (Toolbox Browser)

Nested Pillars present.
Stack Elevation (inset shadows).
Horizontal Alignment (Header/Island widths match).
Contextual Help: Button located at bottom of Pillar B.
Standard Tab Sizing: 60px height, xl text, 180px trigger width.

More from this repository

same repository

toolbox-browser-api-integration

veeva/Vault-Toolbox

Implementation patterns for the Vault Toolbox Browser Extension (Manifest V3).

2026-07-0712

toolbox-browser-brainstormer

veeva/Vault-Toolbox

Specialized design challenges for the Vault Toolbox Browser Extension, focusing on VQL prototyping.

2026-07-0712

toolbox-browser-code-reviewer

veeva/Vault-Toolbox

Specialized audit for the Vault Toolbox Browser Extension, focusing on Island Architecture and UI visibility.

2026-07-0712

toolbox-browser-data-grid

veeva/Vault-Toolbox

Specialized data grid implementation for the Vault Toolbox Browser Extension using TanStack Table/Virtual.

2026-07-0712

toolbox-browser-feature-designer

veeva/Vault-Toolbox

Specialized design requirements for the Vault Toolbox Browser Extension, focusing on UI visibility.

2026-07-0712

toolbox-browser-testing

veeva/Vault-Toolbox

Specialized testing and dev-server protocol for the Vault Toolbox Browser Extension.

2026-07-0712

Skill: toolbox-browser-ui-designer

This skill defines the architectural patterns and styling standards for the Vault Toolbox Browser Extension.

1. The Nested Pillar Layout

The application uses a Nested Pillar approach to separate the main workspace from contextual tools.

Outer Layout (Horizontal Split)

Pillar A (Workspace): A VStack with flex: 1 and minWidth: 0.

Pillar B (Right Sidebar): A Box with flex: 0 0 auto housing contextual actions.

Inner Layout (Vertical Workspace Stack - Pillar A)

Header Row: Outside the main island container. Margin-left: 25px.

Main Island: White background, borderRadius: 8px, shadow 0 0 5px rgba(0,0,0,0.25). Width: calc(100% - 200px). Margins: 0px 10px 5px 10px.

Status Island: Fixed-height (42px) bottom bar.

2. Chakra UI and Semantic Tokens

No Raw CSS: Always use Chakra UI v3 style props.

Mandatory Token Usage: Use semantic tokens from src/app/utils/shared/VeevaTheme.ts (e.g., white_color_mode, veeva_orange_color_mode).

Depth: Pillar A MUST use the StackStyle with inset shadows for visual depth.

3. Component Reuse & React Integrity

Pattern Reuse over Invention: Do not invent new, ad-hoc UI implementations or custom DOM manipulation tricks. Reuse existing components and patterns (e.g., the standard file upload button/component from the file staging tool) to ensure UI and UX consistency across the extension.

Declarative React Integrity: NEVER break out of React by using raw DOM selectors (document.querySelector, custom ref mutations to bypass state, etc.) unless specifically approved or required by low-level Chrome Extension APIs. Manage UI elements declaratively through React state and props.

4. UI Checklist (Toolbox Browser)

Nested Pillars present.

Stack Elevation (inset shadows).

Horizontal Alignment (Header/Island widths match).

Contextual Help: Button located at bottom of Pillar B.

Standard Tab Sizing: 60px height, xl text, 180px trigger width.