de en es ja ko ru zh

Webflow

Official

by webflow

Overview Schema Related Servers Score Discussions

TypeScript

Hybrid

Learn More About Styles

de_learn_more_about_styles

Discover Webflow Designer's supported CSS styles and learn to apply them correctly using proper long-form property aliases for consistent design implementation.

Instructions

Designer tool - Learn more about styles supported by Webflow Designer.Please do not use any other styles which is not supported by Webflow Designer.Please use the long-form alias of a CSS property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap, margin has long-form alias of margin-top, margin-right, margin-bottom, margin-left, etc.

Input Schema

TableJSON Schema

Name	Required	Description	Default
No arguments

Implementation Reference

src/tools/deStyle.ts:168-169 (handler)
Handler function for the 'de_learn_more_about_styles' tool. It returns the formatted supportDEStyles data.
```
  async ({}) => formatResponse(supportDEStyles)
);
```

src/tools/deStyle.ts:160-166 (schema)

Schema definition for the tool, including title, description, and empty input schema (no parameters required).

{
  title: "Learn More About Styles",
  description:
    "Designer tool - Learn more about styles supported by Webflow Designer." +
    "Please do not use any other styles which is not supported by Webflow Designer." +
    "Please use the long-form alias of a CSS property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap, margin has long-form alias of margin-top, margin-right, margin-bottom, margin-left, etc.",
  inputSchema: z.object({}),

src/tools/deStyle.ts:158-169 (registration)

Direct registration of the 'de_learn_more_about_styles' tool using server.registerTool, including schema and handler.

server.registerTool(
  "de_learn_more_about_styles",
  {
    title: "Learn More About Styles",
    description:
      "Designer tool - Learn more about styles supported by Webflow Designer." +
      "Please do not use any other styles which is not supported by Webflow Designer." +
      "Please use the long-form alias of a CSS property when managing styles. For example, the property row-gap has a long-form alias of grid-row-gap, margin has long-form alias of margin-top, margin-right, margin-bottom, margin-left, etc.",
    inputSchema: z.object({}),
  },
  async ({}) => formatResponse(supportDEStyles)
);

src/utils/supportStyles.ts:1-1397 (helper)

Helper constant supportDEStyles: comprehensive array of supported Webflow Designer CSS properties with supported values and examples, used by the tool handler.

export const supportDEStyles = [
  {
    property: "accent-color",
    supportedValues: "string or ColorVariable",
    example: "#ff5733",
  },
  {
    property: "align-content",
    supportedValues: "string",
    example: "center",
  },
  {
    property: "align-items",
    supportedValues: "string",
    example: "flex-start",
  },
  {
    property: "align-self",
    supportedValues: "string",
    example: "stretch",
  },
  {
    property: "animation-delay",
    supportedValues: "string",
    example: "2s",
  },
  {
    property: "animation-direction",
    supportedValues: "string",
    example: "alternate",
  },
  {
    property: "animation-duration",
    supportedValues: "string",
    example: "1s",
  },
  {
    property: "animation-fill-mode",
    supportedValues: "string",
    example: "forwards",
  },
  {
    property: "animation-iteration-count",
    supportedValues: "string",
    example: "infinite",
  },
  {
    property: "animation-name",
    supportedValues: "string",
    example: "slidein",
  },
  {
    property: "animation-play-state",
    supportedValues: "string",
    example: "paused",
  },
  {
    property: "animation-timing-function",
    supportedValues: "string",
    example: "ease-in-out",
  },
  {
    property: "appearance",
    supportedValues: "string",
    example: "none",
  },
  {
    property: "backdrop-filter",
    supportedValues: "string",
    example: "blur(5px)",
  },
  {
    property: "backface-visibility",
    supportedValues: "string",
    example: "hidden",
  },
  {
    property: "background-attachment",
    supportedValues: "string",
    example: "fixed",
  },
  {
    property: "background-blend-mode",
    supportedValues: "string",
    example: "multiply",
  },
  {
    property: "background-clip",
    supportedValues: "string",
    example: "border-box",
  },
  {
    property: "background-color",
    supportedValues: "string or ColorVariable",
    example: "#e0e0e0",
  },
  {
    property: "background-image",
    supportedValues: "string",
    example: "url('image.jpg')",
  },
  {
    property: "background-origin",
    supportedValues: "string",
    example: "padding-box",
  },
  {
    property: "background-position",
    supportedValues: "string",
    example: "top right",
  },
  {
    property: "background-position-x",
    supportedValues: "string or SizeVariable",
    example: "50%",
  },
  {
    property: "background-position-y",
    supportedValues: "string or SizeVariable",
    example: "50%",
  },
  {
    property: "background-repeat",
    supportedValues: "string",
    example: "repeat-x",
  },
  {
    property: "background-size",
    supportedValues: "string",
    example: "cover",
  },
  {
    property: "block-size",
    supportedValues: "string or SizeVariable",
    example: "100px",
  },
  {
    property: "border-block-end-color",
    supportedValues: "string or ColorVariable",
    example: "#000000",
  },
  {
    property: "border-block-end-style",
    supportedValues: "string",
    example: "dotted",
  },
  {
    property: "border-block-end-width",
    supportedValues: "string or SizeVariable",
    example: "3px",
  },
  {
    property: "border-block-start-color",
    supportedValues: "string or ColorVariable",
    example: "#333333",
  },
  {
    property: "border-block-start-style",
    supportedValues: "string",
    example: "solid",
  },
  {
    property: "border-block-start-width",
    supportedValues: "string or SizeVariable",
    example: "2px",
  },
  {
    property: "border-bottom-color",
    supportedValues: "string or ColorVariable",
    example: "#f44336",
  },
  {
    property: "border-bottom-left-radius",
    supportedValues: "string or SizeVariable",
    example: "4px",
  },
  {
    property: "border-bottom-right-radius",
    supportedValues: "string or SizeVariable",
    example: "4px",
  },
  {
    property: "border-bottom-style",
    supportedValues: "string",
    example: "groove",
  },
  {
    property: "border-bottom-width",
    supportedValues: "string or SizeVariable",
    example: "1px",
  },
  {
    property: "border-collapse",
    supportedValues: "string",
    example: "collapse",
  },
  {
    property: "border-end-end-radius",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "border-end-start-radius",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "border-image-outset",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "border-image-repeat",
    supportedValues: "string",
    example: "stretch",
  },
  {
    property: "border-image-slice",
    supportedValues: "string",
    example: "30%",
  },
  {
    property: "border-image-source",
    supportedValues: "string",
    example: "url('border.png')",
  },
  {
    property: "border-image-width",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "border-inline-end-color",
    supportedValues: "string or ColorVariable",
    example: "#4CAF50",
  },
  {
    property: "border-inline-end-style",
    supportedValues: "string",
    example: "inset",
  },
  {
    property: "border-inline-end-width",
    supportedValues: "string or SizeVariable",
    example: "4px",
  },
  {
    property: "border-inline-start-color",
    supportedValues: "string or ColorVariable",
    example: "#2196F3",
  },
  {
    property: "border-inline-start-style",
    supportedValues: "string",
    example: "outset",
  },
  {
    property: "border-inline-start-width",
    supportedValues: "string or SizeVariable",
    example: "3px",
  },
  {
    property: "border-left-color",
    supportedValues: "string or ColorVariable",
    example: "#9C27B0",
  },
  {
    property: "border-left-style",
    supportedValues: "string",
    example: "dashed",
  },
  {
    property: "border-left-width",
    supportedValues: "string or SizeVariable",
    example: "2px",
  },
  {
    property: "border-right-color",
    supportedValues: "string or ColorVariable",
    example: "#FFEB3B",
  },
  {
    property: "border-right-style",
    supportedValues: "string",
    example: "double",
  },
  {
    property: "border-right-width",
    supportedValues: "string or SizeVariable",
    example: "1px",
  },
  {
    property: "border-start-end-radius",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "border-start-start-radius",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "border-top-color",
    supportedValues: "string or ColorVariable",
    example: "#3F51B5",
  },
  {
    property: "border-top-left-radius",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "border-top-right-radius",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "border-top-style",
    supportedValues: "string",
    example: "ridge",
  },
  {
    property: "border-top-width",
    supportedValues: "string or SizeVariable",
    example: "2px",
  },
  {
    property: "bottom",
    supportedValues: "string or SizeVariable",
    example: "0",
  },
  {
    property: "box-shadow",
    supportedValues: "string",
    example: "10px 5px 5px black",
  },
  {
    property: "box-sizing",
    supportedValues: "string",
    example: "border-box",
  },
  {
    property: "break-after",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "break-before",
    supportedValues: "string",
    example: "always",
  },
  {
    property: "break-inside",
    supportedValues: "string",
    example: "avoid",
  },
  {
    property: "caption-side",
    supportedValues: "string",
    example: "bottom",
  },
  {
    property: "caret-color",
    supportedValues: "string or ColorVariable",
    example: "blue",
  },
  {
    property: "clear",
    supportedValues: "string",
    example: "both",
  },
  {
    property: "clip",
    supportedValues: "string",
    example: "rect(0,0,0,0)",
  },
  {
    property: "clip-path",
    supportedValues: "string",
    example: "circle(50%)",
  },
  {
    property: "clip-rule",
    supportedValues: "string",
    example: "evenodd",
  },
  {
    property: "color",
    supportedValues: "string or ColorVariable",
    example: "#FF9800",
  },
  {
    property: "color-interpolation",
    supportedValues: "string",
    example: "sRGB",
  },
  {
    property: "color-interpolation-filters",
    supportedValues: "string",
    example: "linearRGB",
  },
  {
    property: "column-count",
    supportedValues: "string",
    example: "3",
  },
  {
    property: "column-gap",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "column-rule-color",
    supportedValues: "string or ColorVariable",
    example: "#607D8B",
  },
  {
    property: "column-rule-style",
    supportedValues: "string",
    example: "solid",
  },
  {
    property: "column-rule-width",
    supportedValues: "string or SizeVariable",
    example: "1px",
  },
  {
    property: "column-span",
    supportedValues: "string",
    example: "all",
  },
  {
    property: "column-width",
    supportedValues: "string or SizeVariable",
    example: "200px",
  },
  {
    property: "content",
    supportedValues: "string",
    example: "'Hello'",
  },
  {
    property: "cursor",
    supportedValues: "string",
    example: "pointer",
  },
  {
    property: "cx",
    supportedValues: "string",
    example: "50",
  },
  {
    property: "cy",
    supportedValues: "string",
    example: "50",
  },
  {
    property: "direction",
    supportedValues: "string",
    example: "ltr",
  },
  {
    property: "display",
    supportedValues: "string",
    example: "flex",
  },
  {
    property: "dominant-baseline",
    supportedValues: "string",
    example: "alphabetic",
  },
  {
    property: "empty-cells",
    supportedValues: "string",
    example: "show",
  },
  {
    property: "fill",
    supportedValues: "string",
    example: "#f00",
  },
  {
    property: "fill-opacity",
    supportedValues: "string",
    example: "0.5",
  },
  {
    property: "fill-rule",
    supportedValues: "string",
    example: "nonzero",
  },
  {
    property: "filter",
    supportedValues: "string",
    example: "blur(2px)",
  },
  {
    property: "flex-basis",
    supportedValues: "string or SizeVariable",
    example: "auto",
  },
  {
    property: "flex-direction",
    supportedValues: "string",
    example: "row",
  },
  {
    property: "flex-grow",
    supportedValues: "string",
    example: "1",
  },
  {
    property: "flex-shrink",
    supportedValues: "string",
    example: "1",
  },
  {
    property: "flex-wrap",
    supportedValues: "string",
    example: "wrap",
  },
  {
    property: "float",
    supportedValues: "string",
    example: "right",
  },
  {
    property: "flood-color",
    supportedValues: "string or ColorVariable",
    example: "#00BCD4",
  },
  {
    property: "flood-opacity",
    supportedValues: "string",
    example: "0.7",
  },
  {
    property: "font-family",
    supportedValues: "string or FontFamilyVariable",
    example: "Arial, sans-serif",
  },
  {
    property: "font-kerning",
    supportedValues: "string",
    example: "normal",
  },
  {
    property: "font-optical-sizing",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "font-size",
    supportedValues: "string or SizeVariable",
    example: "16px",
  },
  {
    property: "font-stretch",
    supportedValues: "string",
    example: "condensed",
  },
  {
    property: "font-style",
    supportedValues: "string",
    example: "italic",
  },
  {
    property: "font-variant-alternates",
    supportedValues: "string",
    example: "normal",
  },
  {
    property: "font-variant-caps",
    supportedValues: "string",
    example: "small-caps",
  },
  {
    property: "font-variant-east-asian",
    supportedValues: "string",
    example: "normal",
  },
  {
    property: "font-variant-ligatures",
    supportedValues: "string",
    example: "none",
  },
  {
    property: "font-variant-numeric",
    supportedValues: "string",
    example: "ordinal",
  },
  {
    property: "font-weight",
    supportedValues: "string",
    example: "bold",
  },
  {
    property: "grid-auto-columns",
    supportedValues: "string",
    example: "minmax(100px, auto)",
  },
  {
    property: "grid-auto-flow",
    supportedValues: "string",
    example: "row dense",
  },
  {
    property: "grid-auto-rows",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "grid-column-end",
    supportedValues: "string",
    example: "span 2",
  },
  {
    property: "grid-column-gap",
    supportedValues: "string",
    example: "10px",
  },
  {
    property: "grid-column-start",
    supportedValues: "string",
    example: "1",
  },
  {
    property: "grid-row-end",
    supportedValues: "string",
    example: "3",
  },
  {
    property: "grid-row-gap",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "grid-row-start",
    supportedValues: "string",
    example: "1",
  },
  {
    property: "grid-template-areas",
    supportedValues: "string",
    example: "'header header'",
  },
  {
    property: "grid-template-columns",
    supportedValues: "string",
    example: "50px 100px",
  },
  {
    property: "grid-template-rows",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "height",
    supportedValues: "string or SizeVariable",
    example: "100vh",
  },
  {
    property: "image-orientation",
    supportedValues: "string",
    example: "90deg",
  },
  {
    property: "image-rendering",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "inline-size",
    supportedValues: "string or SizeVariable",
    example: "200px",
  },
  {
    property: "inset-block-end",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "inset-block-start",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "inset-inline-end",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "inset-inline-start",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "isolation",
    supportedValues: "string",
    example: "isolate",
  },
  {
    property: "justify-content",
    supportedValues: "string",
    example: "space-between",
  },
  {
    property: "justify-items",
    supportedValues: "string",
    example: "stretch",
  },
  {
    property: "justify-self",
    supportedValues: "string",
    example: "center",
  },
  {
    property: "left",
    supportedValues: "string or SizeVariable",
    example: "50px",
  },
  {
    property: "letter-spacing",
    supportedValues: "string or SizeVariable",
    example: "0.5em",
  },
  {
    property: "lighting-color",
    supportedValues: "string or ColorVariable",
    example: "white",
  },
  {
    property: "line-break",
    supportedValues: "string",
    example: "strict",
  },
  {
    property: "line-height",
    supportedValues: "string or SizeVariable",
    example: "1.5",
  },
  {
    property: "list-style-image",
    supportedValues: "string",
    example: "url('star.png')",
  },
  {
    property: "list-style-position",
    supportedValues: "string",
    example: "inside",
  },
  {
    property: "list-style-type",
    supportedValues: "string",
    example: "disc",
  },
  {
    property: "margin-block-end",
    supportedValues: "string or SizeVariable",
    example: "15px",
  },
  {
    property: "margin-block-start",
    supportedValues: "string or SizeVariable",
    example: "15px",
  },
  {
    property: "margin-bottom",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "margin-inline-end",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "margin-inline-start",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "margin-left",
    supportedValues: "string or SizeVariable",
    example: "30px",
  },
  {
    property: "margin-right",
    supportedValues: "string or SizeVariable",
    example: "30px",
  },
  {
    property: "margin-top",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "marker-end",
    supportedValues: "string",
    example: "url('arrowhead.svg')",
  },
  {
    property: "marker-mid",
    supportedValues: "string",
    example: "url('dot.svg')",
  },
  {
    property: "marker-start",
    supportedValues: "string",
    example: "url('circle.svg')",
  },
  {
    property: "mask-type",
    supportedValues: "string",
    example: "luminance",
  },
  {
    property: "max-block-size",
    supportedValues: "string or SizeVariable",
    example: "100px",
  },
  {
    property: "max-height",
    supportedValues: "string or SizeVariable",
    example: "200px",
  },
  {
    property: "max-inline-size",
    supportedValues: "string or SizeVariable",
    example: "300px",
  },
  {
    property: "max-width",
    supportedValues: "string or SizeVariable",
    example: "80%",
  },
  {
    property: "min-block-size",
    supportedValues: "string or SizeVariable",
    example: "50px",
  },
  {
    property: "min-height",
    supportedValues: "string or SizeVariable",
    example: "100px",
  },
  {
    property: "min-inline-size",
    supportedValues: "string or SizeVariable",
    example: "150px",
  },
  {
    property: "min-width",
    supportedValues: "string or SizeVariable",
    example: "60px",
  },
  {
    property: "mix-blend-mode",
    supportedValues: "string",
    example: "multiply",
  },
  {
    property: "object-fit",
    supportedValues: "string",
    example: "cover",
  },
  {
    property: "object-position",
    supportedValues: "string",
    example: "center top",
  },
  {
    property: "offset-anchor",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "offset-distance",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "offset-path",
    supportedValues: "string",
    example: "path('M10 80 Q 95 10 180 80')",
  },
  {
    property: "offset-rotate",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "opacity",
    supportedValues: "string",
    example: "0.5",
  },
  {
    property: "order",
    supportedValues: "string",
    example: "2",
  },
  {
    property: "outline-color",
    supportedValues: "string or ColorVariable",
    example: "#FF5722",
  },
  {
    property: "outline-offset",
    supportedValues: "string or SizeVariable",
    example: "2px",
  },
  {
    property: "outline-style",
    supportedValues: "string",
    example: "dashed",
  },
  {
    property: "outline-width",
    supportedValues: "string or SizeVariable",
    example: "3px",
  },
  {
    property: "overflow-wrap",
    supportedValues: "string",
    example: "break-word",
  },
  {
    property: "overflow-x",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "overflow-y",
    supportedValues: "string",
    example: "scroll",
  },
  {
    property: "overscroll-behavior-block",
    supportedValues: "string",
    example: "contain",
  },
  {
    property: "overscroll-behavior-inline",
    supportedValues: "string",
    example: "none",
  },
  {
    property: "padding-block-end",
    supportedValues: "string or SizeVariable",
    example: "25px",
  },
  {
    property: "padding-block-start",
    supportedValues: "string or SizeVariable",
    example: "25px",
  },
  {
    property: "padding-bottom",
    supportedValues: "string or SizeVariable",
    example: "15px",
  },
  {
    property: "padding-inline-end",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "padding-inline-start",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "padding-left",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "padding-right",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "padding-top",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "paint-order",
    supportedValues: "string",
    example: "fill stroke markers",
  },
  {
    property: "perspective",
    supportedValues: "string or SizeVariable",
    example: "500px",
  },
  {
    property: "perspective-origin",
    supportedValues: "string",
    example: "50% 50%",
  },
  {
    property: "pointer-events",
    supportedValues: "string",
    example: "none",
  },
  {
    property: "position",
    supportedValues: "string",
    example: "absolute",
  },
  {
    property: "r",
    supportedValues: "string or SizeVariable",
    example: "50px",
  },
  {
    property: "resize",
    supportedValues: "string",
    example: "both",
  },
  {
    property: "right",
    supportedValues: "string or SizeVariable",
    example: "0px",
  },
  {
    property: "rotate",
    supportedValues: "string",
    example: "45deg",
  },
  {
    property: "row-gap",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "rx",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "ry",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "scale",
    supportedValues: "string",
    example: "1.2",
  },
  {
    property: "scroll-behavior",
    supportedValues: "string",
    example: "smooth",
  },
  {
    property: "scroll-margin-block-end",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "scroll-margin-block-start",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "scroll-margin-inline-end",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "scroll-margin-inline-start",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "scroll-padding-block-end",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "scroll-padding-block-start",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "scroll-padding-inline-end",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "scroll-padding-inline-start",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "shape-image-threshold",
    supportedValues: "string",
    example: "0.3",
  },
  {
    property: "shape-margin",
    supportedValues: "string or SizeVariable",
    example: "15px",
  },
  {
    property: "shape-outside",
    supportedValues: "string",
    example: "circle(50%)",
  },
  {
    property: "shape-rendering",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "stop-color",
    supportedValues: "string or ColorVariable",
    example: "#0D47A1",
  },
  {
    property: "stop-opacity",
    supportedValues: "string",
    example: "0.8",
  },
  {
    property: "stroke",
    supportedValues: "string or ColorVariable",
    example: "black",
  },
  {
    property: "stroke-dasharray",
    supportedValues: "string",
    example: "5, 10",
  },
  {
    property: "stroke-dashoffset",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "stroke-linecap",
    supportedValues: "string",
    example: "round",
  },
  {
    property: "stroke-linejoin",
    supportedValues: "string",
    example: "bevel",
  },
  {
    property: "stroke-miterlimit",
    supportedValues: "string",
    example: "10",
  },
  {
    property: "stroke-opacity",
    supportedValues: "string",
    example: "1",
  },
  {
    property: "stroke-width",
    supportedValues: "string or SizeVariable",
    example: "3px",
  },
  {
    property: "tab-size",
    supportedValues: "string or SizeVariable",
    example: "4",
  },
  {
    property: "table-layout",
    supportedValues: "string",
    example: "fixed",
  },
  {
    property: "text-align",
    supportedValues: "string",
    example: "justify",
  },
  {
    property: "text-align-last",
    supportedValues: "string",
    example: "center",
  },
  {
    property: "text-anchor",
    supportedValues: "string",
    example: "start",
  },
  {
    property: "text-decoration",
    supportedValues: "string",
    example: "underline",
  },
  {
    property: "text-decoration-color",
    supportedValues: "string or ColorVariable",
    example: "red",
  },
  {
    property: "text-decoration-line",
    supportedValues: "string",
    example: "overline",
  },
  {
    property: "text-decoration-skip-ink",
    supportedValues: "string",
    example: "auto",
  },
  {
    property: "text-decoration-style",
    supportedValues: "string",
    example: "dotted",
  },
  {
    property: "text-emphasis-color",
    supportedValues: "string or ColorVariable",
    example: "green",
  },
  {
    property: "text-emphasis-position",
    supportedValues: "string",
    example: "under right",
  },
  {
    property: "text-emphasis-style",
    supportedValues: "string",
    example: "filled circle",
  },
  {
    property: "text-indent",
    supportedValues: "string or SizeVariable",
    example: "20px",
  },
  {
    property: "text-overflow",
    supportedValues: "string",
    example: "ellipsis",
  },
  {
    property: "text-rendering",
    supportedValues: "string",
    example: "optimizeLegibility",
  },
  {
    property: "text-shadow",
    supportedValues: "string",
    example: "2px 2px 5px grey",
  },
  {
    property: "text-transform",
    supportedValues: "string",
    example: "uppercase",
  },
  {
    property: "text-underline-position",
    supportedValues: "string",
    example: "under",
  },
  {
    property: "top",
    supportedValues: "string or SizeVariable",
    example: "100px",
  },
  {
    property: "touch-action",
    supportedValues: "string",
    example: "pan-right",
  },
  {
    property: "transform",
    supportedValues: "string",
    example: "rotate(45deg)",
  },
  {
    property: "transform-origin",
    supportedValues: "string",
    example: "top left",
  },
  {
    property: "transform-style",
    supportedValues: "string",
    example: "preserve-3d",
  },
  {
    property: "transition-delay",
    supportedValues: "string",
    example: "0.5s",
  },
  {
    property: "transition-duration",
    supportedValues: "string",
    example: "300ms",
  },
  {
    property: "transition-property",
    supportedValues: "string",
    example: "opacity",
  },
  {
    property: "transition-timing-function",
    supportedValues: "string",
    example: "ease-in-out",
  },
  {
    property: "translate",
    supportedValues: "string or SizeVariable",
    example: "10px, 20px",
  },
  {
    property: "unicode-bidi",
    supportedValues: "string",
    example: "bidi-override",
  },
  {
    property: "vector-effect",
    supportedValues: "string",
    example: "non-scaling-stroke",
  },
  {
    property: "vertical-align",
    supportedValues: "string",
    example: "middle",
  },
  {
    property: "visibility",
    supportedValues: "string",
    example: "hidden",
  },
  {
    property: "white-space",
    supportedValues: "string",
    example: "nowrap",
  },
  {
    property: "width",
    supportedValues: "string or SizeVariable",
    example: "50%",
  },
  {
    property: "will-change",
    supportedValues: "string",
    example: "transform",
  },
  {
    property: "word-break",
    supportedValues: "string",
    example: "break-word",
  },
  {
    property: "word-spacing",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "writing-mode",
    supportedValues: "string",
    example: "vertical-rl",
  },
  {
    property: "x",
    supportedValues: "string or SizeVariable",
    example: "5px",
  },
  {
    property: "y",
    supportedValues: "string or SizeVariable",
    example: "10px",
  },
  {
    property: "z-index",
    supportedValues: "string",
    example: "10",
  },
  {
    property: "-webkit-line-clamp",
    supportedValues: "string",
    example: "3",
  },
  {
    property: "-webkit-text-fill-color",
    supportedValues: "string or ColorVariable",
    example: "#FF5722",
  },
  {
    property: "-webkit-text-stroke-color",
    supportedValues: "string or ColorVariable",
    example: "#4CAF50",
  },
  {
    property: "-webkit-text-stroke-width",
    supportedValues: "string or SizeVariable",
    example: "1px",
  },
];

src/mcp.ts:64-64 (registration)
Higher-level registration call to registerDEStyleTools within registerDesignerTools, which includes the 'de_learn_more_about_styles' tool.
```
registerDEStyleTools(server, rpc);
```

Tool Definition Quality

B3.1/5.0

Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden. It mentions using long-form CSS property aliases, which adds some behavioral context, but does not disclose what the tool actually does (e.g., returns information, explains styles) or any operational traits like permissions, rate limits, or output format. The description is incomplete for behavioral understanding.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness3/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is two sentences but includes redundant phrasing ('Designer tool' is implied) and mixes usage guidelines with purpose. It could be more front-loaded by stating the core function first. While not overly verbose, it lacks efficient structure, with the second sentence adding necessary but cluttered guidance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given no annotations, no output schema, and 0 parameters, the description is incomplete. It fails to explain what the tool returns (e.g., a list of styles, documentation) or how it operates, leaving gaps in understanding its functionality. The CSS alias guidance is helpful but does not compensate for missing core behavioral details.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 0 parameters with 100% coverage, so no parameter documentation is needed. The description adds value by providing usage guidance on CSS property aliases, which is relevant to style management but not directly tied to parameters. Baseline is 4 for zero parameters, as the description compensates with contextual advice.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose3/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states the tool is for 'learning more about styles supported by Webflow Designer,' which provides a vague purpose but does not specify what it returns (e.g., a list, documentation, examples). It distinguishes from siblings like 'style_tool' by focusing on learning rather than applying styles, but lacks specificity in verb and resource.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explicitly states 'Please do not use any other styles which is not supported by Webflow Designer,' providing clear context on when to use this tool (for supported styles only). However, it does not mention alternatives or exclusions, such as when to use 'style_tool' or other sibling tools for style management.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

Latest Blog Posts

Tool Definition Quality Score (TDQS)
By punkpeye on April 3, 2026.
mcp
The Hackers Who Tracked My Sleep Cycle
By punkpeye on March 26, 2026.
security
Open Source Has a Bot Problem
By punkpeye on March 19, 2026.
open source

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/webflow/mcp-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server