Components Build MCP

Instructions

Implementation Reference

• src/tools/index.ts:550-614 (handler)

  The handler function that returns a hardcoded quick reference cheat sheet covering component structure, naming conventions, className order, data attributes, accessibility requirements, and a pre-ship checklist.

  function handleGetQuickReference(): ToolResult {
    const text = `# Component Rules Quick Reference
  
  ## Component Structure
  \`\`\`tsx
  export type ComponentProps = React.ComponentProps<'element'> & {
    variant?: 'default' | 'secondary';
  };
  
  export const Component = ({ className, variant, ...props }: ComponentProps) => (
    <element
      data-slot="component-name"
      data-state={state}
      className={cn(variants({ variant }), className)}
      {...props}
    />
  );
  \`\`\`
  
  ## Naming Conventions
  | Sub-Component | Use For |
  |---------------|---------|
  | Root | Main container with context |
  | Trigger | Opens/toggles something |
  | Content | Main content area |
  | Item | Individual item wrapper |
  | Header/Footer | Top/bottom sections |
  | Title/Description | Text elements |
  
  ## Class Order (IMPORTANT)
  \`\`\`tsx
  className={cn(
    'base-styles',           // 1. Base
    variantStyles,           // 2. Variants
    isActive && 'active',    // 3. Conditionals
    className                // 4. User overrides LAST
  )}
  \`\`\`
  
  ## Data Attributes
  - \`data-slot="button"\` - Component identification
  - \`data-state="open"\` - Visual state
  - \`data-variant={variant}\` - Current variant
  
  ## Accessibility Must-Haves
  - Button type: \`<button type="button">\`
  - Icon buttons: \`aria-label="Description"\`
  - Expandable: \`aria-expanded={isOpen} aria-controls="id"\`
  - Interactive divs: \`role="button" tabIndex={0} onKeyDown\`
  
  ## Pre-Ship Checklist
  - [ ] Extends React.ComponentProps
  - [ ] Exports types
  - [ ] {...props} spread LAST
  - [ ] Uses cn() utility
  - [ ] Has data-slot
  - [ ] Keyboard accessible
  - [ ] ARIA attributes
  - [ ] Design tokens (no hardcoded colors)
  `;
  
    return {
      content: [{ type: 'text', text }],
    };
  }

• src/tools/index.ts:182-189 (registration)

  Registration of the 'get_quick_reference' tool in the getToolDefinitions() array, including its name, description, and input schema (no required parameters).

  {
    name: 'get_quick_reference',
    description: 'Get a quick reference cheat sheet for component development',
    inputSchema: {
      type: 'object',
      properties: {},
    },
  },

• src/tools/index.ts:251-252 (registration)

  Dispatch case in the executeTool switch statement that routes calls to the handleGetQuickReference handler.

  case 'get_quick_reference':
    return handleGetQuickReference();