### Manual installation

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/getting-started.md

For manual installation, install the shared core package and exactly one framework package.

```bash
pnpm add @expcat/tigercat-core @expcat/tigercat-vue
pnpm add @expcat/tigercat-core @expcat/tigercat-react
```

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

### Quick Start Example

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/vue/index.md

A basic example demonstrating the usage of Button, Input, and Modal components.

```vue
<script setup>
import { Button, Input, Modal } from '@expcat/tigercat-vue'
import { ref } from 'vue'

const value = ref('')
const open = ref(false)
</script>

<template>
  <Input v-model="value" placeholder="Type here" />
  <Button @click="open = true">Open Modal</Button>
  <Modal v-model:open="open" title="Hello">Content</Modal>
</template>
```

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

### beforeEach/afterEach for Cleanup Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Demonstrates using beforeEach and afterEach hooks for setup and cleanup.

```typescript
describe('Component', () => {
  beforeEach(() => {
    // Setup code
  })

  afterEach(() => {
    // Cleanup code
    clearThemeVariables(['--tiger-primary'])
  })
})
```

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

### Quick Start

Source: https://github.com/expcat/tigercat/blob/main/packages/react/README.md

A basic example of how to use the ConfigProvider and Button components.

```tsx
import { ConfigProvider, Button } from '@expcat/tigercat-react'

function App() {
  return (
    <ConfigProvider>
      <Button variant="primary">Click me</Button>
    </ConfigProvider>
  )
}
```

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

### Running Tests with pnpm

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Command-line examples for running tests using pnpm.

```bash
# Run all tests
pnpm test

# Run tests in watch mode (default for `pnpm test`)
pnpm test

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

# Run specific test file
pnpm test Button.spec.tsx

# Run React tests only
pnpm test tests/react

# Run tests matching pattern
pnpm test --grep "should render"

# Update snapshots
pnpm test -u
```

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

### Quick Start

Source: https://github.com/expcat/tigercat/blob/main/packages/vue/README.md

A basic Vue 3 component example using ConfigProvider and Button from @expcat/tigercat-vue.

```vue
<script setup>
import { ConfigProvider, Button } from '@expcat/tigercat-vue'
</script>

<template>
  <ConfigProvider>
    <Button variant="primary">Click me</Button>
  </ConfigProvider>
</template>
```

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

### React imports

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/getting-started.md

React imports use @expcat/tigercat-react.

```tsx
import { Button, Input } from '@expcat/tigercat-react'
```

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

### Theme Support Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example tests for verifying theme customization via CSS variables.

```typescript
describe('Theme Support', () => {
  afterEach(() => {
    clearThemeVariables(['--tiger-primary', '--tiger-primary-hover'])
  })

  it('should support custom theme colors', () => {
    setThemeVariables({
      '--tiger-primary': '#ff0000',
      '--tiger-primary-hover': '#cc0000'
    })

    const { container } = renderWithProps(Component, { variant: 'primary' })

    const rootStyles = window.getComputedStyle(document.documentElement)
    expect(rootStyles.getPropertyValue('--tiger-primary').trim()).toBe('#ff0000')
  })
})
```

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

### Start a React project

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Create a new React project and start the development server.

```bash
tigercat create design-lab --template react
cd design-lab
pnpm install
pnpm dev
```

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

### Semantic Queries Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Demonstrates the use of semantic queries versus implementation details.

```typescript
// ✅ Good - Uses accessible queries
const button = getByRole('button', { name: 'Submit' })
const input = getByLabelText('Email')

// ❌ Avoid - Uses implementation details
const button = getByTestId('submit-button')
const input = container.querySelector('input')
```

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

### Installation

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Install the CLI globally or use npx.

```bash
pnpm add -g @expcat/tigercat-cli
# or
npx @expcat/tigercat-cli
```

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

### Start a Vue 3 project

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Create a new Vue 3 project and start the development server.

```bash
tigercat create admin-console --template vue3
cd admin-console
pnpm install
pnpm dev
```

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

### Test User Behavior Example

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Example contrasting testing user interaction with testing internal implementation details.

```typescript
// ✅ Good - Tests user interaction
it('should disable submit when form is invalid', () => {
  const { getByRole } = render(<Form />)
  const submit = getByRole('button', { name: 'Submit' })
  expect(submit).toBeDisabled()
})

// ❌ Avoid - Tests implementation
it('should have isValid state as false', () => {
  // Testing internal state is an anti-pattern in React Testing Library
})
```

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

### Create new app with CLI template

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/getting-started.md

Use the CLI template for new apps whenever possible; templates are Tailwind CSS v4-only and wire Vite, Tigercat, and framework peers together.

```bash
tigercat create my-app --template vue3
tigercat create my-app --template react
```

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

### Build and Dev Commands

Source: https://github.com/expcat/tigercat/blob/main/examples/nextjs/README.md

Commands to build and run the Tigercat Next.js example.

```bash
pnpm --filter @expcat/tigercat-example-nextjs build
pnpm --filter @expcat/tigercat-example-nextjs dev
```

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

### Installation

Source: https://github.com/expcat/tigercat/blob/main/packages/react/README.md

Install the @expcat/tigercat-react package using pnpm or npm.

```bash
pnpm add @expcat/tigercat-react
# or
npm install @expcat/tigercat-react
```

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

### Add component boilerplate with specific framework and installation

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Add components with framework specification and automatic installation.

```bash
tigercat add --framework vue3 --install --snippet src/tigercat-components.ts
```

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

### Installation

Source: https://github.com/expcat/tigercat/blob/main/packages/core/README.md

Install the @expcat/tigercat-core package using pnpm or npm.

```bash
pnpm add @expcat/tigercat-core
# or
npm install @expcat/tigercat-core
```

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

### Rendering Tests

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Examples of tests to verify component rendering with default and custom configurations, including checking for document elements and applied class names.

```typescript
describe('Rendering', () => {
  it('should render with default props', () => {
    const { getByRole } = render(<Button>Click me</Button>)

    expect(getByRole('button')).toBeInTheDocument()
  })

  it('should render with custom content', () => {
    const { getByText } = render(<Button>Custom Content</Button>)

    expect(getByText('Custom Content')).toBeInTheDocument()
  })

  it('should apply custom className', () => {
    const { container } = render(<Button className="custom-class">Button</Button>)

    expect(container.querySelector('.custom-class')).toBeInTheDocument()
  })
})
```

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

### Installation

Source: https://github.com/expcat/tigercat/blob/main/packages/vue/README.md

Install the @expcat/tigercat-vue package using pnpm or npm.

```bash
pnpm add @expcat/tigercat-vue
# or
npm install @expcat/tigercat-vue
```

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

### States Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example tests for verifying different component states like disabled and loading.

```typescript
describe('States', () => {
  it('should be disabled when disabled prop is true', () => {
    const { getByRole } = renderWithProps(
      Component,
      { disabled: true },
      { slots: { default: 'Disabled' } }
    )

    expect(getByRole('button')).toBeDisabled()
  })

  it('should show loading state', () => {
    const { container } = renderWithProps(Component, { loading: true })

    const spinner = container.querySelector('svg')
    expect(spinner).toHaveClass('animate-spin')
  })
})
```

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

### Rendering Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example tests for verifying component rendering with default and custom slot content.

```typescript
describe('Rendering', () => {
  it('should render with default props', () => {
    const { getByRole } = render(Component, {
      slots: { default: 'Content' }
    })

    expect(getByRole('button')).toBeInTheDocument()
  })

  it('should render with custom slot content', () => {
    const { getByText } = renderWithSlots(Component, {
      default: 'Custom Content'
    })

    expect(getByText('Custom Content')).toBeInTheDocument()
  })
})
```

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

### Test Edge Cases Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Examples for testing edge cases like empty states and long text.

```typescript
it('should handle empty state', () => {
  const { container } = renderWithProps(List, { items: [] })
  expect(container.querySelector('.empty-state')).toBeInTheDocument()
})

it('should handle very long text', () => {
  const longText = 'a'.repeat(1000)
  const { getByText } = render(Component, {
    slots: { default: longText }
  })
  // Verify truncation or overflow handling
})
```

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

### Create a new project with Vue 3 template and dry run

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Preview creating a new project with the Vue 3 template without writing files.

```bash
tigercat create my-app --template vue3 --dry-run
```

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

### Events Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example tests for verifying event emissions, including click events and correct payloads.

```typescript
describe('Events', () => {
  it('should emit click event when clicked', async () => {
    const handleClick = vi.fn()
    const { getByRole } = render(Component, {
      props: { onClick: handleClick },
      slots: { default: 'Click me' }
    })

    await fireEvent.click(getByRole('button'))
    expect(handleClick).toHaveBeenCalledTimes(1)
  })

  it('should emit event with correct payload', async () => {
    const handleChange = vi.fn()
    // Test event payload structure
  })
})
```

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

### Props Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example tests for verifying prop handling, including size variations and invalid props.

```typescript
describe('Props', () => {
  it.each(['sm', 'md', 'lg'])('should apply %s size correctly', (size) => {
    const { container } = renderWithProps(Component, { size })
    const element = container.querySelector('[role="button"]')
    expect(element).toBeInTheDocument()
  })

  it('should handle invalid props gracefully', () => {
    // Test with invalid prop values
  })
})
```

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

### Create a new project with React template

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Create a new project using the React template.

```bash
tigercat create my-app --template react
```

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

### Add components with React framework, installation, and snippet path

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Add components for React, automatically install dependencies, and specify a snippet path.

```bash
tigercat add --framework react --install --snippet src/tigercat-components.ts
```

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

### Build and Dev Commands

Source: https://github.com/expcat/tigercat/blob/main/examples/nuxt/README.md

Commands to build and run the Nuxt 3 SSR example.

```bash
pnpm --filter @expcat/tigercat-example-nuxt build
pnpm --filter @expcat/tigercat-example-nuxt dev
```

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

### Vue imports

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/getting-started.md

Vue imports use @expcat/tigercat-vue.

```typescript
import { Button, Input } from '@expcat/tigercat-vue'
```

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

### Independent Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Shows how to structure tests to be independent of each other.

```typescript
describe('Component', () => {
  // ✅ Good - Each test is independent
  it('test 1', () => {
    const { getByRole } = render(Component)
    // Test logic
  })

  it('test 2', () => {
    const { getByRole } = render(Component)
    // Test logic
  })
})
```

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

### Add component boilerplate with dry run

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Preview adding components without making changes.

```bash
tigercat add Button Form Input Select --dry-run
```

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

### Testing with Context

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Example of testing components that consume React context.

```typescript
it('should consume context values', () => {
  const wrapper = createReactWrapper(ThemeProvider)

  const { getByRole } = render(
    <ThemeProvider theme="dark">
      <Button>Button</Button>
    </ThemeProvider>
  )

  // Test component behavior with context
})
```

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

### Add multiple components

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Add multiple components to your project.

```bash
tigercat add Form Input Select DatePicker
```

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

### Independent Tests Example

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Illustrates the principle of keeping tests independent.

```typescript
describe('Component', () => {
  // ✅ Good - Each test is independent
  it('test 1', () => {
    const { getByRole } = render(<Component />)
    // Test logic
  })

  it('test 2', () => {
    const { getByRole } = render(<Component />)
    // Test logic
  })
})
```

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

### Snapshot Tests

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of how to perform snapshot tests for component regression.

```typescript
describe('Snapshots', () => {
  it('should match snapshot for default state', () => {
    const { container } = render(Component, {
      slots: { default: 'Default' }
    })

    expect(container.firstChild).toMatchSnapshot()
  })

  it('should match snapshot for each variant', () => {
    const variants = ['primary', 'secondary', 'outline']

    variants.forEach((variant) => {
      const { container } = renderWithProps(Component, { variant })
      expect(container.firstChild).toMatchSnapshot()
    })
  })
})
```

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

### Generate test templates for both frameworks

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Generate starter test templates for a component for both Vue and React.

```bash
tigercat generate test Button --framework both
```

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

### Component Testing Steps

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_COMPONENT_TEST_CHECKLIST.md

Steps to follow for creating and running tests for each React component.

```bash
pnpm test [ComponentName].spec.tsx
```

```bash
pnpm test -u
```

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

### Accessibility Tests

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of how to perform accessibility tests using a testing library.

```typescript
describe('Accessibility', () => {
  it('should have no accessibility violations', async () => {
    const { container } = render(Component, {
      slots: { default: 'Accessible Component' }
    })

    await expectNoA11yViolations(container)
  })

  it('should have proper ARIA attributes', () => {
    const { getByRole } = render(Component)
    const element = getByRole('button')

    expectProperAriaLabels(element, {
      'aria-label': 'Expected label',
      'aria-pressed': null // Should not have this attribute
    })
  })

  it('should be keyboard accessible', async () => {
    const handleClick = vi.fn()
    const { getByRole } = render(Component, {
      props: { onClick: handleClick }
    })

    const button = getByRole('button')
    button.focus()
    expect(button).toHaveFocus()
  })
})
```

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

### Breakpoint Debugging

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of using the `debugger` keyword to pause execution for breakpoint debugging.

```typescript
it('should handle click', async () => {
  const handleClick = vi.fn()
  const { getByRole } = render(Component, {
    props: { onClick: handleClick }
  })

  debugger // Pauses execution when running with --inspect

  await fireEvent.click(getByRole('button'))
})
```

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

### Example Application Commands

Source: https://github.com/expcat/tigercat/blob/main/scripts/README.md

Commands to run example applications, with options for smoke tests and custom durations.

```bash
pnpm example:all
pnpm example:all -- --smoke
pnpm example:all -- --smoke --smoke-ms=2000
```

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

### Console Debugging

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of using the `debug` function for console logging within a test.

```typescript
it('should render correctly', () => {
  const { container, debug } = render(Component)

  // Print DOM tree to console
  debug()

  // Print specific element
  debug(container.querySelector('button'))
})
```

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

### Open a temporary playground with React

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Launch a temporary playground for testing components with React.

```bash
tigercat playground --template react --port 3457
```

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

### ImageCropper

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/react/basic.md

Example of ImageCropper component with ref for cropping, aspect ratio, guides, and event handlers.

```tsx
import { useRef } from 'react'
import { ImageCropper } from '@expcat/tigercat-react'
import type { ImageCropperRef } from '@expcat/tigercat-react'

const cropperRef = useRef<ImageCropperRef>(null)

async function handleCrop() {
  const result = await cropperRef.current?.getCropResult()
  console.log(result?.dataURL, result?.blob)
}

<ImageCropper
  ref={cropperRef}
  src="/photo.jpg"
  aspectRatio={16 / 9}
  guides
  onCropChange={(rect) => console.log(rect)}
  onReady={() => console.log('ready')}
/>
<button onClick={handleCrop}>裁剪</button>
```

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

### Generate test templates for React with dry run

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Preview generating starter test templates for a component for React without writing files.

```bash
tigercat generate test Button --framework react --dry-run
```

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

### Testing Conditional Rendering

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Example of testing how a component renders based on changing props or state.

```typescript
it('should show error message when invalid', () => {
  const { getByText, rerender } = render(<Input error="" />)

  expect(() => getByText('Error')).toThrow()

  rerender(<Input error="Invalid input" />)
  expect(getByText('Invalid input')).toBeInTheDocument()
})
```

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

### Testing Form Components

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Example of testing user input and change handlers for form components.

```typescript
describe('Input', () => {
  it('should update value on user input', async () => {
    const handleChange = vi.fn()
    const { getByRole } = render(<Input onChange={handleChange} />)

    const input = getByRole('textbox')
    await userEvent.type(input, 'new value')

    expect(handleChange).toHaveBeenCalled()
  })
})
```

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

### Running Tests Command

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Commands for running tests using pnpm.

```bash
# Run all tests
pnpm test

# Run tests in watch mode (default for `pnpm test`)
pnpm test

# Run tests with UI
pnpm test:ui
```

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

### Testing Edge Cases

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Examples of testing boundary conditions and error states for React components.

```typescript
it('should handle empty children', () => {
  const { container } = render(<List />)
  expect(container.querySelector('.empty-state')).toBeInTheDocument()
})

it('should handle very long text', () => {
  const longText = 'a'.repeat(1000)
  const { getByText } = render(<Text>{longText}</Text>)
  // Verify truncation or overflow handling
})
```

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

### userEvent vs fireEvent Example

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Demonstrates preferring userEvent for more realistic user interactions over fireEvent.

```typescript
// ✅ Good - More realistic
await userEvent.click(button)
await userEvent.type(input, 'text')

// ⚠️ Less ideal - Less realistic
await fireEvent.click(button)
await fireEvent.change(input, { target: { value: 'text' } })
```

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

### Add component with dry run

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Preview adding a component without making changes.

```bash
tigercat add Button --dry-run
```

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

### Testing Async Behavior

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of testing asynchronous operations, such as data loading, using `waitFor`.

```typescript
it('should load data asynchronously', async () => {
  const { getByText } = render(AsyncComponent)

  expect(getByText('Loading...')).toBeInTheDocument()

  await waitFor(() => {
    expect(getByText('Data loaded')).toBeInTheDocument()
  })
})
```

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

### Testing Conditional Rendering

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Example of testing conditional rendering based on props, including rerendering.

```typescript
it('should show error message when invalid', () => {
  const { getByText, rerender } = render(Input, {
    props: { error: '' }
  })

  expect(() => getByText('Error')).toThrow()

  rerender({ error: 'Invalid input' })
  expect(getByText('Invalid input')).toBeInTheDocument()
})
```

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

### Launch interactive playground with React template and dry run

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Preview launching an interactive playground with the React template without making changes.

```bash
tigercat playground --template react --dry-run
```

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

### OrgChart Examples

Source: https://github.com/expcat/tigercat/blob/main/skills/tigercat/references/react/charts.md

Shows how to implement OrgChart with data and options for direction and node clicks.

```tsx
import { OrgChart } from '@expcat/tigercat-react'

<OrgChart data={orgData} width={720} height={420} hoverable selectable />
<OrgChart data={orgData} direction="horizontal" onNodeClick={handleNodeClick} />
```

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

### Testing Async Behavior

Source: https://github.com/expcat/tigercat/blob/main/tests/REACT_TESTING_GUIDE.md

Example of testing components that perform asynchronous operations like data fetching.

```typescript
it('should load data asynchronously', async () => {
  const { getByText, findByText } = render(<AsyncComponent />)

  expect(getByText('Loading...')).toBeInTheDocument()

  // Use findBy for async elements
  expect(await findByText('Data loaded')).toBeInTheDocument()
})
```

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

### Test User Behavior Example

Source: https://github.com/expcat/tigercat/blob/main/tests/TESTING_GUIDE.md

Illustrates testing user behavior versus testing implementation details.

```typescript
// ✅ Good - Tests user interaction
it('should disable submit when form is invalid', async () => {
  const { getByRole } = render(Form)
  const submit = getByRole('button', { name: 'Submit' })
  expect(submit).toBeDisabled()
})

// ❌ Avoid - Tests implementation
it('should have isValid state as false', () => {
  const wrapper = render(Form)
  expect(wrapper.vm.isValid).toBe(false)
})
```

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

### Preview project generation without writing files

Source: https://github.com/expcat/tigercat/blob/main/packages/cli/README.md

Use the --dry-run flag to see what files would be created.

```bash
tigercat create admin-console --template vue3 --dry-run
```