接入你的智能体
发布者自己的命令。不是 PlugMCP 端点。
用我们的密钥与日志托管一份副本。
npx -y @4sh/[email protected]Claude Code 没有针对本地命令的安装链接。复制下方命令并在终端中运行。
claude mcp add 4sh-ui-kit -- npx -y @4sh/ui-kit@0.16.0在终端中运行。
{ "mcpServers": { "4sh-ui-kit": { "command": "npx", "args": [ "-y", "@4sh/[email protected]" ] } }}claude_desktop_config.json
远程 URL 还是本机命令？ 两种安装方式的区别
来自发布者
Angular 22 starter (standalone, signals, zoneless) for building a fully in-house design system, with no dependency on a proprietary UI library. Headless components (Angular CDK + native signals) styled exclusively through design tokens.
This is the side of the strategy:
Headless Angular components from the 4SH Design System: signals + Angular CDK, styled exclusively through design tokens. Ships a companion MCP server exposing the kit catalog and doc to AI coding agents.
.scss) and consumes these tokens.This repo holds the @4sh/ui-kit package
(54 ui-* components on 53 entry points, plus 5 cross-cutting ones) and the demo
application that consumes it.
Both sites are redeployed on every push to main
(deploy-pages.yml).
This page is for whoever works on the design system itself — adding a
ui-*component, editing the tokens, cutting a release. To use the kit in an application you do not need this repo: everything is in the README shipped with the package,projects/ui-kit/README.md· Français.
Stylesheets are SCSS (Sass), not the plain CSS Angular scaffolds by default.
schematics.@schematics/angular:component.styleis set toscssinangular.json, and every component ships a.scssfile — never.css.ng generate componentin this repo therefore already generates the right extension; do not switch it back tocss.
The kit is published on the public npm registry, in one of two modes:
pnpm add @4sh/ui-kit # dependency — compiled components, updated by version bump
ng add @4sh/ui-kit-schematics # starter — component sources copied into your project, yours to edit
Which one to pick, the entry points, the stylesheet to load, the required providers,
building your own field: projects/ui-kit/README.md ·
Français — documented once, and that page is the npmjs
one. Each component's API is in the
Storybook.
Node v24.15.0 (.nvmrc). Four commands cover the work itself:
pnpm install # install + postinstall: tokens:build, ui-kit:build, docs:config
pnpm start # Storybook → http://localhost:6006
pnpm serve # demo application → http://localhost:4200
pnpm tokens:build # regenerate the token CSS variables
Under IntelliJ, a
pnpm startrun configuration ships with the repo (.idea/runConfigurations/).
pnpm start,pnpm serveand the builds all runui-kit:buildfirst: the demo app consumes the kit through its built output (dist/ui-kit, mapped by the@4sh/ui-kit/*pathsoftsconfig.json), exactly like an external consumer would.
projects/ui-kit/styles/generated/andstorybook/generated/are generated (gitignored), rebuilt bytokens:buildanddocs:config.
pr-checks.yml runs lint, types, unit tests, the doc
guardrail and a Storybook build on every pull request — you do not have to replay them
locally. Two are worth the detour anyway, because they save a round-trip:
pnpm lint # ESLint --fix — repairs instead of reporting
pnpm docs:config:check # the hand-written doc vs the code
docs:config:check is the guardrail on everything this repo states by hand: six places
claim to describe projects/ui-kit/, and nothing in the code forces them to follow when a
component lands. Full list of what it rejects: AGENTS.md.
Conventions to follow before writing code — repo layout, naming, CSS/SCSS rules (no BEM),
component creation recipe, Storybook file organization, token workflow — are all in
AGENTS.md. It is the single source of truth for them, for humans as
much as for AI agents.
Details: .claude/rules/git-conventions.md for git,
docs/VERSIONING.md for the release flow.
Once all your changes are on main (⚠️ never push directly to main), here's how
to publish a new version of the @4sh/ui-kit and @4sh/ui-kit-schematics npm packages
(same version, same job).
main: move [Unreleased] to a new
[X.Y.Z] - YYYY-MM-DD section in CHANGELOG.md, bump the version in
projects/ui-kit/package.json, commit.dry_run: true first, then dry_run: false — this waits for reviewer approval on
the npm-publish environment before actually publishing.Full detail: docs/VERSIONING.md (when to bump what) ·
docs/PUBLISHING.md (full publish workflow, npm auth).
Headless Angular components from the 4SH Design System: signals + Angular CDK, styled exclusively through design tokens. Ships a companion MCP server exposing the kit catalog and doc to AI coding agen
{ "mcpServers": { "4sh-ui-kit": { "command": "npx", "args": [ "-y", "@4sh/[email protected]" ] } }}概览
Headless Angular components from the 4SH Design System: signals + Angular CDK, styled exclusively through design tokens. Ships a companion MCP server exposing the kit catalog and doc to AI coding agents.
工具
暂无工具列表。远程服务器在首次健康检查后会获得工具列表。
常见问题
在本页复制适用于 Cursor、Claude Desktop、Claude Code 或 VS Code 的 stdio 配置。它使用发布者的安装方式，而不是 PlugMCP 代理。
此记录未列出必需的环境变量。
@4sh/ui Kit 通过 stdio 在本地运行。
上次检查时间：2026-11-11。 Headless Angular components from the 4SH Design System: signals + Angular CDK, styled exclusively through design tokens. Ships a companion MCP server exposing the kit catalog and doc to AI coding agents.