Karkas is a production-shaped example of React 19, Reatom, Panda CSS, Park UI, Storybook, Vitest, Playwright, MSW, and an adapted Feature-Sliced Design — wired together with enforceable conventions instead of a pile of disconnected defaults.
State, routes, server scenarios, accessible tests, localization, architecture checks, and deployment are all part of the same example.
Most templates show how to boot an app. Karkas shows how to keep one coherent as it grows — concrete choices about state, routing, styling, testing, localization, file boundaries, quality gates, and deployment, demonstrated across realistic screens and failure states.
The demo includes authenticated navigation, master–detail screens, forms, loading states, failures, retries, responsive behavior, and persisted preferences.
Storybook stories are reproducible user journeys, not screenshots. The same scenarios run as browser integration tests.
Formatting, linting, types, FSD boundaries, dead code, duplication, complexity, coverage, and translation tree-shaking are all checked automatically.
Each tool has a job, and the boundaries between them are explicit.
Atoms, actions, computed values, forms, persistence, localization, and routes share one reactive model. Karkas deliberately avoids rebuilding that model out of scattered React hooks — React renders, Reatom decides.
Build-time, type-safe styling meets accessible Ark UI primitives. Tokens, recipes, and semantic light/dark themes are owned by the repository, not inherited from a framework default.
Every meaningful state can be opened by a person and exercised by Vitest in Chromium. Stories model success, errors, retries, loading, direct URLs, mobile layouts, and request cancellation.
Demo and tests use the same request-level mocks. Server states — success, error, retry, 404, abort — are modelled at the boundary, so the published demo needs no backend to behave realistically.
app, pages, widgets, entities, and shared are more than folders. Karkas follows Feature-Sliced Design rather than the letter of its spec — Steiger enforces the layer and import boundaries, with public-API and segment rules relaxed for generated, UI-kit, and test code.
Vite+ runs the frontend tools. mise defines project workflows. hk gives fast changed-file checks and Git hooks. Fallow turns coverage and source analysis into maintainability signals.
Karkas queries the interface by role, accessible name, heading, link, button, and visible text. It waits for lifecycle signals instead of sleeping. It proves that pending route requests are cancelled when navigation makes them irrelevant. When accessibility is unclear, the preferred fix is to improve the interface — not add a test ID.
Open integration stories →nub installGenerates Panda output, compiles messages, verifies the MSW worker, installs hooks.
nub run devStarts the application through the repository's mise workflow.
hk checkValidates changed files; hk fix applies safe formatting and lint fixes.
mise run validateCoverage, types, architecture checks, Fallow analysis, production builds, and tree-shaking.
A product-shaped SPA with mocked APIs, responsive navigation, persisted preferences, localization, and real loading and error states.
Open the demo →Jump straight to a screen, state, viewport, or user journey — and read the assertions that define its behavior.
Explore Storybook →Follow the FSD layers, entity-local mocks, Reatom models, theme recipes, and the source-first technical notes in docs.
View on GitHub →Karkas tracks a fast-moving frontend toolchain. Updates focus on decisions: what changed, what problem it solves, what tradeoff it introduces, and where to inspect it.
No updates published yet — formal release notes live inGitHub Releases.
Karkas is for teams and developers who want to study a coherent modern React setup, copy selected patterns, or start from strong defaults. The value is not that every choice is universal — it is that every choice is explicit, demonstrated, and checked.
Study a coherent, modern React setup end to end — state, styling, tests, and boundaries.
Copy selected patterns — Reatom models, theme recipes, entity-local mocks — into an existing codebase.
Start from strong, explicit defaults instead of a pile of disconnected framework choices.