### Setup Python Environment with uv

Source: https://reflex.dev/docs/ai/integrations/skills

Use this command sequence to set up a Python virtual environment using uv, install Reflex, and initialize a new Reflex project. This is the preferred workflow when uv is available.

```bash
uv venv .venv
source .venv/bin/activate
uv add reflex
reflex init
```

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

### Basic Button with Click Events

Source: https://reflex.dev/docs/library/forms/button

Demonstrates a basic button setup with `on_click` events to trigger state changes. This example uses a simple counter mechanism.

```python
class CountState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1

    @rx.event
    def decrement(self):
        self.count -= 1


def counter():
    return rx.flex(
        rx.button(
            "Decrement",
            color_scheme="red",
            on_click=CountState.decrement,
        ),
        rx.heading(CountState.count),
        rx.button(
            "Increment",
            color_scheme="grass",
            on_click=CountState.increment,
        ),
        spacing="3",
    )
```

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

### Example SASS/SCSS File

Source: https://reflex.dev/docs/styling/custom-stylesheets

Demonstrates SASS/SCSS features like variables, nesting, and mixins. Ensure the `libsass` package is installed for compilation.

```scss
// Variables
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 16px;

// Nesting
.container {
  background-color: $primary-color;
  padding: $padding;

  .button {
    background-color: $secondary-color;
    padding: $padding / 2;

    &:hover {
      opacity: 0.8;
    }
  }
}

// Mixins
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered-box {
  @include flex-center;
  height: 100px;
}
```

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

### Setup Python Environment with venv

Source: https://reflex.dev/docs/ai/integrations/skills

This command sequence is a fallback for setting up a Python virtual environment using the standard venv module, upgrading pip, installing Reflex, and initializing a new Reflex project. Use this if uv is not available.

```bash
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install reflex
reflex init
```

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

### Basic Reflex AG Grid Setup

Source: https://reflex.dev/docs/enterprise/ag-grid

Use this snippet to create a simple AG Grid with predefined column definitions and row data. Ensure you have pandas and reflex_enterprise installed. Each grid requires a unique ID.

```python
import reflex as rx
import reflex_enterprise as rxe
import pandas as pd

df = pd.read_csv("data/wind_dataset.csv")

column_defs = [
    {"field": "direction"},
    {"field": "strength"},
    {"field": "frequency"},
]


def ag_grid_simple():
    return rxe.ag_grid(
        id="ag_grid_basic_1",
        row_data=df.to_dict("records"),
        column_defs=column_defs,
        width="100%",
    )
```

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

### Basic Reflex App Example

Source: https://reflex.dev/docs/advanced-onboarding/how-reflex-works

This example demonstrates a simple Reflex app with state management for displaying Github profile information. It requires the 'requests' library for fetching data.

```python
import requests
import reflex as rx


class GithubState(rx.State):
    url: str = "https://github.com/reflex-dev"
    profile_image: str = "https://avatars.githubusercontent.com/u/104714959"

    @rx.event
    def set_profile(self, username: str):
        if username == "":
            return
        try:
            github_data = requests.get(
                f"https://api.github.com/users/{username}"
            ).json()
        except:
            return
        self.url = github_data["url"]
        self.profile_image = github_data["avatar_url"]


def index():
    return rx.hstack(
        rx.link(
            rx.avatar(src=GithubState.profile_image),
            href=GithubState.url,
        ),
        rx.input(
            placeholder="Your Github username",
            on_blur=GithubState.set_profile,
        ),
    )
```

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

### App Initialization

Source: https://reflex.dev/docs/api-reference/app

Example of how to initialize a Reflex app, setting global styles and themes.

```APIDOC
## App Initialization

### Description
Initialize the main Reflex app, encapsulating backend and frontend logic. Configure global styles and themes.

### Method
```python
app = rx.App(
    style={...},
    theme=rx.theme(accent_color="blue")
)
```

### Parameters
*   `style` (dict[str | type[BaseComponent] | Callable | ComponentNamespace, Any]) - The global style for the app.
*   `theme` (Optional[Component]) - Deprecated legacy shortcut for configuring the app-level Radix theme.
```

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

### Install uv on Windows

Source: https://reflex.dev/docs/getting-started/installation

Installs uv using a PowerShell script. Restart your terminal after installation.

```powershell
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```

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

### CSS Background Property Examples

Source: https://reflex.dev/docs/styling/common-props

Shows examples for the CSS 'background' property, which sets all background styles at once. Covers color, gradients, and image settings with MDN link.

```python
{
        "description": "Sets all background style properties at once, such as color, image, origin and size, or repeat method (equivalent to bg)",
        "values": [
            "green",
            "radial-gradient(crimson, skyblue)",
            "no-repeat url('../lizard.png')",
        ],
        "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/background",
    }
```

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

### CSS Border Property Examples

Source: https://reflex.dev/docs/styling/common-props

Provides examples for the shorthand 'border' CSS property, which sets width, style, and color. Includes various styles and a link to MDN.

```python
{
        "description": "Sets an element's border, which sets the values of border_width, border_style, and border_color.",
        "values": [
            "solid",
            "dashed red",
            "thick double #32a1ce",
            "4mm ridge rgba(211, 220, 50, .6)",
        ],
        "link": "https://developer.mozilla.org/en-US/docs/Web/CSS/border",
    }
```

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

### Multiple File Upload Example

Source: https://reflex.dev/docs/library/forms/upload

Allows users to upload multiple image files and displays them.

```python
import reflex as rx

def index():
    return rx.vstack(
        rx.upload(
            rx.text("Drag and drop files here or click to select files"),
            id="upload3",
            max_files=5,
            accept={"image": ["*.jpg", "*.png"]},
        ),
        rx.button("Upload Files", on_click=rx.upload_files(upload_id="upload3")),
        rx.selected_files(id="upload3"),
    )
```

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

### Set up a Reflex project on macOS/Linux

Source: https://reflex.dev/docs/getting-started/installation

Creates a new project directory, navigates into it, and adds Reflex as a dependency using uv.

```bash
mkdir <your-app>
cd <your-app>
uv init
uv add reflex
uv run reflex init
```

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

### Component Init Help

Source: https://reflex.dev/docs/custom-components/command-reference

Get detailed help for the `reflex component init` command, including available options and arguments.

```bash
reflex component init --help
```

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

### Form Validation Error for Missing Required Field

Source: https://reflex.dev/docs/library/forms/form

Shows an example of a `EventHandlerValueError` that occurs when a required form field is missing a corresponding control. This helps in debugging form setup.

```python
class SignupForm(TypedDict):
    username: str
    email: str


class SignupState(rx.State):
    @rx.event
    def handle_submit(self, form_data: SignupForm):
        ...


# Raises EventHandlerValueError: the form has no control named "email".
rx.form(
    rx.input(name="username"),
    rx.button("Submit", type="submit"),
    on_submit=SignupState.handle_submit,
)
```

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

### Initialize Custom Component Help

Source: https://reflex.dev/docs/custom-components/command-reference

Display the help manual for the `reflex component init` command to understand its arguments and options.

```bash
reflex component init --help
```

```text
Usage: reflex component init [OPTIONS]

  Initialize a custom component.

  Args:     library_name: The name of the library.     install: Whether to
  install package from this local custom component in editable mode.
  loglevel: The log level to use.

  Raises:     Exit: If the pyproject.toml already exists.

Options:
  --library-name TEXT             The name of your library. On PyPI, package
                                  will be published as `reflex-{"library-name"}`.
  --install / --no-install        Whether to install package from this local
                                  custom component in editable mode.
                                  [default: install]
  --loglevel [debug|info|warning|error|critical]
                                  The log level to use.  [default:
                                  LogLevel.INFO]
  --help                          Show this message and exit.
```

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

### Create and Initialize Reflex Project

Source: https://reflex.dev/docs/getting-started/chatapp-tutorial

Use uv to create a new project directory, initialize a Reflex app, and add the reflex package.

```bash
mkdir chatapp
cd chatapp
uv init
uv add reflex
uv run reflex init
```

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

### Basic Hover Card Example

Source: https://reflex.dev/docs/library/overlay/hover-card

This snippet demonstrates a basic hover card setup. It includes a link that, when hovered over, displays a tooltip with text content. The `align` and `size` props control the appearance and positioning of the content.

```python
rx.hover_card.root(
    rx.hover_card.trigger(
        rx.link("Hover over me"),
    ),
    rx.hover_card.content(
        rx.text("This is the tooltip content."),
        align="start",
        size="1",
    ),
)
```

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

### Initialize a new Reflex project

Source: https://reflex.dev/docs/getting-started/project-structure

Use these commands to create a new Reflex app directory and initialize it with Reflex.

```bash
mkdir hello
cd hello
uv init
uv add reflex
uv run reflex init
```

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

### GitHub Actions Security Scan Workflow

Source: https://reflex.dev/docs/hosting/security-scan

Example GitHub Actions workflow to automatically run a security scan on pull requests. It installs Reflex, runs the scan with a token, and fails the build on 'high' severity findings.

```yaml
name: Security Scan

on:
  pull_request:
    branches:
      - main

jobs:
  scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: actions/setup-python@v6
        with:
          python-version: "3.12"
      - name: Install Reflex
        run: pip install reflex
      - name: Run security scan
        run: reflex cloud scan --no-interactive --fail-on high --token ${{ secrets.REFLEX_AUTH_TOKEN }}
```

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

### Example `config.yml` for Multi-Region Deployment

Source: https://reflex.dev/docs/hosting/regions

Illustrates the structure of a `config.yml` file, specifically showing how to configure multiple regions for an application with associated deployment priorities or counts.

```yaml
name: medo
description: ''
regions:
  sjc: 1
  lhr: 2
vmtype: c1m1
hostname: null
envfile: .env
project: null
packages:
- procps
```

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

### Install reflex-enterprise

Source: https://reflex.dev/docs/enterprise/overview

Installs the reflex-enterprise package using pip. This command should be run alongside the reflex installation.

```bash
pip install reflex-enterprise
```

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

### Basic Table Example

Source: https://reflex.dev/docs/library/tables-and-data-grids/table

Demonstrates how to create a static table with headers and rows using the Table component. Ensure the 'width' is set to '100%' to fit its container.

```python
rx.table.root(
    rx.table.header(
        rx.table.row(
            rx.table.column_header_cell("Full name"),
            rx.table.column_header_cell("Email"),
            rx.table.column_header_cell("Group"),
        ),
    ),
    rx.table.body(
        rx.table.row(
            rx.table.row_header_cell("Danilo Sousa"),
            rx.table.cell("danilo@example.com"),
            rx.table.cell("Developer"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Zahra Ambessa"),
            rx.table.cell("zahra@example.com"),
            rx.table.cell("Admin"),
        ),
        rx.table.row(
            rx.table.row_header_cell("Jasper Eriks"),
            rx.table.cell("jasper@example.com"),
            rx.table.cell("Developer"),
        ),
    ),
    width="100%",
)
```

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

### Basic Aspect Ratio Examples

Source: https://reflex.dev/docs/library/layout/aspect-ratio

Demonstrates setting different ratios for content within an Aspect Ratio component. Use `width="100%"` and `height="100%"` on the child content for responsive scaling.

```python
rx.grid(
    rx.aspect_ratio(
        rx.box(
            "Widescreen 16:9",
            background_color="papayawhip",
            width="100%",
            height="100%",
        ),
        ratio=16 / 9,
    ),
    rx.aspect_ratio(
        rx.box(
            "Letterbox 4:3",
            background_color="orange",
            width="100%",
            height="100%",
        ),
        ratio=4 / 3,
    ),
    rx.aspect_ratio(
        rx.box(
            "Square 1:1",
            background_color="green",
            width="100%",
            height="100%",
        ),
        ratio=1,
    ),
    rx.aspect_ratio(
        rx.box(
            "Portrait 5:7",
            background_color="lime",
            width="100%",
            height="100%",
        ),
        ratio=5 / 7,
    ),
    spacing="2",
    width="25%",
)
```

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

### Install uv on macOS/Linux

Source: https://reflex.dev/docs/getting-started/installation

Installs uv using a curl script. Restart your terminal or source your shell configuration after installation.

```bash
curl -LsSf https://astral.sh/uv/install.sh | sh
```

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

### Initialize Project with AGENTS.md

Source: https://reflex.dev/docs/ai/integrations/agents-md

Initializes a new Reflex project, creating a starter AGENTS.md file in the project root by default. Use --no-agents to opt out.

```bash
reflex init
```

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

### Install reflex-pyplot

Source: https://reflex.dev/docs/library/graphing/other-charts/pyplot

Install the reflex-pyplot package using pip.

```bash
pip install reflex-pyplot
```

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

### Initialize Reflex project template selection

Source: https://reflex.dev/docs/getting-started/installation

This command prompts the user to choose between a blank Reflex app or the AI builder. The default is a blank app.

```bash
Initializing the web directory.

Get started with a template:
(0) A blank Reflex app.
(1) Try our AI builder.
Which template would you like to use? (0):
```

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

### Local JavaScript Component Example

Source: https://reflex.dev/docs/wrapping-react/local-packages

Example of a simple React component defined in a separate JavaScript file.

```javascript
// /path/to/components/hello.jsx
import React from "react";

export function Hello({ name, onGreet }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => onGreet(name)}>Greet</button>
    </div>
  );
}
```

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

### Basic Ring Progress Example

Source: https://reflex.dev/docs/enterprise/mantine/ring-progress

Demonstrates how to use the Ring Progress component with dynamic value updates. Requires importing reflex, reflex_enterprise, and random.

```python
import reflex as rx
import reflex_enterprise as rxe
import random


class RingProgressState(rx.State):
    value: int = 50

    @rx.event
    def random(self):
        self.value = random.randint(0, 100)


def ring_progress_example():
    return rx.vstack(
        rxe.mantine.ring_progress(
            size=100,
            sections=[
                {"value": RingProgressState.value, "color": "blue"},
            ],
        ),
        rx.button("Randomize", on_click=RingProgressState.random),
    )
```

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

### Install OpenAI Package

Source: https://reflex.dev/docs/getting-started/chatapp-tutorial

Install the latest openai package using pip. Ensure you have an active OpenAI subscription.

```bash
pip install --upgrade openai
```

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

### Client Storage UI Example

Source: https://reflex.dev/docs/client-storage/overview

Creates a user interface with input fields bound to client storage variables. Changes in the input fields update the corresponding storage variables.

```python
def client_storage_example():
    return rx.vstack(
        rx.hstack(
            rx.text("my_cookie"),
            rx.input(
                value=ClientStorageState.my_cookie,
                on_change=ClientStorageState.set_my_cookie,
            ),
        ),
        rx.hstack(
            rx.text("my_local_storage"),
            rx.input(
                value=ClientStorageState.my_local_storage,
                on_change=ClientStorageState.set_my_local_storage,
            ),
        ),
        rx.hstack(
            rx.text("custom_cookie"),
            rx.input(
                value=ClientStorageState.custom_cookie,
                on_change=ClientStorageState.set_custom_cookie,
            ),
        ),
    )
```

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

### Install External Package via requirements.txt

Source: https://reflex.dev/docs/ai/features/installing-external-packages

Add external packages to your requirements.txt file and save the app to install them and recompile.

```python
rx.el.div(
    rx.image(
        src="https://web.reflex-assets.dev/ai_builder/external_packages_requirements.avif",
        class_name="rounded-md h-auto",
        border=f"0.81px solid {rx.color('slate', 5)}",
    ),
    class_name="w-full flex flex-col rounded-md",
)
```

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

### Basic Callout Example

Source: https://reflex.dev/docs/library/data-display/callout

A basic example of the callout component with custom icon, size, variant, color scheme, and contrast settings.

```python
rx.callout("Basic Callout", icon="search",
size="1",
variant="soft",
color_scheme="tomato",
high_contrast=False,
)
```

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

### Onboarding Resources Component

Source: https://reflex.dev/docs/ai/integrations/ai-onboarding

Renders a grid of resource cards for AI onboarding, linking to documentation, MCP overview, skills, and best practices.

```python
def onboarding_resources() -> rx.Component:
    return rx.el.div(
        _resource_card(
            "Docs for Agents",
            "Give your agent current Reflex documentation as Markdown, llms.txt, or structured MCP context.",
            "/llms.txt",
            "Open llms.txt",
            target="_blank",
        ),
        _resource_card(
            "MCP",
            "Connect supported AI tools to Reflex documentation and component information through MCP.",
            "/ai/integrations/mcp-overview/",
            "View MCP overview",
        ),
        _resource_card(
            "Skills",
            "Install Reflex Agent Skills so assistants follow Reflex-specific workflows for docs, setup, and process management.",
            "/ai/integrations/skills/",
            "Install skills",
        ),
        _resource_card(
            "Reflex Build",
            "Use Reflex Build when you want an AI-native environment for creating, editing, previewing, and shipping apps.",
            "/ai/overview/best-practices/",
            "Read best practices",
        ),
        class_name="grid grid-cols-1 gap-3 md:grid-cols-2 my-6",
    )
```

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

### Start a Reflex Cloud App

Source: https://reflex.dev/docs/hosting/cli/apps

Start a stopped application using its ID or name. Interactive mode can be enabled with the `-i` flag.

```bash
$ reflex cloud apps start [OPTIONS] APP_ID
```

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

### Basic Reflex State Management Example

Source: https://reflex.dev/docs/state/overview

Demonstrates how to define base variables, computed variables, and event handlers to manage state and create interactive components. Use this for basic state manipulation and UI updates.

```python
class ExampleState(rx.State):
    # A base var for the list of colors to cycle through.
    colors: list[str] = ["black", "red", "green", "blue", "purple"]

    # A base var for the index of the current color.
    index: int = 0

    @rx.event
    def next_color(self):
        """An event handler to go to the next color."""
        # Event handlers can modify the base vars.
        # Here we reference the base vars `colors` and `index`.
        self.index = (self.index + 1) % len(self.colors)

    @rx.var
    def color(self) -> str:
        """A computed var that returns the current color."""
        # Computed vars update automatically when the state changes.
        return self.colors[self.index]


def index():
    return rx.heading(
        "Welcome to Reflex!",
        # Event handlers can be bound to event triggers.
        on_click=ExampleState.next_color,
        # State vars can be bound to component props.
        color=ExampleState.color,
        _hover={"cursor": "pointer"},
    )
```

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

### Basic Timeline Example

Source: https://reflex.dev/docs/enterprise/mantine/timeline

Demonstrates how to create a basic timeline with multiple items. Configure active step, bullet size, line width, and color.

```python
import reflex as rx
import reflex_enterprise as rxe

def timeline_example():
    return rx.vstack(
        rxe.mantine.timeline(
            rxe.mantine.timeline.item(
                title="Step 1",
                bullet="•",
            ),
            rxe.mantine.timeline.item(
                title="Step 2",
                bullet="•",
            ),
            rxe.mantine.timeline.item(
                title="Step 3",
                bullet="•",
            ),
            active=1,
            bullet_size=24,
            line_width=2,
            color="blue",
        )
    )
```

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

### Example AWS Access Key ID

Source: https://reflex.dev/docs/ai/integrations/aws

This is an example of an AWS Access Key ID used for authenticating API requests. It should be kept confidential.

```text
AKIAIOSFODNN7EXAMPLE
```

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

### Install libsass for SASS/SCSS

Source: https://reflex.dev/docs/styling/custom-stylesheets

Install the `libsass` package using pip if you plan to use SASS/SCSS files in your project. It's usually included by default.

```bash
pip install "libsass>=0.23.0"
```

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

### Install Apt Packages

Source: https://reflex.dev/docs/hosting/config-file

List system packages required by your application under the 'packages' key. Version pinning is optional.

```yaml
packages:
  - procps=2.0.32-1  # Version pinning is optional
  - imagemagick 
  - ffmpeg      
```

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

### Basic Table Creation

Source: https://reflex.dev/docs/library/tables-and-data-grids/table

Demonstrates how to create a basic table with headers and data rows using rx.table.root. This includes defining column headers and populating the table body with cells.

```python
rx.table.root(
rx.table.header(
rx.table.row(
rx.table.column_header_cell("Full Name"),
rx.table.column_header_cell("Email"),
rx.table.column_header_cell("Group"),
),
),
rx.table.body(
rx.table.row(
rx.table.row_header_cell("Danilo Rosa"),
rx.table.cell("danilo@example.com"),
rx.table.cell("Developer"),
),
rx.table.row(
rx.table.row_header_cell("Zahra Ambessa"),
rx.table.cell("zahra@example.com"),
rx.table.cell("Admin"),
),
),
width="80%",
size="1",
variant="surface",
)
```

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

### Reflex Enterprise Not Available Message

Source: https://reflex.dev/docs/enterprise/overview

Displays a message indicating that Reflex Enterprise is not available and provides installation instructions. This is shown when the enterprise package is not installed.

```python
else:
    grid = rx.text(
        "Reflex Enterprise not available. Install with: pip install reflex-enterprise"
    )
```

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

### Basic Foreach Example

Source: https://reflex.dev/docs/library/dynamic-rendering/foreach

Renders a list of color swatches dynamically from a state variable. Ensure the state variable is an iterable.

```python
class ForeachState(rx.State):
    colors: list[str] = [
        "#E5484D",
        "#12A594",
        "#3E63DD",
        "#AD5700",
        "#F76B15",
        "#8E4EC6",
    ]

def color_swatch(label: rx.Var[str | int], color: rx.Var[str]):
    return rx.box(
        rx.text(label, color="white", weight="medium"),
        bg=color,
        padding_y="0.5em",
        padding_x="0.75em",
        min_width="5.5em",
        text_align="center",
        border_radius="0.375rem",
        border="1px solid rgba(0, 0, 0, 0.12)",
        box_shadow="0 1px 2px rgba(0, 0, 0, 0.10)",
    )

def colored_box(color: rx.Var[str]):
    return color_swatch(color, color)

def foreach_example():
    return rx.grid(
        rx.foreach(ForeachState.colors, colored_box),
        columns="2",
    )
```

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

### Install External Package via Chat Interface

Source: https://reflex.dev/docs/ai/features/installing-external-packages

Use the chat interface to request installation of external packages like openai, langsmith, or requests.

```python
rx.el.div(
    rx.image(
        src="https://web.reflex-assets.dev/ai_builder/external_packages_input.avif",
        class_name="rounded-md h-auto",
        border=f"0.81px solid {rx.color('slate', 5)}",
    ),
    class_name="w-full flex flex-col rounded-md",
)
```

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

### Basic Loading Overlay Example

Source: https://reflex.dev/docs/enterprise/mantine/loading-overlay

Demonstrates how to use the `rxe.mantine.loading_overlay` component to show and hide a loading state on demand. It includes a button to toggle the loading state.

```python
import reflex as rx
import reflex_enterprise as rxe


class LoadingOverlayState(rx.State):
    loading: bool = False

    @rx.event
    def toggle_loading(self):
        self.loading = not self.loading


def loading_overlay_example():
    return (
        rx.container(
            rxe.mantine.loading_overlay(
                rx.text(
                    "Loading Overlay Example",
                    height="200px",
                    width="100px",
                ),
                overlay_props={"radius": "sm", "blur": 2},
                visible=LoadingOverlayState.loading,
                z_index=1000,
            ),
        ),
        rx.button("Toggle Loading", on_click=LoadingOverlayState.toggle_loading),
    )
```

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

### Ranged Bar Chart Example

Source: https://reflex.dev/docs/library/graphing/charts/barchart

Assign a range in the bar by setting the data_key to a list with two elements. This example shows temperature ranges for each day.

```python
def bar_range():
    return rx.recharts.bar_chart(
        rx.recharts.bar(
            data_key="temperature",
            stroke=rx.color("accent", 9),
            fill=rx.color("accent", 8),
        ),
        rx.recharts.x_axis(data_key="day"),
        rx.recharts.y_axis(),
        data=range_data,
        width="100%",
        height=250,
    )
```

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

### Install Reflex Agent Skills via Cursor

Source: https://reflex.dev/docs/ai/integrations/skills

Add the reflex-dev/agent-skills repository manually through Cursor's settings. This allows for remote rule installation from GitHub.

```text
reflex-dev/agent-skills
```

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

### Initialize Reflex App

Source: https://reflex.dev/docs/getting-started/dashboard-tutorial

Sets up the Reflex application with a custom theme. Defines the app's title and description for the browser tab and SEO.

```python
app = rx.App(
    theme=rx.theme(radius="full", accent_color="grass"),
)

app.add_page(
    index,
    title="Customer Data App",
    description="A simple app to manage customer data.",
    on_load=State.transform_data,
)
```

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

### on_mouse_move Event Example

Source: https://reflex.dev/docs/api-reference/event-triggers

The on_mouse_move event handler is called when the user moves the mouse over an element. This example demonstrates changing button text as the mouse moves over it.

```python
class MouseMoveState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_move_example():
    return rx.button(MouseMoveState.text, on_mouse_move=MouseMoveState.change_text)
```

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

### Client Storage State Example

Source: https://reflex.dev/docs/client-storage/overview

Demonstrates how to define state variables using `rx.Cookie` and `rx.LocalStorage`. These variables persist across sessions and can be bound to UI elements.

```python
class ClientStorageState(rx.State):
    my_cookie: str = rx.Cookie("")
    my_local_storage: str = rx.LocalStorage("")
    custom_cookie: str = rx.Cookie(name="CustomNamedCookie", max_age=3600)

    @rx.event
    def set_my_cookie(self, value: str):
        self.my_cookie = value

    @rx.event
    def set_my_local_storage(self, value: str):
        self.my_local_storage = value

    @rx.event
    def set_custom_cookie(self, value: str):
        self.custom_cookie = value
```

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

### on_mouse_leave Event Example

Source: https://reflex.dev/docs/api-reference/event-triggers

Use the on_mouse_leave event to trigger an action when the mouse cursor exits an element. This example changes button text when the mouse leaves.

```python
class MouseLeaveState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_leave_example():
    return rx.button(MouseLeaveState.text, on_mouse_leave=MouseLeaveState.change_text)
```

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

### Component Build Help

Source: https://reflex.dev/docs/custom-components/command-reference

Get detailed help for the `reflex component build` command, which is used to build your custom component for distribution.

```bash
reflex component build --help
```