Skip to main content
Glama
HalidSaglam

saglitzdesign-mcp

by HalidSaglam

Get Component Recipe

get_component_recipe
Read-onlyIdempotent

Get production-ready, accessible copy-paste UI component code in React Tailwind, HTML-CSS, SwiftUI, or Compose, complete with states, ARIA, keyboard support, and motion.

Instructions

Get production-ready, accessible reference CODE for a UI component in a chosen stack (react-tailwind, html-css, swiftui, compose) — not advice, actual copy-paste code with all states, ARIA/accessibility, keyboard support and correct motion, grounded in the SaglitzDesign specs. Use when you need to actually build a button, input, modal, toast, card, switch, tabs, empty-state, list-row, navigation, search, select, table, tooltip, form, pagination, skeleton, badge, or breadcrumb. Pair with get_component_guidance (the design rationale) and generate_design_tokens (the theme).

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
stackNoTarget stack. Omit to get the spec + all available stacks.
scalesNoYour ramps, keyed by step — {"neutral":{"50":"#…",…,"950":"#…"},"primary":{…},"danger":{…}} — exactly the `neutral`, `primary` and `danger` scales generate_color_system returns. Swapped step for step, which is what themes the dark-mode shades too; role tokens alone leave those behind.
tokensNoYour colours, so the code comes back in them instead of the house palette. Roles: primary, primaryHover, danger, dangerHover, background, textPrimary. Pass the values create_design_system or generate_color_system produced, e.g. {"primary":"#0F62FE","primaryHover":"#0043CE"}. Omit to get the recipe as written.
componentYesComponent name, e.g. 'button', 'input', 'modal', 'toast', 'card', 'switch', 'tabs', 'empty-state', 'list-row', 'navigation', 'search', 'select', 'table', 'tooltip', 'form', 'pagination', 'skeleton', 'badge', 'breadcrumb'

Schema Changelog

Changes observed during successful MCP inspections. Dates show when Glama detected each change.

  1. Addedv0.28.0

TDQS

A4.2/5.0
Behavior4/5

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

Annotations already declare readOnlyHint, idempotentHint, and destructiveHint, so the safety profile is covered. The description adds valuable behavioral context: the output is production-ready code with all states, ARIA/accessibility, keyboard support, motion, and stack-specific variants. It does not detail edge cases or return structure, but this is a read-only lookup tool.

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

Conciseness5/5

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

Three sentences with no filler: the first states the core value, the second gives concrete use cases, and the third points to related tools. The component list is long but directly informs when the tool applies.

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

Completeness4/5

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

With no output schema, the description compensates by describing what the code includes: states, accessibility, keyboard support, and motion. The optional stack behavior and scales/tokens semantics are already covered in the schema. Missing error/edge-case behavior is a minor gap.

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

Parameters3/5

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

Schema description coverage is 100%, and the schema already explains component, stack, scales, and tokens in detail. The description mainly reinforces that the stack is a choice and lists example components, adding little beyond what the schema provides. Baseline 3 is appropriate.

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

Purpose5/5

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

The description uses a specific verb and resource: 'Get production-ready, accessible reference CODE for a UI component.' It clearly differentiates from the sibling get_component_guidance by stating this is 'not advice' but actual copy-paste code, and by naming which components it supports.

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?

It explicitly says 'Use when you need to actually build' a component, which gives clear situational guidance. It also names companion tools get_component_guidance and generate_design_tokens, but does not explicitly state when not to use this tool versus each sibling.

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

Latest Blog Posts

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/HalidSaglam/saglitzdesign-mcp'

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