@triptease/design-system-mcp 1.2.0 → 1.2.2
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 +92 -23
- package/dist/index.js +28699 -280
- package/package.json +7 -4
package/README.md
CHANGED
|
@@ -246,41 +246,100 @@ Claude: [Reads designsystem://components, filters results]
|
|
|
246
246
|
|
|
247
247
|
- **Transport**: StdioServerTransport (local, on-demand)
|
|
248
248
|
- **Token Source**: `../../packages/stylesheet/dist/web/tokens.json` (relative to compiled dist directory)
|
|
249
|
-
- **Components**:
|
|
249
|
+
- **Components**: Individual manifest entries in `src/manifests/components/entries/`, aggregated by `src/manifests/components/index.ts`
|
|
250
250
|
- **Response Format**: JSON for all tool responses
|
|
251
251
|
|
|
252
252
|
## Maintenance
|
|
253
253
|
|
|
254
254
|
### Adding New Components
|
|
255
255
|
|
|
256
|
-
|
|
256
|
+
Each component has its own manifest entry file. Follow these steps:
|
|
257
|
+
|
|
258
|
+
**1. Create an entry file** at `src/manifests/components/entries/<componentName>.ts`:
|
|
257
259
|
|
|
258
260
|
```typescript
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
261
|
+
import { ComponentManifest } from '@/manifests/components/types.js';
|
|
262
|
+
|
|
263
|
+
export default {
|
|
264
|
+
componentName: {
|
|
265
|
+
name: 'Component Name',
|
|
266
|
+
description: 'Brief description',
|
|
267
|
+
element: 'html-element',
|
|
268
|
+
usageGuidance: {
|
|
269
|
+
whenToUse: ['...'],
|
|
270
|
+
bestPractices: ['...'],
|
|
271
|
+
accessibility: ['...'],
|
|
272
|
+
avoid: ['...'],
|
|
273
|
+
},
|
|
274
|
+
attributes: {
|
|
275
|
+
/* optional */
|
|
276
|
+
},
|
|
277
|
+
dataAttributes: {
|
|
278
|
+
/* optional */
|
|
279
|
+
},
|
|
280
|
+
classes: {
|
|
281
|
+
/* optional */
|
|
282
|
+
},
|
|
283
|
+
events: {
|
|
284
|
+
/* optional */
|
|
285
|
+
},
|
|
286
|
+
states: [
|
|
287
|
+
/* optional */
|
|
288
|
+
],
|
|
289
|
+
examples: [
|
|
290
|
+
{
|
|
291
|
+
title: 'Example name',
|
|
292
|
+
code: `<html example code>`,
|
|
293
|
+
},
|
|
294
|
+
],
|
|
268
295
|
},
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
296
|
+
} satisfies ComponentManifest;
|
|
297
|
+
```
|
|
298
|
+
|
|
299
|
+
For web components distributed via CDN, also add installation options with versioned URLs:
|
|
300
|
+
|
|
301
|
+
```typescript
|
|
302
|
+
import packageJson from '@/../package.json' with { type: 'json' };
|
|
303
|
+
import { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';
|
|
304
|
+
|
|
305
|
+
const version = packageJson.componentVersions['@triptease/tt-my-component'];
|
|
306
|
+
|
|
307
|
+
// Then in the manifest entry:
|
|
308
|
+
installationOptions: {
|
|
309
|
+
npm: [{ name: '@triptease/tt-my-component', includesTypes: true, optional: false }],
|
|
310
|
+
cdn: [{
|
|
311
|
+
name: 'tt-my-component',
|
|
312
|
+
includesTypes: false,
|
|
313
|
+
optional: false,
|
|
314
|
+
moduleFormat: 'esm',
|
|
315
|
+
pinnedVersionUrl: buildCDNUrl('tt-my-component', version),
|
|
316
|
+
pinnedMajorVersionUrl: buildCDNUrl('tt-my-component', buildMajorVersion(version)),
|
|
317
|
+
latestVersionUrl: buildCDNUrl('tt-my-component', 'latest'),
|
|
318
|
+
guidance: 'Prefer pinned major version URL to avoid unexpected breaking changes.',
|
|
319
|
+
}],
|
|
320
|
+
},
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
**2. Register the entry** in `src/manifests/components/index.ts`:
|
|
324
|
+
|
|
325
|
+
```typescript
|
|
326
|
+
import myComponent from '@/manifests/components/entries/myComponent.js';
|
|
327
|
+
|
|
328
|
+
export const componentManifest: ComponentManifest = {
|
|
329
|
+
// ...existing entries
|
|
330
|
+
...myComponent,
|
|
331
|
+
};
|
|
332
|
+
```
|
|
333
|
+
|
|
334
|
+
**3. Add the version** (web components only) to `componentVersions` in `package.json`:
|
|
335
|
+
|
|
336
|
+
```json
|
|
337
|
+
"componentVersions": {
|
|
338
|
+
"@triptease/tt-my-component": "1.0.0"
|
|
280
339
|
}
|
|
281
340
|
```
|
|
282
341
|
|
|
283
|
-
|
|
342
|
+
**4. Build and verify:**
|
|
284
343
|
|
|
285
344
|
```bash
|
|
286
345
|
yarn build
|
|
@@ -325,7 +384,17 @@ _For project-level installation:_
|
|
|
325
384
|
- Check Node.js version is 18+
|
|
326
385
|
- Verify no TypeScript compilation errors
|
|
327
386
|
|
|
387
|
+
## Distribution
|
|
388
|
+
|
|
389
|
+
This MCP server is distributed through two channels:
|
|
390
|
+
|
|
391
|
+
1. **npm** (`@triptease/design-system-mcp`): Published via Changesets on release. Users with `npx -y` get the latest version automatically on each Claude session.
|
|
392
|
+
2. **Claude Code plugin** (`triptease-design-system` in the `triptease-plugins` marketplace): The plugin bundles an `.mcp.json` that points to this npm package. The plugin provides design guidance (SKILL.md) while this server provides structured component data.
|
|
393
|
+
|
|
394
|
+
Changes to component manifests, tokens, or setup guides in this repo propagate to users automatically after an npm release — no plugin update is needed. The plugin only needs updating when its own files change (SKILL.md, .mcp.json).
|
|
395
|
+
|
|
328
396
|
## Related
|
|
329
397
|
|
|
398
|
+
- **Design System Plugin**: [triptease/claude-plugins](https://github.com/triptease/claude-plugins) — `triptease-design-system` marketplace plugin
|
|
330
399
|
- **Design System Documentation**: For design system patterns and usage, see the main component library README
|
|
331
400
|
- **MCP Protocol**: https://modelcontextprotocol.io/
|