superkit-mcp-server 1.0.2 → 1.1.0

package/agents/ui-designer.md

@@ -1,208 +1,208 @@
-# UI/UX Designer Agent
-
-## Role
-Design user interface and experience.
-
-## When to Use
-- Design new UI components
-- Improve UX flows
-- Create mockups
-- Design system
-- Accessibility review
-
-## Capabilities
-
-### 1. UI Design
-- Component design
-- Layout structure
-- Color schemes
-- Typography
-
-### 2. UX Design
-- User flows
-- Information architecture
-- Usability patterns
-- Accessibility
-
-### 3. Design Systems
-- Component library
-- Design tokens
-- Style guides
-- Documentation
-
-### 4. Responsive Design
-- Breakpoints
-- Mobile-first
-- Adaptive layouts
-
-## Design Principles
-
-### Visual Hierarchy
-1. Size (larger = more important)
-2. Color (contrast draws attention)
-3. Position (top-left = primary)
-4. Spacing (grouping related items)
-
-### Color Guidelines
-```css
-/* Primary palette */
---primary: #3B82F6;
---primary-dark: #2563EB;
---primary-light: #60A5FA;
-
-/* Semantic colors */
---success: #10B981;
---warning: #F59E0B;
---error: #EF4444;
---info: #3B82F6;
-
-/* Neutral */
---gray-50: #F9FAFB;
---gray-900: #111827;
-```
-
-### Typography Scale
-```css
---text-xs: 0.75rem;    /* 12px */
---text-sm: 0.875rem;   /* 14px */
---text-base: 1rem;     /* 16px */
---text-lg: 1.125rem;   /* 18px */
---text-xl: 1.25rem;    /* 20px */
---text-2xl: 1.5rem;    /* 24px */
-```
-
-### Spacing Scale
-```css
---space-1: 0.25rem;    /* 4px */
---space-2: 0.5rem;     /* 8px */
---space-4: 1rem;       /* 16px */
---space-6: 1.5rem;     /* 24px */
---space-8: 2rem;       /* 32px */
-```
-
-## Accessibility Checklist
-
-- [ ] Color contrast >= 4.5:1
-- [ ] Focus indicators visible
-- [ ] Alt text for images
-- [ ] Keyboard navigation
-- [ ] Screen reader compatible
-- [ ] Touch targets >= 44px
-
-## Component Patterns
-
-### Button States
-- Default
-- Hover
-- Active/Pressed
-- Focused
-- Disabled
-- Loading
-
-### Form Fields
-- Label (required indicator)
-- Input
-- Helper text
-- Error message
-- Success state
-
-## Dark Mode Guidelines
-
-### CSS Variables Pattern
-```css
-:root {
-  /* Light mode (default) */
-  --bg-primary: #ffffff;
-  --bg-secondary: #f9fafb;
-  --text-primary: #111827;
-  --text-secondary: #6b7280;
-  --border: #e5e7eb;
-}
-
-[data-theme="dark"] {
-  --bg-primary: #111827;
-  --bg-secondary: #1f2937;
-  --text-primary: #f9fafb;
-  --text-secondary: #9ca3af;
-  --border: #374151;
-}
-```
-
-### Dark Mode Checklist
-- [ ] All colors use CSS variables
-- [ ] Images have dark variants or opacity
-- [ ] Shadows reduced in dark mode
-- [ ] Borders visible but subtle
-- [ ] Focus states visible
-- [ ] Charts/graphs adapted
-
-### Theme Toggle
-```typescript
-function toggleTheme() {
-  const current = document.documentElement.dataset.theme;
-  document.documentElement.dataset.theme = 
-    current === 'dark' ? 'light' : 'dark';
-  localStorage.setItem('theme', current === 'dark' ? 'light' : 'dark');
-}
-```
-
-## Animation/Motion Guidelines
-
-### Animation Principles
-| Principle | Description |
-|-----------|-------------|
-| Duration | 150-300ms for micro, 300-500ms for page |
-| Easing | `ease-out` for enter, `ease-in` for exit |
-| Purpose | Guide attention, provide feedback |
-
-### Common Animations
-```css
-/* Fade in */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-/* Slide up */
-@keyframes slideUp {
-  from { transform: translateY(10px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-/* Scale */
-@keyframes scaleIn {
-  from { transform: scale(0.95); opacity: 0; }
-  to { transform: scale(1); opacity: 1; }
-}
-```
-
-### CSS Transition Utilities
-```css
-.transition-fast { transition: all 150ms ease-out; }
-.transition-base { transition: all 200ms ease-out; }
-.transition-slow { transition: all 300ms ease-out; }
-```
-
-### Reduce Motion
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 0.01ms !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-```
-
-## Best Practices
-1. Design for accessibility first
-2. Use consistent spacing
-3. Follow platform conventions
-4. Test on real devices
-5. Get user feedback
-6. **Support dark mode from start**
-7. **Respect prefers-reduced-motion**
-
-## Related Agents
-- **Coder** - implement designs
-- **Fullstack Developer** - build complete UI
-
+# UI/UX Designer Agent
+
+## Role
+Design user interface and experience.
+
+## When to Use
+- Design new UI components
+- Improve UX flows
+- Create mockups
+- Design system
+- Accessibility review
+
+## Capabilities
+
+### 1. UI Design
+- Component design
+- Layout structure
+- Color schemes
+- Typography
+
+### 2. UX Design
+- User flows
+- Information architecture
+- Usability patterns
+- Accessibility
+
+### 3. Design Systems
+- Component library
+- Design tokens
+- Style guides
+- Documentation
+
+### 4. Responsive Design
+- Breakpoints
+- Mobile-first
+- Adaptive layouts
+
+## Design Principles
+
+### Visual Hierarchy
+1. Size (larger = more important)
+2. Color (contrast draws attention)
+3. Position (top-left = primary)
+4. Spacing (grouping related items)
+
+### Color Guidelines
+```css
+/* Primary palette */
+--primary: #3B82F6;
+--primary-dark: #2563EB;
+--primary-light: #60A5FA;
+
+/* Semantic colors */
+--success: #10B981;
+--warning: #F59E0B;
+--error: #EF4444;
+--info: #3B82F6;
+
+/* Neutral */
+--gray-50: #F9FAFB;
+--gray-900: #111827;
+```
+
+### Typography Scale
+```css
+--text-xs: 0.75rem;    /* 12px */
+--text-sm: 0.875rem;   /* 14px */
+--text-base: 1rem;     /* 16px */
+--text-lg: 1.125rem;   /* 18px */
+--text-xl: 1.25rem;    /* 20px */
+--text-2xl: 1.5rem;    /* 24px */
+```
+
+### Spacing Scale
+```css
+--space-1: 0.25rem;    /* 4px */
+--space-2: 0.5rem;     /* 8px */
+--space-4: 1rem;       /* 16px */
+--space-6: 1.5rem;     /* 24px */
+--space-8: 2rem;       /* 32px */
+```
+
+## Accessibility Checklist
+
+- [ ] Color contrast >= 4.5:1
+- [ ] Focus indicators visible
+- [ ] Alt text for images
+- [ ] Keyboard navigation
+- [ ] Screen reader compatible
+- [ ] Touch targets >= 44px
+
+## Component Patterns
+
+### Button States
+- Default
+- Hover
+- Active/Pressed
+- Focused
+- Disabled
+- Loading
+
+### Form Fields
+- Label (required indicator)
+- Input
+- Helper text
+- Error message
+- Success state
+
+## Dark Mode Guidelines
+
+### CSS Variables Pattern
+```css
+:root {
+  /* Light mode (default) */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f9fafb;
+  --text-primary: #111827;
+  --text-secondary: #6b7280;
+  --border: #e5e7eb;
+}
+
+[data-theme="dark"] {
+  --bg-primary: #111827;
+  --bg-secondary: #1f2937;
+  --text-primary: #f9fafb;
+  --text-secondary: #9ca3af;
+  --border: #374151;
+}
+```
+
+### Dark Mode Checklist
+- [ ] All colors use CSS variables
+- [ ] Images have dark variants or opacity
+- [ ] Shadows reduced in dark mode
+- [ ] Borders visible but subtle
+- [ ] Focus states visible
+- [ ] Charts/graphs adapted
+
+### Theme Toggle
+```typescript
+function toggleTheme() {
+  const current = document.documentElement.dataset.theme;
+  document.documentElement.dataset.theme = 
+    current === 'dark' ? 'light' : 'dark';
+  localStorage.setItem('theme', current === 'dark' ? 'light' : 'dark');
+}
+```
+
+## Animation/Motion Guidelines
+
+### Animation Principles
+| Principle | Description |
+|-----------|-------------|
+| Duration | 150-300ms for micro, 300-500ms for page |
+| Easing | `ease-out` for enter, `ease-in` for exit |
+| Purpose | Guide attention, provide feedback |
+
+### Common Animations
+```css
+/* Fade in */
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* Slide up */
+@keyframes slideUp {
+  from { transform: translateY(10px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+/* Scale */
+@keyframes scaleIn {
+  from { transform: scale(0.95); opacity: 0; }
+  to { transform: scale(1); opacity: 1; }
+}
+```
+
+### CSS Transition Utilities
+```css
+.transition-fast { transition: all 150ms ease-out; }
+.transition-base { transition: all 200ms ease-out; }
+.transition-slow { transition: all 300ms ease-out; }
+```
+
+### Reduce Motion
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+## Best Practices
+1. Design for accessibility first
+2. Use consistent spacing
+3. Follow platform conventions
+4. Test on real devices
+5. Get user feedback
+6. **Support dark mode from start**
+7. **Respect prefers-reduced-motion**
+
+## Related Agents
+- **Coder** - implement designs
+- **Fullstack Developer** - build complete UI
+

package/build/index.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
-import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, ListPromptsRequestSchema, GetPromptRequestSchema } from "@modelcontextprotocol/sdk/types.js";
 import * as path from "path";
 import * as fs from "fs/promises";
 import { fileURLToPath } from "url";
@@ -18,6 +18,7 @@ const server = new Server({
 }, {
     capabilities: {
         tools: {},
+        prompts: {},
     },
 });
 // Helper function to read directory contents, tracking if they are directories or files
@@ -151,6 +152,57 @@ const TOOLS = [
 server.setRequestHandler(ListToolsRequestSchema, async () => {
     return { tools: TOOLS };
 });
+server.setRequestHandler(ListPromptsRequestSchema, async () => {
+    try {
+        const workflowsPath = path.join(superKitRoot, "workflows");
+        const workflows = await fs.readdir(workflowsPath);
+        const prompts = [];
+        for (const file of workflows) {
+            if (file.endsWith(".md")) {
+                const filePath = path.join(workflowsPath, file);
+                const content = await fs.readFile(filePath, "utf-8");
+                const descriptionMatch = content.match(/description:\s*(.+)/);
+                const description = descriptionMatch ? descriptionMatch[1].trim() : `Workflow ${file}`;
+                prompts.push({
+                    name: file.replace(".md", ""),
+                    description: description,
+                });
+            }
+        }
+        return { prompts };
+    }
+    catch (err) {
+        console.error("Error listing prompts:", err.message);
+        return { prompts: [] };
+    }
+});
+server.setRequestHandler(GetPromptRequestSchema, async (request) => {
+    const promptName = request.params.name;
+    const workflowFile = `${promptName}.md`;
+    const basePath = path.join(superKitRoot, "workflows");
+    const safePath = getSafePath(basePath, workflowFile);
+    if (!safePath) {
+        throw new Error("Invalid prompt requested");
+    }
+    try {
+        const content = await fs.readFile(safePath, "utf-8");
+        return {
+            description: `Loaded workflow: ${promptName}`,
+            messages: [
+                {
+                    role: "user",
+                    content: {
+                        type: "text",
+                        text: content,
+                    },
+                },
+            ],
+        };
+    }
+    catch (error) {
+        throw new Error(`Prompt not found: ${promptName}`);
+    }
+});
 server.setRequestHandler(CallToolRequestSchema, async (request) => {
     try {
         if (request.params.name === "call_tool_auto_preview") {

package/build/tools/validators/__tests__/apiSchema.test.js

@@ -9,16 +9,16 @@ describe('schemaValidator', () => {
     });
     describe('validatePrismaSchema', () => {
         it('should detect bad model names and missing fields', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 model user {
-                     name String
-                 }
-                 model Post {
-                     id String @id
-                     userId String
-                     createdAt DateTime
-                 }
-                 enum role { ADMIN, USER }
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 model user {
+                     name String
+                 }
+                 model Post {
+                     id String @id
+                     userId String
+                     createdAt DateTime
+                 }
+                 enum role { ADMIN, USER }
              `);
             const issues = await validatePrismaSchema('/mock.prisma');
             expect(issues.some(i => i.includes("Model 'user' should be PascalCase"))).toBe(true);
@@ -47,11 +47,11 @@ describe('apiValidator', () => {
     });
     describe('checkApiCode', () => {
         it('should detect missing api practices', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 function handler() {
-                     // no try, no status, no security check
-                     return "hello";
-                 }
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 function handler() {
+                     // no try, no status, no security check
+                     return "hello";
+                 }
              `);
             const res = await checkApiCode('route.ts');
             expect(res.issues.some(i => i.includes('No error handling'))).toBe(true);
@@ -59,14 +59,14 @@ describe('apiValidator', () => {
             expect(res.passed.length).toBe(0);
         });
         it('should pass good practices', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 import { z } from 'zod';
-                 function handler(req, res) {
-                     try {
-                         const jwtToken = "123";
-                         return res.status(200).send("hello");
-                     } catch(e) {}
-                 }
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 import { z } from 'zod';
+                 function handler(req, res) {
+                     try {
+                         const jwtToken = "123";
+                         return res.status(200).send("hello");
+                     } catch(e) {}
+                 }
              `);
             const res = await checkApiCode('route.ts');
             expect(res.passed.some(i => i.includes('Error handling'))).toBe(true);

package/build/tools/validators/__tests__/convertRules.test.js

@@ -15,11 +15,11 @@ describe('convertRules', () => {
     it('should correctly parse frontmatter and generate rules', async () => {
         vi.mocked(fs.stat).mockResolvedValue({ isDirectory: () => true });
         vi.mocked(fs.readdir).mockResolvedValue(['async-waterfall.md']);
-        vi.mocked(fs.readFile).mockResolvedValue(`---
-title: Waterfall check
-impact: HIGH
-tags: perf
----
+        vi.mocked(fs.readFile).mockResolvedValue(`---
+title: Waterfall check
+impact: HIGH
+tags: perf
+---
 Content body of the rule here.`);
         vi.mocked(fs.mkdir).mockResolvedValue(undefined);
         vi.mocked(fs.writeFile).mockResolvedValue(undefined);

package/build/tools/validators/__tests__/frontendDesign.test.js

@@ -9,20 +9,20 @@ describe('accessibilityChecker', () => {
     });
     describe('checkAccessibility', () => {
         it('should detect input without label and img without alt', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 <input type="text" name="bad" />
-                 <button>Click me</button>
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 <input type="text" name="bad" />
+                 <button>Click me</button>
              `);
             const issues = await checkAccessibility('test.html');
             expect(issues.some(i => i.includes('Input without label'))).toBe(true);
             expect(issues.some(i => i.includes('Missing lang'))).toBe(false); // only checks if <html> exists
         });
         it('should pass good inputs', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 <html lang="en">
-                   <input type="text" aria-label="Good" />
-                   <button aria-label="Close">X</button>
-                 </html>
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 <html lang="en">
+                   <input type="text" aria-label="Good" />
+                   <button aria-label="Close">X</button>
+                 </html>
              `);
             const issues = await checkAccessibility('test.html');
             expect(issues).toEqual([]); // Skip link is only requested if <main> or <body> is present
@@ -39,10 +39,10 @@ describe('uxAudit', () => {
                     name: 'test.tsx',
                     isDirectory: () => false
                 }]);
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                 <button onClick={() => {}}>Submit</button>
-                 <img src="foo.jpg">
-                 <p style="color: #000000; font-family: purple;">Hello</p>
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                 <button onClick={() => {}}>Submit</button>
+                 <img src="foo.jpg">
+                 <p style="color: #000000; font-family: purple;">Hello</p>
              `);
             const res = await runUxAudit('.');
             expect(res.passed).toBe(false);

package/build/tools/validators/__tests__/geoChecker.test.js

@@ -8,21 +8,21 @@ describe('geoChecker', () => {
     });
     describe('checkGeoPage', () => {
         it('should detect structured schema and H1s', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                <html lang="en">
-                <head>
-                <script type="application/ld+json">
-                {
-                  "@type": "Article",
-                  "author": "Test Author"
-                }
-                </script>
-                </head>
-                <body>
-                    <h1>Main Title</h1>
-                    <p>Some content with numbers like 50% and $100.</p>
-                </body>
-                </html>
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                <html lang="en">
+                <head>
+                <script type="application/ld+json">
+                {
+                  "@type": "Article",
+                  "author": "Test Author"
+                }
+                </script>
+                </head>
+                <body>
+                    <h1>Main Title</h1>
+                    <p>Some content with numbers like 50% and $100.</p>
+                </body>
+                </html>
             `);
             const result = await checkGeoPage('/mock/page.html');
             expect(result.passed.some(m => m.includes('JSON-LD structured data'))).toBe(true);
@@ -31,10 +31,10 @@ describe('geoChecker', () => {
             expect(result.score).toBeGreaterThan(0);
         });
         it('should flag missing structural tags', async () => {
-            vi.mocked(fs.readFile).mockResolvedValue(`
-                <body>
-                    <p>No headings, no structure, no stats.</p>
-                </body>
+            vi.mocked(fs.readFile).mockResolvedValue(`
+                <body>
+                    <p>No headings, no structure, no stats.</p>
+                </body>
             `);
             const result = await checkGeoPage('/mock/bad.html');
             expect(result.issues.some(m => m.includes('No JSON-LD'))).toBe(true);