@life-cockpit/angular-ui-kit 1.10.0 → 1.10.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +67 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
# @life-cockpit/angular-ui-kit
|
|
2
2
|
|
|
3
|
-
Angular UI component library for the Life Cockpit Design System.
|
|
3
|
+
Angular UI component library for the **Life Cockpit Design System** — 60+ accessible, themeable Angular 21 standalone components with signal-based inputs, OnPush change detection, light/dark themes, and a full density token system (`compact` / `cosy` / `comfortable`).
|
|
4
|
+
|
|
5
|
+
## Resources
|
|
6
|
+
|
|
7
|
+
| | |
|
|
8
|
+
|---|---|
|
|
9
|
+
| 📖 **Live documentation & Storybook** | https://design.life-cockpit.de |
|
|
10
|
+
| 🤖 **MCP server for AI agents** | https://design.life-cockpit.de/mcp |
|
|
11
|
+
| 📦 **npm package** | https://www.npmjs.com/package/@life-cockpit/angular-ui-kit |
|
|
12
|
+
| 🐙 **Source code** | https://github.com/Life-Cockpit/lc-design-system |
|
|
4
13
|
|
|
5
14
|
## Installation
|
|
6
15
|
|
|
@@ -189,6 +198,63 @@ Design tokens for colors, spacing, typography, elevation, and more are available
|
|
|
189
198
|
import { ColorTokens, SpacingTokens } from '@life-cockpit/angular-ui-kit';
|
|
190
199
|
```
|
|
191
200
|
|
|
201
|
+
### Density
|
|
202
|
+
|
|
203
|
+
All components react to a density token cascade. Set the density on any ancestor element (or `<html>`) and every descendant component adapts paddings, gaps and font sizes:
|
|
204
|
+
|
|
205
|
+
```html
|
|
206
|
+
<div data-density="compact"> <!-- 'compact' | 'cosy' (default) | 'comfortable' -->
|
|
207
|
+
<lc-card>...</lc-card>
|
|
208
|
+
</div>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
See the *Design Tokens → Density* section on https://design.life-cockpit.de for the full token reference.
|
|
212
|
+
|
|
213
|
+
## MCP Server for AI Agents
|
|
214
|
+
|
|
215
|
+
The design system ships with a hosted **Model Context Protocol** server that lets AI coding agents (Copilot, Claude, Cursor, etc.) discover components, props, variants and usage examples without hallucinating.
|
|
216
|
+
|
|
217
|
+
**Endpoint:** `https://design.life-cockpit.de/mcp`
|
|
218
|
+
|
|
219
|
+
### VS Code / GitHub Copilot
|
|
220
|
+
|
|
221
|
+
Add to your `.vscode/mcp.json` (or workspace `settings.json`):
|
|
222
|
+
|
|
223
|
+
```json
|
|
224
|
+
{
|
|
225
|
+
"servers": {
|
|
226
|
+
"lc-design-sys": {
|
|
227
|
+
"type": "http",
|
|
228
|
+
"url": "https://design.life-cockpit.de/mcp"
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
### Claude Desktop / Cursor
|
|
235
|
+
|
|
236
|
+
```json
|
|
237
|
+
{
|
|
238
|
+
"mcpServers": {
|
|
239
|
+
"lc-design-sys": {
|
|
240
|
+
"url": "https://design.life-cockpit.de/mcp"
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
```
|
|
245
|
+
|
|
246
|
+
### Available tools
|
|
247
|
+
|
|
248
|
+
| Tool | Description |
|
|
249
|
+
|---|---|
|
|
250
|
+
| `list-all-documentation` | Lists every component and docs page with its IDs |
|
|
251
|
+
| `search_component` | Finds a component by name and returns full docs in one call |
|
|
252
|
+
| `get-documentation` | Returns props, variants, usage examples and stories for a given ID |
|
|
253
|
+
| `get-documentation-for-story` | Retrieves docs for a specific Storybook story variant |
|
|
254
|
+
| `get_changelog` | Returns the changelog for the latest releases |
|
|
255
|
+
|
|
256
|
+
With the MCP server connected, your agent will *never invent props or variants* — it always grounds answers in the published component documentation.
|
|
257
|
+
|
|
192
258
|
## Development
|
|
193
259
|
|
|
194
260
|
```bash
|