Component Documentation Prompt | Laravel Company Prompts

Refined Prompt: Component Documentation Specification for AI Coding Assistants

You are a design systems specialist creating comprehensive component specifications for an AI coding assistant documentation file (CLAUDE.md). This documentation will enable AI assistants like Claude, Cursor, and Copilot to generate consistent, accessible, and well-styled UI code across your project.

Project Context

Token System: [Provide a link or detailed description of the Phase 2 token system output]
Component Focus: Document the "Button" component
Technology Stack: Next.js + React + Tailwind CSS

Documentation Instructions

For the Button Component, Document the Following Sections:

1. Overview

Component Name: Button (PascalCase)
One-Line Description: A clickable element with text and optional iconography
Category: Interactive / Action

2. Anatomy

Required Parts:
- Container (div or button element)
- Label (text content)
Optional Parts:
- Icon (left and right)
- Loading spinner
Nesting Rules:
- Can contain only text, icons, or loading indicators
- Cannot be nested inside other buttons

3. Props Specification

Name	Type	Default	Required	Allowed Values	Description	Example
variant	`enum`	'primary'	Yes	['primary', 'secondary', 'ghost', 'link']	Sets the visual style and behavior
size	`enum`	'md'	No	['xs', 'sm', 'md', 'lg', 'xl']	Determines the button's dimensions
icon	`ReactNode`	None	No	-	Optional icon to the left or right of the label	<Button icon={} variant="ghost">Like
disabled	`boolean`	false	No	-	Prevents user interaction and changes appearance
loading	`boolean`	false	No	-	Disables the button and displays a loading indicator

4. Visual Variants

Size Variants:
- xs: padding-x: 4, padding-y: 2, font-size: 12
- sm: padding-x: 6, padding-y: 3, font-size: 14
- md (default): padding-x: 8, padding-y: 4, font-size: 16
- lg: padding-x: 10, padding-y: 5, font-size: 18
- xl: padding-x: 12, padding-y: 6, font-size: 20
Color Variants:
- primary (blue): button-bg-${variant} â color-brand-${shade}, button-text-${variant} â color-white
- secondary (gray): button-bg-${variant} â color-neutral-${shade}, button-text-${variant} â color-neutral-${contrast-shade}
State Variants:
- hover: background â button-bg-${variant}-hover, border â button-border-${variant}-hover
- active: background â button-bg-${variant}-active
- focus: border â button-border-${variant}-focus, box-shadow â button-shadow-focus

5. Token Consumption Map

Button Container:
- background â button-bg-${variant} â color-brand-${shade} (primary) / color-neutral-${shade} (secondary)
- text-color â button-text-${variant} â color-white (primary) / color-neutral-${contrast-shade} (secondary)
- padding-x â button-padding-x-${size} â spacing-{n}
- padding-y â button-padding-y-${size} â spacing-{n}
- border-radius â button-radius â radius-md
- font-size â button-font-${size} â font-size-{n}
- font-weight â button-font-weight â font-weight-semibold
- transition â motion-duration-fast + motion-ease-default
Button Icon:
- color â button-icon-${variant} â color-neutral-${shade}
- size â button-icon-${size} â {n} (font-size)

6. Usage Guidelines

When to Use:
- As the primary call-to-action within a section
- To trigger actions, transitions, or other interactions
- For navigation between views or screens
When NOT to Use:
- As the only navigation option within a complex interface
- For frequent or repetitive actions that deserve shortcuts
Content Guidelines:
- Label length should be short (max 3 words)
- Use title case for consistency
- Avoid using icons alone without text

7. Accessibility

ARIA Attributes:
- type="button" or type="submit" based on usage
- disabled attribute for disabled state
Keyboard Interaction:
- Space and Enter keys trigger onClick
- Arrow keys (with focus) cycle through sibling buttons
Focus Management:
- Tab order follows the document structure
- Focus styles are distinct from hover styles
Screen Reader Behavior:
- Label is read aloud before the button's content
- Disabled state is announced as "disabled button"

8. Code Example

import { Button } from '@components/Button';

// Usage
<Button variant="primary" onClick={handleClick}>
  Primary Button
</Button>

// With icon
<Button variant="ghost" icon={<HeartIcon />}>
  Like
</Button>

// Disabled
<Button disabled>Disabled</Button>

Output Format

Markdown format with headers for each section. The output will be directly integrated into the CLAUDE.md file, serving as a reference for AI coding assistants.

Ensure the documentation is clear, concise, and adheres to the project's coding standards. Maintain a consistent naming convention and use the actual token names from your project's design system.