Skill
advanced-alchemy
Auto-activate for advanced_alchemy imports, alembic/, SQLAlchemyAsyncRepositoryService, SQLAlchemyAsyncConfig, repository_type, service_class, filters, or…
@litestar-orgView SkillDevelopment
Skill
/litestar-inertia
Auto-activate for litestar_vite.inertia, InertiaConfig, component=, @inertia, @inertiajs/*, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX.
Install
$ npx -y skills add litestar-org/litestar-skills --skill litestar-inertia --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/litestar-inertia
Context preview
The summary Claude sees to decide when to auto-load this skill.
Auto-activate for litestar_vite.inertia, InertiaConfig, component=, @inertia, @inertiajs/*, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX.
SKILL.md
litestar-inertia.SKILL.mdname: litestar-inertia
description: "Auto-activate for litestar_vite.inertia, InertiaConfig, component=, @inertia, @inertiajs/*, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX."
Litestar + Inertia.js Integration
`litestar-inertia` is the four-library story:
| Layer | Library | Role | | --- | --- | --- | | Client SPA | [`@inertiajs/react`](https://inertiajs.com) / `@inertiajs/vue3` / `@inertiajs/svelte` | Page resolution, forms, navigation, shared data access; generated templates target Inertia v3 | | Frontend build | [`vite`](https://vitejs.dev) | Bundling, HMR, dev server, production build | | Python bridge | [`litestar-vite`](../litestar-vite/SKILL.md) | `VitePlugin` + `InertiaConfig`, asset manifest, type generation, page-props codec | | Server framework | [`litestar`](../litestar/SKILL.md) | Routes, Controllers, Guards, DI, DTOs — returning Inertia responses |
Litestar routes produce page data, `ViteConfig.inertia` configures the response layer, and the Vite-served client handles subsequent navigations. For Vite-only configuration, use the sibling skill.
When this skill activates
- Python files importing `litestar_vite.inertia`, `InertiaConfig`, or route handlers with `component=`
- `*.tsx` / `*.vue` / `*.svelte` files importing from `@inertiajs/*`
- `createInertiaApp({ resolve, setup })` in a frontend entrypoint
- A `resources/` or `resources/js/pages/` directory alongside a `src/py/` — classic litestar-vite + Inertia layout
- `inertia.config.ts` or an `InertiaConfig` invocation in `vite.config.ts`
- User asks about "building an SPA with a Python backend", "server-driven React/Vue", "form validation errors from Python", "shared auth data across pages"
Code Style Rules
- **PEP 604 unions** in consumer Python modules; use
`from __future__ import annotations` only when the application benefits from it
- **TypeScript typed pages** — generate page-props types via `litestar-vite`'s TypeGen, never hand-roll
- **Forms via `useForm`** — use the adapter form helper for errors, submission
state, and navigation
- **CSRF via Litestar state** — configure Litestar `CSRFConfig` and wire
`csrfHeaders()` into global Inertia visit options; generated scaffolds already do this, including with `cookie_httponly=True`
- **Shared data for auth + flash**, never page-specific. Static page props go in `InertiaConfig.extra_static_page_props`; session-backed props go in `extra_session_page_props`; request-time flashes use `share(request, ...)`.
- **camelCase on the wire** — define msgspec structs with
`class Example(msgspec.Struct, rename="camel")`; generated TypeScript consumes the serialized names
- **Partial reloads** over full-page reloads when only a subset of props changes (`router.reload({ only: ['notifications'] })`)
- **Lazy props** for expensive-to-compute page data the user may not need on first paint
Quick Reference
Backend — Python route returning an Inertia page
from __future__ import annotations
from litestar import Controller, get
from app.domain.accounts.guards import requires_active_user
from app.domain.dashboard.schemas import Dashboard
class DashboardController(Controller):
"""Controller for user dashboard."""
path = "/dashboard"
guards = [requires_active_user]
@get("/", component="dashboard/Index")
async def index(self, dashboard_service) -> dict[str, Dashboard]:
"""Render dashboard page."""
return {"dashboard": await dashboard_service.get_for_current_user()}→ See [references/litestar_integration.md](references/litestar_integration.md)
Client — page component (React)
// resources/js/pages/dashboard/Index.tsx
import { usePage, Head } from "@inertiajs/react";
import type { Dashboard } from "@/generated/api";
export default function DashboardIndex() {
const { dashboard } = usePage<{ dashboard: Dashboard }>().props;
return (
<>
<Head title="Dashboard" />
<h1>Welcome, {dashboard.user.name}</h1>
<p>Your workspace has {dashboard.workspaceCount} projects.</p>
</>
);
}→ See [references/protocol.md](references/protocol.md)
App wiring — VitePlugin owns the Inertia bridge
from __future__ import annotations
from litestar import Litestar
from litestar.middleware.session.client_side import CookieBackendConfig
from litestar_vite import (
InertiaConfig,
InertiaSSRConfig,
PathConfig,
TypeGenConfig,
ViteConfig,
VitePlugin,
)
from app.domain.accounts.schemas import CurrentUser
from app.lib.settings import get_settings
settings = get_settings()
session_backend = CookieBackendConfig(secret=settings.secret_key.encode("utf-8"))
vite = VitePlugin(
config=ViteConfig(
mode="hybrid",
dev_mode=settings.debug,
paths=PathConfig(
root=settings.base_dir,
resource_dir="resources",
bundle_dir="public",
),
inertia=InertiaConfig(
root_template="index.html",
extra_static_page_props={"appName": settings.app_name},
extra_session_page_props={"currentUser": CurrentUser},
precognition=True,
ssr=InertiaSSRConfig(
enabled=True,
url="http://127.0.0.1:13714/render",
command=["node", "resources/ssr.js"],
),
),
types=TypeGenConfig(output="resources/generated"),
)
)
app = Litestar(
route_handlers=[DashboardController],
plugins=[vite],
middleware=[session_backend.middleware],
)→ See [references/litestar_integration.md](references/litestar_integration.md) for full wiring
Forms — `useForm` with Litestar validation errors
import { useForm } from "@inertiajs/react";
export default function CreateProject() {
const { data, setData, post, processing, errors } = useForm({
name: "",
description: "",
});
return (
<form onSubmit={(e) => { e.preventDefault(); postRead more
name: litestar-inertia description: "Auto-activate for litestar_vite.inertia, InertiaConfig, component=, @inertia, @inertiajs/*, createInertiaApp, useForm, usePage, Link, router, or pages/. Not for HTMX."
Litestar + Inertia.js Integration
`litestar-inertia` is the four-library story:
| Layer | Library | Role | | --- | --- | --- | | Client SPA | [`@inertiajs/react`](https://inertiajs.com) / `@inertiajs/vue3` / `@inertiajs/svelte` | Page resolution, forms, navigation, shared data access; generated templates target Inertia v3 | | Frontend build | [`vite`](https://vitejs.dev) | Bundling, HMR, dev server, production build | | Python bridge | [`litestar-vite`](../litestar-vite/SKILL.md) | `VitePlugin` + `InertiaConfig`, asset manifest, type generation, page-props codec | | Server framework | [`litestar`](../litestar/SKILL.md) | Routes, Controllers, Guards, DI, DTOs — returning Inertia responses |
Litestar routes produce page data, `ViteConfig.inertia` configures the response layer, and the Vite-served client handles subsequent navigations. For Vite-only configuration, use the sibling skill.
When this skill activates
- Python files importing `litestar_vite.inertia`, `InertiaConfig`, or route handlers with `component=`
- `*.tsx` / `*.vue` / `*.svelte` files importing from `@inertiajs/*`
- `createInertiaApp({ resolve, setup })` in a frontend entrypoint
- A `resources/` or `resources/js/pages/` directory alongside a `src/py/` — classic litestar-vite + Inertia layout
- `inertia.config.ts` or an `InertiaConfig` invocation in `vite.config.ts`
- User asks about "building an SPA with a Python backend", "server-driven React/Vue", "form validation errors from Python", "shared auth data across pages"
Code Style Rules
- **PEP 604 unions** in consumer Python modules; use
`from __future__ import annotations` only when the application benefits from it
- **TypeScript typed pages** — generate page-props types via `litestar-vite`'s TypeGen, never hand-roll
- **Forms via `useForm`** — use the adapter form helper for errors, submission
state, and navigation
- **CSRF via Litestar state** — configure Litestar `CSRFConfig` and wire
`csrfHeaders()` into global Inertia visit options; generated scaffolds already do this, including with `cookie_httponly=True`
- **Shared data for auth + flash**, never page-specific. Static page props go in `InertiaConfig.extra_static_page_props`; session-backed props go in `extra_session_page_props`; request-time flashes use `share(request, ...)`.
- **camelCase on the wire** — define msgspec structs with
`class Example(msgspec.Struct, rename="camel")`; generated TypeScript consumes the serialized names
- **Partial reloads** over full-page reloads when only a subset of props changes (`router.reload({ only: ['notifications'] })`)
- **Lazy props** for expensive-to-compute page data the user may not need on first paint
Quick Reference
Backend — Python route returning an Inertia page
from __future__ import annotations
from litestar import Controller, get
from app.domain.accounts.guards import requires_active_user
from app.domain.dashboard.schemas import Dashboard
class DashboardController(Controller):
"""Controller for user dashboard."""
path = "/dashboard"
guards = [requires_active_user]
@get("/", component="dashboard/Index")
async def index(self, dashboard_service) -> dict[str, Dashboard]:
"""Render dashboard page."""
return {"dashboard": await dashboard_service.get_for_current_user()}→ See [references/litestar_integration.md](references/litestar_integration.md)
Client — page component (React)
// resources/js/pages/dashboard/Index.tsx
import { usePage, Head } from "@inertiajs/react";
import type { Dashboard } from "@/generated/api";
export default function DashboardIndex() {
const { dashboard } = usePage<{ dashboard: Dashboard }>().props;
return (
<>
<Head title="Dashboard" />
<h1>Welcome, {dashboard.user.name}</h1>
<p>Your workspace has {dashboard.workspaceCount} projects.</p>
</>
);
}→ See [references/protocol.md](references/protocol.md)
App wiring — VitePlugin owns the Inertia bridge
from __future__ import annotations
from litestar import Litestar
from litestar.middleware.session.client_side import CookieBackendConfig
from litestar_vite import (
InertiaConfig,
InertiaSSRConfig,
PathConfig,
TypeGenConfig,
ViteConfig,
VitePlugin,
)
from app.domain.accounts.schemas import CurrentUser
from app.lib.settings import get_settings
settings = get_settings()
session_backend = CookieBackendConfig(secret=settings.secret_key.encode("utf-8"))
vite = VitePlugin(
config=ViteConfig(
mode="hybrid",
dev_mode=settings.debug,
paths=PathConfig(
root=settings.base_dir,
resource_dir="resources",
bundle_dir="public",
),
inertia=InertiaConfig(
root_template="index.html",
extra_static_page_props={"appName": settings.app_name},
extra_session_page_props={"currentUser": CurrentUser},
precognition=True,
ssr=InertiaSSRConfig(
enabled=True,
url="http://127.0.0.1:13714/render",
command=["node", "resources/ssr.js"],
),
),
types=TypeGenConfig(output="resources/generated"),
)
)
app = Litestar(
route_handlers=[DashboardController],
plugins=[vite],
middleware=[session_backend.middleware],
)→ See [references/litestar_integration.md](references/litestar_integration.md) for full wiring
Forms — `useForm` with Litestar validation errors
import { useForm } from "@inertiajs/react";
export default function CreateProject() {
const { data, setData, post, processing, errors } = useForm({
name: "",
description: "",
});
return (
<form onSubmit={(e) => { e.preventDefault(); post Ships withlitestar
Opinionated, first-party agent skills, plugins, subagents, slash commands, and MCP servers for the Litestar framework and its ecosystem — publishable to every major AI agent and IDE from a single repo.
Get the whole plugin
Stats
14
Stars
0
Forks
Active
Maintenance
Python
Language
MIT
License
27d ago
Last commit
5mo ago
Created
Repo: litestar-org/litestar-skills
Other skills on litestar.
@litestar-orgView SkillSkill
litestar-ai-serving
Auto-activate for Google ADK, LlmAgent, Runner, SQLSpecSessionService, Vertex AI, SSE agent chats, tool calls, or Litestar model workflows. Not for offline ML…
@litestar-orgView SkillSkill
litestar-auth-guards
Auto-activate for guards=, Guard, ASGIConnection, JWTAuth, JWTCookieAuth, SessionAuth, role or tenant checks, or WebSocket auth. Not for frontend route…
@litestar-orgView SkillSkill
litestar-autowire
Auto-activate for litestar_autowire, AutowirePlugin, AutowireConfig, domain_packages, AutowireIntegration, AutowireLoader, or clear_autowire_cache. Not for…
@litestar-orgView SkillSkill
litestar-build
Auto-activate for uv build, hatch build, PyApp, PYAPP_*, wheel assets, GitHub release matrices, cargo-zigbuild, or python-build-standalone. Not for runtime…
@litestar-orgView SkillSkill
litestar-data-services
Auto-activate for SQLAlchemyAsyncRepositoryService, SQLSpecAsyncService, create_filter_dependencies, LimitOffsetFilter, OffsetPagination, filters, or CRUD…
@litestar-orgView Skill