@triptease/design-system-mcp 1.0.1 → 1.0.3
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/CHANGELOG.md +14 -0
- package/dist/package.json +2 -2
- package/dist/src/index.js +1 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/manifests/components/entries/card.js.map +1 -1
- package/dist/src/resources/guides/principles.js +1 -1
- package/dist/src/resources/guides/principles.js.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +8 -1
- package/src/manifests/components/entries/card.ts +2 -4
- package/src/resources/components/get.test.ts +1 -3
- package/src/resources/guides/principles.ts +7 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @triptease/design-system-mcp
|
|
2
2
|
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
- @triptease/tt-line-chart@1.0.10
|
|
9
|
+
|
|
10
|
+
## 1.0.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
- @triptease/tt-line-chart@1.0.9
|
|
16
|
+
|
|
3
17
|
## 1.0.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@triptease/design-system-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "MCP server for Triptease design system documentation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@triptease/tt-date-range-picker": "6.2.3",
|
|
29
29
|
"@triptease/tt-dialog": "5.1.1",
|
|
30
30
|
"@triptease/tt-highlight": "1.0.2",
|
|
31
|
-
"@triptease/tt-line-chart": "1.0.
|
|
31
|
+
"@triptease/tt-line-chart": "1.0.10",
|
|
32
32
|
"zod": "^4.3.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
package/dist/src/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
|
|
3
3
|
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
|
|
4
4
|
import packageJson from './../package.json' with { type: 'json' };
|
|
5
|
-
import { listComponents, getComponentDocs, listCSSTokens, getCSSTokens, getSetupGuide, getPrinciplesGuide } from './resources/index.js';
|
|
5
|
+
import { listComponents, getComponentDocs, listCSSTokens, getCSSTokens, getSetupGuide, getPrinciplesGuide, } from './resources/index.js';
|
|
6
6
|
// Initialize MCP server
|
|
7
7
|
const server = new McpServer({
|
|
8
8
|
name: 'Triptease Design System MCP Server',
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,yCAAyC,CAAC;AACtF,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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","sourcesContent":["#!/usr/bin/env node\nimport { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';\nimport { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nimport {\n listComponents,\n getComponentDocs,\n listCSSTokens,\n getCSSTokens,\n getSetupGuide,\n getPrinciplesGuide,\n} from '@/resources/index.js';\n\n// Initialize MCP server\nconst server = new McpServer(\n {\n name: 'Triptease Design System MCP Server',\n version: packageJson.version,\n description: packageJson.description,\n },\n {\n capabilities: {\n resources: {},\n tools: {},\n },\n }\n);\n\n// Register resources\nserver.registerResource(\n 'list_components',\n 'designsystem://components',\n {\n description: 'List all available design system components',\n mimeType: 'application/json',\n },\n listComponents\n);\n\nserver.registerResource(\n 'get_component_docs',\n new ResourceTemplate('designsystem://components/{name}', { list: undefined }),\n {\n description: 'Get documentation for a specific component',\n mimeType: 'application/json',\n },\n async (_uri, { name }) => {\n return getComponentDocs(name as string);\n }\n);\n\nserver.registerResource(\n 'list_css_tokens',\n 'designsystem://tokens',\n {\n description: 'List all CSS token categories with counts',\n mimeType: 'application/json',\n },\n listCSSTokens\n);\n\nserver.registerResource(\n 'get_css_tokens',\n new ResourceTemplate('designsystem://tokens/{category}', { list: undefined }),\n {\n description: 'Get CSS tokens for a specific category',\n mimeType: 'application/json',\n },\n async (_uri, { category }) => {\n return getCSSTokens(category as string);\n }\n);\n\nserver.registerResource(\n 'setup_guide_all',\n 'designsystem://guides/setup',\n {\n description: 'Get all setup and installation instructions',\n mimeType: 'application/json',\n },\n async () => getSetupGuide()\n);\n\nserver.registerResource(\n 'setup_guide_npm',\n 'designsystem://guides/setup/npm',\n {\n description: 'Get NPM setup and installation instructions',\n mimeType: 'application/json',\n },\n async () => getSetupGuide('npm')\n);\n\nserver.registerResource(\n 'setup_guide_cdn',\n 'designsystem://guides/setup/cdn',\n {\n description: 'Get CDN setup and installation instructions',\n mimeType: 'application/json',\n },\n async () => getSetupGuide('cdn')\n);\n\nserver.registerResource(\n 'principles_guide',\n 'designsystem://guides/principles',\n {\n description: 'Get design system usage principles and best practices',\n mimeType: 'application/json',\n },\n getPrinciplesGuide\n);\n\n// Start the server\nasync function main() {\n const transport = new StdioServerTransport();\n await server.connect(transport);\n console.info(`[${packageJson.name}]: Server started`);\n console.info(`[${packageJson.name}]: Current version: ${packageJson.version}`);\n}\n\nmain().catch((error) => {\n const errorMessage = error instanceof Error ? error.message : String(error);\n console.error(errorMessage);\n process.exit(1);\n});\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/card.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,WAAW,
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/card.ts"],"names":[],"mappings":"AAEA,eAAe;IACb,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,WAAW,EAAE,yFAAyF;QACtG,OAAO,EAAE,KAAK;QACd,aAAa,EAAE;YACb,SAAS,EAAE;gBACT,8CAA8C;gBAC9C,sDAAsD;gBACtD,uCAAuC;gBACvC,gDAAgD;aACjD;YACD,KAAK,EAAE;gBACL,yDAAyD;gBACzD,qCAAqC;gBACrC,+BAA+B;aAChC;SACF;QACD,OAAO,EAAE;YACP,IAAI,EAAE,wEAAwE;YAC9E,eAAe,EAAE,qEAAqE;SACvF;QACD,QAAQ,EAAE;YACR;gBACE,KAAK,EAAE,YAAY;gBACnB,IAAI,EAAE;;;OAGP;aACA;YACD;gBACE,KAAK,EAAE,0BAA0B;gBACjC,WAAW,EAAE,yEAAyE;gBACtF,IAAI,EAAE;;;OAGP;aACA;SACF;KACF;CAC0B,CAAC","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\n\nexport default {\n card: {\n name: 'Card',\n description: 'Container component that groups related content and actions in a visually distinct area',\n element: 'div',\n usageGuidance: {\n whenToUse: [\n 'Display related information as a single unit',\n 'Create scannable layouts with multiple content items',\n 'Group content with associated actions',\n 'Highlight content that users can interact with',\n ],\n avoid: [\n 'For single pieces of text (use standard layout instead)',\n \"When visual separation isn't needed\",\n 'In dense data tables or lists',\n ],\n },\n classes: {\n card: 'Pre-styled container with flex layout, spacing, borders, and elevation',\n 'card-dataview': 'Card variant with grid layout optimized for displaying metrics/data',\n },\n examples: [\n {\n title: 'Basic card',\n code: `<div class=\"card\">\n <h3>Card Title</h3>\n <p>Card content goes here...</p>\n</div>`,\n },\n {\n title: 'Card with custom padding',\n description: 'Customize using --card-padding or --card-vertical-spacing CSS variables',\n code: `<div class=\"card\" style=\"--card-padding: var(--space-scale-4)\">\n <h3>Card with more padding</h3>\n <p>Customized via CSS variable instead of writing custom CSS</p>\n</div>`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}
|
|
@@ -109,7 +109,7 @@ export const designSystemPrinciples = {
|
|
|
109
109
|
{
|
|
110
110
|
mistake: 'Assuming classes are incomplete',
|
|
111
111
|
problem: 'Adding display: flex, border: 1px solid, etc. to classes that already have these',
|
|
112
|
-
solution:
|
|
112
|
+
solution: "Trust the design system. Check docs to see what's included.",
|
|
113
113
|
prevention: 'Default assumption: classes are complete, not partial',
|
|
114
114
|
},
|
|
115
115
|
],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"principles.js","sourceRoot":"","sources":["../../../../src/resources/guides/principles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,QAAQ,EAAE;QACR,aAAa,EACX,wGAAwG;QAC1G,UAAU,EACR,kIAAkI;KACrI;IACD,aAAa,EAAE;QACb,eAAe,EAAE,qDAAqD;QACtE,EAAE,EAAE;YACF,oEAAoE;YACpE,6DAA6D;YAC7D,0EAA0E;YAC1E,iGAAiG;YACjG,mGAAmG;SACpG;QACD,IAAI,EAAE;YACJ,sFAAsF;YACtF,mEAAmE;YACnE,qEAAqE;YACrE,gFAAgF;YAChF,iEAAiE;SAClE;KACF;IACD,oBAAoB,EAAE;QACpB,WAAW,
|
|
1
|
+
{"version":3,"file":"principles.js","sourceRoot":"","sources":["../../../../src/resources/guides/principles.ts"],"names":[],"mappings":"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","sourcesContent":["export const designSystemPrinciples = {\n overview: {\n corePrinciple:\n 'Trust the design system. Components and classes are fully styled and production-ready. Use them as-is.',\n philosophy:\n 'The design system handles styling, spacing, colors, and layouts. Your role is to compose components, not recreate their styling.',\n },\n cssClassUsage: {\n defaultApproach: 'Use existing classes without writing additional CSS',\n do: [\n 'Use classes as-is without extra styling (e.g., <div class=\"card\">)',\n 'Check component documentation BEFORE writing any custom CSS',\n 'Compose with multiple classes when needed (e.g., class=\"card stat-card\")',\n 'Override using CSS variables when provided (e.g., style=\"--card-padding: var(--space-scale-4)\")',\n 'Trust that design system classes include ALL necessary styling (layout, spacing, colors, shadows)',\n ],\n dont: [\n \"Don't duplicate CSS that classes already provide (border, background, padding, etc.)\",\n \"Don't create new classes without checking if design system has it\",\n \"Don't assume classes need additional styling - verify in docs first\",\n \"Don't override design tokens with hardcoded values (use CSS variables instead)\",\n \"Don't add wrapper divs just to style - compose classes directly\",\n ],\n },\n verificationWorkflow: {\n description: 'Follow this workflow BEFORE writing any custom CSS',\n steps: [\n '1. Check: Does the design system have this component? (Query designsystem://components)',\n '2. Read: What does the component provide? (Check component docs)',\n '3. Use: Apply the class without custom CSS first',\n '4. Test: Does it work as-is? (Usually yes!)',\n '5. Customize: Only if truly needed, use CSS variables or add modifier classes',\n ],\n },\n whenToWriteCustomCSS: {\n description: 'Write custom CSS only in these scenarios',\n scenarios: [\n 'User explicitly requests custom/unique styling',\n 'Design system genuinely lacks the needed component',\n 'Truly unique layout requirements that cannot be solved with existing classes or composition',\n 'Dashboard-specific or app-specific layout patterns (grids, specialized containers)',\n ],\n notValidReasons: [\n 'Not valid: \"I need a card with padding\" - .card already has padding',\n 'Not valid: \"I need a button with a border\" - button already has borders',\n 'Not valid: \"I need spacing between elements\" - use design system spacing tokens',\n ],\n },\n compositionPatterns: {\n description: 'How to combine design system classes effectively',\n patterns: [\n {\n pattern: 'Base + Modifier',\n example: '<div class=\"card stat-card\">',\n explanation: 'Use base design system class (card) + your modifier class (stat-card) for extensions',\n },\n {\n pattern: 'CSS Variable Override',\n example: '<div class=\"card\" style=\"--card-padding: var(--space-scale-5)\">',\n explanation: 'Override CSS variables for customization without duplicating styles',\n },\n {\n pattern: 'Multiple Design System Classes',\n example: '<button class=\"primary large\">',\n explanation: 'Compose multiple utility/variant classes from design system',\n },\n ],\n },\n designTokens: {\n description: 'Use design tokens instead of hardcoded values',\n principle: 'All spacing, colors, typography should use CSS custom properties (--*)',\n examples: [\n {\n wrong: 'padding: 24px',\n right: 'padding: var(--space-scale-3)',\n why: 'Tokens ensure consistency and enable theming',\n },\n {\n wrong: 'color: #DA0707',\n right: 'color: var(--color-alert-400)',\n why: 'Semantic tokens communicate intent and adapt to themes',\n },\n {\n wrong: 'font-size: 16px',\n right: 'font-size: var(--font-size-300)',\n why: 'Typography scale ensures visual hierarchy',\n },\n ],\n },\n commonMistakes: {\n description: 'Common mistakes developers make (and how to avoid them)',\n mistakes: [\n {\n mistake: 'Recreating .card styling',\n problem: 'Duplicating background, border, padding, shadows that .card already provides',\n solution: 'Use <div class=\"card\"> directly. It includes everything.',\n prevention: 'Read component docs BEFORE writing CSS',\n },\n {\n mistake: 'Adding wrapper divs for styling',\n problem: '<div class=\"my-wrapper\"><div class=\"card\">...</div></div>',\n solution: 'Style the card directly: <div class=\"card my-modifier\">',\n prevention: 'Compose classes instead of wrapping',\n },\n {\n mistake: 'Hardcoding spacing values',\n problem: 'margin: 16px; gap: 12px;',\n solution: 'margin: var(--space-scale-2); gap: var(--space-scale-1-5);',\n prevention: 'Query designsystem://tokens/space for available values',\n },\n {\n mistake: 'Assuming classes are incomplete',\n problem: 'Adding display: flex, border: 1px solid, etc. to classes that already have these',\n solution: \"Trust the design system. Check docs to see what's included.\",\n prevention: 'Default assumption: classes are complete, not partial',\n },\n ],\n },\n resources: {\n description: 'MCP resources for discovering design system capabilities',\n available: [\n {\n resource: 'designsystem://components',\n purpose: 'List all available components',\n },\n {\n resource: 'designsystem://components/{name}',\n purpose: 'Get detailed component documentation',\n },\n {\n resource: 'designsystem://tokens',\n purpose: 'List all token categories',\n },\n {\n resource: 'designsystem://tokens/{category}',\n purpose: 'Get tokens for specific category (color, space, font, etc.)',\n },\n {\n resource: 'designsystem://guides/setup',\n purpose: 'Installation instructions',\n },\n {\n resource: 'designsystem://guides/principles',\n purpose: 'This guide - design system usage principles',\n },\n ],\n },\n};\n\nexport const getPrinciplesGuide = async () => {\n return {\n contents: [\n {\n uri: 'designsystem://guides/principles',\n mimeType: 'application/json',\n text: JSON.stringify(designSystemPrinciples, null, 2),\n },\n ],\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@triptease/design-system-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "MCP server for Triptease design system documentation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@triptease/tt-date-range-picker": "6.2.3",
|
|
29
29
|
"@triptease/tt-dialog": "5.1.1",
|
|
30
30
|
"@triptease/tt-highlight": "1.0.2",
|
|
31
|
-
"@triptease/tt-line-chart": "1.0.
|
|
31
|
+
"@triptease/tt-line-chart": "1.0.10",
|
|
32
32
|
"zod": "^4.3.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
package/src/index.ts
CHANGED
|
@@ -3,7 +3,14 @@ import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mc
|
|
|
3
3
|
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
|
|
4
4
|
import packageJson from '@/../package.json' with { type: 'json' };
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
listComponents,
|
|
8
|
+
getComponentDocs,
|
|
9
|
+
listCSSTokens,
|
|
10
|
+
getCSSTokens,
|
|
11
|
+
getSetupGuide,
|
|
12
|
+
getPrinciplesGuide,
|
|
13
|
+
} from '@/resources/index.js';
|
|
7
14
|
|
|
8
15
|
// Initialize MCP server
|
|
9
16
|
const server = new McpServer(
|
|
@@ -3,8 +3,7 @@ import { ComponentManifest } from '@/manifests/components/types.js';
|
|
|
3
3
|
export default {
|
|
4
4
|
card: {
|
|
5
5
|
name: 'Card',
|
|
6
|
-
description:
|
|
7
|
-
'Container component that groups related content and actions in a visually distinct area',
|
|
6
|
+
description: 'Container component that groups related content and actions in a visually distinct area',
|
|
8
7
|
element: 'div',
|
|
9
8
|
usageGuidance: {
|
|
10
9
|
whenToUse: [
|
|
@@ -33,8 +32,7 @@ export default {
|
|
|
33
32
|
},
|
|
34
33
|
{
|
|
35
34
|
title: 'Card with custom padding',
|
|
36
|
-
description:
|
|
37
|
-
'Customize using --card-padding or --card-vertical-spacing CSS variables',
|
|
35
|
+
description: 'Customize using --card-padding or --card-vertical-spacing CSS variables',
|
|
38
36
|
code: `<div class="card" style="--card-padding: var(--space-scale-4)">
|
|
39
37
|
<h3>Card with more padding</h3>
|
|
40
38
|
<p>Customized via CSS variable instead of writing custom CSS</p>
|
|
@@ -34,8 +34,6 @@ describe('getComponentDocs resource', () => {
|
|
|
34
34
|
const lowerResult = await getComponentDocs('button');
|
|
35
35
|
const upperResult = await getComponentDocs('BUTTON');
|
|
36
36
|
|
|
37
|
-
expect(JSON.parse(lowerResult.contents[0].text)).toEqual(
|
|
38
|
-
JSON.parse(upperResult.contents[0].text)
|
|
39
|
-
);
|
|
37
|
+
expect(JSON.parse(lowerResult.contents[0].text)).toEqual(JSON.parse(upperResult.contents[0].text));
|
|
40
38
|
});
|
|
41
39
|
});
|
|
@@ -23,8 +23,7 @@ export const designSystemPrinciples = {
|
|
|
23
23
|
],
|
|
24
24
|
},
|
|
25
25
|
verificationWorkflow: {
|
|
26
|
-
description:
|
|
27
|
-
'Follow this workflow BEFORE writing any custom CSS',
|
|
26
|
+
description: 'Follow this workflow BEFORE writing any custom CSS',
|
|
28
27
|
steps: [
|
|
29
28
|
'1. Check: Does the design system have this component? (Query designsystem://components)',
|
|
30
29
|
'2. Read: What does the component provide? (Check component docs)',
|
|
@@ -53,14 +52,12 @@ export const designSystemPrinciples = {
|
|
|
53
52
|
{
|
|
54
53
|
pattern: 'Base + Modifier',
|
|
55
54
|
example: '<div class="card stat-card">',
|
|
56
|
-
explanation:
|
|
57
|
-
'Use base design system class (card) + your modifier class (stat-card) for extensions',
|
|
55
|
+
explanation: 'Use base design system class (card) + your modifier class (stat-card) for extensions',
|
|
58
56
|
},
|
|
59
57
|
{
|
|
60
58
|
pattern: 'CSS Variable Override',
|
|
61
59
|
example: '<div class="card" style="--card-padding: var(--space-scale-5)">',
|
|
62
|
-
explanation:
|
|
63
|
-
'Override CSS variables for customization without duplicating styles',
|
|
60
|
+
explanation: 'Override CSS variables for customization without duplicating styles',
|
|
64
61
|
},
|
|
65
62
|
{
|
|
66
63
|
pattern: 'Multiple Design System Classes',
|
|
@@ -71,8 +68,7 @@ export const designSystemPrinciples = {
|
|
|
71
68
|
},
|
|
72
69
|
designTokens: {
|
|
73
70
|
description: 'Use design tokens instead of hardcoded values',
|
|
74
|
-
principle:
|
|
75
|
-
'All spacing, colors, typography should use CSS custom properties (--*)',
|
|
71
|
+
principle: 'All spacing, colors, typography should use CSS custom properties (--*)',
|
|
76
72
|
examples: [
|
|
77
73
|
{
|
|
78
74
|
wrong: 'padding: 24px',
|
|
@@ -96,8 +92,7 @@ export const designSystemPrinciples = {
|
|
|
96
92
|
mistakes: [
|
|
97
93
|
{
|
|
98
94
|
mistake: 'Recreating .card styling',
|
|
99
|
-
problem:
|
|
100
|
-
'Duplicating background, border, padding, shadows that .card already provides',
|
|
95
|
+
problem: 'Duplicating background, border, padding, shadows that .card already provides',
|
|
101
96
|
solution: 'Use <div class="card"> directly. It includes everything.',
|
|
102
97
|
prevention: 'Read component docs BEFORE writing CSS',
|
|
103
98
|
},
|
|
@@ -115,9 +110,8 @@ export const designSystemPrinciples = {
|
|
|
115
110
|
},
|
|
116
111
|
{
|
|
117
112
|
mistake: 'Assuming classes are incomplete',
|
|
118
|
-
problem:
|
|
119
|
-
|
|
120
|
-
solution: 'Trust the design system. Check docs to see what\'s included.',
|
|
113
|
+
problem: 'Adding display: flex, border: 1px solid, etc. to classes that already have these',
|
|
114
|
+
solution: "Trust the design system. Check docs to see what's included.",
|
|
121
115
|
prevention: 'Default assumption: classes are complete, not partial',
|
|
122
116
|
},
|
|
123
117
|
],
|