---
name: admin-app-usage
description: Explain what the `admin-app` plugin does and how to use it. Use when the user invokes `/admin-app-usage`, asks what this plugin covers, or needs help with React + Ant Design + TanStack Router admin-panel work (forms, tables, auth, intl, routing) using @leancodepl libs.
---

# admin-app Usage

## How to respond

- If the user invoked this skill without a concrete task, start by explaining what this plugin does and what kind of frontend work it is meant for.
- Show how to use it through concrete admin-panel tasks this plugin can handle.
- Point to the relevant rule (e.g. `rules/tables.md`) for the task at hand, and route to sibling plugins when the task becomes mobile or backend specific.
- If the user already gave a concrete admin-panel task, briefly explain why this plugin fits and then do the work.
- Do not reply with filler like "skill loaded", "ready for the task", or "what would you like to do?" before explaining the plugin.

## What this plugin does

- Covers LeanCode admin-panel frontend work in React + TypeScript with Ant Design 5 and TanStack Router.
- Provides conventions for forms (`mkGuard`, `useValidationErrorsHandler`), data tables (`@leancodepl/antd-table-hooks`, `ExtendedTable`), auth flows (`@leancodepl/kratos`), routing (`_auth` / `_authorized` groups), and translations (`react-intl`).
- Enforces TypeScript and component conventions (types over interfaces, `.at()` over `[0]`, SCSS modules with Suit CSS, `useDialog` for modals).
- Keeps imports path-bounded via the folder-structure rule.

## How to use it

- Ask to scaffold or refactor a data table with filters, sorting, pagination, and CSV export.
- Ask to implement an Ant Design Form with API validation error mapping.
- Ask to add a new Kratos auth flow page or a flow form variant.
- Ask to add a route in `_authorized` or `_auth` and wire `validateSearch` to a table's search schema.
- Ask to localize a screen with `react-intl` and proper ID naming.

## Example requests

- "Add a Users table with email/state/createdAt filters, server-side pagination, and CSV export."
- "Implement a create-notification form using `mkGuard` and map API validation errors to fields."
- "Add a second-factor email form to the existing Kratos login flow."
- "Create a new `_authorized/reviews` route and wire it to the ReviewsTable search schema."

## Reach for these assets

- `rules/typescript.md` - TS conventions (types, `.at()`, no `any`).
- `rules/components.md` - component file structure, modal management, SCSS modules.
- `rules/ui.md` - Ant Design 5 as the sole UI library.
- `rules/folder-structure.md` - import boundaries.
- `rules/intl.md` - `react-intl` and translation ID naming.
- `rules/domain.md` - global domain types layout.
- `rules/routing.md` - TanStack Router file-based routing.
- `rules/auth.md` - `@leancodepl/kratos` integration and flow pages.
- `rules/forms.md` - Ant Design Form patterns.
- `rules/tables.md` - `@leancodepl/antd-table-hooks` and `ExtendedTable`.
- Sibling plugins: `flutter-*` for mobile, `lean-core` for the marketplace index.