### Example 1: Start Drawer

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-sheet/SKILL.md

Example of creating a start drawer with specific configurations for RTL, state control, and snap points.

```text
Create a start drawer using `SheetRoot side="start" enableRTL`, controlled by a ref, with `snapPoints={['72%']}` and backdrop tap to close.
```

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

### Run Button Examples

Source: https://github.com/lynx-family/lynx-ui/blob/main/apps/examples/README.md

Example command to run the Button examples.

```bash
npx turbo watch dev --filter '@lynx-example/lynx-ui-button'
```

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

### Run component examples

Source: https://github.com/lynx-family/lynx-ui/blob/main/CONTRIBUTING.md

Example command to run specific component examples using turbo.

```bash
# Example: Run button examples
npx turbo watch dev --filter '@lynx-example/lynx-ui-button'
```

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

### Minimal Usable Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-feed-list/SKILL.md

This example demonstrates the basic setup for FeedList, including enabling pull-to-refresh and load more, and how to get the instance via ref to control the state.

```tsx
import { useRef } from '@lynx-js/react'
import { FeedList, FeedListRef } from '@lynx-js/lynx-ui'

function BasicFeedList() {
  const feedListRef = useRef<FeedListRef>(null)
  const items = Array.from({ length: 20 }, (_, i) => `Item ${i}`)

  const handleRefresh = () => {
    console.log('Refreshing...')
    setTimeout(() => {
      feedListRef.current?.finishRefresh()
    }, 2000)
  }

  const handleLoadMore = () => {
    console.log('Loading more...')
    // After loading, you might need to call feedListRef.current?.changeHasMoreStatus(false);
  }

  return (
    <FeedList
      ref={feedListRef}
      listId='my-feed-list'
      listType='single'
      refreshOptions={{ onRefresh: handleRefresh }}
      onScrollToLower={handleLoadMore}
      style={{ width: '100%', height: '500px' }}
    >
      {items.map(item => (
        <list-item item-key={item} key={item}>
          <view style={{ height: '60px' }}>{item}</view>
        </list-item>
      ))}
    </FeedList>
  )
}
```

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

### Directory Structure

Source: https://github.com/lynx-family/lynx-ui/blob/main/apps/examples/README.md

The directory structure for lynx-ui examples, showing each component's example package.

```bash
apps/examples
├── Button # Example package for Button
├── Checkbox # Example package for Checkbox
├── ...
└── Switch
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/make-new-component/template/README.md

Install the new component package.

```bash
npm install @lynx-js/lynx-ui-new-component
```

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

### Create New Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/AGENTS.md

Creates a new example for a component if one is missing.

```bash
pnpm make-new-component --example <component-name>
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-button/README.md

Recommended installation command for the @lynx-js/lynx-ui package.

```bash
# pnpm (recommended)
pnpm add @lynx-js/lynx-ui

# npm
npm install @lynx-js/lynx-ui

# yarn
yarn add @lynx-js/lynx-ui
```

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

### Single theme setup

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-reactlynx/README.md

Example of using LunaThemeProvider with a single theme.

```tsx
<LunaThemeProvider theme={createLunaTheme(lunarisLightTokens)}>
  {children}
</LunaThemeProvider>;
```

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

### Run with Turbo Command

Source: https://github.com/lynx-family/lynx-ui/blob/main/apps/examples/README.md

Command to run examples for specific components using turbo.

```bash
npx turbo watch dev --filter <package-name>
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-tokens/README.md

Install the luna-tokens package using pnpm.

```bash
pnpm add @lynx-js/luna-tokens
```

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

### Create example files for a new component

Source: https://github.com/lynx-family/lynx-ui/blob/main/CONTRIBUTING.md

Command to generate example files for a new component.

```bash
pnpm makeNewComponent --example <component-name>
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-core/README.md

Install the luna-core package using pnpm.

```bash
pnpm add @lynx-js/luna-core
```

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

### Full-Library Import Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/README.md

Install the entire @lynx-js/lynx-ui package using pnpm.

```bash
pnpm add @lynx-js/lynx-ui
```

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

### Individual Component Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/README.md

Install the @lynx-js/lynx-ui-button package for individual component installation using pnpm.

```bash
pnpm add @lynx-js/lynx-ui-button
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-styles/README.md

Install the luna-styles package using pnpm.

```bash
pnpm add @lynx-js/luna-styles
```

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

### Component Structure Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-list/README.md

Example of how to structure the List component with list items.

```tsx
<List>
  <list-item item-key={item.id} key={item.id}>
    <view>{/* Your item content */}</view>
  </list-item>
</List>
```

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

### Installation JS Tokens style

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-reactlynx/README.md

Install the necessary packages for the JS Tokens integration style.

```bash
pnpm add @lynx-js/luna-reactlynx @lynx-js/luna-tokens
```

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

### Installation CSS Variables style

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-reactlynx/README.md

Install the necessary packages for the CSS Variables integration style.

```bash
pnpm add @lynx-js/luna-reactlynx @lynx-js/luna-styles
```

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

### Configuration Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/stylelint/README.md

Example configuration for the 'lynx-ui/luna-known-css-vars' stylelint rule, specifying the main tokens file and additional token files.

```js
rules: {
  'lynx-ui/luna-known-css-vars': [true, {
    tokensFile: './luna/packages/luna-styles/dist/index.css',
    extraTokenFiles: [
      './apps/examples/Popover/shared/base.css',
      './apps/examples/Sheet/shared/base.css',
    ],
  }],
}
```

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

### Install dependencies

Source: https://github.com/lynx-family/lynx-ui/blob/main/CONTRIBUTING.md

Commands to enable Corepack and install project dependencies using pnpm.

```bash
corepack enable
pnpm install
```

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

### Standalone Installation Command

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-list/README.md

Command to install the standalone @lynx-js/lynx-ui-list package if necessary.

```bash
pnpm add @lynx-js/lynx-ui-list
```

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

### Example 2: Left Drawer

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-sheet/SKILL.md

Example of creating a left drawer, emphasizing its behavior regardless of RTL settings.

```text
Create a left drawer using `SheetRoot side="left"` when the panel should stay on the physical left edge regardless of `enableRTL`.
```

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

### Minimal Usable Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-popover/SKILL.md

A basic example demonstrating how to set up a Popover with Trigger, Positioner, Content, Arrow, and Backdrop.

```tsx
import {
  PopoverRoot,
  PopoverTrigger,
  PopoverPositioner,
  PopoverContent,
  PopoverArrow,
  PopoverBackdrop,
} from '@lynx-js/lynx-ui'
import './style.css'

export default function App() {
  return (
    <PopoverRoot>
      <PopoverTrigger className='trigger'>
        <text>Open Popover</text>
      </PopoverTrigger>

      {/* Positioner handles layout and animation */}
      <PopoverPositioner className='popover-positioner' placement='bottom'>
        <PopoverBackdrop className='popover-backdrop' />
        {/* Content handles visual appearance */}
        <PopoverContent className='popover-content'>
          <text>My Popover</text>
          <PopoverArrow className='popover-arrow' />
        </PopoverContent>
      </PopoverPositioner>
    </PopoverRoot>
  )
}
```

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

### Pair With Tokens (Get Concrete Color Values)

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-core/README.md

Example of pairing luna-core types with concrete color values from luna-tokens.

```typescript
import type { LunaThemeTokens } from '@lynx-js/luna-core';
import { lunarisDarkTokens } from '@lynx-js/luna-tokens';

const theme: LunaThemeTokens = lunarisDarkTokens;

const primary = theme.colors['primary'];
const contentMuted = theme.colors['content-muted'];
```

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

### Full Help

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/example-covers/README.md

Example of displaying the full help message for the script.

```bash
./process_covers.sh --help
```

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

### Run Development Server for Examples

Source: https://github.com/lynx-family/lynx-ui/blob/main/AGENTS.md

Runs the development server for a specific component's example. The filter name might vary.

```bash
npx turbo watch dev --filter '@lynx-example/lynx-ui-<component-name>'
```

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

### Installation

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-tailwind/README.md

Install the necessary packages for luna-tailwind.

```bash
pnpm add -D @lynx-js/luna-tailwind @lynx-js/tailwind-preset tailwindcss@v3
pnpm add @lynx-js/luna-styles
```

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

### Quick Start

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/example-covers/README.md

Provides commands to make the script executable, create a raw directory, perform a dry run, and then process the covers.

```bash
chmod +x ./process_covers.sh

# 1. Put raw screenshots / recordings into ./raw
mkdir raw

# 2. Dry run to preview
./process_covers.sh -i ./raw -d

# 3. Process
./process_covers.sh -i ./raw
```

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

### Component Structure Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-sortable/README.md

Example demonstrating the composition of the Sortable component with its sub-components.

```tsx
<SortableRoot>
  {(item) => (
    <SortableItem
      key={item.getSortingKey()}
      sortingKey={item.getSortingKey()}
    >
      <SortableItemArea>
        {/* Your item content */}
      </SortableItemArea>
    </SortableItem>
  )}
</SortableRoot>
```

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

### Prerequisites

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/example-covers/README.md

Installs ImageMagick and FFmpeg using Homebrew.

```bash
brew install imagemagick ffmpeg
```

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

### Usage Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-tailwind/README.md

Example of using the Button component with LUNA theme classes.

```tsx
import { Button } from '@lynx-js/lynx-ui';

function App() {
  return (
    <view className='lunaris-dark'>
      <Button className='bg-primary'>
        <text className='text-primary-content'>Button</text>
      </Button>
    </view>
  );
}
```

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

### Installation Commands

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-swiper/README.md

Commands to install the @lynx-js/lynx-ui package, which includes the swiper component.

```bash
pnpm add @lynx-js/lynx-ui

npm install @lynx-ui

yarn add @lynx-js/lynx-ui
```

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

### Minimal Usable Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-scroll-view/SKILL.md

A basic ScrollView example demonstrating vertical scrolling.

```tsx
import { ScrollView } from '@lynx-js/lynx-ui'

function BasicScrollView() {
  return (
    <ScrollView
      scrollOrientation='vertical'
      style={{ height: '300px', width: '100%' }}
    >
      <view style={{ height: '800px', background: 'lightgray' }}>
        <text>Very long content...</text>
      </view>
    </ScrollView>
  )
}
```

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

### Recommended Usage: Default vs. Explicit Device

Source: https://github.com/lynx-family/lynx-ui/blob/main/tools/example-covers/README.md

Demonstrates using the script with default settings and explicitly specifying a device profile for accurate cropping.

```bash
# Default profile: iPhone 13
./process_covers.sh -i ./raw

# Recommended for non-default devices
./process_covers.sh -i ./raw --device iphone-16-pro
```

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

### Build the project

Source: https://github.com/lynx-family/lynx-ui/blob/main/CONTRIBUTING.md

Command to build the lynx-ui project.

```bash
pnpm build
```

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

### Z-index Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/packages/lynx-ui-dialog/SKILL.md

Example of how to set z-index on DialogView to avoid stacking issues.

```tsx
<DialogView container='window' style={{ zIndex: 2000 }}>
  {/* ... */}
</DialogView>
```

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

### Theme Selector Example

Source: https://github.com/lynx-family/lynx-ui/blob/main/luna/packages/luna-styles/README.md

Example of how themes define CSS variables within a theme selector.

```css
.lunaris-dark {
  --canvas: #0d0d0d;
  --content: #f8f8f8;
}
```

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

### Install Dependencies

Source: https://github.com/lynx-family/lynx-ui/blob/main/AGENTS.md

Ensures dependencies are up to date using the pinned pnpm version.

```bash
corepack enable

pnpm install
```