### Install Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/nuxt.mdx

Commands to navigate to the project directory and install initial dependencies.

```bash
cd test-app && pnpm install
```

```bash
cd test-app && npm install
```

```bash
cd test-app && yarn install
```

```bash
cd test-app && bun install
```

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

### Install Panda CSS and Initialize Config

Source: https://github.com/chakra-ui/panda/blob/main/website/content/blog/building-a-multi-brand-design-system-with-panda-css.mdx

Install the Panda CSS development dependency and initialize its configuration file, including PostCSS setup.

```bash
npm install -D @pandacss/dev
npx panda init --postcss
```

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

### Start development server

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/astro.mdx

Commands to start the Astro development server using various package managers.

```bash
pnpm dev
```

```bash
npm run dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

### Start Storybook Server

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/storybook.mdx

Commands to start the Storybook development server.

```bash
pnpm storybook
```

```bash
npm run storybook
```

```bash
yarn storybook
```

```bash
bun storybook
```

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

### Start Build Process with Package Managers

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/ember.mdx

Commands to start the development server using different package managers like pnpm, npm, yarn, and bun.

```bash
pnpm start
```

```bash
npm run start
```

```bash
yarn start
```

```bash
bun start
```

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

### Start Development Server

Source: https://github.com/chakra-ui/panda/blob/main/README.md

Command to start the development server for your project with Panda CSS integrated.

```bash
npm run dev
```

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

### Install Panda CSS and PostCSS

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/postcss.mdx

Install the required development dependencies and initialize the Panda configuration file using various package managers.

```bash
pnpm install -D @pandacss/dev postcss
pnpm panda init -p
```

```bash
npm install -D @pandacss/dev postcss
npx panda init -p
```

```bash
yarn add -D @pandacss/dev postcss
yarn panda init -p
```

```bash
bun add -D @pandacss/dev postcss
bun panda init -p
```

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

### Start Docusaurus Development Server (Bash)

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/docusaurus-ts/docs/intro.md

Navigates into the newly created Docusaurus website directory and starts the local development server. Changes are reflected automatically.

```bash
cd my-website
npm run start
```

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

### Initialize Gatsby Project and Install Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/gatsby.mdx

Commands to scaffold a new Gatsby project and install the necessary Panda CSS and PostCSS dependencies.

```bash
npm init gatsby
cd test-app
npm install -D @pandacss/dev postcss gatsby-plugin-postcss
npx panda init --postcss
```

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

### Start Development Server

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/qwik.mdx

Commands to launch the Qwik development server for local testing.

```bash
npm run dev
```

```bash
pnpm dev
```

```bash
yarn dev
```

```bash
bun dev
```

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

### Preview Trusted Publishing Setup

Source: https://github.com/chakra-ui/panda/blob/main/scripts/setup-trusted-publishing.md

Use this command to preview the changes that would be made by the trusted publishing setup script without actually modifying any configurations.

```bash
node scripts/setup-trusted-publishing.mjs --dry-run
```

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

### Install Base UI React Package

Source: https://github.com/chakra-ui/panda/blob/main/website/content/blog/styling-base-ui-with-panda-css.mdx

Install the Base UI React package using pnpm.

```bash
pnpm add @base-ui/react
```

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

### Develop Svelte Application

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/svelte/README.md

Commands to start the development server for a Svelte project. After installing dependencies, this command runs the local development environment. The -- --open flag automatically opens the application in a browser.

```bash
npm run dev

npm run dev -- --open
```

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

### Install Ark UI and Lucide React

Source: https://github.com/chakra-ui/panda/blob/main/website/content/blog/styling-ark-ui-with-panda-css.mdx

Install the necessary Ark UI React package and the Lucide React icon library for your project.

```bash
pnpm add @ark-ui/react lucide-react
```

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

### Install Panda CSS

Source: https://github.com/chakra-ui/panda/blob/main/README.md

Install the Panda CSS development package using npm.

```bash
npm i -D @pandacss/dev
```

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

### Install Component Library Package

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/guides/component-library.mdx

Install the newly created component library package in your application code using pnpm.

```bash
pnpm add @acme-org/styled-system
```

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

### Initialize Panda CSS Configuration

Source: https://github.com/chakra-ui/panda/blob/main/README.md

Scaffold the Panda CSS configuration file and postcss setup.

```bash
npx panda init -p
```

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

### Install Custom Preset

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/customization/presets.mdx

Install your published custom preset as a development dependency in your application using npm or pnpm.

```bash
pnpm add -D @acme/preset
```

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

### Install Project Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/solid-ts/README.md

Installs all required project dependencies. While the project uses pnpm by default, it is compatible with npm and yarn as well.

```bash
npm install # or pnpm install or yarn install
```

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

### Recipe Methods and Properties Example

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/concepts/recipes.mdx

Demonstrates the usage of `variantKeys`, `variantMap`, and `splitVariantProps` from a recipe configuration.

```javascript
import { cva } from '../styled-system/css'

const buttonRecipe = cva({
  base: {
    color: 'red',
    fontSize: '1.5rem'
  },
  variants: {
    size: {
      sm: {
        fontSize: '1rem'
      },
      md: {
        fontSize: '2rem'
      }
    }
  }
})

buttonRecipe.variantKeys
// => ['size']

buttonRecipe.variantMap
// => { size: ['sm', 'md'] }

buttonRecipe.splitVariantProps({ size: 'sm', onClick() {} })
// => [{ size: 'sm'}, { onClick() {} }]
```

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

### Install Project Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/nuxt/README.md

Installs the necessary project dependencies using various package managers. Choose the command corresponding to your preferred package manager.

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install
```

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

### Start Local Development Server with Yarn

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/docusaurus-ts/README.md

Starts a local development server for the website. This command automatically opens the site in a browser and enables live reloading for most changes, facilitating rapid development.

```bash
yarn start
```

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

### Install Panda CSS in Qwik

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/qwik.mdx

Use the Qwik integration script to automatically install and configure Panda CSS in your project.

```bash
npm run qwik add pandacss
```

```bash
pnpm qwik add pandacss
```

```bash
yarn qwik add pandacss
```

```bash
bun qwik add pandacss
```

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

### Start Nuxt.js Development Server with PNPM

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/component-lib/nuxt-lib-source/README.md

Starts the Nuxt.js development server for the nuxt-app package. This command allows you to view and interact with the application locally.

```bash
cd packages/nuxt-app
pnpm dev
```

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

### Install Project Dependencies with PNPM

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/component-lib/nuxt-lib-source/README.md

Installs all necessary project dependencies using the PNPM package manager. This is a prerequisite for running other commands.

```bash
pnpm install
```

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

### Import Components from Styled System

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/guides/component-library.mdx

Example of how to import CSS and recipes from the styled system package after configuration.

```typescript
import { css } from '@acme-org/styled-system/css'
import { button } from '@acme-org/styled-system/recipes'
```

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

### Install and Launch Panda Studio

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/theming/studio.mdx

Commands to install the Panda Studio package and launch the interactive dashboard locally. This tool reads your panda.config.ts file to visualize design system elements automatically.

```bash
pnpm i @pandacss/studio
pnpm panda studio
```

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

### Run Development Server

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/solid-ts/README.md

Starts the development server, typically accessible at localhost:3000. It enables hot-reloading for rapid development.

```bash
npm dev # or npm start
```

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

### Start Gatsby Development Server

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/gatsby-ts/README.md

After creating a new Gatsby site, this command navigates into the project directory and starts the local development server. This allows you to see your site in the browser and watch for changes as you develop.

```shell
cd my-gatsby-site/
npm run develop
```

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

### Install Panda CSS Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/angular.mdx

Install the Panda CSS development package and initialize the configuration file using various package managers.

```bash
pnpm install -D @pandacss/dev
pnpm panda init
```

```bash
npm install -D @pandacss/dev
npx panda init
```

```bash
yarn add -D @pandacss/dev
yarn panda init
```

```bash
bun add -D @pandacss/dev
bun panda init
```

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

### Install Project Dependencies with Yarn

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/docusaurus-ts/README.md

Installs all the necessary project dependencies using the Yarn package manager. This is typically the first step before running any other commands.

```bash
yarn
```

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

### Setup CSS layers and imports

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/astro.mdx

Define CSS layers in the global stylesheet and import them into Astro components.

```css
@layer reset, base, tokens, recipes, utilities;
```

```markdown
---
import '../index.css';
---
```

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

### JSON Configuration for Prefix

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Example of how to configure a `prefix` for generated class names and CSS variables in JSON format.

```json
{
  "prefix": "panda"
}
```

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

### JSON Configuration for Enabling Preflight

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Example of how to enable the `preflight` CSS reset styles in JSON format.

```json
{
  "preflight": true
}
```

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

### Example Usage with Prefix

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Demonstrates how a component's class name is generated when a prefix is applied.

```tsx
import { css } from '../styled-system/css'

const App = () => {
  return <div className={css({ color: 'blue.500' })} />
}
```

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

### Storybook Example for Button Recipe

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/concepts/recipes.mdx

Shows how to integrate recipe properties into Storybook for component development and testing.

```typescript
import { Button, buttonRecipe } from './components/button'

export default {
  title: 'Button',
  component: Button,
  argTypes: {
    size: {
      control: {
        type: 'select',
        options: buttonRecipe.variantMap.size
      }
    }
  }
}

export const Demo = {
  render: args => <Button {...args}>Click me</Button>
}
```

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

### JSON Configuration for Presets

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Example of how to configure the `presets` option in JSON format. This specifies which configuration presets to use.

```json
{
  "presets": ["@pandacss/preset-base", "@pandacss/preset-panda"]
}
```

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

### Clone and Setup Panda CSS Repository

Source: https://github.com/chakra-ui/panda/blob/main/CONTRIBUTING.md

Commands to clone the Panda CSS repository from GitHub and navigate into the project directory.

```bash
git clone https://github.com/<your_github_username>/panda.git
cd panda
```

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

### Initialize Qwik Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/qwik.mdx

Commands to scaffold a new Qwik project using the official create script across different package managers.

```bash
npm create qwik@latest
```

```bash
pnpm create qwik@latest
```

```bash
yarn create qwik
```

```bash
bun create qwik@latest
```

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

### Serve Production Build Locally

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/docusaurus-ts/docs/tutorial-basics/deploy-your-site.md

Starts a local server to test the production build generated in the build folder. The site will be accessible at http://localhost:3000/.

```bash
npm run serve
```

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

### Composing Components with Recipes

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/concepts/recipes.mdx

Example of creating a new component that uses an existing `Button` component, leveraging the tracked recipe.

```tsx
const PageButton = (props: ButtonProps) => {
  const { children, size } = props
  return (
    <Button {...props} size={size}>
      {children}
    </Button>
  )
}
```

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

### Start Remix Production Server

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/remix/README.md

Launches the built application using the production server. Ensure that the build command has been executed successfully before running this.

```bash
npm start
```

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

### CLI Command: mcp

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/ai/mcp-server.mdx

Starts the MCP server instance. This is typically handled automatically by AI clients, but can be invoked manually for debugging.

```APIDOC
## CLI Command: mcp

### Description
Manually starts the Panda MCP server process. AI clients usually trigger this automatically upon initialization.

### Usage
`pnpm panda mcp [options]`

### Parameters
#### Options
- **--config, -c** (string) - Optional - Path to the specific Panda configuration file.
- **--cwd** (string) - Optional - The current working directory for the operation.

### Example
```bash
pnpm panda mcp --config ./panda.config.ts --cwd ./my-project
```
```

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

### JSON Configuration for Scoped Preflight

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Example of how to enable and scope the `preflight` CSS reset to a specific selector in JSON format.

```json
{
  "preflight": { "scope": ".extension" }
}
```

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

### POST /package/setup

Source: https://github.com/chakra-ui/panda/blob/main/packages/node/README.md

Automates the creation of a package configuration file and updates project-level files like tsconfig and gitignore.

```APIDOC
## POST /package/setup

### Description
Initializes a new package directory structure and updates project configuration files to include the generated design system paths.

### Method
POST

### Endpoint
/package/setup

### Parameters
#### Request Body
- **name** (string) - Required - Name of the package.
- **exports** (array) - Required - List of modules to export.
- **dir** (string) - Required - Target directory for generated files.

### Request Example
{
  "name": "dot-panda",
  "dir": "generated",
  "exports": ["tokens", "css"]
}

### Response
#### Success Response (200)
- **status** (string) - Success message indicating files were written and configs updated.
```

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

### Onboard New Packages with Trusted Publishing

Source: https://github.com/chakra-ui/panda/blob/main/scripts/setup-trusted-publishing.md

This command sequence is used to onboard new packages. It first builds and publishes any missing packages, then configures trust for them. An interactive login session handles the initial publish.

```bash
npm login --auth-type=web
node scripts/setup-trusted-publishing.mjs --first-publish
```

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

### Initialize Remix Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/remix.mdx

Commands to create a new Remix project using various package managers.

```bash
pnpm dlx create-remix@latest
```

```bash
npx create-remix@latest
```

```bash
yarn dlx create-remix@latest
```

```bash
bunx create-remix@latest
```

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

### Initialize Angular Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/angular.mdx

Commands to scaffold a new Angular application using the official CLI.

```bash
ng new test-app
```

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

### Initialize Svelte Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/svelte.mdx

Commands to scaffold a new SvelteKit project using various package managers.

```bash
pnpm create svelte@latest test-app
```

```bash
npm create svelte@latest test-app
```

```bash
yarn create svelte@latest test-app
```

```bash
bun create svelte@latest test-app
```

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

### Layer Styles Definition (JSON)

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/theming/spec.mdx

Defines visual presets like backgrounds and shadows. Includes name, function examples using `css`, and JSX examples.

```json
{
  "type": "layer-styles",
  "data": [
    {
      "name": "offShadow",
      "functionExamples": ["css({ layerStyle: 'offShadow' })"],
      "jsxExamples": ["<Box layerStyle='offShadow' />"]
    }
  ]
}
```

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

### Initialize Nuxt Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/nuxt.mdx

Commands to initialize a new Nuxt application using various package managers.

```bash
npx nuxi@latest init test-app
```

```bash
pnpm dlx nuxi@latest init test-app
```

```bash
bunx nuxi@latest init test-app
```

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

### Start Development Server

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/nuxt/README.md

Launches the Nuxt 3 development server, typically accessible at http://localhost:3000. This enables hot module replacement for rapid development.

```bash
npm run dev
```

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

### Start MCP Server Manually

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/ai/mcp-server.mdx

Manually start the MCP server process. This is typically handled automatically by AI clients, but can be invoked manually for debugging or custom configurations.

```bash
pnpm panda mcp
pnpm panda mcp --config ./panda.config.ts --cwd ./my-project
```

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

### Run Development Server

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/next-js-app/README.md

Execute this command to start the local development server for your Next.js application. Open http://localhost:3000 in your browser to view the running application.

```bash
npm run dev
# or
yarn dev
```

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

### Keyboard-Only Focus Ring Example - JSX

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/utilities/focus-ring.mdx

An example showcasing the `focusVisibleRing` utility on an input field. It also demonstrates setting a specific `focusRingColor` for the keyboard-navigated focus indicator.

```jsx
import { css } from '../styled-system/css'

function Input({ ...props }) {
  return (
    <input
      className={css({
        px: '3',
        py: '2',
        borderWidth: '1px',
        borderColor: 'gray.300',
        rounded: 'md',
        focusVisibleRing: 'outside',
        focusRingColor: 'blue.500'
      })}
      {...props}
    />
  )
}
```

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

### Manage Panda Studio

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/cli.mdx

Commands to start, build, and preview the Panda Studio documentation site. Use these to visualize design tokens in a browser environment.

```bash
pnpm panda studio
pnpm panda studio --build
pnpm panda studio --preview
pnpm panda studio --port 3000
```

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

### Slot Recipe with Compound Variants - Usage Example

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/concepts/slot-recipes.mdx

When using compound variants, variant props accept only plain literals, not responsive objects. This example demonstrates the correct usage.

```tsx
const { root, trigger } = tabs({ size: 'md', active: true })
// root    → "tabs__root tabs__root--size_md"
// trigger → "tabs__trigger tabs__trigger--active_true text_red.500"
```

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

### Non-interactive Onboarding of New Packages

Source: https://github.com/chakra-ui/panda/blob/main/scripts/setup-trusted-publishing.md

This command allows for non-interactive onboarding of new packages, skipping the OTP prompt during publish by providing an NPM_TOKEN.

```bash
NPM_TOKEN=<token> node scripts/setup-trusted-publishing.mjs --first-publish
```

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

### Install and Update Dependencies Safely (Bash)

Source: https://github.com/chakra-ui/panda/blob/main/CLAUDE.md

Use the `--ignore-scripts` flag when installing or updating dependencies to prevent unexpected script execution. This is crucial for maintaining a stable build environment.

```bash
pnpm install --ignore-scripts
pnpm update <package> --ignore-scripts
```

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

### Initialize React Router Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/react-router.mdx

Commands to scaffold a new React Router project using various package managers.

```bash
pnpm dlx create-react-router@latest
```

```bash
npx create-react-router@latest
```

```bash
yarn dlx create-react-router@latest
```

```bash
bunx create-react-router@latest
```

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

### Build and Preview Production

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/nuxt/README.md

Commands to compile the application for production deployment and to preview the generated build locally. Use build to generate assets and preview to test the production output.

```bash
# Build for production
npm run build

# Preview production build
npm run preview
```

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

### Initialize Vue Project

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/vue.mdx

Commands to create a new Vue project using the official scaffolding tool across different package managers.

```bash
pnpm create vue@latest
```

```bash
npm create vue@latest
```

```bash
yarn create vue@latest
```

```bash
bun create vue@latest
```

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

### Custom Focus Ring Example - JSX

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/utilities/focus-ring.mdx

An example of a button with a highly customized focus ring, using the 'mixed' variant and specifying custom `focusRingColor`, `focusRingWidth`, and `focusRingOffset` for a unique visual style.

```jsx
import { css } from '../styled-system/css'

function CustomButton({ children }) {
  return (
    <button
      className={css({
        px: '6',
        py: '3',
        bg: 'purple.600',
        color: 'white',
        rounded: 'lg',
        focusRing: 'mixed',
        focusRingColor: 'purple.400',
        focusRingWidth: '3px',
        focusRingOffset: '3px'
      })}>
      {children}
    </button>
  )
}
```

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

### Start Development Server (npm/yarn)

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/preact.mdx

Command to launch the Preact development server, enabling hot reloading and development features. Supports both npm and yarn.

```bash
npm run dev
```

```bash
yarn dev
```

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

### Install Panda CSS and PostCSS Dependencies

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/ember.mdx

Commands to install Panda CSS core and development dependencies, along with PostCSS and postcss-loader. It also runs the Panda initialization command to generate configuration files.

```bash
pnpm install -D @pandacss/dev postcss postcss-loader
pnpm panda init --postcss
```

```bash
npm install -D @pandacss/dev postcss postcss-loader
npx panda init --postcss
```

```bash
yarn add -D @pandacss/dev postcss postcss-loader
yarn panda init --postcss
```

```bash
bun add -D @pandacss/dev postcss postcss-loader
bun panda init --postcss
```

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

### Create Gatsby Site with TypeScript Starter

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/gatsby-ts/README.md

This command uses the Gatsby CLI to generate a new Gatsby site project, specifically utilizing the minimal TypeScript starter template. It's the first step in setting up a new Gatsby project with TypeScript.

```shell
npm init gatsby -- -ts
```

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

### Basic Focus Ring Example - JSX

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/utilities/focus-ring.mdx

A practical example of applying a basic 'outside' focus ring to a button component using Panda CSS utilities. It includes standard styling for padding, background, and color.

```jsx
import { css } from '../styled-system/css'

function Button({ children }) {
  return (
    <button
      className={css({
        px: '4',
        py: '2',
        bg: 'blue.500',
        color: 'white',
        rounded: 'md',
        focusRing: 'outside'
      })}>
      {children}
    </button>
  )
}
```

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

### Deploy Gatsby Starter to Netlify

Source: https://github.com/chakra-ui/panda/blob/main/sandbox/gatsby-ts/README.md

This link provides a one-click deployment option for the Gatsby Minimal TypeScript Starter directly to Netlify. It simplifies the process of getting your Gatsby site live on a hosting platform.

```html
<a href="https://app.netlify.com/start/deploy?repository=https://github.com/gatsbyjs/gatsby-starter-minimal-ts"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" /></a>
```

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

### GET /specs/keyframes.json

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/theming/spec.mdx

Retrieves the collection of CSS keyframe animation definitions.

```APIDOC
## GET /specs/keyframes.json

### Description
Returns an array of keyframe animation definitions, including names and usage examples for CSS and JSX.

### Method
GET

### Endpoint
/specs/keyframes.json

### Response
#### Success Response (200)
- **type** (string) - The specification type (always 'keyframes')
- **data** (array) - List of keyframe objects

#### Response Example
{
  "type": "keyframes",
  "data": [
    {
      "name": "spin",
      "functionExamples": ["css({ animationName: 'spin' })"],
      "jsxExamples": ["<Box animationName='spin' />"]
    }
  ]
}
```

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

### GET /specs/patterns.json

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/theming/spec.mdx

Retrieves the collection of layout pattern definitions and their associated properties.

```APIDOC
## GET /specs/patterns.json

### Description
Returns an array of layout patterns, including their JSX component names, configurable properties, and usage examples.

### Method
GET

### Endpoint
/specs/patterns.json

### Response
#### Success Response (200)
- **type** (string) - The specification type (always 'patterns')
- **data** (array) - List of pattern objects

#### Response Example
{
  "type": "patterns",
  "data": [
    {
      "name": "flex",
      "jsx": "Flex",
      "properties": [{"name": "align", "type": "SystemProperties['alignItems']"}],
      "functionExamples": ["flex({ align: 'center' })"],
      "jsxExamples": ["<Flex align='center' />"]
    }
  ]
}
```

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

### Initialize Redwood Project and Panda CSS

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/redwood.mdx

Commands to create a new Redwood.js project and install the necessary Panda CSS dependencies and configuration files.

```bash
yarn create redwood-app app
cd web
yarn add -D @pandacss/dev postcss postcss-loader
yarn panda init --postcss
```

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

### panda mcp

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/cli.mdx

Starts the MCP (Model Context Protocol) server for AI assistants.

```APIDOC
## panda mcp

### Description
Starts the MCP (Model Context Protocol) server. This server exposes your design system to AI tools like Claude, Cursor, VS Code Copilot, and more, enabling them to understand and interact with your design system components and tokens.

### Method
CLI Command

### Endpoint
N/A

### Parameters
This command does not accept any specific flags in the provided documentation.

### Request Example
```bash
pnpm panda mcp
```

### Response
#### Success Response (200)
- **status** (string) - Indicates that the MCP server has started successfully.

#### Response Example
```json
{
  "status": "MCP server started successfully. Listening on port 3000."
}
```
```

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

### Define Text Styles

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/theming/spec.mdx

Example structure for defining typography presets in a text-styles.json file.

```json
{
  "type": "text-styles",
  "data": [
    {
      "name": "xl",
      "functionExamples": ["css({ textStyle: 'xl' })"],
      "jsxExamples": ["<Box textStyle='xl' />"]
    }
  ]
}
```

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

### get_tokens

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/ai/mcp-server.mdx

Retrieves design tokens including their values, CSS variables, and usage examples.

```APIDOC
## GET get_tokens

### Description
Fetches design tokens from the theme, optionally filtered by category.

### Method
POST (MCP Tool Call)

### Parameters
#### Query Parameters
- **category** (string) - Optional - Filter tokens by specific category (e.g., 'spacing', 'colors')

### Response
#### Success Response (200)
- **tokens** (object) - Dictionary of tokens with values and CSS variables.
```

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

### Panda MCP: Start AI Model Context Protocol Server

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/cli.mdx

The `pnpm panda mcp` command starts the Model Context Protocol (MCP) server. This server exposes your design system's context to AI tools such as Claude, Cursor, and VS Code Copilot, enabling AI-assisted development within your project.

```bash
pnpm panda mcp
```

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

### JSON Configuration for Separator

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Example of how to configure the `separator` for generated CSS classes in JSON format.

```json
{
  "separator": "_"
}
```

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

### Initialize MCP Configuration

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/ai/mcp-server.mdx

Use the CLI to interactively set up MCP configuration files for various AI clients. This command prompts the user to select specific clients to integrate with the design system.

```bash
pnpm panda init-mcp
```

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

### Implement Logical Positioning Properties

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/utilities/layout.mdx

Demonstrates the use of logical properties like insetStart, which automatically adjust based on the document's writing mode (LTR vs RTL).

```jsx
<div className={css({ position: 'absolute', insetStart: '0' })} />
```

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

### Usage in Astro components

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/installation/astro.mdx

Example of importing and using the generated css utility in an Astro component.

```jsx
---
import { css } from '../../styled-system/css';
---
<div class={css({ fontSize: "2xl", fontWeight: 'bold' })}>Hello !</div>
```

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

### Transition Utilities

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/utilities/transitions.mdx

Documentation for the transition shorthand and related timing properties.

```APIDOC
## Transition Utilities

### Description
Use these utilities to define common transition sets and control timing functions, delays, and durations using design tokens.

### Props
- **transition** (string) - Shorthand for transition property. Values: `all`, `common`, `colors`, `opacity`, `shadow`, `transform`.
- **transitionTimingFunction** (string) - Maps to `transition-timing-function` using `easings` tokens.
- **transitionDelay** (string) - Maps to `transition-delay` using `durations` tokens.
- **transitionDuration** (string) - Maps to `transition-duration` using `durations` tokens.

### Usage Example
```jsx
<div className={css({ transition: 'all' })} />
<div className={css({ transitionTimingFunction: 'linear' })} />
<div className={css({ transitionDelay: 'fast' })} />
<div className={css({ transitionDuration: 'faster' })} />
```
```

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

### Example of using shorthands: true

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

When `shorthands` is enabled, you can use shorthand properties like `p` for padding.

```tsx
const styles = css({
  bgColor: 'gainsboro',
  p: '10px 15px'
})
```

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

### Initialize Panda with Object Syntax

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/migration/styled-components.mdx

Use this command to initialize a new Panda project configured for object syntax styling.

```bash
panda init -p --jsx-framework react
```

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

### Example of template-literal CSS syntax

Source: https://github.com/chakra-ui/panda/blob/main/website/content/docs/references/config.mdx

Illustrates the 'template-literal' syntax for defining styles using styled components.

```tsx
const Container = styled.div`
  background-color: gainsboro;
  padding: 10px 15px;
`
```