### Development Setup Commands

Source: https://github.com/dev-five-git/devup-ui/blob/main/README.md

Commands required for setting up the development environment, including installing Node.js, Rust, Bun, and specific cargo packages.

```sh
bun install
bun run build
cargo install cargo-tarpaulin

cargo install wasm-pack
```

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

### Install Core and Framework Plugins

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/quick-start/page.mdx

Install the core Devup UI library and the appropriate plugin for your build tool. For Bun projects, use the Bun plugin.

```bash
# Install core library
npm install @devup-ui/react

# Install plugin for your framework
npm install @devup-ui/vite-plugin    # for Vite
npm install @devup-ui/next-plugin    # for Next.js
npm install @devup-ui/rsbuild-plugin # for Rsbuild
npm install @devup-ui/webpack-plugin # for Webpack

# Or use the Bun plugin in Bun projects
bun add @devup-ui/react @devup-ui/bun-plugin
```

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

### Start Rsbuild Development Server

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/rsbuild/README.md

Run this command to start the local development server.

```bash
bun run dev
```

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

### Install Devup UI React and Bun Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the Devup UI React package and the Bun plugin.

```bash
bun add @devup-ui/react @devup-ui/bun-plugin
```

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

### Complete devup.json Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx

A comprehensive example of a devup.json file, showcasing detailed configurations for colors, typography, and other design tokens.

```json
{
  "theme": {
    "colors": {
      "default": {
        "primary": "#0070f3",
        "primaryHover": "#0060df",
        "secondary": "#7928ca",
        "success": "#0070f3",
        "warning": "#f5a623",
        "error": "#e00",
        "text": "#000",
        "textMuted": "#666",
        "background": "#fff",
        "backgroundMuted": "#fafafa",
        "border": "#eaeaea"
      },
      "dark": {
        "primary": "#3291ff",
        "primaryHover": "#2080ef",
        "secondary": "#8a63d2",
        "success": "#3291ff",
        "warning": "#f7b955",
        "error": "#f33",
        "text": "#fff",
        "textMuted": "#888",
        "background": "#000",
        "backgroundMuted": "#111",
        "border": "#333"
      }
    },
    "typography": {
      "h1": [
        {
          "fontFamily": "Pretendard",
          "fontSize": "32px",
          "fontWeight": 800,
          "lineHeight": 1.2
        },
        null,
        null,
        null,
        {
          "fontFamily": "Pretendard",
          "fontSize": "48px",
          "fontWeight": 800,
          "lineHeight": 1.2
        }
      ],
      "body": {
        "fontFamily": "Pretendard",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5
      },
      "caption": {
        "fontFamily": "Pretendard",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.4
      }
    }
  }
}
```

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

### Install Devup UI for Webpack

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/components/README.md

Install the plugin for Webpack integration.

```sh
npm install @devup-ui/webpack-plugin
```

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

### Install Devup UI Webpack Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the Webpack plugin for Devup UI.

```bash
npm install @devup-ui/webpack-plugin
```

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

### Install Devup UI Vite Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the Vite plugin for Devup UI.

```bash
npm install @devup-ui/vite-plugin
```

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

### Install Devup UI Bun Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/bun-plugin/README.md

Install the necessary packages for Devup UI and its Bun plugin.

```sh
bun add @devup-ui/react @devup-ui/bun-plugin
```

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

### Install Devup UI Next.js Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the Next.js plugin for Devup UI.

```bash
npm install @devup-ui/next-plugin
```

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

### Install Devup UI Components

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/components/overview/Description.mdx

Use the appropriate command for your preferred package manager to install the Devup UI Components library. Ensure your bundler's include option is configured if you encounter runtime errors.

```bash
npm install @devup-ui/components
```

```bash
yarn add @devup-ui/components
```

```bash
pnpm install @devup-ui/components
```

```bash
bun add @devup-ui/components
```

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

### Theme Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/components/README.md

Example of a `devup.json` file defining theme colors for type-safe theming.

```json
{
  "theme": {
    "colors": {
      "default": {
        "text": "#000"
      },
      "dark": {
        "text": "white"
      }
    }
  }
}
```

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

### Install Devup UI Rsbuild Plugin

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the Rsbuild plugin for Devup UI.

```bash
npm install @devup-ui/rsbuild-plugin
```

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

### Responsive Layout Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx

Create responsive layouts by adjusting direction, padding, and width based on breakpoints. This example stacks content on mobile and arranges it side-by-side on larger screens.

```tsx
<Flex direction={['column', null, 'row']} gap={[2, null, 4]}>
  <Box p={[2, null, 4]} w={['100%', null, '50%']}>
    Left content
  </Box>
  <Box p={[2, null, 4]} w={['100%', null, '50%']}>
    Right content
  </Box>
</Flex>
```

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

### Install Devup UI React Package

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Install the core Devup UI React package using npm.

```bash
npm install @devup-ui/react
```

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

### Install Rsbuild Dependencies

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/rsbuild/README.md

Use this command to install project dependencies.

```bash
bun install
```

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

### Install Devup UI Packages

Source: https://github.com/dev-five-git/devup-ui/blob/main/README.md

Install the core Devup UI package and framework-specific plugins for Next.js, Vite, Rsbuild, or Webpack.

```sh
npm install @devup-ui/react

# on next.js
npm install @devup-ui/next-plugin

# on vite
npm install @devup-ui/vite-plugin

# on rsbuild
npm install @devup-ui/rsbuild-plugin

# on webpack
npm install @devup-ui/webpack-plugin
```

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

### Basic Color Setup in devup.json

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx

Configures basic color palettes for 'light' and 'dark' themes.

```json
{
  "theme": {
    "colors": {
      "light": {
        "primary": "#5A44FF",
        "secondary": "#85A5F2",
        "text": "#2F2F2F",
        "background": "#FFF"
      },
      "dark": {
        "primary": "#9086FF",
        "secondary": "#2A4586",
        "text": "#EDEDED",
        "background": "#131313"
      }
    }
  }
}
```

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

### Run Development Server with npm, yarn, pnpm, or bun

Source: https://github.com/dev-five-git/devup-ui/blob/main/benchmark/next-stylex/README.md

Use these commands to start the local development server for your Next.js project. Open http://localhost:3000 in your browser to view the application.

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

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

### Devup UI Theme Configuration Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/bun-plugin/README.md

Define your application's theme using a JSON file for color customization.

```json
{
  "theme": {
    "colors": {
      "default": {
        "text": "#000",
        "background": "#fff"
      },
      "dark": {
        "text": "#fff",
        "background": "#000"
      }
    }
  }
}
```

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

### Theme Configuration with Typing

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/react/README.md

Example of a `devup.json` file defining theme colors and how to use these theme variables in a type-safe manner with the `Text` component.

```json
{
  "theme": {
    "colors": {
      "default": {
        "text": "#000"
      },
      "dark": {
        "text": "white"
      }
    }
  }
}
```

```tsx
// Type Safe
<Text color="$text" />
```

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

### Bun Plugin Setup

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Import the Devup UI Bun plugin. It auto-registers and defaults to singleCss: true.

```typescript
import { plugin } from "@devup-ui/bun-plugin";
// Auto-registers, always uses singleCss: true
```

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

### Rsbuild Plugin Setup

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Configure the Devup UI Rsbuild plugin in your rsbuild.config.ts.

```typescript
import DevupUI from "@devup-ui/rsbuild-plugin";
export default defineConfig({ plugins: [DevupUI()] });
```

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

### Devup UI Theme Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/next-plugin/README.md

Example of a devup.json file defining theme colors for text in default and dark modes.

```json
{
  "theme": {
    "colors": {
      "default": {
        "text": "#000"
      },
      "dark": {
        "text": "white"
      }
    }
  }
}

```

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

### Basic Grid Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/grid/page.mdx

Demonstrates how to import and use the Grid component with Box elements. Ensure '@devup-ui/react' is installed.

```tsx
import { Box, Grid } from '@devup-ui/react'

function App() {
  return (
    <Grid>
      <Box bg="blue" h={25} w={25} />
      <Box bg="blue" h={25} w={25} />
      <Box bg="blue" h={25} w={25} />
    </Grid>
  )
}
```

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

### Devup UI Responsive Design Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/quick-start/page.mdx

Utilize arrays to define responsive values for fontSize, padding, and width, allowing styles to adapt to different screen sizes.

```tsx
<Box
  fontSize={['14px', null, '16px']}
  p={[2, null, 4]} // 8px on mobile, 16px on tablet+
  w={['100%', null, '50%']} // 100% on mobile, 50% on tablet+
>
  Responsive box
</Box>
```

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

### Next.js Plugin Setup

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Integrate the Devup UI Next.js plugin into your next.config.js.

```typescript
import { DevupUI } from "@devup-ui/next-plugin";
export default DevupUI({ /* Next.js config */ });
```

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

### Devup UI Theme Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/README.md

Example of the `devup.json` file structure for defining theme colors and typography. This enables type-safe access to theme tokens.

```json
{
  "theme": {
    "colors": {
      "default": {
        "primary": "#0070f3",
        "text": "#000"
      },
      "dark": {
        "primary": "#3291ff",
        "text": "#fff"
      }
    },
    "typography": {
      "heading": {
        "fontFamily": "Pretendard",
        "fontSize": "24px",
        "fontWeight": 700,
        "lineHeight": 1.3
      }
    }
  }
}
```

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

### CSS Transformation Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/bun-plugin/README.md

Illustrates how the Devup UI plugin transforms JSX with theme variables into generated CSS classes.

```tsx
// Before
<Box bg="red" color="$text" />

// After
<div className="d0 d1" />
```

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

### Grid Rendering Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/grid/page.mdx

Illustrates the underlying HTML structure and CSS classes generated for the Grid component.

```tsx
function App() {
  return (
    <div className="d">
      <div className="a b c"></div>
      <div className="a b c"></div>
      <div className="a b c"></div>
    </div>
  )
}
```

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

### Plugin Usage Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/bindings/devup-ui-wasm/AGENTS.md

Demonstrates how to initialize the WASM module and use its core functions like `codeExtract` and `getCss` within a plugin. Includes handling of updated base styles.

```typescript
import init, { codeExtract, getCss } from '@devup-ui/wasm'

await init()
const { code, css, updatedBaseStyle } = codeExtract(
  'file.tsx', source, '@devup-ui/react', 
  'devup-ui', true, false, true
)

if (updatedBaseStyle) {
  await writeFile('devup-ui.css', getCss(null, false))
}
```

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

### Correct Usage of Responsive Properties in CSS Utility

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example demonstrates the correct usage of responsive properties within the devup-ui css utility by providing direct values. Multi-element arrays are also handled correctly.

```tsx
import { css } from '@devup-ui/react'

// Use the value directly
css({ w: 1 })
```

```tsx
css({ w: '1' })
```

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

### Button Rendering Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/button/page.mdx

Shows the underlying HTML structure and attributes for a rendered Button component.

```tsx
function App() {
  return (
    <button className="a b c" onClick="alert('clicked!!')">
      click me
    </button>
  )
}
```

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

### DEVUP UI Theme Configuration (JSON)

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Example of the `devup.json` configuration file used for theme customization, including colors, typography, length, and shadow tokens.

```json
{
  "theme": {
    "colors": { "default": {...}, "dark": {...} },
    "typography": { "heading": {...} },
    "length": { "default": { "containerX": ["1px", null, "2px"] } },
    "shadow": { "default": { "card": ["0 1px 2px #0003", null, null, "0 4px 8px #0003"] } }
  }
}
```

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

### TeamCard Component Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/team/page.mdx

Example of how to import and use the TeamCard component with specific props.

```javascript
import { TeamCard } from './TeamCard'

<TeamCard instaId="owjs3901" role="FULL-STACK" userId="owjs3901" />
```

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

### DEVUP UI Plugin Integration (TypeScript)

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Example of how to integrate DEVUP UI plugins with build tools like Vite by wrapping the existing configuration.

```typescript
// vite.config.ts
export default DevupUI(viteConfig, { singleCss: true })
```

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

### Vite Plugin Setup

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Add the Devup UI Vite plugin to your vite.config.ts file.

```typescript
import DevupUI from "@devup-ui/vite-plugin";
export default defineConfig({ plugins: [react(), DevupUI()] });
```

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

### Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/bindings/devup-ui-wasm/AGENTS.md

Functions for setting and getting configuration options like class name prefix and debug mode.

```APIDOC
## `setPrefix`/`getPrefix`

### Description
Manages the class name prefix.

### Signature
`setPrefix(prefix: string) -> void`
`getPrefix() -> string`
```

```APIDOC
## `setDebug`/`isDebug`

### Description
Manages the debug mode.

### Signature
`setDebug(enabled: boolean) -> void`
`isDebug() -> boolean`
```

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

### Devup UI Style Props Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/quick-start/page.mdx

Demonstrates the usage of various style props like background, padding, margin, and height on a Box component. Numeric spacing values are multiplied by 4.

```tsx
<Box
  bg="red" // background-color
  borderRadius="8px" // border-radius
  color="white" // color
  h="200px" // height
  m={2} // margin (2 * 4 = 8px)
  p={4} // padding (4 * 4 = 16px)
  w="100%" // width
/>
```

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

### Devup UI Pseudo Selectors Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/quick-start/page.mdx

Apply styles for pseudo-selectors like :hover and :active using underscore-prefixed props on a Box component.

```tsx
<Box
  _active={{ bg: 'darkblue' }}
  _hover={{ bg: 'blue', color: 'white' }}
  bg="white"
>
  Hover me
</Box>
```

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

### Devup UI Transformation Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/overview/page.mdx

Illustrates how Devup UI transforms familiar CSS-in-JS syntax into optimized atomic CSS at build time. Numeric values are multiplied by 4, and class names use compact base-37 encoding.

```tsx
const example = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />

// Devup UI transforms it at build time
const generated = <div className="a b c" />
```

```css
// With optimized atomic CSS
// .a { background-color: red; }
// .b { padding: 16px; }  /* 4 * 4 = 16px */
// .c:hover { background-color: blue; }
```

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

### Correct Usage of Responsive Properties in Box Component

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example shows the correct way to use responsive properties in the devup-ui Box component by directly providing the value instead of wrapping it in a single-element array. Empty arrays are also permitted.

```tsx
import { Box } from '@devup-ui/react'

// Use the value directly instead of wrapping in array
;<Box w={1} />
```

```tsx
;<Box w="1" />
```

```tsx
;<Box w={[]} /> // Empty arrays are fine
```

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

### List Item Example with Hover Actions

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

Shows how to create a list item component with hover effects for text highlighting and a hidden edit button that appears on hover. Suitable for dynamic lists where actions are revealed on interaction.

```tsx
<Box as="ul" listStyle="none" m={0} p={0}>
  {items.map((item) => (
    <Box
      key={item.id}
      _hover={{ bg: '$backgroundMuted' }}
      as="li"
      borderBottom="1px solid $border"
      data-group
      p={3}
    >
      <Flex align="center" justify="space-between">
        <Text _groupHover={{ color: '$primary' }}>{item.title}</Text>
        <Box _groupHover={{ opacity: 1 }} opacity={0}>
          <Button size="sm">Edit</Button>
        </Box>
      </Flex>
    </Box>
  ))}
</Box>
```

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

### Responsive Grid Layout

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx

Create responsive grid layouts by defining the number of columns and gaps that change across breakpoints. This example shows a 1-column layout on mobile, 2 on tablet, and 4 on desktop.

```tsx
<Grid
  gap={[2, null, 4]}
  templateColumns={['1fr', null, 'repeat(2, 1fr)', null, 'repeat(4, 1fr)']}
>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
  <Box>Item 4</Box>
</Grid>
```

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

### Interactive Card Example

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

Demonstrates creating an interactive card with hover effects for image scaling and text color changes. Use this for displaying featured content with engaging visual feedback.

```tsx
<Box
  _hover={{ boxShadow: '0 4px 12px rgba(0,0,0,0.15)' }}
  bg="white"
  borderRadius="8px"
  boxShadow="0 1px 3px rgba(0,0,0,0.1)"
  cursor="pointer"
  data-group
  p={4}
>
  <Box
    bg="$backgroundMuted"
    borderRadius="4px"
    h="200px"
    overflow="hidden"
    w="100%"
  >
    <Image
      _groupHover={{ transform: 'scale(1.05)' }}
      src="/image.jpg"
      transition="transform 0.2s"
    />
  </Box>

  <Text _groupHover={{ color: '$primary' }} fontWeight={600} mt={3}>
    Card Title
  </Text>

  <Text color="$textMuted" fontSize="14px">
    Card description goes here
  </Text>

  <Box
    _groupHover={{ opacity: 1 }}
    mt={3}
    opacity={0}
    transition="opacity 0.2s"
  >
    <Button>View Details</Button>
  </Box>
</Box>
```

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

### Spacing Scale Examples

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Use unitless numbers for spacing props, which are multiplied by 4 to get pixel values. Units can be specified for exact pixel values.

```tsx
<Box p={1} />    // padding: 4px
<Box p={4} />    // padding: 16px
<Box p="4" />    // padding: 16px (unitless string also x 4)
<Box p="20px" /> // padding: 20px (with unit = exact value)
```

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

### Build Rsbuild App for Production

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/rsbuild/README.md

Execute this command to create a production-ready build of your application.

```bash
bun run build
```

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

### Preview Rsbuild Production Build Locally

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/rsbuild/README.md

Use this command to preview the production build on your local machine.

```bash
bun run preview
```

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

### Theme Management API

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Functions for setting, getting, and initializing themes, along with a component for SSR hydration.

```APIDOC
## Theme Management API

### Functions

- `setTheme(themeName: string)`: Switches the active theme. This function also updates the `data-theme` attribute on the document element and saves the preference to `localStorage`.
- `getTheme(): string`: Retrieves the name of the currently active theme.
- `initTheme()`: Initializes the theme on application startup. It automatically detects the system preference if no theme is explicitly set.

### Component

- `<ThemeScript />`: A component to be included in the `<head>` of your HTML document. It is essential for Server-Side Rendering (SSR) hydration and helps prevent Flash of Unstyled Content (FOUC).
```

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

### Clone Template with cargo generate

Source: https://github.com/dev-five-git/devup-ui/blob/main/bindings/devup-ui-wasm/README.md

Use `cargo generate` to clone the wasm-pack-template. Ensure you have `cargo generate` installed.

```bash
cargo generate --git https://github.com/rustwasm/wasm-pack-template.git --name my-project
cd my-project
```

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

### Responsive Design with Array Syntax

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/features/page.mdx

Illustrates how to use array syntax for responsive styles. Each index in the array corresponds to a predefined breakpoint, allowing styles to adapt across different screen sizes.

```tsx
// You write:
const example = <Box bg={['red', 'blue', 'green']} />

// Devup UI generates:
const generated = <div className="a b c" />

// CSS output with media queries for each breakpoint
```

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

### Webpack Plugin Setup

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Include the Devup UI Webpack plugin in your webpack configuration's plugins array.

```typescript
import { DevupUIWebpackPlugin } from "@devup-ui/webpack-plugin";
// Add to plugins array
```

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

### Testing Commands

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/react/AGENTS.md

Run tests using Bun. Use watch mode for continuous testing during development.

```bash
bun test

```

```bash
bun test --watch
```

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

### Responsive and Pseudo Selector Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/react/README.md

Shows how to apply responsive styles and pseudo-selector states like `:hover` using array-based or object-based syntax.

```tsx
// Responsive with Selector
const box = <Box _hover={{ bg: ['red', 'blue'] }} />

// Same
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
```

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

### JSX Button Component Input

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/core-concepts/zero-runtime/page.mdx

Example of a React Button component with inline style props that will be processed by Devup UI.

```tsx
import { Button } from '@chakra-ui/react';

function App() {
  return (
    <Button
      _hover={{ bg: 'red' }}
      bg="blue"
      className="btn"
      color="white"
      fontSize={['10px', null, null, '16px']}
    >
      Click me!
    </Button>
  );
}
```

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

### Familiar API with Devup UI

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/overview/page.mdx

Demonstrates using Devup UI with a familiar API similar to styled-components. It shows how to define a styled component with various CSS properties and pseudo-selector states.

```tsx
import { styled } from '@devup-ui/react'

const Card = styled('div', {
  bg: 'white',
  p: 4, // 4 * 4 = 16px
  borderRadius: '8px',
  boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
  _hover: {
    boxShadow: '0 10px 15px rgba(0, 0, 0, 0.1)',
  },
})
```

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

### DEVUP UI Development Commands

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Common commands for developing and building the DEVUP UI project using Bun.

```bash
# Development
bun install              # Install deps
bun run build            # Build all packages (WASM first)
bun run dev              # Dev mode all packages
```

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

### Image Component Rendering

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/image/page.mdx

The Image component renders as a standard `img` HTML element. This example shows the equivalent HTML structure.

```tsx
function App() {
  return <img src="https://via.placeholder.com/150" />
}
```

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

### Responsive and Pseudo Selector Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/components/README.md

Shows how to apply responsive styles and pseudo-selector states like hover using array or object syntax.

```tsx
// Responsive with Selector
const box = <Box _hover={{ bg: ['red', 'blue'] }} />

// Same
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]}
```

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

### Only Apply Rule to devup-ui Components

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example illustrates that the rule does not flag single-element arrays when used with components from other libraries, emphasizing its specific focus on devup-ui.

```tsx
import { Box } from 'other-package'

// Only applies to devup-ui components
;<Box w={[1]} />
```

```tsx
;<Box w={[1, 2, 3]} /> // Multi-element arrays are fine
```

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

### Responsive Values

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/react/AGENTS.md

How to apply responsive styles using array syntax for different breakpoints.

```APIDOC
## Responsive Values

### Description
Applies responsive styles by passing an array of values corresponding to different breakpoints (mobile, tablet, desktop).

### Example
```tsx
<Box p={[1, 2, 3]} />        // [mobile, tablet, desktop]
<Box _hover={{ bg: ['red', 'blue'] }} />  // Responsive in selectors
```

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

### Basic Button Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/button/page.mdx

Demonstrates how to import and use the Button component with basic props like background color, height, width, and an onClick handler.

```tsx
import { Button } from '@devup-ui/react'

function App() {
  return (
    <Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
      click me
    </Button>
  )
}
```

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

### Handling arrays with other packages

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-tailing-nulls/README.md

This example illustrates that the rule only applies to devup-ui components. Arrays with trailing nulls used with other packages, like 'other-package', will not trigger the rule.

```tsx
import { Box } from 'other-package'

// Only applies to devup-ui components
;<Box w={[1, 2, null]} />
```

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

### Handle Aliased CSS Utility Imports

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example shows that the rule correctly identifies and flags single-element arrays even when the css utility is imported with an alias.

```tsx
import { css as c } from '@devup-ui/react'

// Works with aliased imports
c({ w: [1] })
```

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

### Integrate Devup UI Plugin with Bun.build()

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/bun-plugin/README.md

Configure Bun.build to use the DevupUI plugin and getDevupDefine for theme integration.

```typescript
import { DevupUI, getDevupDefine } from '@devup-ui/bun-plugin'

await Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './dist',
  plugins: [DevupUI()],
  define: getDevupDefine(),
})
```

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

### Correct styleOrder Prop Values

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/style-order-range/README.md

Examples of `styleOrder` prop values that fall within the valid range (0 < value < 255), including numeric and string representations.

```jsx
// Valid range values (0 < value < 255)
<div styleOrder={1} />
<div styleOrder={254} />
<div styleOrder={128} />
<div styleOrder="100" />
<div styleOrder="1" />
<div styleOrder="254" />
```

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

### Incorrect styleOrder Prop Values

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/style-order-range/README.md

Examples of `styleOrder` prop values that violate the rule, including zero, negative, and out-of-range positive numbers, as well as non-numeric values.

```jsx
// Zero and negative values
<div styleOrder={0} />
<div styleOrder={-1} />
<div styleOrder="-5" />

// Values greater than or equal to 255
<div styleOrder={255} />
<div styleOrder={256} />
<div styleOrder="300" />

// Non-numeric values
<div styleOrder="abc" />
<div styleOrder={undefined} />
```

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

### Basic Component Transformation

Source: https://github.com/dev-five-git/devup-ui/blob/main/README.md

Illustrates how Devup UI converts custom component props into standard HTML elements with generated class names and corresponding CSS rules.

```tsx
// You write:
const variable = <Box _hover={{ bg: 'blue' }} bg="red" p={4} />

// Devup UI generates:
const variable = <div className="a b c" />

// With CSS:
// .a { background-color: red; }
// .b { padding: 1rem; }
// .c:hover { background-color: blue; }
```

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

### Convert Figma Layer to Devup UI Code

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx

Example of generated Devup UI code from a Figma layer. Ensure your Figma styles are organized for best results.

```tsx
<Box
  bg="#ffffff"
  borderRadius="8px"
  boxShadow="0 4px 6px rgba(0, 0, 0, 0.1)"
  p={4}
  w="320px"
>
  <Text color="#000000" fontSize="24px" fontWeight={700}>
    Card Title
  </Text>
</Box>
```

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

### Devup UI Theme API Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/SKILL.md

Provides functions for managing themes in a React application, including setting, getting, and initializing themes, and a script for SSR hydration.

```tsx
import { useTheme, setTheme, getTheme, initTheme, ThemeScript } from "@devup-ui/react";

setTheme("dark");             // Switch theme (sets data-theme + localStorage)
const theme = getTheme();     // Get current theme name
const theme = useTheme();     // React hook (reactive)
initTheme();                  // Initialize on startup (auto-detect system preference)
<ThemeScript />               // SSR hydration script (add to <head>, prevents FOUC)
```

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

### Basic Component Transformation

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/features/page.mdx

Demonstrates how Devup UI transforms simple JSX with style props into optimized HTML with generated class names and CSS. Numeric values are multiplied by 4 to convert to pixels.

```tsx
// You write:
const example = <Box bg="red" p={4} />

// Devup UI generates:
const generated = <div className="a b" />

// CSS output:
// .a { background-color: red; }
// .b { padding: 16px; }  /* 4 * 4 = 16px */
```

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

### Type Safety with Length Tokens

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/length/page.mdx

Devup UI provides full type safety for length tokens. TypeScript will offer autocompletion for available tokens when you start typing '$' in your JSX.

```tsx
// Autocomplete shows: $containerX, $gutter, $borderRadiusMd, etc.
<Box px="$" />
```

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

### Configure Devup UI with Bun

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/installation/page.mdx

Import the Devup UI Bun plugin before running your Bun build to register it.

```typescript
// build.ts

import '@devup-ui/bun-plugin'

await Bun.build({
  entrypoints: ['./src/index.tsx'],
  outdir: './dist',
})
```

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

### Run Benchmarks with Bun

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Execute benchmark tests to compare performance against other CSS-in-JS libraries using Bun.

```bash
bun benchmark
```

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

### devup.json Length Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx

Configures responsive length tokens for spacing and sizing. Uses responsive arrays where `null` indicates inheritance from the previous breakpoint.

```json
{
  "theme": {
    "length": {
      "default": {
        "containerX": ["16px", null, "32px", null, "64px"],
        "gutter": ["8px", null, "16px"]
      }
    }
  }
}
```

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

### Basic Group Selector Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

Use `data-group` on a parent element and `_groupHover` on children to create interactive components. This example shows text and box styling changes on parent hover.

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRow,
} from '@/components/mdx/components/Table'

export const metadata = {
  title: 'Group Selector',
  alternates: {
    canonical: '/docs/api/group-selector',
  },
}

# Group Selector

Group selectors allow child elements to respond to interactions on a parent element. This is useful for creating interactive cards, list items, and other composite components.

## Basic Usage

Add the `data-group` attribute to a parent element, then use `_groupHover`, `_groupFocus`, or `_groupActive` on children:

```tsx
<Box bg="$background" borderRadius="8px" data-group p={4}>
  <Text _groupHover={{ color: '$primary' }}>
    This text changes color when parent is hovered
  </Text>
  <Box _groupHover={{ bg: '$primaryAlpha10' }} p={2}>
    This box changes background on parent hover
  </Box>
</Box>
```

> **Migrating from `role="group"`**: previous versions used `role="group"` to mark
> group parents. Both forms are supported today, but `role="group"` carries ARIA
> semantics that should be reserved for actual semantic groups (e.g. a `<fieldset>`
> replacement), not for styling hooks. Prefer `data-group` going forward. The
> `role="group"` form will be removed in v2 — see the
> [CHANGELOG](https://github.com/dev-five-git/devup-ui/blob/main/CHANGELOG.md).

## Available Group Selectors

<Table>
  <TableHead>
    <TableRow>
      <TableHeaderCell>Selector</TableHeaderCell>
      <TableHeaderCell>Triggered when</TableHeaderCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>
        <code>_groupHover</code>
      </TableCell>
      <TableCell>
        Parent with <code>data-group</code> is hovered
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <code>_groupFocus</code>
      </TableCell>
      <TableCell>
        Parent with <code>data-group</code> is focused
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <code>_groupActive</code>
      </TableCell>
      <TableCell>
        Parent with <code>data-group</code> is active (pressed)
      </TableCell>
    </TableRow>
    <TableRow>
      <TableCell>
        <code>_groupFocusWithin</code>
      </TableCell>
      <TableCell>Any element inside the group receives focus</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

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

### Basic VStack Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx

Demonstrates how to import and use the VStack component with Box elements as children. This is the standard way to vertically arrange content.

```tsx
import { Box, VStack } from '@devup-ui/react'

function App() {
  return (
    <VStack>
      <Box bg="blue" h={25} w={25} />
      <Box bg="blue" display="flex" h={25} w={25} />
      <Box bg="blue" h={25} w={25} />
    </VStack>
  )
}
```

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

### Disallow Single-Element Responsive Arrays in CSS Utility

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example demonstrates the incorrect use of single-element arrays within the css utility function from devup-ui. The rule applies to properties passed to this utility.

```tsx
import { css } from '@devup-ui/react'

// Single-element arrays in css utility
css({ w: [1] })
```

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

### Basic Component Transformation

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/components/README.md

Shows how Devup UI transforms a component with a background color prop into a standard HTML element with a class and style.

```tsx
const before = <Box bg="red" />

const after = <div className="d0" />
```

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

### Disallow Single-Element Responsive Arrays in Box Component

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/eslint-plugin/src/rules/no-useless-responsive/README.md

This example shows incorrect usage of single-element arrays for responsive properties like 'w' in the devup-ui Box component. These should be simplified to direct values.

```tsx
import { Box } from '@devup-ui/react'

// Single-element arrays are useless
;<Box w={[1]} />
```

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

### Basic devup.json Structure

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/figma-and-theme-integration/devup-json/page.mdx

Defines the fundamental structure for theme configuration, including colors and typography.

```json
{
  "theme": {
    "colors": {
      "primary": "#5A44FF"
    },
    "typography": {
      "h1": {
        "fontSize": "32px"
      }
    }
  }
}
```

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

### Run Linting with Bun

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Perform linting checks across JavaScript, TypeScript, Rust (fmt, clippy) using Bun.

```bash
bun run lint
```

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

### Responsive Styles with Pseudo Selectors

Source: https://github.com/dev-five-git/devup-ui/blob/main/README.md

Demonstrates combining responsive style arrays with pseudo-selectors like `:hover` for advanced styling.

```tsx
// Responsive with pseudo selector
const example = <Box _hover={{ bg: ['red', 'blue'] }} />

// Equivalent syntax
const example2 = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />
```

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

### Devup UI Responsive and Pseudo Selector Usage

Source: https://github.com/dev-five-git/devup-ui/blob/main/packages/next-plugin/README.md

Shows how to use responsive styles and pseudo-selectors like hover effects with Devup UI's Box component, including array and object-based syntax for hover states.

```tsx
// Responsive with Selector
const box = <Box _hover={{ bg: ['red', 'blue'] }} />

// Same
const box = <Box _hover={[{ bg: 'red' }, { bg: 'blue' }]} />

```

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

### DEVUP UI Project Structure

Source: https://github.com/dev-five-git/devup-ui/blob/main/AGENTS.md

Overview of the directory structure for the DEVUP UI project, highlighting the location of core libraries, bindings, NPM packages, demo applications, and benchmarks.

```tree
devup-ui/
├── libs/               # Rust core - CSS extraction engine (SEE libs/AGENTS.md)
│   ├── extractor/      # JSX→CSS transformation (9k lines)
│   ├── sheet/          # CSS generation + theming
│   └── css/            # Utilities, selectors, optimization
├── bindings/           # WASM bridge (SEE bindings/devup-ui-wasm/AGENTS.md)
│   └── devup-ui-wasm/  # wasm-bindgen exports to JS
├── packages/           # NPM packages
│   ├── react/          # @devup-ui/react - Components + API (SEE packages/react/AGENTS.md)
│   ├── components/     # @devup-ui/components - Button, Input, Select...
│   ├── plugin-utils/   # Shared config loading
│   ├── *-plugin/       # Build tool plugins (vite, next, webpack, rsbuild, bun)
│   ├── eslint-plugin/  # Lint rules
│   └── reset-css/      # CSS reset
├── apps/               # Demo apps (vite, next, rsbuild, landing)
└── benchmark/          # Performance comparisons vs Tailwind, StyleX, etc.
```

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

### devup.json Shadow Configuration

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx

Defines responsive shadow tokens for box-shadow values. Non-array values apply a single shadow across all breakpoints.

```json
{
  "theme": {
    "shadow": {
      "default": {
        "card": [
          "0 1px 2px rgba(0,0,0,0.1)",
          null,
          null,
          "0 4px 8px rgba(0,0,0,0.1)"
        ],
        "sm": "0 1px 2px rgba(0,0,0,0.05)"
      }
    }
  }
}
```

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

### Import and Use Flex Component

Source: https://github.com/dev-five-git/devup-ui/blob/main/apps/landing/src/app/(detail)/docs/api/flex/page.mdx

Demonstrates how to import and use the Flex component in a React application. Ensure the component is correctly imported from '@devup-ui/react'.

```tsx
import { Flex } from '@devup-ui/react'

function App() {
  return <Flex />
}
```