### Install VIP Design System Dependencies

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/SETUP.md

Fetches the project repository and installs all required NPM dependencies. This step requires Git and a compatible Node.js version.

```bash
git clone git@github.com:Automattic/vip-design-system.git && \
cd vip-design-system && npm install
```

--------------------------------

### Start VIP Design System Locally

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/SETUP.md

Launches the development server, typically for Storybook preview, allowing for local development and testing. The application can then be accessed via a web browser.

```bash
npm run dev
```

--------------------------------

### Running Storybook Locally

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Starts a local development server to view and interact with components in a Storybook environment. This is useful for manual testing and development.

```bash
npm run dev
```

--------------------------------

### Installing Dependencies After Package.json Update

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Command to run after modifying the package.json file to install the updated dependency, ensuring the external project uses the specified version of the VIP Design System.

```bash
npm install
```

--------------------------------

### Linking VIP Design System Locally

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Provides instructions for linking the VIP Design System package locally to test it within another project, like the VIP Dashboard. This method is noted as not always reliable.

```bash
npm link
```

--------------------------------

### Build VIP Design System Project

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/SETUP.md

Compiles all TypeScript files within the project into JavaScript, making them executable. This process relies on the build script defined in the package.json file and requires Node.js.

```bash
cd vip-design-system && \
npm run build
```

--------------------------------

### Automated Linting and Formatting Checks

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Runs automated checks for code style and formatting using npm scripts. These are typically executed via CI/CD pipelines.

```bash
npm run lint
npm run format:check
npm run check-types
```

--------------------------------

### Watch for Project Changes

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/CONTRIBUTING.md

Starts a continuous build process that automatically updates files whenever changes are detected. This command is essential for active development.

```bash
npm run watch
```

--------------------------------

### Watching for Changes During Local Development

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Runs a process that watches for file changes and recompiles or updates the design system, facilitating rapid testing when linked to another project.

```bash
npm run watch
```

--------------------------------

### Updating Package.json for Manual Testing

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/TESTING.md

Demonstrates how to modify the package.json file in an external project (e.g., VIP Dashboard) to point to a specific commit hash of the VIP Design System for manual testing.

```json
"@automattic/vip-design-system": "github:automattic/vip-design-system#YOUR_PUSHED_COMMIT_HASH",
```

--------------------------------

### NPM Publish with OTP

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/RELEASING.md

Demonstrates how to include a two-factor authentication (OTP) code directly within the `npm publish` command for enhanced security during the publishing process.

```bash
npm publish --otp=CODE
```

--------------------------------

### Local NPM Release Commands

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/RELEASING.md

Commands required to perform a local release of the VIP Design System package. This includes version bumping, building the project, publishing to NPM, and pushing Git tags and branch updates.

```bash
npm version major|minor|patch
npm run build
npm publish
git push --tags
git push origin trunk
```

--------------------------------

### Update VIP Design System Theme

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/ARCHITECTURE.md

Command to update the VIP Valet Theme with the latest design tokens from the tokens directory. This script parses Figma Studio tokens and generates updated theme JSON files for light and dark modes.

```bash
npm run theme-update
```

--------------------------------

### CSS Fix for Dialog/Dropdown Overlap

Source: https://github.com/automattic/vip-design-system/blob/trunk/docs/CONTRIBUTING.md

Applies a CSS rule to hide Dialog components that are obscuring Dropdown content, resolving a common UI overlap issue.

```css
div[data-radix-popper-content-wrapper][data-aria-hidden='true'] {
	opacity: 0;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.