21st_magic_component_refiner

Redesign and improve React UI components by refining styling, layout, or responsiveness based on user input. Returns updated components and implementation instructions for precise enhancements.

Instructions

"Use this tool when the user requests to re-design/refine/improve current UI component with /ui or /21 commands, or when context is about improving, or refining UI for a React component or molecule (NOT for big pages). This tool improves UI of components and returns redesigned version of the component and instructions on how to implement it."

Input Schema

Name	Required	Description
`absolutePathToRefiningFile`	Yes	Absolute path to the file that needs to be refined
`context`	Yes	Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string.
`userMessage`	Yes	Full user's message about UI refinement

Input Schema (JSON Schema)

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "additionalProperties": false,
  "properties": {
    "absolutePathToRefiningFile": {
      "description": "Absolute path to the file that needs to be refined",
      "type": "string"
    },
    "context": {
      "description": "Extract the specific UI elements and aspects that need improvement based on user messages, code, and conversation history. Identify exactly which components (buttons, forms, modals, etc.) the user is referring to and what aspects (styling, layout, responsiveness, etc.) they want to enhance. Do not include generic improvements - focus only on what the user explicitly mentions or what can be reasonably inferred from the available context. If nothing specific is mentioned or you cannot determine what needs improvement, return an empty string.",
      "type": "string"
    },
    "userMessage": {
      "description": "Full user's message about UI refinement",
      "type": "string"
    }
  },
  "required": [
    "userMessage",
    "absolutePathToRefiningFile",
    "context"
  ],
  "type": "object"
}

21st.dev Magic AI Agent