mozaic-mcp-server 1.0.2 → 1.1.0

package/skills/mozaic-react-builder/scripts/get-install-info.sh

@@ -0,0 +1,83 @@
+#!/bin/bash
+# Get installation information for a React component
+# Usage: ./get-install-info.sh <component-name> [package-manager]
+
+COMPONENT_NAME="$1"
+PACKAGE_MANAGER="${2:-pnpm}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "Error: Component name required"
+  echo "Usage: $0 <component-name> [npm|yarn|pnpm]"
+  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
+
+# Verify component exists
+COMPONENT_EXISTS=$(sqlite3 "$DB_PATH" "SELECT COUNT(*) FROM components WHERE name = '$COMPONENT_NAME' AND frameworks LIKE '%react%'")
+
+if [ "$COMPONENT_EXISTS" = "0" ]; then
+  echo "Error: Component '$COMPONENT_NAME' not found"
+  exit 1
+fi
+
+# Generate installation command based on package manager
+case "$PACKAGE_MANAGER" in
+  npm)
+    INSTALL_CMD="npm install @mozaic-ds/react"
+    INSTALL_PEER="npm install react@^18.0.0 react-dom@^18.0.0"
+    INSTALL_DEV="npm install -D typescript @types/react @types/react-dom"
+    ;;
+  yarn)
+    INSTALL_CMD="yarn add @mozaic-ds/react"
+    INSTALL_PEER="yarn add react@^18.0.0 react-dom@^18.0.0"
+    INSTALL_DEV="yarn add -D typescript @types/react @types/react-dom"
+    ;;
+  pnpm)
+    INSTALL_CMD="pnpm add @mozaic-ds/react"
+    INSTALL_PEER="pnpm add react@^18.0.0 react-dom@^18.0.0"
+    INSTALL_DEV="pnpm add -D typescript @types/react @types/react-dom"
+    ;;
+  *)
+    echo "Error: Invalid package manager. Use npm, yarn, or pnpm"
+    exit 1
+    ;;
+esac
+
+# Output installation info as JSON
+cat <<EOF
+{
+  "component": "$COMPONENT_NAME",
+  "framework": "react",
+  "packageManager": "$PACKAGE_MANAGER",
+  "package": "@mozaic-ds/react",
+  "installCommand": "$INSTALL_CMD",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "installPeerCommand": "$INSTALL_PEER",
+  "devDependencies": {
+    "typescript": "latest",
+    "@types/react": "latest",
+    "@types/react-dom": "latest"
+  },
+  "installDevCommand": "$INSTALL_DEV",
+  "imports": {
+    "component": "import { ${COMPONENT_NAME} } from '@mozaic-ds/react'",
+    "styles": "import '@mozaic-ds/react/dist/styles.css'"
+  },
+  "tsconfig": {
+    "compilerOptions": {
+      "jsx": "react-jsx",
+      "esModuleInterop": true,
+      "strict": true
+    }
+  }
+}
+EOF

package/skills/mozaic-react-builder/scripts/list-components.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+# List React components by category
+# Usage: ./list-components.sh [category]
+# Categories: form, navigation, feedback, layout, data-display, action, all (default)
+
+CATEGORY="${1:-all}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+# Check if database exists
+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 components by category
+if [ "$CATEGORY" = "all" ]; then
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  category,
+  description,
+  frameworks
+FROM components
+WHERE frameworks LIKE '%react%'
+ORDER BY category, name;
+EOF
+else
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  category,
+  description,
+  frameworks
+FROM components
+WHERE frameworks LIKE '%react%'
+  AND category = '$CATEGORY'
+ORDER BY name;
+EOF
+fi

package/skills/mozaic-react-builder/skill.md

@@ -1,7 +1,9 @@
 ---
 name: mozaic-react-builder
 description: Interactive React/TSX component generator with Mozaic Design System. Helps discover, configure, and generate production-ready React components with TypeScript support, proper imports, and installation guidance.
-version: 1.0.0
+version: 2.0.0
+allowed-tools:
+  - Bash
 ---
 
 # Mozaic React Builder
@@ -16,13 +18,15 @@ An interactive assistant for building React applications with the Mozaic Design
 4. **Installation Guidance**: Provide package manager commands and setup instructions
 5. **Props Configuration**: Help configure component props with full type safety
 
-## MCP Tools Used
+## Shell Scripts Used
 
-This skill uses the Mozaic MCP server tools:
-- `mcp__mozaic__list_components` - Browse available components by category
-- `mcp__mozaic__get_component_info` - Get detailed component information (props, events, types)
-- `mcp__mozaic__generate_react_component` - Generate React/TSX component code
-- `mcp__mozaic__get_install_info` - Get installation commands and imports
+This skill uses shell scripts to query the local Mozaic database:
+- `list-components.sh` - Browse available React components by category
+- `get-component.sh` - Get detailed component information (props, events, TypeScript types)
+- `generate-component.sh` - Generate React/TSX component code
+- `get-install-info.sh` - Get installation commands and imports
+
+Database location: `~/.claude/mozaic.db`
 
 ## When to Use This Skill
 
@@ -53,7 +57,7 @@ Common options:
 
 ### Step 2: Browse Available Components
 
-Based on your answer, I'll use `mcp__mozaic__list_components` to show relevant components.
+Based on your answer, I'll use the `list-components.sh` script to show relevant components.
 
 **Example**:
 ```
@@ -68,7 +72,7 @@ For forms, Mozaic offers:
 
 ### Step 3: Component Details
 
-I'll use `mcp__mozaic__get_component_info` to show:
+I'll use the `get-component.sh` script to show:
 - Available props with TypeScript types and defaults
 - Events and callbacks
 - Component examples
@@ -192,7 +196,7 @@ You can:
 
 ### Step 6: Generate Final Code
 
-I'll use `mcp__mozaic__generate_react_component` to create complete code:
+I'll use the `generate-component.sh` script to create complete code:
 
 ```tsx
 import { useState, FormEvent } from 'react';
@@ -276,7 +280,7 @@ export function LoginForm() {
 
 ### Step 7: Installation Guidance
 
-I'll use `mcp__mozaic__get_install_info` to provide:
+I'll use the `get-install-info.sh` script to provide:
 
 **Package Manager Choice**:
 - npm
@@ -544,9 +548,9 @@ function useFormState<T>(initialValues: T) {
 ### Issue: TypeScript errors with props
 
 **Solution**: Check prop types
-```tsx
-// Use mcp__mozaic__get_component_info to verify prop types
-// Ensure you're using the correct interface
+```bash
+# Use get-component.sh to verify prop types
+./scripts/get-component.sh TextInput
 ```
 
 ### Issue: Styles not applying
@@ -608,7 +612,7 @@ What fields do you need?
 **Skill**:
 Perfect! Here's a registration form with extended fields and TypeScript:
 
-[Uses `mcp__mozaic__list_components` and `mcp__mozaic__get_component_info`]
+[Uses `list-components.sh` and `get-component.sh` scripts]
 
 **Proposed Components**:
 1. TextInput (Name)
@@ -631,7 +635,7 @@ interface RegistrationData {
 }
 ```
 
-[Uses `mcp__mozaic__generate_react_component`]
+[Uses `generate-component.sh` script]
 
 Here's your complete registration form with TypeScript... [Generated code]
 
@@ -643,7 +647,7 @@ Would you like me to:
 **User**: "Add installation instructions"
 
 **Skill**:
-[Uses `mcp__mozaic__get_install_info`]
+[Uses `get-install-info.sh` script]
 
 Here's how to install and set up...
 

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

@@ -0,0 +1,46 @@
+#!/bin/bash
+# Generate Vue 3 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 '%vue%'
+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": "vue",
+  "code": $(echo "$TEMPLATE" | jq -Rs .),
+  "import": "import { M${COMPONENT_NAME} } from '@mozaic-ds/vue-3'",
+  "cssImport": "import '@mozaic-ds/vue-3/dist/style.css'"
+}
+EOF

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

@@ -0,0 +1,113 @@
+#!/bin/bash
+# Get detailed information about a Vue 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 '%vue%'
+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 '%vue%'
+)
+ORDER BY required DESC, name;
+EOF
+)
+
+# Get component slots
+SLOTS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  description
+FROM component_slots
+WHERE component_id = (
+  SELECT id FROM components
+  WHERE name = '$COMPONENT_NAME'
+    AND frameworks LIKE '%vue%'
+)
+ORDER BY 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 '%vue%'
+)
+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 '%vue%'
+)
+ORDER BY id;
+EOF
+)
+
+# Combine all information into a single JSON output
+cat <<EOF
+{
+  "component": $COMPONENT_INFO,
+  "props": $PROPS,
+  "slots": $SLOTS,
+  "events": $EVENTS,
+  "examples": $EXAMPLES
+}
+EOF

package/skills/mozaic-vue-builder/scripts/get-install-info.sh

@@ -0,0 +1,70 @@
+#!/bin/bash
+# Get installation information for a Vue component
+# Usage: ./get-install-info.sh <component-name> [package-manager]
+
+COMPONENT_NAME="$1"
+PACKAGE_MANAGER="${2:-pnpm}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "Error: Component name required"
+  echo "Usage: $0 <component-name> [npm|yarn|pnpm]"
+  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
+
+# Verify component exists
+COMPONENT_EXISTS=$(sqlite3 "$DB_PATH" "SELECT COUNT(*) FROM components WHERE name = '$COMPONENT_NAME' AND frameworks LIKE '%vue%'")
+
+if [ "$COMPONENT_EXISTS" = "0" ]; then
+  echo "Error: Component '$COMPONENT_NAME' not found"
+  exit 1
+fi
+
+# Generate installation command based on package manager
+case "$PACKAGE_MANAGER" in
+  npm)
+    INSTALL_CMD="npm install @mozaic-ds/vue-3"
+    INSTALL_PEER="npm install vue@^3.3.0"
+    ;;
+  yarn)
+    INSTALL_CMD="yarn add @mozaic-ds/vue-3"
+    INSTALL_PEER="yarn add vue@^3.3.0"
+    ;;
+  pnpm)
+    INSTALL_CMD="pnpm add @mozaic-ds/vue-3"
+    INSTALL_PEER="pnpm add vue@^3.3.0"
+    ;;
+  *)
+    echo "Error: Invalid package manager. Use npm, yarn, or pnpm"
+    exit 1
+    ;;
+esac
+
+# Output installation info as JSON
+cat <<EOF
+{
+  "component": "$COMPONENT_NAME",
+  "framework": "vue",
+  "packageManager": "$PACKAGE_MANAGER",
+  "package": "@mozaic-ds/vue-3",
+  "installCommand": "$INSTALL_CMD",
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "installPeerCommand": "$INSTALL_PEER",
+  "imports": {
+    "component": "import { M${COMPONENT_NAME} } from '@mozaic-ds/vue-3'",
+    "styles": "import '@mozaic-ds/vue-3/dist/style.css'"
+  },
+  "quickStart": {
+    "globalRegistration": "import { createApp } from 'vue'\\nimport MozaicVue from '@mozaic-ds/vue-3'\\n\\nconst app = createApp(App)\\napp.use(MozaicVue)",
+    "componentRegistration": "import { M${COMPONENT_NAME} } from '@mozaic-ds/vue-3'\\nimport '@mozaic-ds/vue-3/dist/style.css'"
+  }
+}
+EOF

package/skills/mozaic-vue-builder/scripts/list-components.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+# List Vue components by category
+# Usage: ./list-components.sh [category]
+# Categories: form, navigation, feedback, layout, data-display, action, all (default)
+
+CATEGORY="${1:-all}"
+DB_PATH="${HOME}/.claude/mozaic.db"
+
+# Check if database exists
+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 components by category
+if [ "$CATEGORY" = "all" ]; then
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  category,
+  description,
+  frameworks
+FROM components
+WHERE frameworks LIKE '%vue%'
+ORDER BY category, name;
+EOF
+else
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  category,
+  description,
+  frameworks
+FROM components
+WHERE frameworks LIKE '%vue%'
+  AND category = '$CATEGORY'
+ORDER BY name;
+EOF
+fi

package/skills/mozaic-vue-builder/skill.md

@@ -1,7 +1,9 @@
 ---
 name: mozaic-vue-builder
 description: Interactive Vue 3 component generator with Mozaic Design System. Helps discover, configure, and generate production-ready Vue components with proper imports and installation guidance.
-version: 1.0.0
+version: 2.0.0
+allowed-tools:
+  - Bash
 ---
 
 # Mozaic Vue Builder
@@ -16,13 +18,15 @@ An interactive assistant for building Vue 3 applications with the Mozaic Design
 4. **Installation Guidance**: Provide package manager commands and setup instructions
 5. **Props Configuration**: Help configure component props with type safety
 
-## MCP Tools Used
+## Shell Scripts Used
 
-This skill uses the Mozaic MCP server tools:
-- `mcp__mozaic__list_components` - Browse available components by category
-- `mcp__mozaic__get_component_info` - Get detailed component information (props, slots, events)
-- `mcp__mozaic__generate_vue_component` - Generate Vue 3 component code
-- `mcp__mozaic__get_install_info` - Get installation commands and imports
+This skill uses shell scripts to query the local Mozaic database:
+- `list-components.sh` - Browse available Vue components by category
+- `get-component.sh` - Get detailed component information (props, slots, events)
+- `generate-component.sh` - Generate Vue 3 component code
+- `get-install-info.sh` - Get installation commands and imports
+
+Database location: `~/.claude/mozaic.db`
 
 ## When to Use This Skill
 
@@ -52,7 +56,7 @@ Common options:
 
 ### Step 2: Browse Available Components
 
-Based on your answer, I'll use `mcp__mozaic__list_components` to show relevant components.
+Based on your answer, I'll use the `list-components.sh` script to show relevant components.
 
 **Example**:
 ```
@@ -67,7 +71,7 @@ For forms, Mozaic offers:
 
 ### Step 3: Component Details
 
-I'll use `mcp__mozaic__get_component_info` to show:
+I'll use the `get-component.sh` script to show:
 - Available props with types and defaults
 - Slots for customization
 - Events you can listen to
@@ -141,7 +145,7 @@ You can:
 
 ### Step 6: Generate Final Code
 
-I'll use `mcp__mozaic__generate_vue_component` to create complete code:
+I'll use the `generate-component.sh` script to create complete code:
 
 ```vue
 <script setup>
@@ -203,7 +207,7 @@ form {
 
 ### Step 7: Installation Guidance
 
-I'll use `mcp__mozaic__get_install_info` to provide:
+I'll use the `get-install-info.sh` script to provide:
 
 **Package Manager Choice**:
 - npm
@@ -410,8 +414,9 @@ pnpm add -D @types/node
 ### Issue: Props not working
 
 **Solution**: Check prop names and types
-```javascript
-// Use mcp__mozaic__get_component_info to verify props
+```bash
+# Use get-component.sh to verify props
+./scripts/get-component.sh TextInput
 ```
 
 ### Issue: Styling conflicts
@@ -459,7 +464,7 @@ What fields do you need?
 **Skill**:
 Perfect! Here's a registration form with extended fields:
 
-[Uses `mcp__mozaic__list_components` and `mcp__mozaic__get_component_info`]
+[Uses `list-components.sh` and `get-component.sh` scripts]
 
 **Proposed Components**:
 1. TextInput (Name)
@@ -470,7 +475,7 @@ Perfect! Here's a registration form with extended fields:
 6. Checkbox (Terms agreement)
 7. Button (Submit - theme="primary")
 
-[Uses `mcp__mozaic__generate_vue_component`]
+[Uses `generate-component.sh` script]
 
 Here's your complete registration form... [Generated code]
 
@@ -482,7 +487,7 @@ Would you like me to:
 **User**: "Add installation instructions"
 
 **Skill**:
-[Uses `mcp__mozaic__get_install_info`]
+[Uses `get-install-info.sh` script]
 
 Here's how to install and set up...