Skip to main content
Glama

get_component_scaffold

Generates a ServiceNow Next Experience UI component scaffold with now-ui.json stub, Storybook config, story, and SCSS, enabling agents to start compliant new components.

Instructions

Returns a minimal Now/Next Experience UI Framework component scaffold that uses Storybook with @dylanlindgren/next-ui-storybook-addon as its default local preview workflow. Include a matching now-ui.json stub, .storybook/main.mjs, a component story, and a separate component stylesheet in .scss imported and assigned via the createCustomElement styles property. Runtime shims MUST import servicenowUiCore and servicenowUiRendererSnabbdom from @servicenow/ui-mega, exactly as shown in the returned scaffold. Neither component source nor runtime shim files may import or re-export from @servicenow/ui-core or @servicenow/ui-renderer-snabbdom; wrapping those original packages in local files does not satisfy this requirement. For new components without an existing repo style, MUST prefer the JSX scaffold and MUST NOT hand-write low-level createElement trees. Agents must assess existing project configuration and preserve compatible Storybook setup, scripts, stories, examples, lockfiles, and custom instructions rather than replacing them wholesale. Agents must prefer existing platform components such as now-card before inventing a custom card or primitive when a suitable HDS component already exists. Any HDS component used in JSX must also include the matching package import (for example import "@servicenow/now-card"), and all JSX class names must use className instead of class. If the component is instance-backed, the generated package.json should declare the platform package in optionalDependencies with version "instance".

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
scopeNameNoScope name from the project now-ui.json, such as x_snc_abc123. Read the existing manifest and pass its scopeName when available. Preserved in the manifest and converted to kebab-case for the default component tag prefix, e.g. x-snc-abc123-my-component.
componentNameNoOptional kebab-case component folder name, such as my-component. Defaults to my-component.
elementPrefixNoOptional explicit custom element prefix override. Defaults to the kebab-case scopeName, or my-scope when no scope is supplied.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv1.2.0

TDQS

A3.6/5.0
Behavior4/5

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

With no annotations, the description carries the full burden and does reasonably well: it enumerates the returned artefacts (now-ui.json stub, .storybook/main.mjs, a story, an .scss stylesheet wired via createCustomElement), the mandatory runtime shim imports, and the instance-backed optionalDependencies convention. It stops short of stating whether anything is written to disk, what the response envelope looks like, or prerequisites/failure modes, but the output content is unusually well disclosed.

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 purpose is front-loaded in the first sentence, which is good, but the remainder is an unstructured run-on block of MUST clauses that mixes scaffold-output constraints with general agent policy (prefer now-card, use className, don't hand-write createElement trees). Much of that content is relevant yet verbose and would be tighter as explicit bullets.

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?

Given no annotations and no output schema, the description is the only source of return-value information and covers the scaffold's constituent files and hard import constraints thoroughly. It is complete enough for an agent to call and use the result, with only the mechanical details of the response shape left unspecified.

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 coverage is 100% at three parameters, so the schema already documents scopeName, componentName and elementPrefix with defaults and formatting rules. The description adds no parameter-level detail beyond what the schema states, so the baseline of 3 applies.

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

Purpose4/5

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

The opening sentence states a specific verb and resource: it returns a minimal Now/Next Experience UI Framework component scaffold built on Storybook with a named addon. An agent can distinguish this from sibling tools like get_framework_guidance or validate_now_ui_manifest, though the description never explicitly names or contrasts those siblings.

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

Usage Guidelines3/5

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

There is conditional guidance about preferring the JSX scaffold for new components without an existing repo style, and about preserving existing project configuration, but these are behavioural rules for the generated output rather than explicit when-to-call-this-tool-vs-alternatives instructions. Nothing tells the agent when to reach for get_component_scaffold instead of get_framework_guidance or recommend_instance_components.

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