get_css
Retrieve raw CSS file contents and custom property definitions from your design system. Filter by design context to get only relevant styles.
Instructions
Get raw CSS file contents and extracted custom property definitions from the design system.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| context | No | Design context to query | all |
| includeRaw | No | Include full raw CSS file contents (can be large) |
Implementation Reference
- src/tools/get-css.ts:23-47 (handler)Main handler for get_css tool: resolves design context, extracts CSS files with custom properties/classes, optionally includes raw content.
/** * Handles the get_css tool call. */ export function handler(index: DesignSystemIndex, args: GetCSSArgs) { const ctx = args.context ?? 'all'; const resolved = ctx === 'all' ? index.resolved.all : ctx === 'marketing' ? index.resolved.marketing : ctx === 'product' ? index.resolved.product : index.resolved.all; const cssFiles = resolved.cssFiles; if (cssFiles.length === 0) { return [{ type: 'text' as const, text: `No CSS files found in ${ctx} context.` }]; } const output = cssFiles.map((f) => ({ filePath: f.filePath, customProperties: f.customProperties, classes: f.classes, ...(args.includeRaw ? { rawContent: f.rawContent } : {}), })); return [{ type: 'text' as const, text: JSON.stringify(output, null, 2) }]; } - src/types/mcp.ts:122-129 (schema)TypeScript type definition for get_css tool arguments (context and includeRaw).
/** Arguments for the `get_css` MCP tool */ export interface GetCSSArgs { /** Filter CSS files to a specific design context */ context?: 'marketing' | 'product' | 'shared' | 'all'; /** When true, include the full raw CSS text in the response */ includeRaw?: boolean; } - src/tools/get-css.ts:15-21 (schema)Input JSON Schema for get_css tool, defining context enum and includeRaw boolean.
export const INPUT_SCHEMA = { type: 'object' as const, properties: { context: { type: 'string', enum: ['marketing', 'product', 'shared', 'all'], default: 'all', description: 'Design context to query' }, includeRaw: { type: 'boolean', default: false, description: 'Include full raw CSS file contents (can be large)' }, }, }; - src/tools/index.ts:94-95 (registration)Registration of get_css handler in the CallToolRequestSchema switch statement.
case css.TOOL_NAME: return { content: css.handler(index, args as never) }; - src/tools/index.ts:27-28 (registration)Import of the get-css module into the tools registry.
import * as css from './get-css.js'; import * as searchBrand from './search-brand.js';