Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →TanStack Router + React frontend patterns, ConnectRPC gRPC-Web client, Zustand stores, Tailwind v4, i18n, and AppearancePanel theming for the Anachak platform.
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-17 | ✗→✓ | ▲ Improved | -15% | 0% |
| case-02 | ✗→✓ | ▲ Improved | 18% | 0% |
| case-03 | ✗→✓ | ▲ Improved | 20% | 0% |
| case-07 | ✗→✓ | ▲ Improved | -26% | 0% |
| case-08 | ✗→✓ | ▲ Improved | -24% | 0% |
The web frontend at web/ — a React 19 SPA using TanStack Router, Zustand, ConnectRPC, and Tailwind CSS v4.
| Layer | Technology | Version | |---|---|---| | Framework | React | 19 | | Router | TanStack Router (file-based) | 1.167+ | | State | Zustand | 5 | | Styling | Tailwind CSS v4 + CSS custom properties | 4.2 | | gRPC Client | ConnectRPC (gRPC-Web) | 2.1 | | Proto Codegen | @bufbuild/protoc-gen-es | 2.11 | | Icons | HugeIcons React | 1.1 | | UI Primitives | Radix UI + shadcn/ui v4 | Latest | | Animations | Framer Motion | 12 | | Font | Geist Variable + Khmer fonts | Google Fonts | | Toast | goey-toast | 0.4 | | Build | Vite 7 | 7.3 | | Test | Vitest + Testing Library | 3.2 | | Package Manager | Bun | Latest |
| Topic | File | |---|---| | Folder structure | folder-structure.md | | Routing & layouts | routing.md | | State management | state-management.md | | gRPC client | grpc-client.md | | Theming system | theming.md | | i18n | i18n.md | | Component patterns | components.md | | SVG icon system | svg-icons.md | | Color system | colors.md |
| File | Purpose | |---|---| | main.tsx | ReactDOM render with RouterProvider | | router.tsx | createRouter() with routeTree, scroll restoration, prefetch | | routes/__root.tsx | Root layout: <Outlet /> + <GooeyToaster /> | | routes/_auth.tsx | Auth layout: dark bg, noise grain, centered card | | routes/_app.tsx | Dashboard layout: sidebar + header + themed content card | | styles.css | Global Tailwind + CSS custom properties + keyframes |
| Port | Purpose | |---|---| | 3000 | Vite dev server (bun run dev) | | 50050 | Backend gRPC (proxied via ConnectRPC gRPC-Web) |
routeTree.gen.ts from routes/ directory_auth/ (login/register) and _app/ (dashboard) with shared layoutsuseAuth, useAppearanceStore, useCompanyStore, useSidebarStore, useTabStoreAppearanceStore writes 50+ CSS vars to :root via applyToDOM()components/ui/Other measured skills in the registry, with their headline benchmark lift.