Skip to main content
Glama
marvkr

Better Design

Prepare Icon Component Files

install-icons
Idempotent

Fetch selected SVG icons and return SSR-clean React component files for saving locally, so projects own icons without runtime CDN requests or first-paint flashes.

Instructions

Fetch SVG icons and return component file contents for the agent to save. On a local Better Design server it saves them into the project's icons folder instead; the hosted server writes no files.

Call this after find-icons to materialise the chosen icons as owned, SSR-clean component files, with no runtime CDN fetch from api.iconify.design and no first-paint flash.

The tool fetches each SVG from the public Iconify API, inlines its viewBox + body into a small <Name>Icon React component, and returns a list of <file path="...">-tagged blocks for the agent to write to disk. A barrel index.ts is also returned.

Usage after writing the files:

import { HomeIcon } from "@/components/icons";
<HomeIcon className="size-4" />

If components/icons/index.ts already exists in the project, MERGE the new exports into it rather than overwriting.

Input Schema

NameRequiredDescriptionDefault
namesYesIcon names to install. May be bare (e.g. 'home') or prefixed (e.g. 'tabler:home').
formatNoOutput format. 'tsx' (default) generates React components; 'svg' generates raw .svg files.
contextNoOptional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result.
variantNoOptional library variant (e.g. 'outline', 'filled').
libraryIdYesIcon library ID from find-icon-library (e.g. 'tabler', 'phosphor').
targetDirNoDirectory inside the project to write into. Defaults to 'components/icons'.

Schema Changelog

Changes observed during successful MCP inspections.

  1. First observedv0.1.0

TDQS

A4.6/5.0
Behavior5/5

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

Annotations declare openWorldHint=true and readOnlyHint=false, but the description adds substantive context beyond them: the external call goes to the public Iconify API, the return value is a list of `<file path="...">` blocks plus a barrel index.ts, and file writes only occur on a local server. It also explains the non-overwrite merge rule, which is exactly the kind of side-effect detail annotations cannot carry.

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

Conciseness4/5

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

The first sentence front-loads the core behavior and platform split, and the merge instruction is stated plainly. Some sentences are promotional filler ('no first-paint flash', 'SSR-clean') and the large tsx usage snippet takes space for marginal value, so it falls short of 5.

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

Completeness5/5

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

For a 6-parameter tool with no output schema, the description compensates fully by explaining the return shape (file-tagged blocks and a barrel index.ts), the external fetch source, and write behavior per deployment. An agent has everything needed to invoke and handle the result correctly.

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%, so every parameter is already documented in the schema, making 3 the baseline. The description does not add format details for names, variant, targetDir, or format beyond what the schema states; it only implies provenance of names from find-icons.

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 states a specific verb and resource ('Fetch SVG icons and return component file contents'), and it explicitly distinguishes itself from the sibling find-icons by declaring 'Call this after `find-icons`'. An agent can tell immediately what this does and where it sits in the pipeline.

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

Usage Guidelines5/5

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

It names the prerequisite tool ('after find-icons'), describes the alternative branch (local server writes to the project icons folder; hosted server writes nothing), and gives an explicit conditional instruction to MERGE exports if index.ts already exists. This is when/when-not guidance with an operational edge case covered.

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