Power your agent
Lệnh của chính nhà phát hành. Không phải endpoint của PlugMCP.
Host a copy with our keys and logs.
npx -y @4sh/[email protected]Claude Code không có liên kết cài đặt cho lệnh cục bộ. Sao chép lệnh bên dưới và chạy trong terminal.
claude mcp add 4sh-ui-kit -- npx -y @4sh/ui-kit@0.16.0Chạy trong terminal.
{ "mcpServers": { "4sh-ui-kit": { "command": "npx", "args": [ "-y", "@4sh/[email protected]" ] } }}claude_desktop_config.json
URL từ xa hay một lệnh trên máy của bạn? Hai cách cài đặt khác nhau thế nào
Chạy trên PlugMCP
A new server you create. It is not this listing's official endpoint. Use the publisher install when you want their URL and their credentials.
MởTừ nhà phát hành
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]" ] } }}Tổng quan
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.
Công cụ
Chưa có danh sách công cụ. Máy chủ từ xa sẽ có danh sách sau lần kiểm tra tình trạng đầu tiên.
Câu hỏi thường gặp
Sao chép cấu hình stdio cho Cursor, Claude Desktop, Claude Code hoặc VS Code trên trang này. Cấu hình dùng bản cài đặt của nhà phát hành, không phải proxy của PlugMCP.
Bản ghi này không liệt kê biến môi trường bắt buộc nào.
@4sh/ui Kit chạy cục bộ qua stdio.
Kiểm tra lần cuối: 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.