@agentskillkit/agent-skills 1.0.1 → 3.2.2

package/tests/e2e/studio-workflow.test.js

@@ -0,0 +1,100 @@
+/**
+ * E2E Test - /studio Workflow
+ * Tests the design system generation workflow
+ */
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { execSync } from 'child_process';
+import { existsSync, readFileSync, rmSync, mkdirSync } from 'fs';
+import { join } from 'path';
+
+const PROJECT_ROOT = join(import.meta.dirname, '..', '..');
+const STUDIO_SCRIPT = join(PROJECT_ROOT, '.agent', 'skills', 'studio', 'scripts-js', 'search.js');
+const TEST_OUTPUT_DIR = join(PROJECT_ROOT, 'design-system', 'test-project');
+
+describe('/studio Workflow E2E', () => {
+    beforeAll(() => {
+        // Clean up test output if exists
+        if (existsSync(TEST_OUTPUT_DIR)) {
+            rmSync(TEST_OUTPUT_DIR, { recursive: true, force: true });
+        }
+    });
+
+    afterAll(() => {
+        // Clean up after tests
+        if (existsSync(TEST_OUTPUT_DIR)) {
+            rmSync(TEST_OUTPUT_DIR, { recursive: true, force: true });
+        }
+    });
+
+    describe('Design System Generation', () => {
+        it('should generate design system with --design-system flag', () => {
+            const cmd = `node "${STUDIO_SCRIPT}" "fintech dashboard minimal" --design-system -p "Test Project"`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 30000
+            });
+
+            // Should contain key sections
+            expect(output).toContain('PATTERN');
+            expect(output).toContain('STYLE');
+            expect(output).toContain('COLORS');
+            expect(output).toContain('TYPOGRAPHY');
+        });
+
+        it('should persist design system with --persist flag', () => {
+            const cmd = `node "${STUDIO_SCRIPT}" "ecommerce modern clean" --design-system --persist -p "test-project"`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 30000
+            });
+
+            // Should indicate persistence
+            expect(output).toContain('persisted') || expect(output).toContain('MASTER');
+        });
+    });
+
+    describe('Domain Search', () => {
+        it('should search style domain', () => {
+            const cmd = `node "${STUDIO_SCRIPT}" "glassmorphism" --domain style`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 15000
+            });
+
+            expect(output).toContain('style');
+        });
+
+        it('should search typography domain', () => {
+            const cmd = `node "${STUDIO_SCRIPT}" "modern clean" --domain typography`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 15000
+            });
+
+            expect(output).toContain('typography');
+        });
+    });
+
+    describe('Error Handling', () => {
+        it('should handle minimal query', () => {
+            const cmd = `node "${STUDIO_SCRIPT}" "a" --domain style`;
+
+            // Should not throw
+            expect(() => {
+                execSync(cmd, {
+                    cwd: PROJECT_ROOT,
+                    encoding: 'utf8',
+                    timeout: 15000
+                });
+            }).not.toThrow();
+        });
+    });
+});

package/tests/e2e/validate-workflow.test.js

@@ -0,0 +1,71 @@
+/**
+ * E2E Test - /validate Workflow
+ * Tests the validation and checking scripts
+ */
+import { describe, it, expect } from 'vitest';
+import { execSync } from 'child_process';
+import { join } from 'path';
+
+const PROJECT_ROOT = join(import.meta.dirname, '..', '..');
+const SKILL_VALIDATOR = join(PROJECT_ROOT, '.agent', 'scripts-js', 'skill-validator.js');
+const CHECKLIST = join(PROJECT_ROOT, '.agent', 'scripts-js', 'checklist.js');
+
+describe('/validate Workflow E2E', () => {
+    describe('Skill Validator', () => {
+        it('should validate all skills successfully', () => {
+            const cmd = `node "${SKILL_VALIDATOR}"`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 30000
+            });
+
+            expect(output).toContain('Skill Standard Validation Report');
+            expect(output).toContain('Valid:');
+            // Should have zero invalid
+            expect(output).toContain('Invalid: 0');
+        });
+
+        it('should validate specific skill by name', () => {
+            const cmd = `node "${SKILL_VALIDATOR}" studio`;
+
+            const output = execSync(cmd, {
+                cwd: PROJECT_ROOT,
+                encoding: 'utf8',
+                timeout: 15000
+            });
+
+            expect(output).toContain('Validation Report');
+        });
+    });
+
+    describe('Checklist Script', () => {
+        it('should have checklist script available', () => {
+            // Verify script exists
+            const fs = require('fs');
+            expect(fs.existsSync(CHECKLIST)).toBe(true);
+        });
+    });
+
+    describe('Registry Validation', () => {
+        it('should have valid JSON in registry', () => {
+            const registryPath = join(PROJECT_ROOT, '.agent', 'skills', 'registry.json');
+
+            expect(() => {
+                const content = require(registryPath);
+                expect(content.skills).toBeDefined();
+                expect(Array.isArray(content.skills)).toBe(true);
+                expect(content.skills.length).toBeGreaterThan(0);
+            }).not.toThrow();
+        });
+
+        it('should have version in registry', () => {
+            const registryPath = join(PROJECT_ROOT, '.agent', 'skills', 'registry.json');
+            const content = require(registryPath);
+
+            expect(content.version).toBeDefined();
+            expect(content.updatedAt).toBeDefined();
+        });
+    });
+});

package/tests/scripts/colors.test.js

@@ -0,0 +1,75 @@
+/**
+ * Unit Tests - Colors Utility
+ */
+import { describe, it, expect, vi } from 'vitest';
+import { colors, printHeader, printStep, printSuccess, printWarning, printError } from '../../../.agent/scripts-js/utils/colors.js';
+
+describe('Colors Utility', () => {
+    it('should export ANSI color codes', () => {
+        expect(colors.green).toBe('\x1b[92m');
+        expect(colors.red).toBe('\x1b[91m');
+        expect(colors.yellow).toBe('\x1b[93m');
+        expect(colors.blue).toBe('\x1b[94m');
+        expect(colors.cyan).toBe('\x1b[96m');
+        expect(colors.bold).toBe('\x1b[1m');
+        expect(colors.reset).toBe('\x1b[0m');
+    });
+
+    it('printSuccess should include green color and checkmark', () => {
+        const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+
+        printSuccess('Test passed');
+
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('\x1b[92m')
+        );
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('✅')
+        );
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('Test passed')
+        );
+
+        consoleSpy.mockRestore();
+    });
+
+    it('printError should include red color and X mark', () => {
+        const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+
+        printError('Test failed');
+
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('\x1b[91m')
+        );
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('❌')
+        );
+
+        consoleSpy.mockRestore();
+    });
+
+    it('printWarning should include yellow color', () => {
+        const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+
+        printWarning('Warning message');
+
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('\x1b[93m')
+        );
+
+        consoleSpy.mockRestore();
+    });
+
+    it('printHeader should print formatted header with separators', () => {
+        const consoleSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
+
+        printHeader('TEST HEADER');
+
+        expect(consoleSpy).toHaveBeenCalledTimes(3);
+        expect(consoleSpy).toHaveBeenCalledWith(
+            expect.stringContaining('='.repeat(70))
+        );
+
+        consoleSpy.mockRestore();
+    });
+});

package/tests/scripts/component-specs.test.js

@@ -0,0 +1,157 @@
+/**
+ * Component Specs Tests - Studio Design System
+ * =============================================
+ * Unit tests for component CSS generators
+ */
+
+import { describe, test, expect } from 'vitest';
+import {
+    generateButtonSpecs,
+    generateCardSpecs,
+    generateInputSpecs,
+    generateModalSpecs,
+    generateComponentSpecs
+} from '../../.agent/skills/studio/scripts-js/utils/component-specs.js';
+
+describe('Component Spec Generators', () => {
+    const mockColors = {
+        primary: '#2563EB',
+        secondary: '#3B82F6',
+        cta: '#F97316',
+        background: '#F8FAFC',
+        text: '#1E293B'
+    };
+
+    describe('generateButtonSpecs', () => {
+        test('generates primary and secondary button CSS', () => {
+            const css = generateButtonSpecs(mockColors);
+
+            expect(css).toContain('### Buttons');
+            expect(css).toContain('.btn-primary {');
+            expect(css).toContain('.btn-secondary {');
+        });
+
+        test('uses CTA color for primary button', () => {
+            const css = generateButtonSpecs(mockColors);
+            expect(css).toContain('background: #F97316'); // CTA color
+        });
+
+        test('uses primary color for secondary button', () => {
+            const css = generateButtonSpecs(mockColors);
+            expect(css).toContain('color: #2563EB'); // Primary color
+            expect(css).toContain('border: 2px solid #2563EB');
+        });
+
+        test('includes hover states', () => {
+            const css = generateButtonSpecs(mockColors);
+            expect(css).toContain('.btn-primary:hover {');
+            expect(css).toContain('opacity: 0.9');
+            expect(css).toContain('transform: translateY(-1px)');
+        });
+
+        test('handles missing colors with fallbacks', () => {
+            const css = generateButtonSpecs(null);
+            expect(css).toContain('#F97316'); // Default CTA
+            expect(css).toContain('#2563EB'); // Default primary
+        });
+    });
+
+    describe('generateCardSpecs', () => {
+        test('generates card CSS with hover state', () => {
+            const css = generateCardSpecs(mockColors);
+
+            expect(css).toContain('### Cards');
+            expect(css).toContain('.card {');
+            expect(css).toContain('.card:hover {');
+        });
+
+        test('uses background color from design system', () => {
+            const css = generateCardSpecs(mockColors);
+            expect(css).toContain('background: #F8FAFC');
+        });
+
+        test('includes shadow variables', () => {
+            const css = generateCardSpecs(mockColors);
+            expect(css).toContain('var(--shadow-md)');
+            expect(css).toContain('var(--shadow-lg)');
+        });
+
+        test('includes transition and cursor', () => {
+            const css = generateCardSpecs(mockColors);
+            expect(css).toContain('transition: all 200ms ease');
+            expect(css).toContain('cursor: pointer');
+        });
+    });
+
+    describe('generateInputSpecs', () => {
+        test('generates input CSS with focus state', () => {
+            const css = generateInputSpecs(mockColors);
+
+            expect(css).toContain('### Inputs');
+            expect(css).toContain('.input {');
+            expect(css).toContain('.input:focus {');
+        });
+
+        test('uses primary color for focus state', () => {
+            const css = generateInputSpecs(mockColors);
+            expect(css).toContain('border-color: #2563EB');
+            expect(css).toContain('box-shadow: 0 0 0 3px #2563EB20'); // With 20% opacity
+        });
+
+        test('includes outline: none', () => {
+            const css = generateInputSpecs(mockColors);
+            expect(css).toContain('outline: none');
+        });
+    });
+
+    describe('generateModalSpecs', () => {
+        test('generates modal and overlay CSS', () => {
+            const css = generateModalSpecs();
+
+            expect(css).toContain('### Modals');
+            expect(css).toContain('.modal-overlay {');
+            expect(css).toContain('.modal {');
+        });
+
+        test('includes backdrop-filter blur', () => {
+            const css = generateModalSpecs();
+            expect(css).toContain('backdrop-filter: blur(4px)');
+        });
+
+        test('includes shadow variable', () => {
+            const css = generateModalSpecs();
+            expect(css).toContain('var(--shadow-xl)');
+        });
+
+        test('includes responsive width', () => {
+            const css = generateModalSpecs();
+            expect(css).toContain('max-width: 500px');
+            expect(css).toContain('width: 90%');
+        });
+    });
+
+    describe('generateComponentSpecs', () => {
+        test('combines all component types', () => {
+            const specs = generateComponentSpecs(mockColors);
+
+            expect(specs).toContain('## Component Specs');
+            expect(specs).toContain('### Buttons');
+            expect(specs).toContain('### Cards');
+            expect(specs).toContain('### Inputs');
+            expect(specs).toContain('### Modals');
+        });
+
+        test('includes section separators', () => {
+            const specs = generateComponentSpecs(mockColors);
+            expect(specs).toContain('---');
+        });
+
+        test('has proper spacing between sections', () => {
+            const specs = generateComponentSpecs(mockColors);
+            const lines = specs.split('\n');
+
+            // Should have empty lines between sections
+            expect(lines.some(line => line === '')).toBe(true);
+        });
+    });
+});

package/tests/scripts/config-loader.test.js

@@ -0,0 +1,204 @@
+/**
+ * Config Loader Tests - Studio Design System
+ * ===========================================
+ * Unit tests for custom page pattern configuration
+ */
+
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import { writeFile, unlink, mkdir, rmdir } from 'fs/promises';
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { tmpdir } from 'os';
+import {
+    loadConfig,
+    validateConfig,
+    mergePatterns,
+    getExampleConfig
+} from '../../.agent/skills/studio/scripts-js/utils/config-loader.js';
+
+describe('Config Loader', () => {
+    const testDir = join(tmpdir(), 'studio-config-test-' + Date.now());
+    
+    beforeEach(async () => {
+        if (!existsSync(testDir)) {
+            await mkdir(testDir, { recursive: true });
+        }
+    });
+    
+    afterEach(async () => {
+        // Cleanup test files
+        for (const file of ['.studiorc.json', 'studio-config.json', '.studiorc']) {
+            const filepath = join(testDir, file);
+            if (existsSync(filepath)) {
+                await unlink(filepath);
+            }
+        }
+    });
+
+    describe('validateConfig', () => {
+        test('validates valid config', () => {
+            const config = {
+                customPatterns: [
+                    { keywords: ['inventory', 'stock'], type: 'Inventory' }
+                ]
+            };
+            
+            const result = validateConfig(config);
+            
+            expect(result.customPatterns).toHaveLength(1);
+            expect(result.customPatterns[0].type).toBe('Inventory');
+        });
+
+        test('normalizes keywords to lowercase', () => {
+            const config = {
+                customPatterns: [
+                    { keywords: ['INVENTORY', 'Stock'], type: 'Inventory' }
+                ]
+            };
+            
+            const result = validateConfig(config);
+            
+            expect(result.customPatterns[0].keywords).toEqual(['inventory', 'stock']);
+        });
+
+        test('throws on non-object config', () => {
+            expect(() => validateConfig(null)).toThrow('Config must be an object');
+            expect(() => validateConfig('string')).toThrow('Config must be an object');
+        });
+
+        test('throws on non-array customPatterns', () => {
+            expect(() => validateConfig({ customPatterns: 'invalid' }))
+                .toThrow('customPatterns must be an array');
+        });
+
+        test('throws on missing keywords', () => {
+            expect(() => validateConfig({ 
+                customPatterns: [{ type: 'Test' }] 
+            })).toThrow("must have non-empty 'keywords' array");
+        });
+
+        test('throws on empty keywords array', () => {
+            expect(() => validateConfig({ 
+                customPatterns: [{ keywords: [], type: 'Test' }] 
+            })).toThrow("must have non-empty 'keywords' array");
+        });
+
+        test('throws on missing type', () => {
+            expect(() => validateConfig({ 
+                customPatterns: [{ keywords: ['test'] }] 
+            })).toThrow("must have non-empty 'type' string");
+        });
+
+        test('handles empty customPatterns array', () => {
+            const result = validateConfig({ customPatterns: [] });
+            expect(result.customPatterns).toEqual([]);
+        });
+
+        test('handles config without customPatterns', () => {
+            const result = validateConfig({});
+            expect(result.customPatterns).toEqual([]);
+        });
+    });
+
+    describe('loadConfig', () => {
+        test('loads config from direct path', async () => {
+            const configPath = join(testDir, 'custom-config.json');
+            await writeFile(configPath, JSON.stringify({
+                customPatterns: [
+                    { keywords: ['test'], type: 'Test Pattern' }
+                ]
+            }));
+            
+            const config = await loadConfig(configPath);
+            
+            expect(config).not.toBeNull();
+            expect(config.customPatterns[0].type).toBe('Test Pattern');
+            
+            await unlink(configPath);
+        });
+
+        test('returns null when no config found', async () => {
+            const config = await loadConfig(null, testDir);
+            expect(config).toBeNull();
+        });
+
+        test('prioritizes .studiorc.json over studio-config.json', async () => {
+            await writeFile(join(testDir, '.studiorc.json'), JSON.stringify({
+                customPatterns: [{ keywords: ['rc'], type: 'From RC' }]
+            }));
+            await writeFile(join(testDir, 'studio-config.json'), JSON.stringify({
+                customPatterns: [{ keywords: ['config'], type: 'From Config' }]
+            }));
+            
+            const config = await loadConfig(null, testDir);
+            
+            expect(config.customPatterns[0].type).toBe('From RC');
+        });
+
+        test('handles invalid JSON gracefully', async () => {
+            const configPath = join(testDir, 'invalid.json');
+            await writeFile(configPath, '{ invalid json }');
+            
+            const config = await loadConfig(configPath);
+            
+            expect(config).toBeNull();
+            
+            await unlink(configPath);
+        });
+    });
+
+    describe('mergePatterns', () => {
+        const defaultPatterns = [
+            { keywords: ['dashboard', 'admin'], type: 'Dashboard' },
+            { keywords: ['checkout', 'payment'], type: 'Checkout' }
+        ];
+
+        test('returns default patterns when no custom patterns', () => {
+            const result = mergePatterns(defaultPatterns, null);
+            expect(result).toEqual(defaultPatterns);
+            
+            const result2 = mergePatterns(defaultPatterns, []);
+            expect(result2).toEqual(defaultPatterns);
+        });
+
+        test('places custom patterns first (higher priority)', () => {
+            const customPatterns = [
+                { keywords: ['inventory'], type: 'Inventory' }
+            ];
+            
+            const result = mergePatterns(defaultPatterns, customPatterns);
+            
+            expect(result[0].type).toBe('Inventory');
+            expect(result[1].type).toBe('Dashboard');
+            expect(result).toHaveLength(3);
+        });
+
+        test('preserves pattern structure', () => {
+            const customPatterns = [
+                { keywords: ['a', 'b', 'c'], type: 'Custom' }
+            ];
+            
+            const result = mergePatterns(defaultPatterns, customPatterns);
+            
+            expect(result[0].keywords).toEqual(['a', 'b', 'c']);
+            expect(result[0].type).toBe('Custom');
+        });
+    });
+
+    describe('getExampleConfig', () => {
+        test('returns valid JSON string', () => {
+            const example = getExampleConfig();
+            
+            expect(() => JSON.parse(example)).not.toThrow();
+        });
+
+        test('includes customPatterns with examples', () => {
+            const example = JSON.parse(getExampleConfig());
+            
+            expect(example).toHaveProperty('customPatterns');
+            expect(example.customPatterns.length).toBeGreaterThan(0);
+            expect(example.customPatterns[0]).toHaveProperty('keywords');
+            expect(example.customPatterns[0]).toHaveProperty('type');
+        });
+    });
+});