[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6WZHSVTS4BN4PFDXCMQHFZ3":3,"skill-same:01M6WZHSVTS4BN4PFDXCMQHFZ3":78},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":14,"repositoryHtmlUrl":54,"repositoryHomepageUrl":55,"ownerHtmlUrl":56,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":57,"install":58,"resources":71},"01M6WZHSVTS4BN4PFDXCMQHFZ3","reflex-python",null,"Reflex Python web framework for full-stack apps in pure Python — components, state, routing, and deployment. Use when building Reflex apps, designing component hierarchies, managing Reflex state, or deploying a Reflex application.","projectious-work\u002Fprocesskit","projectious-work","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F263889726?v=4","01M6N97TJJ118WQ35CHRV8RD0E","projectious.work","01M6N97TPWJPF0BMKYQ4PBY5W8",0,"MIT","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.18.1\u002Fcontext\u002Fskills\u002Fengineering\u002Freflex-python\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"reflex python","reflex","python","work","when","for","v1","apps","full","application","use","stack","engineering","web framework","state","routing","deployment","component","components","web","2026-11-10 10:12:30",false,"---\nname: reflex-python\ndescription: |\n  Reflex Python web framework for full-stack apps in pure Python — components, state, routing, and deployment. Use when building Reflex apps, designing component hierarchies, managing Reflex state, or deploying a Reflex application.\nmetadata:\n  processkit:\n    apiVersion: processkit.projectious.work\u002Fv1\n    id: SKILL-reflex-python\n    version: \"1.1.0\"\n    created: 2026-04-06T00:00:00Z\n    category: engineering\n---\n\n# Reflex Python\n\n## Intro\n\nReflex lets you build full-stack web apps in pure Python: UI is\ncomposed from `rx.*` components (Python wrappers over React), state\nlives in `rx.State` subclasses, and event handlers are ordinary\nmethods that mutate state. The framework compiles the frontend and\nruns a Python backend that owns all business logic.\n\n## Overview\n\n### App structure\n\n`reflex init` scaffolds `rxconfig.py` and the app package. The entry\npoint is `app\u002Fapp.py` with `app = rx.App()`. Each page is a function\ndecorated with `@rx.page(route=\"\u002Fpath\", title=\"...\")`. Files dropped\nin `app\u002Fpages\u002F` become routes automatically. Configuration (app name,\ndatabase URL) lives in `rxconfig.py`. Static assets in `assets\u002F` are\nserved at `\u002Ffilename`.\n\n### Components\n\nEvery piece of UI is an `rx.*` call. Layout helpers (`rx.box`,\n`rx.flex`, `rx.grid`, `rx.stack`, `rx.vstack`, `rx.hstack`,\n`rx.center`) nest display and input components. Props are keyword\narguments; children are positional. Reflex ships Radix-based\nprimitives for inputs, feedback, navigation, and display.\n\n### State management\n\nDefine state as a class inheriting from `rx.State`. State vars are\ntyped class attributes (`count: int = 0`) — the type annotation is\nmandatory because Reflex uses it for serialization. Event handlers\nare methods that modify `self`. Computed vars use `@rx.var`. Each\nbrowser session gets its own state instance, and substates\n(`class FormState(rx.State)`) keep large apps modular.\n\n### Event handlers and binding\n\nAttach handlers to component events: `rx.button(\"Add\",\non_click=State.increment)`. Reflex auto-generates `set_\u003Cvar>` for\nevery state var, enabling two-way binding like `rx.input(\nvalue=State.query, on_change=State.set_query)`. Handlers can `yield`\nbetween mutations to push intermediate UI updates. Long-running work\ngoes in `@rx.event(background=True)` handlers that use `async with\nself:` to mutate state safely.\n\n### Styling\n\nProps drive styling: `rx.box(padding=\"4\", bg=\"blue.500\",\nborder_radius=\"md\")`. Values come from Radix design tokens (color\nscales `blue.1`–`blue.12`, spacing, radii). Responsive props take a\nlist that maps to `[mobile, tablet, desktop]`. Global styles live in\n`rx.App(style={...})`. Dark mode uses `rx.color_mode.toggle` and\n`rx.color_mode_cond()`.\n\n### Routing\n\n`@rx.page(route=\"\u002Fusers\u002F[user_id]\")` declares a dynamic route;\nparameters are accessed via `self.router.page.params[\"user_id\"]`.\n`rx.link(\"Home\", href=\"\u002F\")` produces navigation links and\n`rx.redirect(\"\u002Fdashboard\")` returned from a handler performs a\nprogrammatic navigation. Attach `on_load=State.load_data` to the page\ndecorator for per-visit initialization.\n\n### Database\n\nReflex ships SQLModel integration: `class User(rx.Model, table=True):\n...`. Query inside handlers via `with rx.session() as session: ...`.\n`reflex db migrate` handles schema migrations. Default SQLite for\ndevelopment; configure PostgreSQL in `rxconfig.py` for production.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Mutating state outside an event handler.** Reflex tracks state mutations only inside event handler methods. Changing a state var directly from a background task or external callback without `async with self:` silently drops the mutation — the UI never updates. All state mutations must go through event handlers or the `async with self:` context manager in background tasks.\n- **Missing type annotations on state vars.** Reflex uses type annotations for serialization and code generation. A state var without a type annotation (`count = 0` instead of `count: int = 0`) causes runtime serialization errors or is silently ignored. Every state var requires a type annotation.\n- **Non-serializable values in state.** Reflex must serialize state to JSON to sync it between backend and frontend. Storing a SQLAlchemy model instance, a file handle, or a datetime object without a JSON-compatible type in a state var causes silent failures or serialization errors. State vars must be JSON-serializable; derive and cache computed values via `@rx.var`.\n- **Blocking the event loop with CPU or I\u002FO work inside a regular event handler.** A slow synchronous event handler (network call, database query, heavy computation) blocks all other events for that session. Move blocking work into `@rx.event(background=True)` async handlers.\n- **One giant global state class for the entire app.** All components subscribed to the same state class rebuild on any change. A single large state means unrelated UI panels rebuild together. Split state by feature domain into substates (`class CartState(rx.State)`, `class UserState(rx.State)`) to isolate rebuilds.\n- **Not calling `yield` in a long-running synchronous handler.** A handler that runs for several seconds without `yield` blocks UI updates for the entire duration — the user sees a frozen screen. `yield` between steps to push intermediate state updates to the frontend.\n- **Hardcoding route paths as strings in multiple places.** Route paths like `\"\u002Fdashboard\"` scattered across `rx.redirect(...)` calls and `@rx.page(route=...)` decorators become maintenance debt when routes change. Define route constants once and reference them everywhere.\n\n## Full reference\n\n### Layout components\n\n```python\n# Flex container (horizontal by default)\nrx.flex(\n    rx.box(\"Item 1\"),\n    rx.box(\"Item 2\"),\n    direction=\"row\",      # \"row\" | \"column\"\n    gap=\"4\",\n    align=\"center\",       # cross-axis alignment\n    justify=\"between\",    # main-axis distribution\n    wrap=\"wrap\",\n)\n\n# Grid layout\nrx.grid(\n    rx.box(\"A\"), rx.box(\"B\"), rx.box(\"C\"), rx.box(\"D\"),\n    columns=\"2\",\n    spacing=\"4\",\n)\n\n# Stack shorthands\nrx.vstack(rx.text(\"Top\"), rx.text(\"Bottom\"), spacing=\"3\")\nrx.hstack(rx.text(\"Left\"), rx.text(\"Right\"), spacing=\"3\")\n\n# Center content\nrx.center(rx.spinner(), height=\"100vh\")\n```\n\n### Display and input\n\n```python\nrx.text(\"Body text\", size=\"3\", color=\"gray.11\")\nrx.heading(\"Page Title\", size=\"7\", weight=\"bold\")\nrx.image(src=\"\u002Flogo.png\", alt=\"Logo\", width=\"200px\")\nrx.badge(\"NEW\", color_scheme=\"green\", variant=\"soft\")\nrx.code_block(code, language=\"python\", show_line_numbers=True)\n\nrx.card(\n    rx.text(\"Card content\"),\n    rx.button(\"Action\"),\n    size=\"3\",\n)\n\nrx.input(\n    placeholder=\"Search...\",\n    value=State.query,\n    on_change=State.set_query,\n    size=\"3\",\n)\n\nrx.text_area(value=State.content, on_change=State.set_content, rows=\"5\")\n\nrx.select(\n    [\"Option A\", \"Option B\", \"Option C\"],\n    value=State.selected,\n    on_change=State.set_selected,\n    placeholder=\"Choose one\",\n)\n\nrx.checkbox(\"Accept terms\", checked=State.accepted, on_change=State.set_accepted)\nrx.switch(checked=State.dark_mode, on_change=State.toggle_dark)\n\nrx.button(\"Primary\", color_scheme=\"blue\")\nrx.button(\"Outline\", variant=\"outline\")\nrx.button(\"Loading\", loading=State.is_loading, on_click=State.submit)\n```\n\n### State patterns\n\n```python\nimport reflex as rx\n\nclass AppState(rx.State):\n    # Simple vars (set_\u003Cname> auto-generated)\n    count: int = 0\n    items: list[str] = []\n    query: str = \"\"\n\n    # Event handlers\n    def increment(self):\n        self.count += 1\n\n    def add_item(self):\n        if self.query:\n            self.items.append(self.query)\n            self.query = \"\"\n\n    def remove_item(self, item: str):\n        self.items = [i for i in self.items if i != item]\n\n    # Computed var (read-only, auto-updates)\n    @rx.var\n    def item_count(self) -> int:\n        return len(self.items)\n\n    @rx.var\n    def filtered_items(self) -> list[str]:\n        if not self.query:\n            return self.items\n        return [i for i in self.items if self.query.lower() in i.lower()]\n```\n\n### Event handler patterns\n\n```python\nclass FormState(rx.State):\n    form_data: dict = {}\n\n    # Handler with event data\n    def handle_submit(self, data: dict):\n        self.form_data = data\n\n    # Yielding for progress updates\n    def process(self):\n        self.status = \"Starting...\"\n        yield\n        self.status = \"Processing...\"\n        yield\n        self.status = \"Done\"\n\n    # Background task (non-blocking)\n    @rx.event(background=True)\n    async def fetch_data(self):\n        import httpx\n        async with httpx.AsyncClient() as client:\n            resp = await client.get(\"https:\u002F\u002Fapi.example.com\u002Fdata\")\n            async with self:\n                self.data = resp.json()\n\n    # Redirect after action\n    def login(self):\n        if self.authenticate():\n            return rx.redirect(\"\u002Fdashboard\")\n```\n\n### Conditional and dynamic rendering\n\n```python\n# Conditional rendering\nrx.cond(\n    State.logged_in,\n    rx.text(\"Welcome back!\"),\n    rx.button(\"Log in\", on_click=State.show_login),\n)\n\n# Rendering lists\nrx.foreach(\n    State.items,\n    lambda item: rx.hstack(\n        rx.text(item),\n        rx.icon_button(\"x\", on_click=State.remove_item(item)),\n    ),\n)\n\n# Multi-branch\nrx.match(\n    State.status,\n    (\"loading\", rx.spinner()),\n    (\"error\", rx.text(\"Error!\", color=\"red\")),\n    (\"success\", rx.text(\"Done!\", color=\"green\")),\n    rx.text(\"Unknown\"),  # default\n)\n```\n\n### Pages and routing\n\n```python\n@rx.page(route=\"\u002F\", title=\"Home\", on_load=AppState.load_data)\ndef index() -> rx.Component:\n    return rx.box(\n        rx.heading(\"Home\"),\n        rx.text(\"Welcome\"),\n    )\n\n@rx.page(route=\"\u002Fusers\u002F[user_id]\", title=\"User Profile\")\ndef user_profile() -> rx.Component:\n    return rx.box(\n        rx.text(f\"User: {AppState.router.page.params['user_id']}\"),\n    )\n\nrx.link(\"Go Home\", href=\"\u002F\")\nrx.link(rx.button(\"Dashboard\"), href=\"\u002Fdashboard\")\n```\n\n### Form handling\n\n```python\nrx.form(\n    rx.vstack(\n        rx.input(name=\"email\", placeholder=\"Email\", required=True),\n        rx.input(name=\"password\", type=\"password\", required=True),\n        rx.button(\"Submit\", type=\"submit\"),\n        spacing=\"3\",\n    ),\n    on_submit=FormState.handle_submit,\n    reset_on_submit=True,\n)\n```\n\n### Deployment\n\n- **Reflex Cloud**: `reflex deploy` for managed hosting\n- **Self-host**: `reflex export --frontend-only` produces a static\n  frontend plus a backend you run with `uvicorn`\n- **Docker**: export, then serve the frontend via nginx and the\n  backend via uvicorn\n- Set `REFLEX_ENV=prod` for production optimizations\n\n### Common mistakes\n\n- **Mutating state outside event handlers** — all state mutation\n  must happen inside a handler method\n- **Missing type annotations on state vars** — Reflex needs them for\n  serialization and code generation\n- **Non-serializable values in state** — every state var must be\n  JSON-serializable\n- **Blocking the event loop** — push CPU\u002FIO-heavy work into\n  `@rx.event(background=True)` handlers\n- **One giant global state** — split into substates by feature\n\n### Further reading\n\n- [Reflex Documentation](https:\u002F\u002Freflex.dev\u002Fdocs\u002F)\n- [Component Library](https:\u002F\u002Freflex.dev\u002Fdocs\u002Flibrary\u002F)\n","# Reflex Python\n\n## Intro\n\nReflex lets you build full-stack web apps in pure Python: UI is\ncomposed from `rx.*` components (Python wrappers over React), state\nlives in `rx.State` subclasses, and event handlers are ordinary\nmethods that mutate state. The framework compiles the frontend and\nruns a Python backend that owns all business logic.\n\n## Overview\n\n### App structure\n\n`reflex init` scaffolds `rxconfig.py` and the app package. The entry\npoint is `app\u002Fapp.py` with `app = rx.App()`. Each page is a function\ndecorated with `@rx.page(route=\"\u002Fpath\", title=\"...\")`. Files dropped\nin `app\u002Fpages\u002F` become routes automatically. Configuration (app name,\ndatabase URL) lives in `rxconfig.py`. Static assets in `assets\u002F` are\nserved at `\u002Ffilename`.\n\n### Components\n\nEvery piece of UI is an `rx.*` call. Layout helpers (`rx.box`,\n`rx.flex`, `rx.grid`, `rx.stack`, `rx.vstack`, `rx.hstack`,\n`rx.center`) nest display and input components. Props are keyword\narguments; children are positional. Reflex ships Radix-based\nprimitives for inputs, feedback, navigation, and display.\n\n### State management\n\nDefine state as a class inheriting from `rx.State`. State vars are\ntyped class attributes (`count: int = 0`) — the type annotation is\nmandatory because Reflex uses it for serialization. Event handlers\nare methods that modify `self`. Computed vars use `@rx.var`. Each\nbrowser session gets its own state instance, and substates\n(`class FormState(rx.State)`) keep large apps modular.\n\n### Event handlers and binding\n\nAttach handlers to component events: `rx.button(\"Add\",\non_click=State.increment)`. Reflex auto-generates `set_\u003Cvar>` for\nevery state var, enabling two-way binding like `rx.input(\nvalue=State.query, on_change=State.set_query)`. Handlers can `yield`\nbetween mutations to push intermediate UI updates. Long-running work\ngoes in `@rx.event(background=True)` handlers that use `async with\nself:` to mutate state safely.\n\n### Styling\n\nProps drive styling: `rx.box(padding=\"4\", bg=\"blue.500\",\nborder_radius=\"md\")`. Values come from Radix design tokens (color\nscales `blue.1`–`blue.12`, spacing, radii). Responsive props take a\nlist that maps to `[mobile, tablet, desktop]`. Global styles live in\n`rx.App(style={...})`. Dark mode uses `rx.color_mode.toggle` and\n`rx.color_mode_cond()`.\n\n### Routing\n\n`@rx.page(route=\"\u002Fusers\u002F[user_id]\")` declares a dynamic route;\nparameters are accessed via `self.router.page.params[\"user_id\"]`.\n`rx.link(\"Home\", href=\"\u002F\")` produces navigation links and\n`rx.redirect(\"\u002Fdashboard\")` returned from a handler performs a\nprogrammatic navigation. Attach `on_load=State.load_data` to the page\ndecorator for per-visit initialization.\n\n### Database\n\nReflex ships SQLModel integration: `class User(rx.Model, table=True):\n...`. Query inside handlers via `with rx.session() as session: ...`.\n`reflex db migrate` handles schema migrations. Default SQLite for\ndevelopment; configure PostgreSQL in `rxconfig.py` for production.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Mutating state outside an event handler.** Reflex tracks state mutations only inside event handler methods. Changing a state var directly from a background task or external callback without `async with self:` silently drops the mutation — the UI never updates. All state mutations must go through event handlers or the `async with self:` context manager in background tasks.\n- **Missing type annotations on state vars.** Reflex uses type annotations for serialization and code generation. A state var without a type annotation (`count = 0` instead of `count: int = 0`) causes runtime serialization errors or is silently ignored. Every state var requires a type annotation.\n- **Non-serializable values in state.** Reflex must serialize state to JSON to sync it between backend and frontend. Storing a SQLAlchemy model instance, a file handle, or a datetime object without a JSON-compatible type in a state var causes silent failures or serialization errors. State vars must be JSON-serializable; derive and cache computed values via `@rx.var`.\n- **Blocking the event loop with CPU or I\u002FO work inside a regular event handler.** A slow synchronous event handler (network call, database query, heavy computation) blocks all other events for that session. Move blocking work into `@rx.event(background=True)` async handlers.\n- **One giant global state class for the entire app.** All components subscribed to the same state class rebuild on any change. A single large state means unrelated UI panels rebuild together. Split state by feature domain into substates (`class CartState(rx.State)`, `class UserState(rx.State)`) to isolate rebuilds.\n- **Not calling `yield` in a long-running synchronous handler.** A handler that runs for several seconds without `yield` blocks UI updates for the entire duration — the user sees a frozen screen. `yield` between steps to push intermediate state updates to the frontend.\n- **Hardcoding route paths as strings in multiple places.** Route paths like `\"\u002Fdashboard\"` scattered across `rx.redirect(...)` calls and `@rx.page(route=...)` decorators become maintenance debt when routes change. Define route constants once and reference them everywhere.\n\n## Full reference\n\n### Layout components\n\n```python\n# Flex container (horizontal by default)\nrx.flex(\n    rx.box(\"Item 1\"),\n    rx.box(\"Item 2\"),\n    direction=\"row\",      # \"row\" | \"column\"\n    gap=\"4\",\n    align=\"center\",       # cross-axis alignment\n    justify=\"between\",    # main-axis distribution\n    wrap=\"wrap\",\n)\n\n# Grid layout\nrx.grid(\n    rx.box(\"A\"), rx.box(\"B\"), rx.box(\"C\"), rx.box(\"D\"),\n    columns=\"2\",\n    spacing=\"4\",\n)\n\n# Stack shorthands\nrx.vstack(rx.text(\"Top\"), rx.text(\"Bottom\"), spacing=\"3\")\nrx.hstack(rx.text(\"Left\"), rx.text(\"Right\"), spacing=\"3\")\n\n# Center content\nrx.center(rx.spinner(), height=\"100vh\")\n```\n\n### Display and input\n\n```python\nrx.text(\"Body text\", size=\"3\", color=\"gray.11\")\nrx.heading(\"Page Title\", size=\"7\", weight=\"bold\")\nrx.image(src=\"\u002Flogo.png\", alt=\"Logo\", width=\"200px\")\nrx.badge(\"NEW\", color_scheme=\"green\", variant=\"soft\")\nrx.code_block(code, language=\"python\", show_line_numbers=True)\n\nrx.card(\n    rx.text(\"Card content\"),\n    rx.button(\"Action\"),\n    size=\"3\",\n)\n\nrx.input(\n    placeholder=\"Search...\",\n    value=State.query,\n    on_change=State.set_query,\n    size=\"3\",\n)\n\nrx.text_area(value=State.content, on_change=State.set_content, rows=\"5\")\n\nrx.select(\n    [\"Option A\", \"Option B\", \"Option C\"],\n    value=State.selected,\n    on_change=State.set_selected,\n    placeholder=\"Choose one\",\n)\n\nrx.checkbox(\"Accept terms\", checked=State.accepted, on_change=State.set_accepted)\nrx.switch(checked=State.dark_mode, on_change=State.toggle_dark)\n\nrx.button(\"Primary\", color_scheme=\"blue\")\nrx.button(\"Outline\", variant=\"outline\")\nrx.button(\"Loading\", loading=State.is_loading, on_click=State.submit)\n```\n\n### State patterns\n\n```python\nimport reflex as rx\n\nclass AppState(rx.State):\n    # Simple vars (set_\u003Cname> auto-generated)\n    count: int = 0\n    items: list[str] = []\n    query: str = \"\"\n\n    # Event handlers\n    def increment(self):\n        self.count += 1\n\n    def add_item(self):\n        if self.query:\n            self.items.append(self.query)\n            self.query = \"\"\n\n    def remove_item(self, item: str):\n        self.items = [i for i in self.items if i != item]\n\n    # Computed var (read-only, auto-updates)\n    @rx.var\n    def item_count(self) -> int:\n        return len(self.items)\n\n    @rx.var\n    def filtered_items(self) -> list[str]:\n        if not self.query:\n            return self.items\n        return [i for i in self.items if self.query.lower() in i.lower()]\n```\n\n### Event handler patterns\n\n```python\nclass FormState(rx.State):\n    form_data: dict = {}\n\n    # Handler with event data\n    def handle_submit(self, data: dict):\n        self.form_data = data\n\n    # Yielding for progress updates\n    def process(self):\n        self.status = \"Starting...\"\n        yield\n        self.status = \"Processing...\"\n        yield\n        self.status = \"Done\"\n\n    # Background task (non-blocking)\n    @rx.event(background=True)\n    async def fetch_data(self):\n        import httpx\n        async with httpx.AsyncClient() as client:\n            resp = await client.get(\"https:\u002F\u002Fapi.example.com\u002Fdata\")\n            async with self:\n                self.data = resp.json()\n\n    # Redirect after action\n    def login(self):\n        if self.authenticate():\n            return rx.redirect(\"\u002Fdashboard\")\n```\n\n### Conditional and dynamic rendering\n\n```python\n# Conditional rendering\nrx.cond(\n    State.logged_in,\n    rx.text(\"Welcome back!\"),\n    rx.button(\"Log in\", on_click=State.show_login),\n)\n\n# Rendering lists\nrx.foreach(\n    State.items,\n    lambda item: rx.hstack(\n        rx.text(item),\n        rx.icon_button(\"x\", on_click=State.remove_item(item)),\n    ),\n)\n\n# Multi-branch\nrx.match(\n    State.status,\n    (\"loading\", rx.spinner()),\n    (\"error\", rx.text(\"Error!\", color=\"red\")),\n    (\"success\", rx.text(\"Done!\", color=\"green\")),\n    rx.text(\"Unknown\"),  # default\n)\n```\n\n### Pages and routing\n\n```python\n@rx.page(route=\"\u002F\", title=\"Home\", on_load=AppState.load_data)\ndef index() -> rx.Component:\n    return rx.box(\n        rx.heading(\"Home\"),\n        rx.text(\"Welcome\"),\n    )\n\n@rx.page(route=\"\u002Fusers\u002F[user_id]\", title=\"User Profile\")\ndef user_profile() -> rx.Component:\n    return rx.box(\n        rx.text(f\"User: {AppState.router.page.params['user_id']}\"),\n    )\n\nrx.link(\"Go Home\", href=\"\u002F\")\nrx.link(rx.button(\"Dashboard\"), href=\"\u002Fdashboard\")\n```\n\n### Form handling\n\n```python\nrx.form(\n    rx.vstack(\n        rx.input(name=\"email\", placeholder=\"Email\", required=True),\n        rx.input(name=\"password\", type=\"password\", required=True),\n        rx.button(\"Submit\", type=\"submit\"),\n        spacing=\"3\",\n    ),\n    on_submit=FormState.handle_submit,\n    reset_on_submit=True,\n)\n```\n\n### Deployment\n\n- **Reflex Cloud**: `reflex deploy` for managed hosting\n- **Self-host**: `reflex export --frontend-only` produces a static\n  frontend plus a backend you run with `uvicorn`\n- **Docker**: export, then serve the frontend via nginx and the\n  backend via uvicorn\n- Set `REFLEX_ENV=prod` for production optimizations\n\n### Common mistakes\n\n- **Mutating state outside event handlers** — all state mutation\n  must happen inside a handler method\n- **Missing type annotations on state vars** — Reflex needs them for\n  serialization and code generation\n- **Non-serializable values in state** — every state var must be\n  JSON-serializable\n- **Blocking the event loop** — push CPU\u002FIO-heavy work into\n  `@rx.event(background=True)` handlers\n- **One giant global state** — split into substates by feature\n\n### Further reading\n\n- [Reflex Documentation](https:\u002F\u002Freflex.dev\u002Fdocs\u002F)\n- [Component Library](https:\u002F\u002Freflex.dev\u002Fdocs\u002Flibrary\u002F)\n",{"name":5,"metadata":44,"description":50},{"processkit":45},{"id":46,"created":47,"version":48,"category":31,"apiVersion":49},"SKILL-reflex-python",1775433600000,"1.1.0","processkit.projectious.work\u002Fv1","Reflex Python web framework for full-stack apps in pure Python — components, state, routing, and deployment. Use when building Reflex apps, designing component hierarchies, managing Reflex state, or deploying a Reflex application.\n","main","4876a92620ee792aac2ac9a1a806322d8a572367","archive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.18.1\u002Fcontext\u002Fskills\u002Fengineering\u002Freflex-python","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit","https:\u002F\u002Fprojectious-work.github.io\u002Fprocesskit\u002F","https:\u002F\u002Fgithub.com\u002Fprojectious-work","2026-11-11 23:24:18",{"source":8,"skillName":5,"commands":59,"prompt":69,"zipAvailable":70},[60,63,66],{"tool":61,"command":62},"npx","npx skills add projectious-work\u002Fprocesskit --skill reflex-python",{"tool":64,"command":65},"bunx","bunx skills add projectious-work\u002Fprocesskit --skill reflex-python",{"tool":67,"command":68},"pnpm","pnpm dlx skills add projectious-work\u002Fprocesskit --skill reflex-python","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.18.1\u002Fcontext\u002Fskills\u002Fengineering\u002Freflex-python\u002FSKILL.md",true,[72],{"path":73,"resourceType":74,"resourceTypeDesc":75,"sizeBytes":76,"sourceHtmlUrl":77},"references\u002Fcomponent-reference.md","REFERENCE","参考文档",4914,"https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.18.1\u002Fcontext\u002Fskills\u002Fengineering\u002Freflex-python\u002Freferences\u002Fcomponent-reference.md",[79,105,125,146,163,181],{"skillNo":80,"name":81,"nameZh":6,"description":82,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":90,"publishedAt":39},"01M6X5MTC89B4ZGXW3JVSQCPF8","skill-management","Manage Skill package manifests as v1 ontology entities.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fskill-management\u002FSKILL.md",[85],{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[91,92,93,94,95,96,22,97,98,99,81,100,101,102,25,103,104],"management","skill management","create","update","package","alpha","list","manage","ontology","get","as","manifests","skill package","transition",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":112,"publishedAt":39},"01M6X5MCV74NHW5MEDNHZRF2C8","schema-management","Manage generated processkit schema contracts through deterministic MCP rebuild and inspection workflows.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fschema-management\u002FSKILL.md",[111],{"categoryNo":86,"categoryName":87,"taxonomyType":88,"taxonomyTypeDesc":89},[91,113,114,115,116,117,96,22,118,119,98,120,121,122,100,123,124],"schema","schema management","MCP","workflows","validation","generated","rebuild","contracts","wed","deterministic","contract","mode",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":129,"categories":130,"keywords":131,"publishedAt":39},"01M6X5M5G6YJ96AMZGSCZJ1D13","proposition-management","Record claims, risks, beliefs, world facts, WSJF estimates, and assumptions through the Proposition interface.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fproposition-management\u002FSKILL.md",[],[91,132,133,93,94,134,96,22,135,136,137,138,100,139,140,141,142,143,144,145],"proposition","proposition management","index","log","world","record","query","creation","event","interface","updates","facts","claims","WSJF",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":152,"publishedAt":39},"01M6X5KMQ83QN9M6MPWZM7344F","ontology-management","Manage generated v1 ontology entities that do not require a dedicated domain server.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fontology-management\u002FSKILL.md",[],[91,99,153,93,96,154,155,118,156,135,98,157,158,100,159,160,140,161,25,162],"ontology management","lifecycle","archive","roadmap","do","domain","iteration","keep","measurement","generic",{"skillNo":164,"name":165,"nameZh":6,"description":166,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":167,"categories":168,"keywords":169,"publishedAt":39},"01M6X5KCY2DN3SM21RERSFNEBT","okf-compatibility","Import, export, and validate conformant Open Knowledge Format bundles.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fokf-compatibility\u002FSKILL.md",[],[170,171,172,173,96,174,175,176,22,177,178,179,180],"okf","compatibility","okf compatibility","validate","open","knowledge","format","export","bundles","bundle","import",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":187,"publishedAt":39},"01M6X5JA8S5PNGJVFW4EQY8T83","capability-management","Manage versioned Capability entities and their governed lifecycle.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fcapability-management\u002FSKILL.md",[],[91,188,189,93,94,134,96,154,22,97,135,190,98,137,100,160,140,141,191,104],"capability","capability management","queries","changes"]