M
mmartofel/crud-ui-blueprint
GitHub template for CRUD web UIs on any compliant REST API, built with Claude Code skills from the OpenAPI…
View on GitHub ↗Link checked 2026-11-12 · HTTP 200 · opens the vendor's own site
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"mmartofel-crud-ui-blueprint": {
"command": "npx",
"args": ["playwright"]
}
}
}Parsed from the README we fetched on 2026-10-26; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"mmartofel-crud-ui-blueprint": {
"command": "npx",
"args": ["playwright"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio mmartofel-crud-ui-blueprint -- npx playwright
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 0 ★ · mmartofel/crud-ui-blueprint · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-10-25 · last seen 2026-11-14 · seen 24× · listed by 2 sources
- Score
- score 203 · 2 sources · repo
- Install
npx playwright
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx playwright. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We filed it under these tags: 开源项目. The tags come from the entry itself, not a taxonomy we imposed.
Who maintains it?
repository
mmartofel/crud-ui-blueprint；first catalogued 2026-10-25；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.# CRUD UI blueprint
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
A GitHub template for a CRUD web UI on top of any REST API that follows docs/API-CONTRACT.md.
You describe each screen in ui-manifest.yaml; Claude Code builds it with the skills in .claude/, the same way
every time, from the API's OpenAPI contract. It was extracted from Person UI
(spring-person-ui-claude), whose two resources are kept as
reference examples in .claude/skills/crud-resource/references/examples/.
What you get without writing a screen:
sign-in with OIDC (Keycloak; Authorization Code + PKCE), roles from the token, actions hidden by role;
a responsive shell (sidebar from lg, collapsible to icons with Ctrl/⌘+B, a sheet menu below; breadcrumbs; a user
menu with language and theme), light/dark theme, languages from the manifest (PL and EN included);
lists with search, sorting, paging and filters kept in the URL (active filters as removable chips), table from md
with a sticky header and cards below, a row menu (view, edit, delete) for writers;
detail pages (status badge in the header, fields in section cards), create/edit forms in section cards validated
with the contract's Zod schemas, server field errors on the fields, stale-version reload, unsaved-changes guard,
delete with confirmation, relations between resources;
a calm, themable look: one file of design tokens (src/styles/theme.css, light and dark), Inter, rules in
docs/DESIGN.md, and a component gallery at /gallery in the dev server (no API or login needed);
unit tests (Vitest) for all of that, e2e tests (Playwright) for the shell and the gallery, CircleCI.
Stack: Vite, React, TypeScript (strict), React Router, Tailwind CSS v4, shadcn/ui, TanStack Query and Table, React
Hook Form + Zod, orval, i18next, Vitest + Testing Library, Playwright.
## Prerequisites
Node.js 24+ and npm 11+, Claude Code, the GitHub CLI (gh).
An API whose contract passes the contract-auditor (rules in docs/API-CONTRACT.md). A new Spring Boot API
starts from docs/API-KICKSTART.md: two files to copy and one prompt.
An OIDC provider with a public client: Authorization Code + PKCE, redirect URI http://localhost:5173/, one read
role and one write role in an access token claim (VITEOIDCROLESCLAIM, default Keycloak's realmaccess.roles),
and two users for the e2e tests. Tested with Keycloak; the e2e login helper fills Keycloak's login form, so another
provider needs e2e/support/auth.ts adapted.
## Start a project
bash
gh repo create my-ui --template mmartofel/crud-ui-blueprint --public --clone
cd my-ui
npm install
npx playwright install chromium # once, for the e2e tests
claude # then: "init the project" (crud-ui-init skill)
crud-ui-init asks for the app name, languages, contract source, OIDC settings and roles, writes .env.local and the
manifest, and builds every resource with crud-resource. To do it by hand: copy .env.example to .env.local,
fill it in, set app in ui-manifest.yaml, and follow the method below.
## Start a new API (kickstart)
No API yet? Start a Spring Boot API that already follows the contract, from an empty directory and one prompt
(docs/API-KICKSTART.md):
bash
mkdir library-api && cd library-api && git init
mkdir docs
cp ../crud-ui-blueprint/docs/API-CONTRACT.md docs/API-CONTRACT.md # the rules, never edited in the API repo
You describe each screen in ui-manifest.yaml; Claude Code builds it with the skills in .claude/, the same way
every time, from the API's OpenAPI contract. It was extracted from Person UI
(spring-person-ui-claude), whose two resources are kept as
reference examples in .claude/skills/crud-resource/references/examples/.
What you get without writing a screen:
sign-in with OIDC (Keycloak; Authorization Code + PKCE), roles from the token, actions hidden by role;
a responsive shell (sidebar from lg, collapsible to icons with Ctrl/⌘+B, a sheet menu below; breadcrumbs; a user
menu with language and theme), light/dark theme, languages from the manifest (PL and EN included);
lists with search, sorting, paging and filters kept in the URL (active filters as removable chips), table from md
with a sticky header and cards below, a row menu (view, edit, delete) for writers;
detail pages (status badge in the header, fields in section cards), create/edit forms in section cards validated
with the contract's Zod schemas, server field errors on the fields, stale-version reload, unsaved-changes guard,
delete with confirmation, relations between resources;
a calm, themable look: one file of design tokens (src/styles/theme.css, light and dark), Inter, rules in
docs/DESIGN.md, and a component gallery at /gallery in the dev server (no API or login needed);
unit tests (Vitest) for all of that, e2e tests (Playwright) for the shell and the gallery, CircleCI.
Stack: Vite, React, TypeScript (strict), React Router, Tailwind CSS v4, shadcn/ui, TanStack Query and Table, React
Hook Form + Zod, orval, i18next, Vitest + Testing Library, Playwright.
## Prerequisites
Node.js 24+ and npm 11+, Claude Code, the GitHub CLI (gh).
An API whose contract passes the contract-auditor (rules in docs/API-CONTRACT.md). A new Spring Boot API
starts from docs/API-KICKSTART.md: two files to copy and one prompt.
An OIDC provider with a public client: Authorization Code + PKCE, redirect URI http://localhost:5173/, one read
role and one write role in an access token claim (VITEOIDCROLESCLAIM, default Keycloak's realmaccess.roles),
and two users for the e2e tests. Tested with Keycloak; the e2e login helper fills Keycloak's login form, so another
provider needs e2e/support/auth.ts adapted.
## Start a project
bash
gh repo create my-ui --template mmartofel/crud-ui-blueprint --public --clone
cd my-ui
npm install
npx playwright install chromium # once, for the e2e tests
claude # then: "init the project" (crud-ui-init skill)
crud-ui-init asks for the app name, languages, contract source, OIDC settings and roles, writes .env.local and the
manifest, and builds every resource with crud-resource. To do it by hand: copy .env.example to .env.local,
fill it in, set app in ui-manifest.yaml, and follow the method below.
## Start a new API (kickstart)
No API yet? Start a Spring Boot API that already follows the contract, from an empty directory and one prompt
(docs/API-KICKSTART.md):
bash
mkdir library-api && cd library-api && git init
mkdir docs
cp ../crud-ui-blueprint/docs/API-CONTRACT.md docs/API-CONTRACT.md # the rules, never edited in the API repo
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/mmartofel-crud-ui-blueprint/)
- Source
- github · https://github.com/mmartofel/crud-ui-blueprint
- Browse by field
- Open source
- Listed by
- 2 independent sources
- added
- today
More like this
Filed under
Every tag opens the full list for that filter. Counts are the live catalogue figures.