mozaic-mcp-server 1.0.2 → 1.1.0

package/skills/mozaic-css-utilities/skill.md

@@ -1,7 +1,9 @@
 ---
 name: mozaic-css-utilities
 description: Mozaic CSS utility classes and layout systems expert. Master Flexy grid, Container, Margin, Padding, Ratio, and Scroll utilities for responsive layouts without writing custom CSS.
-version: 1.0.0
+version: 2.0.0
+allowed-tools:
+  - Bash
 ---
 
 # Mozaic CSS Utilities
@@ -17,12 +19,13 @@ An expert assistant for working with Mozaic CSS-only utility classes. These util
 5. **Aspect Ratios**: Maintain element ratios with Ratio utility
 6. **Scroll Behavior**: Control scrolling with Scroll utility
 
-## MCP Tools Used
+## Shell Scripts Used
 
-This skill uses the Mozaic MCP server tools:
-- `mcp__mozaic__list_css_utilities` - Browse utilities by category
-- `mcp__mozaic__get_css_utility` - Get detailed utility class documentation
-- `mcp__mozaic__search_documentation` - Search for utility usage examples
+This skill uses shell scripts to query the local Mozaic database:
+- `list-utilities.sh` - Browse CSS utilities by category (layout, utility, all)
+- `get-utility.sh` - Get detailed utility class documentation with examples
+
+Database location: `~/.claude/mozaic.db`
 
 ## When to Use This Skill
 
@@ -67,7 +70,7 @@ Options:
 
 ### Step 2: Get Utility Details
 
-I'll use `mcp__mozaic__list_css_utilities` and `mcp__mozaic__get_css_utility` to show:
+I'll use the `list-utilities.sh` and `get-utility.sh` scripts to show:
 - Available CSS classes
 - Responsive modifiers
 - Usage examples
@@ -599,7 +602,7 @@ Do you want:
 **Skill**:
 Perfect! Here's your responsive product grid:
 
-[Uses `mcp__mozaic__get_css_utility` for Flexy]
+[Uses `get-utility.sh flexy` script]
 
 ```html
 <div class="container">

package/skills/mozaic-design-tokens/scripts/get-tokens.sh

@@ -0,0 +1,77 @@
+#!/bin/bash
+# Get design tokens by category and format
+# Usage: ./get-tokens.sh <category> [format]
+# Categories: colors, typography, spacing, shadows, borders, screens, grid, all
+# Formats: json (default), scss, css, js
+
+CATEGORY="$1"
+FORMAT="${2:-json}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$CATEGORY" ]; then
+  echo "Error: Category required"
+  echo "Usage: $0 <colors|typography|spacing|shadows|borders|screens|grid|all> [json|scss|css|js]"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Query tokens by category
+if [ "$CATEGORY" = "all" ]; then
+  TOKENS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  category,
+  name,
+  value_raw as value,
+  description
+FROM tokens
+ORDER BY category, name;
+EOF
+)
+else
+  TOKENS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  category,
+  name,
+  value_raw as value,
+  description
+FROM tokens
+WHERE category = '$CATEGORY'
+ORDER BY name;
+EOF
+)
+fi
+
+# Convert to requested format
+case "$FORMAT" in
+  json)
+    echo "$TOKENS"
+    ;;
+
+  scss)
+    echo "$TOKENS" | jq -r '.[] | "$\(.name): \(.value);"'
+    ;;
+
+  css)
+    echo ":root {"
+    echo "$TOKENS" | jq -r '.[] | "  --\(.name): \(.value);"'
+    echo "}"
+    ;;
+
+  js)
+    echo "export const tokens = {"
+    echo "$TOKENS" | jq -r 'group_by(.category) | .[] | "  \(.[0].category): {" + ([.[] | "    \"\(.name)\": \"\(.value)\""] | join(",\n")) + "\n  },"'
+    echo "};"
+    ;;
+
+  *)
+    echo "Error: Invalid format. Use json, scss, css, or js"
+    exit 1
+    ;;
+esac

package/skills/mozaic-design-tokens/scripts/search-docs.sh

@@ -0,0 +1,40 @@
+#!/bin/bash
+# Search Mozaic documentation for styling guidance
+# Usage: ./search-docs.sh <query> [limit]
+
+QUERY="$1"
+LIMIT="${2:-5}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$QUERY" ]; then
+  echo "Error: Search query required"
+  echo "Usage: $0 <query> [limit]"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Search documentation entries
+sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  title,
+  content,
+  category,
+  url
+FROM documentation
+WHERE title LIKE '%$QUERY%'
+   OR content LIKE '%$QUERY%'
+   OR category LIKE '%$QUERY%'
+ORDER BY
+  CASE
+    WHEN title LIKE '%$QUERY%' THEN 1
+    WHEN category LIKE '%$QUERY%' THEN 2
+    ELSE 3
+  END
+LIMIT $LIMIT;
+EOF

package/skills/mozaic-design-tokens/skill.md

@@ -1,7 +1,9 @@
 ---
 name: mozaic-design-tokens
 description: Mozaic Design System tokens and styling expert. Access design tokens (colors, typography, spacing, shadows, borders, breakpoints, grid) in multiple formats (JSON, SCSS, CSS, JS) and search documentation for styling guidance.
-version: 1.0.0
+version: 2.0.0
+allowed-tools:
+  - Bash
 ---
 
 # Mozaic Design Tokens
@@ -16,11 +18,13 @@ An expert assistant for working with Mozaic Design System tokens and styling. Th
 4. **Responsive Design**: Work with breakpoints and responsive patterns
 5. **Consistent Styling**: Ensure design system consistency across your app
 
-## MCP Tools Used
+## Shell Scripts Used
 
-This skill uses the Mozaic MCP server tools:
-- `mcp__mozaic__get_design_tokens` - Get design tokens by category and format
-- `mcp__mozaic__search_documentation` - Search Mozaic documentation for styling info
+This skill uses shell scripts to query the local Mozaic database:
+- `get-tokens.sh` - Get design tokens by category and format (JSON, SCSS, CSS, JS)
+- `search-docs.sh` - Search Mozaic documentation for styling guidance
+
+Database location: `~/.claude/mozaic.db`
 
 ## When to Use This Skill
 
@@ -105,7 +109,7 @@ Options:
 
 ### Step 3: Browse and Select
 
-I'll use `mcp__mozaic__get_design_tokens` to show available tokens.
+I'll use the `get-tokens.sh` script to show available tokens.
 
 **Example - Colors in SCSS format**:
 ```scss
@@ -155,7 +159,7 @@ I'll provide examples for your chosen format:
 **User**: "What are the brand colors?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "colors"
+1. Use `get-tokens.sh colors json` to retrieve color tokens
 2. Show brand color palette
 3. Provide usage examples
 4. Suggest semantic color alternatives
@@ -179,7 +183,7 @@ I'll provide examples for your chosen format:
 **User**: "What font sizes should I use?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "typography"
+1. Use `get-tokens.sh typography scss` to retrieve typography tokens
 2. Show type scale with line heights
 3. Provide semantic naming (heading, body, caption)
 4. Show usage examples
@@ -205,7 +209,7 @@ $line-height-relaxed: 1.75;
 **User**: "How do I use consistent spacing?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "spacing"
+1. Use `get-tokens.sh spacing css` to retrieve spacing tokens
 2. Explain magic unit system (4px base)
 3. Show spacing scale
 4. Provide component examples
@@ -234,7 +238,7 @@ $line-height-relaxed: 1.75;
 **User**: "What are the responsive breakpoints?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "screens"
+1. Use `get-tokens.sh screens scss` to retrieve breakpoint tokens
 2. Show breakpoint values
 3. Provide media query examples
 4. Suggest mobile-first approach
@@ -264,7 +268,7 @@ $screen-2xl: 1920px; // Wide desktop
 **User**: "How do I add elevation to a card?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "shadows"
+1. Use `get-tokens.sh shadows css` to retrieve shadow tokens
 2. Show elevation levels
 3. Explain when to use each level
 4. Provide component examples
@@ -296,7 +300,7 @@ $screen-2xl: 1920px; // Wide desktop
 **User**: "How does the grid system work?"
 
 **Workflow**:
-1. Use `mcp__mozaic__get_design_tokens` with category: "grid"
+1. Use `get-tokens.sh grid scss` to retrieve grid tokens
 2. Show grid configuration
 3. Explain gutter system
 4. Provide layout examples
@@ -508,7 +512,7 @@ export const tokens = {
 
 ## Documentation Search
 
-Use `mcp__mozaic__search_documentation` to find:
+Use the `search-docs.sh` script to find:
 - Color usage guidelines
 - Typography best practices
 - Spacing system rules
@@ -566,7 +570,7 @@ Perfect! What format do you prefer?
 **User**: "A - CSS"
 
 **Skill**:
-[Uses `mcp__mozaic__get_design_tokens` for colors, spacing, shadows]
+[Uses `get-tokens.sh` script for colors, spacing, shadows]
 
 Here are the tokens for your card component:
 

package/skills/mozaic-icons/scripts/get-icon.sh

@@ -0,0 +1,110 @@
+#!/bin/bash
+# Get specific icon with SVG markup and framework code
+# Usage: ./get-icon.sh <icon-name> [format]
+# Formats: svg, react, vue, all (default)
+
+ICON_NAME="$1"
+FORMAT="${2:-all}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$ICON_NAME" ]; then
+  echo "Error: Icon name required"
+  echo "Usage: $0 <icon-name> [svg|react|vue|all]"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Get icon info
+ICON_INFO=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  icon_name,
+  type,
+  size,
+  view_box,
+  paths
+FROM icons
+WHERE name = '$ICON_NAME'
+LIMIT 1;
+EOF
+)
+
+if [ "$ICON_INFO" = "[]" ]; then
+  echo "Error: Icon '$ICON_NAME' not found"
+  exit 1
+fi
+
+# Extract icon details
+VIEW_BOX=$(echo "$ICON_INFO" | jq -r '.[0].view_box')
+PATHS=$(echo "$ICON_INFO" | jq -r '.[0].paths')
+ICON_SIZE=$(echo "$ICON_INFO" | jq -r '.[0].size')
+
+# Generate code based on format
+case "$FORMAT" in
+  svg)
+    cat <<EOF
+{
+  "icon": $ICON_INFO,
+  "viewBox": "$VIEW_BOX",
+  "size": $ICON_SIZE,
+  "paths": $PATHS
+}
+EOF
+    ;;
+
+  react)
+    cat <<EOF
+{
+  "icon": $ICON_INFO,
+  "import": "import { Icon$ICON_NAME } from '@mozaic-ds/icons/react'",
+  "usage": "<Icon$ICON_NAME />",
+  "withProps": "<Icon$ICON_NAME size={32} color=\"currentColor\" aria-label=\"Icon description\" />",
+  "viewBox": "$VIEW_BOX"
+}
+EOF
+    ;;
+
+  vue)
+    cat <<EOF
+{
+  "icon": $ICON_INFO,
+  "import": "import { Icon$ICON_NAME } from '@mozaic-ds/icons/vue'",
+  "usage": "<Icon$ICON_NAME />",
+  "withProps": "<Icon$ICON_NAME :size=\"32\" color=\"currentColor\" aria-label=\"Icon description\" />",
+  "viewBox": "$VIEW_BOX"
+}
+EOF
+    ;;
+
+  all)
+    cat <<EOF
+{
+  "icon": $ICON_INFO,
+  "viewBox": "$VIEW_BOX",
+  "size": $ICON_SIZE,
+  "paths": $PATHS,
+  "react": {
+    "import": "import { Icon$ICON_NAME } from '@mozaic-ds/icons/react'",
+    "usage": "<Icon$ICON_NAME />",
+    "withProps": "<Icon$ICON_NAME size={32} color=\"currentColor\" aria-label=\"Icon description\" />"
+  },
+  "vue": {
+    "import": "import { Icon$ICON_NAME } from '@mozaic-ds/icons/vue'",
+    "usage": "<Icon$ICON_NAME />",
+    "withProps": "<Icon$ICON_NAME :size=\"32\" color=\"currentColor\" aria-label=\"Icon description\" />"
+  }
+}
+EOF
+    ;;
+
+  *)
+    echo "Error: Invalid format. Use svg, react, vue, or all"
+    exit 1
+    ;;
+esac

package/skills/mozaic-icons/scripts/search-icons.sh

@@ -0,0 +1,54 @@
+#!/bin/bash
+# Search Mozaic icons by name, type, or size
+# Usage: ./search-icons.sh <query> [type] [size] [limit]
+
+QUERY="$1"
+TYPE="$2"
+SIZE="$3"
+LIMIT="${4:-20}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$QUERY" ]; then
+  echo "Error: Search query required"
+  echo "Usage: $0 <query> [type] [size] [limit]"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Build WHERE clause
+WHERE_CLAUSE="name LIKE '%$QUERY%'"
+
+if [ -n "$TYPE" ]; then
+  WHERE_CLAUSE="$WHERE_CLAUSE AND type = '$TYPE'"
+fi
+
+if [ -n "$SIZE" ]; then
+  WHERE_CLAUSE="$WHERE_CLAUSE AND size = $SIZE"
+fi
+
+# Search icons
+sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  icon_name,
+  type,
+  size,
+  view_box
+FROM icons
+WHERE $WHERE_CLAUSE
+ORDER BY
+  CASE
+    WHEN name LIKE '$QUERY%' THEN 1
+    WHEN name LIKE '%$QUERY' THEN 2
+    ELSE 3
+  END,
+  type,
+  size
+LIMIT $LIMIT;
+EOF

package/skills/mozaic-icons/skill.md

@@ -1,7 +1,9 @@
 ---
 name: mozaic-icons
 description: Mozaic icon search and integration for Vue & React. Search icons by name or type, view multiple sizes (16, 24, 32, 48, 64), and generate framework-specific code with proper imports.
-version: 1.0.0
+version: 2.0.0
+allowed-tools:
+  - Bash
 ---
 
 # Mozaic Icons
@@ -17,11 +19,13 @@ An expert assistant for discovering and integrating Mozaic Design System icons.
 5. **Generate Code**: Create framework-specific code (Vue or React) with proper imports
 6. **Get SVG**: Access raw SVG markup for custom usage
 
-## MCP Tools Used
+## Shell Scripts Used
 
-This skill uses the Mozaic MCP server tools:
-- `mcp__mozaic__search_icons` - Search icons by name, type, or size
-- `mcp__mozaic__get_icon` - Get specific icon with SVG and framework code
+This skill uses shell scripts to query the local Mozaic database:
+- `search-icons.sh` - Search icons by name, type, or size (1,473 icons)
+- `get-icon.sh` - Get specific icon with SVG and framework code (Vue/React)
+
+Database location: `~/.claude/mozaic.db`
 
 ## When to Use This Skill
 
@@ -113,7 +117,7 @@ You can describe:
 
 ### Step 2: Search and Filter
 
-I'll use `mcp__mozaic__search_icons` with optional filters:
+I'll use the `search-icons.sh` script with optional filters:
 
 **Filters**:
 - By name/keyword
@@ -162,7 +166,7 @@ You choose:
 
 ### Step 5: Generate Code
 
-I'll use `mcp__mozaic__get_icon` to provide:
+I'll use the `get-icon.sh` script to provide:
 - Import statements
 - Component usage
 - Props and customization
@@ -563,7 +567,7 @@ This skill works well with:
 **Skill**:
 I'll help you find a shopping cart icon!
 
-[Uses `mcp__mozaic__search_icons` with query="cart"]
+[Uses `search-icons.sh cart` script]
 
 Found 3 shopping cart icons:
 
@@ -592,7 +596,7 @@ Perfect! Which framework?
 **User**: "B - React"
 
 **Skill**:
-[Uses `mcp__mozaic__get_icon` for Cart24 in React format]
+[Uses `get-icon.sh Cart24 react` script]
 
 Here's your shopping cart button with icon:
 

package/skills/mozaic-react-builder/scripts/generate-component.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+# Generate React/TSX component code
+# Usage: ./generate-component.sh <component-name> [props-json]
+
+COMPONENT_NAME="$1"
+PROPS_JSON="${2:-{}}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "Error: Component name required"
+  echo "Usage: $0 <component-name> [props-json]"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Get component template
+TEMPLATE=$(sqlite3 "$DB_PATH" <<EOF
+.mode list
+SELECT template FROM components
+WHERE name = '$COMPONENT_NAME'
+  AND frameworks LIKE '%react%'
+LIMIT 1;
+EOF
+)
+
+if [ -z "$TEMPLATE" ]; then
+  echo "Error: Component '$COMPONENT_NAME' not found or has no template"
+  exit 1
+fi
+
+# For now, return the basic template
+# In a full implementation, this would merge props-json with the template
+cat <<EOF
+{
+  "component": "$COMPONENT_NAME",
+  "framework": "react",
+  "code": $(echo "$TEMPLATE" | jq -Rs .),
+  "import": "import { ${COMPONENT_NAME} } from '@mozaic-ds/react'",
+  "cssImport": "import '@mozaic-ds/react/dist/styles.css'"
+}
+EOF

package/skills/mozaic-react-builder/scripts/get-component.sh

@@ -0,0 +1,96 @@
+#!/bin/bash
+# Get detailed information about a React component
+# Usage: ./get-component.sh <component-name>
+
+COMPONENT_NAME="$1"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "Error: Component name required"
+  echo "Usage: $0 <component-name>"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx mozaic-mcp-server install"
+  exit 1
+fi
+
+# Get component basic info
+COMPONENT_INFO=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT * FROM components
+WHERE name = '$COMPONENT_NAME'
+  AND frameworks LIKE '%react%'
+LIMIT 1;
+EOF
+)
+
+if [ "$COMPONENT_INFO" = "[]" ]; then
+  echo "Error: Component '$COMPONENT_NAME' not found"
+  exit 1
+fi
+
+# Get component props
+PROPS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  type,
+  default_value,
+  required,
+  description
+FROM component_props
+WHERE component_id = (
+  SELECT id FROM components
+  WHERE name = '$COMPONENT_NAME'
+    AND frameworks LIKE '%react%'
+)
+ORDER BY required DESC, name;
+EOF
+)
+
+# Get component events
+EVENTS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  payload,
+  description
+FROM component_events
+WHERE component_id = (
+  SELECT id FROM components
+  WHERE name = '$COMPONENT_NAME'
+    AND frameworks LIKE '%react%'
+)
+ORDER BY name;
+EOF
+)
+
+# Get component examples
+EXAMPLES=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  title,
+  code,
+  description
+FROM component_examples
+WHERE component_id = (
+  SELECT id FROM components
+  WHERE name = '$COMPONENT_NAME'
+    AND frameworks LIKE '%react%'
+)
+ORDER BY id;
+EOF
+)
+
+# Combine all information into a single JSON output
+cat <<EOF
+{
+  "component": $COMPONENT_INFO,
+  "props": $PROPS,
+  "events": $EVENTS,
+  "examples": $EXAMPLES
+}
+EOF