toolbox-browser-ui-designer

Estrelas12

Forks9

Atualizado7 de julho de 2026 às 14:51

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

Instalação

Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.

Fonte

veeva

veeva/Vault-Toolbox

Abrir repositório GitHub Ver repositórios do creator

Download

Ocupações relacionadasSOC

Baseado na classificação ocupacional SOC

Designers de interfaces web e digitaisInformática e Matemática·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.

Mais deste repositório

mesmo repositório

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.