Server Configuration
Describes the environment variables required to run the server.
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Capabilities
Features and capabilities supported by this server
| Capability | Details |
|---|---|
| tools | {} |
| prompts | {} |
| resources | {} |
Tools
Functions exposed to the LLM to take actions
| Name | Description |
|---|---|
| get_token | Get detailed information about a specific design token by name |
| search_tokens | Search for design tokens by category or name pattern |
| get_token_usage_stats | Get statistics about design token usage across the system |
| get_component_info | Get detailed information about a component including its design token dependencies |
| list_components | List all available components in the design system |
| get_component_tokens | Get all design tokens used by a specific component |
| search_documentation | Search through Optics documentation |
| generate_theme | Generate a custom Optics theme with CSS variable overrides. Includes installation instructions for @rolemodel/optics via npm or CDN (jsDelivr/unpkg). Output includes complete setup guide with actual Optics token names. |
| validate_token_usage | Validate code for hard-coded values that should use design tokens |
| replace_hard_coded_values | Replace hard-coded values with design tokens |
| check_contrast | Check WCAG contrast ratio between two color tokens |
| suggest_token_migration | Suggest design tokens for a hard-coded value |
| generate_component_scaffold | Generate a React component scaffold with proper token usage |
| generate_sticker_sheet | Generate a visual style guide with color swatches and component examples |
Prompts
Interactive templates invoked by user choice
| Name | Description |
|---|---|
| create-themed-component | Generate a component styled with Optics design tokens |
| migrate-to-tokens | Convert hard-coded CSS values to Optics design tokens |
| accessible-color-combo | Suggest accessible foreground/background color token combinations |
| explain-token-system | Explain how a specific token category works in Optics |
| design-review | Review a design or component for Optics token usage and best practices |
| get-token-reference | Get complete list of all available Optics design tokens - USE THIS to prevent token name hallucination |
Resources
Contextual data attached and managed by the client
| Name | Description |
|---|---|
| ⚠️ System Overview - READ THIS FIRST | CRITICAL: Comprehensive guide to understanding the Optics token architecture. Explains the HSL-based color system, token naming patterns, and common mistakes. MUST READ before using any Optics tools. |
| Introduction to Optics | Overview of the Optics design system |
| Getting Started | How to get started with Optics |
| Design Tokens | Complete list of design tokens |
| Color System | Color palette and usage guidelines |
| Spacing System | Spacing tokens and grid system |
| Typography | Typography tokens and guidelines |
| Components | Component library overview |
| Accessibility | Accessibility guidelines |
| All Design Tokens | Complete list of all design tokens |
| Color Tokens | All color design tokens |
| Spacing Tokens | All spacing design tokens |
| Typography Tokens | All typography design tokens |
| All Components | Complete component library |