get_css_property_details
Retrieve comprehensive CSS property details from MDN documentation including syntax, examples, and use cases to implement styling correctly.
Instructions
Retrieves comprehensive information about a CSS property from MDN documentation including syntax, examples, and use cases.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css_property | Yes | CSS property name to get details for | |
| include_examples | No | Include code examples in the response |
Implementation Reference
- src/index.ts:232-282 (registration)Registration of the 'get_css_property_details' MCP tool, including description, input schema validation with Zod, and the execution handler function that delegates to fetchCSSPropertyDetailsFromMDN.server.tool( "get_css_property_details", "Retrieves comprehensive information about a CSS property from MDN documentation including syntax, examples, and use cases.", { css_property: z.string().describe("CSS property name to get details for"), include_examples: z .boolean() .optional() .describe("Include code examples in the response"), }, async (args: { css_property: string; include_examples?: boolean }) => { try { const { css_property, include_examples = true } = args; const details: CSSPropertyDetails = await fetchCSSPropertyDetailsFromMDN( css_property, include_examples ); const result = { property: css_property, details, mdn_url: `https://developer.mozilla.org/en-US/docs/Web/CSS/${css_property}`, }; return { content: [ { type: "text" as const, text: JSON.stringify(result, null, 2), }, ], }; } catch (error) { return { content: [ { type: "text" as const, text: JSON.stringify( { error: error instanceof Error ? error.message : "Unknown error", }, null, 2 ), }, ], }; } } );
- src/services/css/mdnClient.ts:514-528 (handler)Core handler logic for fetching CSS property details from MDN, using helper functions to provide description, syntax, values, examples, and related properties based on mock data.export async function fetchCSSPropertyDetailsFromMDN( cssProperty: string, includeExamples: boolean = true ): Promise<CSSPropertyDetails> { // Mock implementation - in real scenario, this would parse MDN documentation const mockDetails: CSSPropertyDetails = { description: getPropertyDescription(cssProperty), syntax: getPropertySyntax(cssProperty), values: getPropertyValues(cssProperty), examples: includeExamples ? getPropertyExamples(cssProperty) : [], related_properties: getRelatedProperties(cssProperty), }; return mockDetails; }
- src/services/css/types.ts:54-65 (schema)TypeScript interface defining the structure of CSSPropertyDetails returned by the tool.export interface CSSPropertyDetails { /** Property description */ description: string; /** CSS syntax */ syntax: string; /** Possible values */ values: string[]; /** Code examples */ examples: string[]; /** Related CSS properties */ related_properties: string[]; }
- src/services/mdnApi.ts:28-32 (helper)Re-export of fetchCSSPropertyDetailsFromMDN from mdnClient.ts for use in index.ts.export { fetchMDNData, fetchBrowserSupportFromMDN, fetchCSSPropertyDetailsFromMDN, } from "./css/mdnClient.js";
- src/index.ts:235-241 (schema)Zod input schema for the tool parameters: css_property (required string), include_examples (optional boolean).{ css_property: z.string().describe("CSS property name to get details for"), include_examples: z .boolean() .optional() .describe("Include code examples in the response"), },