Cre8 Plugin for Claude Code

Claude Code plugin for the Cre8 design system. Provides component intelligence for both Web Components (@tmorrow/cre8-wc) and React (@tmorrow/cre8-react).

Features

MCP Tools

The plugin registers the cre8 MCP server with these tools:

• list_components - List all components by category
• get_component - Get detailed component API (props, slots, events)
• search_components - Search components by keyword
• get_patterns - Pre-built UI patterns (login, table, layout)
• generate_code - Generate React/HTML from component schema

Skills

• cre8-a2ui - Web Components guidance (vanilla JS/HTML, Lit)
• cre8-a2ui-react - React component guidance

Installation

Option 1: Plugin Directory

# Clone or copy to your plugins directory
cp -r cre8-plugin ~/.claude/plugins/cre8

Option 2: Local Development

# Run Claude Code with plugin flag
claude --plugin-dir /path/to/cre8-plugin

Usage

Once installed, Claude Code will:

1. Auto-activate skills when you mention Cre8 components, web components, or React with Cre8
2. Provide MCP tools for component lookup and code generation

Example Prompts

# Component lookup
"Show me all Cre8 form components"
"What props does Cre8Button have?"

# Code generation
"Create a login form using Cre8 components"
"Build a data table with Cre8 React components"

# Pattern usage
"Show me the page layout pattern"

Requirements

• Node.js 18+
• npm/npx available in PATH

License

MIT