superkit-mcp-server 1.2.4 → 1.2.6

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/__tests__/test_apply_prompt_args.js

@@ -0,0 +1,104 @@
+import { describe, it, expect } from 'vitest';
+import { apply_prompt_args } from '../index.js';
+describe('apply_prompt_args', () => {
+    describe('{{args}} substitution', () => {
+        it('should replace {{args}} with the provided user args', () => {
+            const result = apply_prompt_args('Task: {{args}}', 'Add user authentication');
+            expect(result).toBe('Task: Add user authentication');
+        });
+        it('should replace all occurrences of {{args}}', () => {
+            const result = apply_prompt_args('{{args}} and also {{args}}', 'hello');
+            expect(result).toBe('hello and also hello');
+        });
+        it('should replace {{args}} with an empty string when no args are provided', () => {
+            const result = apply_prompt_args('Task: {{args}}', '');
+            expect(result).toBe('Task: ');
+        });
+        it('should replace {{args}} with an empty string when args is only whitespace', () => {
+            const result = apply_prompt_args('Task: {{args}}', '   ');
+            expect(result).toBe('Task:    ');
+        });
+    });
+    describe('{{#if args}} ... {{/if}} block (no else branch)', () => {
+        it('should include the block content when args is provided', () => {
+            const template = '{{#if args}}Task: {{args}}{{/if}}';
+            const result = apply_prompt_args(template, 'Fix bug');
+            expect(result).toBe('Task: Fix bug');
+        });
+        it('should remove the block entirely when args is empty', () => {
+            const template = 'Before\n{{#if args}}Task: {{args}}{{/if}}\nAfter';
+            const result = apply_prompt_args(template, '');
+            expect(result).toBe('Before\n\nAfter');
+        });
+        it('should remove the block entirely when args is only whitespace', () => {
+            const template = '{{#if args}}Task: {{args}}{{/if}}';
+            const result = apply_prompt_args(template, '   ');
+            expect(result).toBe('');
+        });
+        it('should handle multiline block content', () => {
+            const template = '{{#if args}}\n# Task\n**Input:** {{args}}\n{{/if}}';
+            const result = apply_prompt_args(template, 'Do something');
+            expect(result).toBe('\n# Task\n**Input:** Do something\n');
+        });
+    });
+    describe('{{#if args}} ... {{else}} ... {{/if}} block', () => {
+        it('should render the if-block when args is provided', () => {
+            const template = '{{#if args}}Task: {{args}}{{else}}No task provided.{{/if}}';
+            const result = apply_prompt_args(template, 'Add login');
+            expect(result).toBe('Task: Add login');
+        });
+        it('should render the else-block when args is empty', () => {
+            const template = '{{#if args}}Task: {{args}}{{else}}No task provided.{{/if}}';
+            const result = apply_prompt_args(template, '');
+            expect(result).toBe('No task provided.');
+        });
+        it('should render the else-block when args is only whitespace', () => {
+            const template = '{{#if args}}Task: {{args}}{{else}}No task provided.{{/if}}';
+            const result = apply_prompt_args(template, '   ');
+            expect(result).toBe('No task provided.');
+        });
+        it('should handle multiline if and else blocks', () => {
+            const template = [
+                '{{#if args}}',
+                '# Running: {{args}}',
+                'Execute the task above.',
+                '{{else}}',
+                '# Usage',
+                'Provide a task to run.',
+                '{{/if}}',
+            ].join('\n');
+            const with_args = apply_prompt_args(template, 'Build the feature');
+            expect(with_args).toContain('# Running: Build the feature');
+            expect(with_args).not.toContain('# Usage');
+            const without_args = apply_prompt_args(template, '');
+            expect(without_args).toContain('# Usage');
+            expect(without_args).not.toContain('# Running:');
+        });
+    });
+    describe('edge cases', () => {
+        it('should return the template unchanged when it has no placeholders', () => {
+            const template = '# Plan\nThis is a static template.';
+            const result = apply_prompt_args(template, 'some args');
+            expect(result).toBe(template);
+        });
+        it('should handle a template with both {{args}} and {{#if args}} blocks', () => {
+            const template = [
+                '{{#if args}}',
+                '**Task:** {{args}}',
+                '{{else}}',
+                '**Task:** (none)',
+                '{{/if}}',
+                '',
+                'Details: {{args}}',
+            ].join('\n');
+            const result = apply_prompt_args(template, 'Refactor auth');
+            expect(result).toContain('**Task:** Refactor auth');
+            expect(result).toContain('Details: Refactor auth');
+            expect(result).not.toContain('(none)');
+        });
+        it('should handle empty template string', () => {
+            const result = apply_prompt_args('', 'some args');
+            expect(result).toBe('');
+        });
+    });
+});