Frontend-Design Plugin

Overview When you work with Claude Code, you often rely on MCP tools and skills to handle specialized tasks like front-end design or database management. However, a common frustration arises when the model finishes a task but leaves you wondering if it actually utilized the specific tools you requested. Understanding which tools were active is critical for debugging and ensuring your prompts trigger the right automation. This tutorial explores how to create a custom slash command to audit tool usage from your previous prompt. Prerequisites To follow along, you should have Claude Code installed and a basic understanding of how to use its terminal interface. Familiarity with the concepts of MCP (Model Context Protocol) and "skills"—which are essentially reusable tool instructions—will help you understand the output of this command. Key Libraries & Tools * Claude Code: The command-line interface and development tool from Anthropic. * Model Context Protocol (MCP): An open standard that enables AI models to connect to external tools and data sources. * Frontend-Design Plugin: An official plugin used for generating UI components and layouts. Creating the Audit Slash Command You can define custom commands globally in your configuration file. This allows you to call them at any time during a session. To create the `tools_used` command, add the following to your `user.claude.commands` file: ```json { "tools_used": "List MCP tools and Claude skills used in the last user prompt." } ``` This command works by instructing the model to review the immediate conversation history and identify which external functions were invoked. Because Claude Code treats slash commands and skills similarly under the hood, this command can effectively look back at the trace of the last execution. Practical Example: Verifying Design Skills Imagine you run a prompt to generate a new dashboard using Laravel. You expect the Frontend-Design Plugin to handle the CSS. After the task completes, simply run: ```bash /tools_used ``` The output will provide a clear breakdown of used versus unused tools. If the skill appears in the "not used" section, you know you need to adjust your prompt—perhaps by explicitly mentioning the skill name or providing clearer context for the design requirements. Syntax Notes & Best Practices Anthropic engineers have noted that slash commands and skills are practically interchangeable in the current architecture. This is why a slash command might appear as a "skill" in its own output report. To increase the likelihood of a tool being used, ensure your prompt uses keywords directly associated with that tool's definition. Keep your audit commands simple and direct to avoid polluting the context window with unnecessary verbosity.