Potencia tu agente
El comando propio del publicador. No es un endpoint de PlugMCP.
Host a copy with our keys and logs.
npx -y @4sh/[email protected]Claude Code no tiene enlace de instalación para un comando local. Copia el comando de abajo y ejecútalo en una terminal.
claude mcp add 4sh-ui-kit -- npx -y @4sh/ui-kit@0.16.0Ejecútalo en una terminal.
{ "mcpServers": { "4sh-ui-kit": { "command": "npx", "args": [ "-y", "@4sh/[email protected]" ] } }}claude_desktop_config.json
¿URL remota o un comando en tu máquina? En qué se diferencian las dos instalaciones
Ejecutar en 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.
AbrirDel publicador
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.
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.
This is the Starter Angular side of the Dual-Engine strategy:
.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]" ] } }}Resumen general
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.
Herramientas
Aún no hay lista de herramientas. Los servidores remotos la reciben tras la primera comprobación de estado.
Preguntas frecuentes
Copia en esta página la configuración stdio para Cursor, Claude Desktop, Claude Code o VS Code. Usa la instalación del publicador, no un proxy de PlugMCP.
Este registro no indica ninguna variable de entorno obligatoria.
@4sh/ui Kit se ejecuta localmente por stdio.
Última comprobación: 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.