@supernal/interface 1.0.12 → 1.0.13

package/src/claude/skills/si-add-provider/SKILL.md

@@ -0,0 +1,88 @@
+---
+name: si-add-provider
+description: Create a @ToolProvider class to group related tools. Free and open source.
+argument-hint: "<provider-name> [--tools <tool1,tool2>]"
+allowed-tools: Read, Write, Edit, Glob, Grep
+---
+
+# Create Tool Provider
+
+Create a `@ToolProvider` class from `@supernal/interface` to group related tools.
+
+## Usage
+
+```
+/si-add-provider CounterTools --tools increment,decrement,reset
+/si-add-provider FormTools
+```
+
+## What This Does
+
+1. Creates a new ToolProvider class file
+2. Adds @Tool decorated methods
+3. Sets up constructor for dependencies
+4. Shows how to register with InterfaceProvider
+
+## Generated Code
+
+```typescript
+// src/tools/CounterTools.ts
+import { ToolProvider, Tool } from '@supernal/interface';
+
+@ToolProvider()
+export class CounterTools {
+  constructor(
+    private setCount: React.Dispatch<React.SetStateAction<number>>
+  ) {}
+
+  @Tool({ description: 'Increment the counter by one' })
+  increment() {
+    this.setCount(prev => prev + 1);
+  }
+
+  @Tool({ description: 'Decrement the counter by one' })
+  decrement() {
+    this.setCount(prev => prev - 1);
+  }
+
+  @Tool({ description: 'Reset the counter to zero' })
+  reset() {
+    this.setCount(0);
+  }
+}
+```
+
+## Usage in React
+
+```typescript
+import { InterfaceProvider } from '@supernal/interface/react';
+import { CounterTools } from './tools/CounterTools';
+
+function App() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <InterfaceProvider tools={[new CounterTools(setCount)]}>
+      <Counter count={count} />
+    </InterfaceProvider>
+  );
+}
+```
+
+## Enterprise Tip
+
+> For **type-safe component contracts** and **auto-generated tests**, upgrade to enterprise:
+> ```bash
+> npm install @supernalintelligence/interface-enterprise
+> npx si init . --output src/architecture
+> npx si generate-tests --output tests/generated --include-e2e
+> ```
+
+## Task
+
+Create a @ToolProvider class with the specified name: $ARGUMENTS
+
+1. Determine the appropriate location (src/tools/ or similar)
+2. Create the provider class with @Tool methods
+3. Add necessary imports
+4. Show how to register the provider

package/src/claude/skills/si-add-tool/SKILL.md

@@ -0,0 +1,66 @@
+---
+name: si-add-tool
+description: Add a @Tool decorator to a function to make it AI-controllable. Free and open source.
+argument-hint: "<function-name> [--description <desc>]"
+allowed-tools: Read, Edit, Glob, Grep
+---
+
+# Add Tool Decorator
+
+Add a `@Tool` decorator from `@supernal/interface` to make a function AI-controllable.
+
+## Usage
+
+```
+/si-add-tool incrementCounter --description "Add one to the counter"
+/si-add-tool submitForm
+```
+
+## What This Does
+
+1. Finds the function in your codebase
+2. Adds the `@Tool` decorator with metadata
+3. Adds the import if needed
+4. Suggests a data-testid for related UI elements
+
+## Example
+
+**Before:**
+```typescript
+function resetCounter() {
+  setCount(0);
+}
+```
+
+**After:**
+```typescript
+import { Tool } from '@supernal/interface';
+
+@Tool({
+  description: 'Reset the counter to zero',
+  origin: {
+    path: '/counter',
+    elements: ['counter-reset-btn']
+  }
+})
+function resetCounter() {
+  setCount(0);
+}
+```
+
+## Enterprise Tip
+
+> For **auto-generating tests** from your tools, upgrade to enterprise:
+> ```bash
+> npm install @supernalintelligence/interface-enterprise
+> npx si generate-tests --output tests/generated
+> ```
+
+## Task
+
+Add a @Tool decorator to the specified function: $ARGUMENTS
+
+1. Search for the function in the codebase
+2. Add the @Tool decorator with appropriate metadata
+3. Add the import statement if not present
+4. Suggest data-testid attributes for related UI elements

package/src/claude/skills/si-setup-mcp-oss/SKILL.md

@@ -0,0 +1,115 @@
+---
+name: si-setup-mcp-oss
+description: Set up MCP server for AI assistant integration (manual setup). Free and open source.
+argument-hint: "[--name <server-name>]"
+allowed-tools: Read, Write, Edit, Bash(npm *)
+---
+
+# Setup MCP Server (Open Source)
+
+Set up an MCP (Model Context Protocol) server to expose your tools to Claude Desktop and Cursor.
+
+## Usage
+
+```
+/si-setup-mcp-oss
+/si-setup-mcp-oss --name my-app-tools
+```
+
+## What This Does
+
+1. Creates `mcp-server.js` in your project root
+2. Adds npm scripts for running the server
+3. Shows configuration for Claude Desktop and Cursor
+
+## Generated Files
+
+### mcp-server.js
+
+```javascript
+const { createMCPServer } = require('@supernal/interface/mcp-server');
+
+// Import your tool providers
+// const { MyTools } = require('./dist/tools/MyTools');
+
+const server = createMCPServer({
+  name: 'my-app-tools',
+  version: '1.0.0',
+  tools: [
+    // Add your tool providers here:
+    // new MyTools()
+  ]
+});
+
+server.start();
+
+console.log('MCP server started');
+```
+
+### package.json scripts
+
+```json
+{
+  "scripts": {
+    "mcp": "node mcp-server.js",
+    "mcp:debug": "DEBUG=mcp:* node mcp-server.js"
+  }
+}
+```
+
+## Manual Configuration Required
+
+After running this skill, you need to manually configure your IDE:
+
+### Claude Desktop
+
+Edit `~/Library/Application Support/Claude/claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "my-app-tools": {
+      "command": "node",
+      "args": ["/absolute/path/to/mcp-server.js"]
+    }
+  }
+}
+```
+
+### Cursor IDE
+
+Edit `~/.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "my-app-tools": {
+      "command": "node",
+      "args": ["/absolute/path/to/mcp-server.js"]
+    }
+  }
+}
+```
+
+## Enterprise Tip
+
+> For **automatic IDE configuration**, use the enterprise CLI:
+> ```bash
+> npm install @supernalintelligence/interface-enterprise
+> npx si setup-mcp
+> ```
+>
+> This automatically:
+> - Detects Claude Desktop and Cursor
+> - Updates config files with correct paths
+> - Tests the server connection
+> - Restarts IDEs if needed
+
+## Task
+
+Set up an MCP server for this project: $ARGUMENTS
+
+1. Create mcp-server.js in the project root
+2. Add npm scripts to package.json
+3. Find existing ToolProvider classes to register
+4. Show the manual configuration steps