@stellisoft/stellify-mcp 0.1.28 → 0.1.29

package/dist/index.js

@@ -23,7 +23,7 @@ const STELLIFY_FRAMEWORK_API = {
     // Data & Forms
     Form: ['create', 'set', 'get', 'getData', 'validate', 'isValid', 'getErrors', 'getError', 'reset', 'store', 'update', 'delete'],
     Table: ['create', 'setData', 'addColumn', 'removeColumn', 'sort', 'filter', 'clearFilter', 'paginate', 'page', 'getData', 'getAllData', 'getColumns', 'getColumn', 'getTotalRows', 'getTotalPages', 'getCurrentPage', 'getPageSize', 'getSortKey', 'getSortDirection'],
-    List: ['create', 'from', 'range', 'add', 'remove', 'removeWhere', 'set', 'get', 'first', 'last', 'sort', 'sortBy', 'reverse', 'filter', 'find', 'findIndex', 'map', 'reduce', 'forEach', 'includes', 'indexOf', 'every', 'some', 'slice', 'take', 'skip', 'chunk', 'unique', 'uniqueBy', 'groupBy', 'flatten', 'concat', 'isEmpty', 'isNotEmpty', 'count', 'clear', 'toArray', 'toJSON', 'clone', 'sum', 'avg', 'min', 'max'],
+    Collection: ['create', 'collect', 'from', 'range', 'add', 'remove', 'removeWhere', 'set', 'get', 'first', 'last', 'sort', 'sortBy', 'reverse', 'filter', 'find', 'findIndex', 'map', 'reduce', 'forEach', 'includes', 'indexOf', 'every', 'some', 'slice', 'take', 'skip', 'chunk', 'unique', 'uniqueBy', 'groupBy', 'flatten', 'concat', 'isEmpty', 'isNotEmpty', 'count', 'clear', 'toArray', 'toJSON', 'clone', 'sum', 'avg', 'min', 'max'],
     Tree: ['create', 'setRoot', 'addChild', 'removeNode', 'getNode', 'getRoot', 'getChildren', 'getParent', 'getSiblings', 'getAncestors', 'getDescendants', 'getDepth', 'getPath', 'traverse', 'find', 'findAll', 'move', 'toArray', 'size'],
     // Network
     Http: ['create', 'get', 'post', 'put', 'patch', 'delete', 'items', 'withHeaders', 'withToken', 'withTimeout'],
@@ -74,11 +74,11 @@ Use this tool when you need to:
 
 IMPORTANT - Stellify Framework Import:
 The npm package is "stellify-framework" (NOT @stellify/core).
-Import like: import { Http, List, Form } from 'stellify-framework';
+Import like: import { Http, Collection, Form } from 'stellify-framework';
 
-IMPORTANT - List class and Vue reactivity:
-List is iterable and works directly with Vue's v-for directive.
-Use List.from() to wrap arrays for chainable operations (filter, map, sort, etc.).
+IMPORTANT - Collection class and Vue reactivity:
+Collection is iterable and works directly with Vue's v-for directive.
+Use Collection.collect() to wrap arrays for chainable operations (filter, map, sort, etc.).
 
 Example response:
 {
@@ -128,9 +128,11 @@ COMPLETE WORKFLOW:
 4. html_to_elements → create template elements (returns element UUIDs)
 5. save_file → FINALIZE by wiring template/data arrays with all collected UUIDs
 
-LEGACY (still supported but prefer combined tools above):
+TWO-STEP ALTERNATIVES (still supported but prefer combined tools above):
 - create_statement + add_statement_code (2 calls instead of 1)
-- create_method + add_method_body + save_method for is_async (3 calls instead of 1)
+- create_method (without body) + add_method_body (2 calls instead of 1)
+
+NOTE: add_method_body is also useful for APPENDING code to an existing method.
 
 For PHP: Use type='class', 'model', 'controller', or 'middleware'.
 For Vue: Use type='js' and extension='vue'. Place in the 'js' directory.
@@ -287,16 +289,17 @@ Example response includes:
     },
     {
         name: 'add_method_body',
-        description: `Parse and add PHP code to a method body. Provide the method implementation code (without the function declaration). Stellify will parse it into structured statements.
+        description: `Append code to an existing method. Use this when you need to ADD MORE code to a method that already has statements.
+
+**For new methods:** Use \`create_method\` with the \`body\` parameter instead - it creates the method with code in one call.
 
 **Nested code is handled correctly.** The parser tracks brace/bracket/paren depth and only splits on semicolons at the top level. Arrow functions with block bodies, computed properties, and other nested constructs work as single statements.
 
-IMPORTANT: This APPENDS to existing method statements. To REPLACE a method's code:
-1. Create a NEW method with create_method
-2. Add body with add_method_body
-3. Update the file's 'data' array to include new method UUID (remove old one)
-4. Update any element click handlers to reference the new method UUID
-5. Optionally delete the old method with delete_method`,
+IMPORTANT: This APPENDS to existing method statements. To REPLACE a method's code entirely:
+1. Create a NEW method with create_method (with body parameter)
+2. Update the file's 'data' array to include new method UUID (remove old one)
+3. Update any element click handlers to reference the new method UUID
+4. Delete the old method with delete_method`,
         inputSchema: {
             type: 'object',
             properties: {
@@ -696,6 +699,11 @@ Create methods for all handlers, including simple state changes like opening mod
 
 Event types: click, submit, change, input, focus, blur, keydown, keyup, mouseenter, mouseleave.
 
+DYNAMIC CLASS BINDINGS - For classes that toggle based on expressions:
+{ "classBindings": { "rotate-180": "panel.open", "bg-red-500": "hasError" } }
+Assembles to: :class="{ 'rotate-180': panel.open, 'bg-red-500': hasError }"
+Use for state-dependent styling in v-for loops or reactive components.
+
 EFFICIENCY - Prefer updates over delete/recreate:
 - Move between routes: change \`routeParent\` attribute
 - Reparent elements: change \`parent\` attribute
@@ -709,7 +717,7 @@ EFFICIENCY - Prefer updates over delete/recreate:
                 },
                 data: {
                     type: 'object',
-                    description: 'Flat object with HTML attributes and Stellify fields (name, type, locked, tag, classes, text)',
+                    description: 'Flat object with HTML attributes and Stellify fields (name, type, locked, tag, classes, text, classBindings)',
                 },
             },
             required: ['uuid', 'data'],
@@ -1587,6 +1595,99 @@ This removes the "vote" setting profile entirely.`,
             required: ['name'],
         },
     },
+    {
+        name: 'get_pattern',
+        description: `Get a UI pattern checklist for building common components correctly.
+
+WHEN TO USE: Call this BEFORE building any of these UI patterns:
+- accordion: Collapsible content panels
+- modal: Overlay dialogs
+- tabs: Tabbed content navigation
+- dropdown: Toggleable menus
+- toast: Notification messages
+
+The checklist contains best practices and common pitfalls to avoid.
+Following the checklist prevents bugs like hidden content still being visible,
+missing keyboard navigation, or incorrect ARIA attributes.
+
+EXAMPLE:
+{ "name": "accordion" }
+
+Returns:
+{
+  "name": "accordion",
+  "description": "Collapsible content panels",
+  "checklist": [
+    "Use v-show for visibility toggle (not CSS height tricks)",
+    "Store open state as boolean in each panel object",
+    ...
+  ],
+  "example": "const panels = ref([...]);"
+}
+
+If no pattern exists for the given name, returns null.`,
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Pattern name (e.g., "accordion", "modal", "tabs", "dropdown", "toast")',
+                },
+            },
+            required: ['name'],
+        },
+    },
+    {
+        name: 'save_pattern',
+        description: `Save or update a UI pattern checklist.
+
+Use this to add new patterns or update existing ones based on lessons learned.
+
+EXAMPLE:
+{
+  "name": "accordion",
+  "description": "Collapsible content panels",
+  "checklist": [
+    "Use v-show for visibility toggle",
+    "Store open state as boolean"
+  ],
+  "example": "const panels = ref([...]);"
+}`,
+        inputSchema: {
+            type: 'object',
+            properties: {
+                name: {
+                    type: 'string',
+                    description: 'Pattern name (e.g., "accordion", "modal")',
+                },
+                description: {
+                    type: 'string',
+                    description: 'Brief description of the pattern',
+                },
+                checklist: {
+                    type: 'array',
+                    items: { type: 'string' },
+                    description: 'Array of checklist items - best practices and things to remember',
+                },
+                example: {
+                    type: 'string',
+                    description: 'Optional code example',
+                },
+            },
+            required: ['name', 'description', 'checklist'],
+        },
+    },
+    {
+        name: 'list_patterns',
+        description: `List all available UI pattern checklists.
+
+Returns an array of pattern names and descriptions.
+Use this to discover what patterns are available before building UI components.`,
+        inputSchema: {
+            type: 'object',
+            properties: {},
+        },
+    },
 ];
 // Server instructions for tool discovery (used by MCP Tool Search)
 const SERVER_INSTRUCTIONS = `Stellify is a coding platform where you code alongside AI on a codebase maintained and curated by AI. Build Laravel, stellify-framework, and Vue.js applications.
@@ -1667,10 +1768,10 @@ notes.value = response.data || [];
 
 - **@click auto-wiring:** Pass the file UUID to html_to_elements to auto-wire @click handlers. Methods must be created BEFORE calling html_to_elements.
 - **Stellify imports:** Use "stellify-framework" package (NOT @stellify/core)
-  CORRECT: import { Http, List, Form } from 'stellify-framework';
+  CORRECT: import { Http, Collection, Form } from 'stellify-framework';
   WRONG: import { Http } from '@stellify/core';
 - v-model requires ref(), NOT Form class: const formData = ref({title: ''})
-- List is iterable and works directly with v-for (no .toArray() needed)
+- Collection is iterable and works directly with v-for (no .toArray() needed)
 - add_method_body APPENDS, doesn't replace - create new method to replace
 - 'data' array = method UUIDs, 'statements' array = import/variable UUIDs
 - For buttons in forms, set inputType: "button" to prevent auto-submit
@@ -1703,7 +1804,7 @@ When you create a Vue component, **app.js is automatically created/updated** wit
 // Create MCP server
 const server = new Server({
     name: 'stellify-mcp',
-    version: '0.1.28',
+    version: '0.1.29',
 }, {
     capabilities: {
         tools: {},
@@ -2527,6 +2628,49 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                     ],
                 };
             }
+            case 'get_pattern': {
+                const result = await stellify.getPattern(args.name);
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                success: true,
+                                pattern: result.data || result,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            case 'save_pattern': {
+                const { name, description, checklist, example } = args;
+                await stellify.savePattern(name, { description, checklist, example });
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                success: true,
+                                message: `Saved pattern "${name}" with ${checklist.length} checklist items`,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
+            case 'list_patterns': {
+                const result = await stellify.listPatterns();
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: JSON.stringify({
+                                success: true,
+                                patterns: result.data || result,
+                            }, null, 2),
+                        },
+                    ],
+                };
+            }
             default:
                 throw new Error(`Unknown tool: ${name}`);
         }

package/dist/stellify-client.d.ts

@@ -188,4 +188,11 @@ export declare class StellifyClient {
     saveSetting(name: string, data: Record<string, any>): Promise<any>;
     createSetting(name: string): Promise<any>;
     deleteSetting(name: string): Promise<any>;
+    getPattern(name: string): Promise<any>;
+    savePattern(name: string, data: {
+        description: string;
+        checklist: string[];
+        example?: string;
+    }): Promise<any>;
+    listPatterns(): Promise<any>;
 }

package/dist/stellify-client.js

@@ -225,4 +225,17 @@ export class StellifyClient {
         const response = await this.client.delete(`/config/${name}`);
         return response.data;
     }
+    // UI Pattern checklists - best practices for common UI patterns
+    async getPattern(name) {
+        const response = await this.client.get(`/pattern/${name}`);
+        return response.data;
+    }
+    async savePattern(name, data) {
+        const response = await this.client.put(`/pattern/${name}`, data);
+        return response.data;
+    }
+    async listPatterns() {
+        const response = await this.client.get('/pattern');
+        return response.data;
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellisoft/stellify-mcp",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "mcpName": "io.github.MattStellisoft/stellify-mcp",
   "description": "MCP server for Stellify - AI-native code generation platform",
   "main": "dist/index.js",

package/server.json

@@ -6,12 +6,12 @@
     "url": "https://github.com/Stellify-Software-Ltd/stellify-mcp",
     "source": "github"
   },
-  "version": "0.1.28",
+  "version": "0.1.29",
   "packages": [
     {
       "registryType": "npm",
       "identifier": "@stellisoft/stellify-mcp",
-      "version": "0.1.28",
+      "version": "0.1.29",
       "transport": {
         "type": "stdio"
       },