get_quick_reference
Access a cheat sheet for component development to quickly reference specifications and guidelines while building UI components.
Instructions
Get a quick reference cheat sheet for component development
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
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();