M
mmartofel/crud-ui-blueprint
GitHub template for CRUD web UIs on any compliant REST API, built with Claude Code skills from the OpenAPI…
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"mmartofel-crud-ui-blueprint": {
"command": "npx",
"args": ["playwright"]
}
}
}解析自我们于 2026-10-26 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"mmartofel-crud-ui-blueprint": {
"command": "npx",
"args": ["playwright"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio mmartofel-crud-ui-blueprint -- npx playwright
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 0 ★ · mmartofel/crud-ui-blueprint · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-10-25 · 最近见到 2026-11-14 · 共见到 24 次 · 被 2 个来源列出
- 评分构成
- 综合分 203 · 2 个来源 · repo
- 安装
npx playwright
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx playwright。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们把它归在这些标签下: 开源项目。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
仓库
mmartofel/crud-ui-blueprint；我们收录于 2026-10-25；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。# 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
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/mmartofel-crud-ui-blueprint/)
- 来源
- github · https://github.com/mmartofel/crud-ui-blueprint
- 按领域浏览
- 开源项目
- 收录来源
- 2 个独立来源
- 收录于
- 今天
同类推荐
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。