siesa-agents 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/prepare-publish.js +26 -26
- package/bin/restore-folders.js +26 -26
- package/bmad-core/checklists/frontend-checklist.md +105 -105
- package/bmad-core/tasks/create-component.md +102 -102
- package/bmad-core/tasks/create-feature.md +90 -90
- package/index.js +0 -1
- package/package.json +38 -41
- package/vscode/mcp.json +11 -11
package/bin/prepare-publish.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
const fs = require('fs-extra');
|
|
4
|
-
const path = require('path');
|
|
5
|
-
|
|
6
|
-
const rootDir = path.dirname(__dirname);
|
|
7
|
-
|
|
8
|
-
// Renombrar carpetas que empiezan con punto para que npm las incluya
|
|
9
|
-
const folderMappings = [
|
|
10
|
-
{ from: '.bmad-core', to: 'bmad-core' },
|
|
11
|
-
{ from: '.vscode', to: 'vscode' },
|
|
12
|
-
{ from: '.github', to: 'github' }
|
|
13
|
-
];
|
|
14
|
-
|
|
15
|
-
console.log('📦 Preparando carpetas para publicación...');
|
|
16
|
-
|
|
17
|
-
for (const mapping of folderMappings) {
|
|
18
|
-
const fromPath = path.join(rootDir, mapping.from);
|
|
19
|
-
const toPath = path.join(rootDir, mapping.to);
|
|
20
|
-
|
|
21
|
-
if (fs.existsSync(fromPath)) {
|
|
22
|
-
console.log(`📁 Renombrando ${mapping.from} -> ${mapping.to}`);
|
|
23
|
-
fs.moveSync(fromPath, toPath);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const fs = require('fs-extra');
|
|
4
|
+
const path = require('path');
|
|
5
|
+
|
|
6
|
+
const rootDir = path.dirname(__dirname);
|
|
7
|
+
|
|
8
|
+
// Renombrar carpetas que empiezan con punto para que npm las incluya
|
|
9
|
+
const folderMappings = [
|
|
10
|
+
{ from: '.bmad-core', to: 'bmad-core' },
|
|
11
|
+
{ from: '.vscode', to: 'vscode' },
|
|
12
|
+
{ from: '.github', to: 'github' }
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
console.log('📦 Preparando carpetas para publicación (siesa-agents)...');
|
|
16
|
+
|
|
17
|
+
for (const mapping of folderMappings) {
|
|
18
|
+
const fromPath = path.join(rootDir, mapping.from);
|
|
19
|
+
const toPath = path.join(rootDir, mapping.to);
|
|
20
|
+
|
|
21
|
+
if (fs.existsSync(fromPath)) {
|
|
22
|
+
console.log(`📁 Renombrando ${mapping.from} -> ${mapping.to}`);
|
|
23
|
+
fs.moveSync(fromPath, toPath);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
27
|
console.log('✅ Carpetas preparadas para publicación');
|
package/bin/restore-folders.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
|
|
3
|
-
const fs = require('fs-extra');
|
|
4
|
-
const path = require('path');
|
|
5
|
-
|
|
6
|
-
const rootDir = path.dirname(__dirname);
|
|
7
|
-
|
|
8
|
-
// Restaurar nombres originales de las carpetas
|
|
9
|
-
const folderMappings = [
|
|
10
|
-
{ from: 'bmad-core', to: '.bmad-core' },
|
|
11
|
-
{ from: 'vscode', to: '.vscode' },
|
|
12
|
-
{ from: 'github', to: '.github' }
|
|
13
|
-
];
|
|
14
|
-
|
|
15
|
-
console.log('🔄 Restaurando nombres originales de carpetas...');
|
|
16
|
-
|
|
17
|
-
for (const mapping of folderMappings) {
|
|
18
|
-
const fromPath = path.join(rootDir, mapping.from);
|
|
19
|
-
const toPath = path.join(rootDir, mapping.to);
|
|
20
|
-
|
|
21
|
-
if (fs.existsSync(fromPath)) {
|
|
22
|
-
console.log(`📁 Restaurando ${mapping.from} -> ${mapping.to}`);
|
|
23
|
-
fs.moveSync(fromPath, toPath);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
|
|
3
|
+
const fs = require('fs-extra');
|
|
4
|
+
const path = require('path');
|
|
5
|
+
|
|
6
|
+
const rootDir = path.dirname(__dirname);
|
|
7
|
+
|
|
8
|
+
// Restaurar nombres originales de las carpetas
|
|
9
|
+
const folderMappings = [
|
|
10
|
+
{ from: 'bmad-core', to: '.bmad-core' },
|
|
11
|
+
{ from: 'vscode', to: '.vscode' },
|
|
12
|
+
{ from: 'github', to: '.github' }
|
|
13
|
+
];
|
|
14
|
+
|
|
15
|
+
console.log('🔄 Restaurando nombres originales de carpetas...');
|
|
16
|
+
|
|
17
|
+
for (const mapping of folderMappings) {
|
|
18
|
+
const fromPath = path.join(rootDir, mapping.from);
|
|
19
|
+
const toPath = path.join(rootDir, mapping.to);
|
|
20
|
+
|
|
21
|
+
if (fs.existsSync(fromPath)) {
|
|
22
|
+
console.log(`📁 Restaurando ${mapping.from} -> ${mapping.to}`);
|
|
23
|
+
fs.moveSync(fromPath, toPath);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
27
|
console.log('✅ Carpetas restauradas');
|
|
@@ -1,106 +1,106 @@
|
|
|
1
|
-
# Frontend Development Checklist
|
|
2
|
-
|
|
3
|
-
## Architecture & Structure
|
|
4
|
-
- [ ] Clean Architecture layers properly separated (domain, application, infrastructure, presentation)
|
|
5
|
-
- [ ] Domain layer contains only business entities and rules
|
|
6
|
-
- [ ] Application layer manages use cases and orchestration
|
|
7
|
-
- [ ] Infrastructure layer handles external concerns (API, storage, etc.)
|
|
8
|
-
- [ ] Presentation layer contains only UI components and pages
|
|
9
|
-
- [ ] No circular dependencies between layers
|
|
10
|
-
- [ ] Dependency inversion principle followed
|
|
11
|
-
|
|
12
|
-
## TypeScript & Code Quality
|
|
13
|
-
- [ ] Strict TypeScript configuration enabled
|
|
14
|
-
- [ ] All components have proper type definitions
|
|
15
|
-
- [ ] No usage of `any` type
|
|
16
|
-
- [ ] Props interfaces properly defined
|
|
17
|
-
- [ ] Custom hooks have proper typing
|
|
18
|
-
- [ ] API responses are properly typed
|
|
19
|
-
- [ ] State management stores have type safety
|
|
20
|
-
|
|
21
|
-
## Component Standards
|
|
22
|
-
- [ ] Components follow single responsibility principle
|
|
23
|
-
- [ ] Proper use of React.memo for performance
|
|
24
|
-
- [ ] Components are composable and reusable
|
|
25
|
-
- [ ] Props are properly documented with JSDoc
|
|
26
|
-
- [ ] Default props are defined where appropriate
|
|
27
|
-
- [ ] Components handle loading and error states
|
|
28
|
-
|
|
29
|
-
## State Management
|
|
30
|
-
- [ ] Zustand stores follow DDD patterns
|
|
31
|
-
- [ ] Global vs local state properly separated
|
|
32
|
-
- [ ] Actions call use cases from application layer
|
|
33
|
-
- [ ] State updates are immutable
|
|
34
|
-
- [ ] Store subscriptions are optimized
|
|
35
|
-
|
|
36
|
-
## Styling & UI
|
|
37
|
-
- [ ] TailwindCSS used consistently
|
|
38
|
-
- [ ] Shadcn/ui components properly configured
|
|
39
|
-
- [ ] Responsive design implemented
|
|
40
|
-
- [ ] Design system patterns followed
|
|
41
|
-
- [ ] Color scheme and theme support
|
|
42
|
-
- [ ] Loading states have proper UI feedback
|
|
43
|
-
|
|
44
|
-
## Performance
|
|
45
|
-
- [ ] Components are lazily loaded where appropriate
|
|
46
|
-
- [ ] Images are optimized and properly sized
|
|
47
|
-
- [ ] Bundle size is within acceptable limits
|
|
48
|
-
- [ ] React.memo used strategically
|
|
49
|
-
- [ ] Expensive operations are memoized
|
|
50
|
-
- [ ] Infinite scrolls or virtual lists for large datasets
|
|
51
|
-
|
|
52
|
-
## Accessibility
|
|
53
|
-
- [ ] ARIA labels and roles properly implemented
|
|
54
|
-
- [ ] Keyboard navigation works correctly
|
|
55
|
-
- [ ] Color contrast meets WCAG 2.1 AA standards
|
|
56
|
-
- [ ] Screen reader compatibility tested
|
|
57
|
-
- [ ] Focus management implemented
|
|
58
|
-
- [ ] Form validation errors are accessible
|
|
59
|
-
|
|
60
|
-
## Testing
|
|
61
|
-
- [ ] Unit tests for all custom hooks
|
|
62
|
-
- [ ] Component tests cover user interactions
|
|
63
|
-
- [ ] Integration tests for feature workflows
|
|
64
|
-
- [ ] Accessibility tests using jest-axe
|
|
65
|
-
- [ ] Test coverage meets minimum threshold (80%)
|
|
66
|
-
- [ ] Edge cases and error scenarios tested
|
|
67
|
-
|
|
68
|
-
## API Integration
|
|
69
|
-
- [ ] HTTP client properly configured
|
|
70
|
-
- [ ] Error handling for network failures
|
|
71
|
-
- [ ] Request/response interceptors for auth
|
|
72
|
-
- [ ] API types match backend specifications
|
|
73
|
-
- [ ] Loading states during API calls
|
|
74
|
-
- [ ] Proper error messages displayed to users
|
|
75
|
-
|
|
76
|
-
## PWA Features (if enabled)
|
|
77
|
-
- [ ] Service worker configured correctly
|
|
78
|
-
- [ ] Offline functionality works
|
|
79
|
-
- [ ] App manifest is valid
|
|
80
|
-
- [ ] Cache strategies implemented
|
|
81
|
-
- [ ] App can be installed on devices
|
|
82
|
-
- [ ] Push notifications work (if required)
|
|
83
|
-
|
|
84
|
-
## Security
|
|
85
|
-
- [ ] No secrets or API keys in frontend code
|
|
86
|
-
- [ ] XSS prevention measures implemented
|
|
87
|
-
- [ ] CSRF protection where needed
|
|
88
|
-
- [ ] Secure authentication flow
|
|
89
|
-
- [ ] Input validation and sanitization
|
|
90
|
-
- [ ] Safe handling of user data
|
|
91
|
-
|
|
92
|
-
## Development Experience
|
|
93
|
-
- [ ] Hot reloading works correctly
|
|
94
|
-
- [ ] TypeScript compilation is fast
|
|
95
|
-
- [ ] Linting rules are enforced
|
|
96
|
-
- [ ] Code formatting is consistent
|
|
97
|
-
- [ ] Development tools are configured
|
|
98
|
-
- [ ] Environment-specific configurations work
|
|
99
|
-
|
|
100
|
-
## Documentation
|
|
101
|
-
- [ ] README with setup instructions
|
|
102
|
-
- [ ] Component documentation exists
|
|
103
|
-
- [ ] API integration documented
|
|
104
|
-
- [ ] Deployment guide available
|
|
105
|
-
- [ ] Architecture decisions recorded
|
|
1
|
+
# Frontend Development Checklist
|
|
2
|
+
|
|
3
|
+
## Architecture & Structure
|
|
4
|
+
- [ ] Clean Architecture layers properly separated (domain, application, infrastructure, presentation)
|
|
5
|
+
- [ ] Domain layer contains only business entities and rules
|
|
6
|
+
- [ ] Application layer manages use cases and orchestration
|
|
7
|
+
- [ ] Infrastructure layer handles external concerns (API, storage, etc.)
|
|
8
|
+
- [ ] Presentation layer contains only UI components and pages
|
|
9
|
+
- [ ] No circular dependencies between layers
|
|
10
|
+
- [ ] Dependency inversion principle followed
|
|
11
|
+
|
|
12
|
+
## TypeScript & Code Quality
|
|
13
|
+
- [ ] Strict TypeScript configuration enabled
|
|
14
|
+
- [ ] All components have proper type definitions
|
|
15
|
+
- [ ] No usage of `any` type
|
|
16
|
+
- [ ] Props interfaces properly defined
|
|
17
|
+
- [ ] Custom hooks have proper typing
|
|
18
|
+
- [ ] API responses are properly typed
|
|
19
|
+
- [ ] State management stores have type safety
|
|
20
|
+
|
|
21
|
+
## Component Standards
|
|
22
|
+
- [ ] Components follow single responsibility principle
|
|
23
|
+
- [ ] Proper use of React.memo for performance
|
|
24
|
+
- [ ] Components are composable and reusable
|
|
25
|
+
- [ ] Props are properly documented with JSDoc
|
|
26
|
+
- [ ] Default props are defined where appropriate
|
|
27
|
+
- [ ] Components handle loading and error states
|
|
28
|
+
|
|
29
|
+
## State Management
|
|
30
|
+
- [ ] Zustand stores follow DDD patterns
|
|
31
|
+
- [ ] Global vs local state properly separated
|
|
32
|
+
- [ ] Actions call use cases from application layer
|
|
33
|
+
- [ ] State updates are immutable
|
|
34
|
+
- [ ] Store subscriptions are optimized
|
|
35
|
+
|
|
36
|
+
## Styling & UI
|
|
37
|
+
- [ ] TailwindCSS used consistently
|
|
38
|
+
- [ ] Shadcn/ui components properly configured
|
|
39
|
+
- [ ] Responsive design implemented
|
|
40
|
+
- [ ] Design system patterns followed
|
|
41
|
+
- [ ] Color scheme and theme support
|
|
42
|
+
- [ ] Loading states have proper UI feedback
|
|
43
|
+
|
|
44
|
+
## Performance
|
|
45
|
+
- [ ] Components are lazily loaded where appropriate
|
|
46
|
+
- [ ] Images are optimized and properly sized
|
|
47
|
+
- [ ] Bundle size is within acceptable limits
|
|
48
|
+
- [ ] React.memo used strategically
|
|
49
|
+
- [ ] Expensive operations are memoized
|
|
50
|
+
- [ ] Infinite scrolls or virtual lists for large datasets
|
|
51
|
+
|
|
52
|
+
## Accessibility
|
|
53
|
+
- [ ] ARIA labels and roles properly implemented
|
|
54
|
+
- [ ] Keyboard navigation works correctly
|
|
55
|
+
- [ ] Color contrast meets WCAG 2.1 AA standards
|
|
56
|
+
- [ ] Screen reader compatibility tested
|
|
57
|
+
- [ ] Focus management implemented
|
|
58
|
+
- [ ] Form validation errors are accessible
|
|
59
|
+
|
|
60
|
+
## Testing
|
|
61
|
+
- [ ] Unit tests for all custom hooks
|
|
62
|
+
- [ ] Component tests cover user interactions
|
|
63
|
+
- [ ] Integration tests for feature workflows
|
|
64
|
+
- [ ] Accessibility tests using jest-axe
|
|
65
|
+
- [ ] Test coverage meets minimum threshold (80%)
|
|
66
|
+
- [ ] Edge cases and error scenarios tested
|
|
67
|
+
|
|
68
|
+
## API Integration
|
|
69
|
+
- [ ] HTTP client properly configured
|
|
70
|
+
- [ ] Error handling for network failures
|
|
71
|
+
- [ ] Request/response interceptors for auth
|
|
72
|
+
- [ ] API types match backend specifications
|
|
73
|
+
- [ ] Loading states during API calls
|
|
74
|
+
- [ ] Proper error messages displayed to users
|
|
75
|
+
|
|
76
|
+
## PWA Features (if enabled)
|
|
77
|
+
- [ ] Service worker configured correctly
|
|
78
|
+
- [ ] Offline functionality works
|
|
79
|
+
- [ ] App manifest is valid
|
|
80
|
+
- [ ] Cache strategies implemented
|
|
81
|
+
- [ ] App can be installed on devices
|
|
82
|
+
- [ ] Push notifications work (if required)
|
|
83
|
+
|
|
84
|
+
## Security
|
|
85
|
+
- [ ] No secrets or API keys in frontend code
|
|
86
|
+
- [ ] XSS prevention measures implemented
|
|
87
|
+
- [ ] CSRF protection where needed
|
|
88
|
+
- [ ] Secure authentication flow
|
|
89
|
+
- [ ] Input validation and sanitization
|
|
90
|
+
- [ ] Safe handling of user data
|
|
91
|
+
|
|
92
|
+
## Development Experience
|
|
93
|
+
- [ ] Hot reloading works correctly
|
|
94
|
+
- [ ] TypeScript compilation is fast
|
|
95
|
+
- [ ] Linting rules are enforced
|
|
96
|
+
- [ ] Code formatting is consistent
|
|
97
|
+
- [ ] Development tools are configured
|
|
98
|
+
- [ ] Environment-specific configurations work
|
|
99
|
+
|
|
100
|
+
## Documentation
|
|
101
|
+
- [ ] README with setup instructions
|
|
102
|
+
- [ ] Component documentation exists
|
|
103
|
+
- [ ] API integration documented
|
|
104
|
+
- [ ] Deployment guide available
|
|
105
|
+
- [ ] Architecture decisions recorded
|
|
106
106
|
- [ ] Troubleshooting guide provided
|
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
# Create UI Component
|
|
2
|
-
|
|
3
|
-
## Purpose
|
|
4
|
-
Create a React component with TypeScript, accessibility features, and comprehensive tests.
|
|
5
|
-
|
|
6
|
-
## Task Configuration
|
|
7
|
-
```yaml
|
|
8
|
-
elicit: true
|
|
9
|
-
interactive: true
|
|
10
|
-
required_params:
|
|
11
|
-
- component_name
|
|
12
|
-
- feature
|
|
13
|
-
- component_type
|
|
14
|
-
optional_params:
|
|
15
|
-
- props
|
|
16
|
-
- accessibility_level
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Task Execution
|
|
20
|
-
|
|
21
|
-
### Step 1: Elicit Component Requirements
|
|
22
|
-
Ask user for:
|
|
23
|
-
|
|
24
|
-
**Component Name**: What should the component be called? (use PascalCase)
|
|
25
|
-
**Feature**: Which feature does this component belong to?
|
|
26
|
-
**Component Type**: What type of component is this?
|
|
27
|
-
- page: Full page component with routing
|
|
28
|
-
- container: Logic container that manages state
|
|
29
|
-
- presentation: Pure presentation component
|
|
30
|
-
- form: Form component with validation
|
|
31
|
-
- layout: Layout wrapper component
|
|
32
|
-
|
|
33
|
-
**Props**: What props should this component accept? (optional)
|
|
34
|
-
**Accessibility Level**: What accessibility level is needed?
|
|
35
|
-
- basic: Basic ARIA labels and keyboard support
|
|
36
|
-
- enhanced: Enhanced navigation and screen reader support
|
|
37
|
-
- wcag-aa: Full WCAG 2.1 AA compliance
|
|
38
|
-
|
|
39
|
-
### Step 2: Generate Component File
|
|
40
|
-
Create component with:
|
|
41
|
-
- TypeScript interface for props
|
|
42
|
-
- Proper React.memo for performance
|
|
43
|
-
- Forward refs if needed
|
|
44
|
-
- Default props and prop validation
|
|
45
|
-
|
|
46
|
-
### Step 3: Implement Accessibility Features
|
|
47
|
-
Based on accessibility level:
|
|
48
|
-
- Add proper ARIA attributes
|
|
49
|
-
- Implement keyboard navigation
|
|
50
|
-
- Ensure proper color contrast
|
|
51
|
-
- Add screen reader support
|
|
52
|
-
- Include focus management
|
|
53
|
-
|
|
54
|
-
### Step 4: Add Styling
|
|
55
|
-
- Use TailwindCSS for styling
|
|
56
|
-
- Follow design system patterns
|
|
57
|
-
- Implement responsive design
|
|
58
|
-
- Add hover/focus states
|
|
59
|
-
- Support theme variations
|
|
60
|
-
|
|
61
|
-
### Step 5: Generate Tests
|
|
62
|
-
Create comprehensive test suite:
|
|
63
|
-
- Unit tests for component behavior
|
|
64
|
-
- Accessibility tests (using jest-axe)
|
|
65
|
-
- User interaction tests
|
|
66
|
-
- Visual regression tests if needed
|
|
67
|
-
- Performance tests for complex components
|
|
68
|
-
|
|
69
|
-
### Step 6: Generate Documentation
|
|
70
|
-
- Add JSDoc comments
|
|
71
|
-
- Create Storybook stories if configured
|
|
72
|
-
- Document props and usage examples
|
|
73
|
-
- Add accessibility notes
|
|
74
|
-
|
|
75
|
-
## Component Template Structure
|
|
76
|
-
```typescript
|
|
77
|
-
interface {ComponentName}Props {
|
|
78
|
-
// Props definition with proper typing
|
|
79
|
-
className?: string;
|
|
80
|
-
'data-testid'?: string;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
export const {ComponentName} = memo<{ComponentName}Props>(({
|
|
84
|
-
className,
|
|
85
|
-
'data-testid': testId = '{component-name}'
|
|
86
|
-
}) => {
|
|
87
|
-
// Component implementation
|
|
88
|
-
return (
|
|
89
|
-
<div className={cn('component-base-styles', className)} data-testid={testId}>
|
|
90
|
-
{/* Component content */}
|
|
91
|
-
</div>
|
|
92
|
-
);
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
{ComponentName}.displayName = '{ComponentName}';
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
## Completion Criteria
|
|
99
|
-
- Component follows TypeScript best practices
|
|
100
|
-
- Accessibility requirements met
|
|
101
|
-
- Comprehensive test coverage
|
|
102
|
-
- Proper styling and responsive design
|
|
1
|
+
# Create UI Component
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
Create a React component with TypeScript, accessibility features, and comprehensive tests.
|
|
5
|
+
|
|
6
|
+
## Task Configuration
|
|
7
|
+
```yaml
|
|
8
|
+
elicit: true
|
|
9
|
+
interactive: true
|
|
10
|
+
required_params:
|
|
11
|
+
- component_name
|
|
12
|
+
- feature
|
|
13
|
+
- component_type
|
|
14
|
+
optional_params:
|
|
15
|
+
- props
|
|
16
|
+
- accessibility_level
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Task Execution
|
|
20
|
+
|
|
21
|
+
### Step 1: Elicit Component Requirements
|
|
22
|
+
Ask user for:
|
|
23
|
+
|
|
24
|
+
**Component Name**: What should the component be called? (use PascalCase)
|
|
25
|
+
**Feature**: Which feature does this component belong to?
|
|
26
|
+
**Component Type**: What type of component is this?
|
|
27
|
+
- page: Full page component with routing
|
|
28
|
+
- container: Logic container that manages state
|
|
29
|
+
- presentation: Pure presentation component
|
|
30
|
+
- form: Form component with validation
|
|
31
|
+
- layout: Layout wrapper component
|
|
32
|
+
|
|
33
|
+
**Props**: What props should this component accept? (optional)
|
|
34
|
+
**Accessibility Level**: What accessibility level is needed?
|
|
35
|
+
- basic: Basic ARIA labels and keyboard support
|
|
36
|
+
- enhanced: Enhanced navigation and screen reader support
|
|
37
|
+
- wcag-aa: Full WCAG 2.1 AA compliance
|
|
38
|
+
|
|
39
|
+
### Step 2: Generate Component File
|
|
40
|
+
Create component with:
|
|
41
|
+
- TypeScript interface for props
|
|
42
|
+
- Proper React.memo for performance
|
|
43
|
+
- Forward refs if needed
|
|
44
|
+
- Default props and prop validation
|
|
45
|
+
|
|
46
|
+
### Step 3: Implement Accessibility Features
|
|
47
|
+
Based on accessibility level:
|
|
48
|
+
- Add proper ARIA attributes
|
|
49
|
+
- Implement keyboard navigation
|
|
50
|
+
- Ensure proper color contrast
|
|
51
|
+
- Add screen reader support
|
|
52
|
+
- Include focus management
|
|
53
|
+
|
|
54
|
+
### Step 4: Add Styling
|
|
55
|
+
- Use TailwindCSS for styling
|
|
56
|
+
- Follow design system patterns
|
|
57
|
+
- Implement responsive design
|
|
58
|
+
- Add hover/focus states
|
|
59
|
+
- Support theme variations
|
|
60
|
+
|
|
61
|
+
### Step 5: Generate Tests
|
|
62
|
+
Create comprehensive test suite:
|
|
63
|
+
- Unit tests for component behavior
|
|
64
|
+
- Accessibility tests (using jest-axe)
|
|
65
|
+
- User interaction tests
|
|
66
|
+
- Visual regression tests if needed
|
|
67
|
+
- Performance tests for complex components
|
|
68
|
+
|
|
69
|
+
### Step 6: Generate Documentation
|
|
70
|
+
- Add JSDoc comments
|
|
71
|
+
- Create Storybook stories if configured
|
|
72
|
+
- Document props and usage examples
|
|
73
|
+
- Add accessibility notes
|
|
74
|
+
|
|
75
|
+
## Component Template Structure
|
|
76
|
+
```typescript
|
|
77
|
+
interface {ComponentName}Props {
|
|
78
|
+
// Props definition with proper typing
|
|
79
|
+
className?: string;
|
|
80
|
+
'data-testid'?: string;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
export const {ComponentName} = memo<{ComponentName}Props>(({
|
|
84
|
+
className,
|
|
85
|
+
'data-testid': testId = '{component-name}'
|
|
86
|
+
}) => {
|
|
87
|
+
// Component implementation
|
|
88
|
+
return (
|
|
89
|
+
<div className={cn('component-base-styles', className)} data-testid={testId}>
|
|
90
|
+
{/* Component content */}
|
|
91
|
+
</div>
|
|
92
|
+
);
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
{ComponentName}.displayName = '{ComponentName}';
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## Completion Criteria
|
|
99
|
+
- Component follows TypeScript best practices
|
|
100
|
+
- Accessibility requirements met
|
|
101
|
+
- Comprehensive test coverage
|
|
102
|
+
- Proper styling and responsive design
|
|
103
103
|
- Documentation complete
|
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# Create Frontend Feature
|
|
2
|
-
|
|
3
|
-
## Purpose
|
|
4
|
-
Create a complete feature following Clean Architecture + DDD principles with all necessary layers.
|
|
5
|
-
|
|
6
|
-
## Task Configuration
|
|
7
|
-
```yaml
|
|
8
|
-
elicit: true
|
|
9
|
-
interactive: true
|
|
10
|
-
required_params:
|
|
11
|
-
- feature_name
|
|
12
|
-
- entities
|
|
13
|
-
- use_cases
|
|
14
|
-
optional_params:
|
|
15
|
-
- api_endpoints
|
|
16
|
-
- ui_components
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
## Task Execution
|
|
20
|
-
|
|
21
|
-
### Step 1: Elicit Feature Requirements
|
|
22
|
-
Ask user for:
|
|
23
|
-
|
|
24
|
-
**Feature Name**: What is the name of the feature? (use kebab-case)
|
|
25
|
-
**Domain Entities**: What are the main business entities for this feature?
|
|
26
|
-
**Use Cases**: What are the main use cases/operations users can perform?
|
|
27
|
-
**API Endpoints**: What backend endpoints will this feature consume? (optional)
|
|
28
|
-
**UI Components**: Any specific components you know you'll need? (optional)
|
|
29
|
-
|
|
30
|
-
### Step 2: Create Feature Structure
|
|
31
|
-
Generate the following structure:
|
|
32
|
-
|
|
33
|
-
```
|
|
34
|
-
src/features/{feature_name}/
|
|
35
|
-
├── domain/
|
|
36
|
-
│ ├── entities/
|
|
37
|
-
│ ├── repositories/
|
|
38
|
-
│ ├── services/
|
|
39
|
-
│ └── types/
|
|
40
|
-
├── application/
|
|
41
|
-
│ ├── use-cases/
|
|
42
|
-
│ ├── hooks/
|
|
43
|
-
│ └── store/
|
|
44
|
-
├── infrastructure/
|
|
45
|
-
│ ├── repositories/
|
|
46
|
-
│ ├── api/
|
|
47
|
-
│ └── adapters/
|
|
48
|
-
└── presentation/
|
|
49
|
-
├── components/
|
|
50
|
-
├── pages/
|
|
51
|
-
└── styles/
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
### Step 3: Generate Domain Layer
|
|
55
|
-
For each entity:
|
|
56
|
-
- Create TypeScript interfaces/types
|
|
57
|
-
- Define value objects if needed
|
|
58
|
-
- Create repository interfaces
|
|
59
|
-
- Define domain services if complex business rules exist
|
|
60
|
-
|
|
61
|
-
### Step 4: Generate Application Layer
|
|
62
|
-
For each use case:
|
|
63
|
-
- Create use case implementation
|
|
64
|
-
- Create custom hooks that consume use cases
|
|
65
|
-
- Setup Zustand store for feature state
|
|
66
|
-
- Implement error handling and loading states
|
|
67
|
-
|
|
68
|
-
### Step 5: Generate Infrastructure Layer
|
|
69
|
-
- Implement repository concrete classes
|
|
70
|
-
- Setup API clients with proper typing
|
|
71
|
-
- Create adapters for external services
|
|
72
|
-
- Configure error handling and retries
|
|
73
|
-
|
|
74
|
-
### Step 6: Generate Presentation Layer
|
|
75
|
-
- Create feature-specific components
|
|
76
|
-
- Setup routing for feature pages
|
|
77
|
-
- Implement accessibility features
|
|
78
|
-
- Add loading and error states
|
|
79
|
-
|
|
80
|
-
### Step 7: Generate Tests
|
|
81
|
-
- Unit tests for domain entities and services
|
|
82
|
-
- Integration tests for use cases
|
|
83
|
-
- Component tests for presentation layer
|
|
84
|
-
- API integration tests for infrastructure layer
|
|
85
|
-
|
|
86
|
-
## Completion Criteria
|
|
87
|
-
- All layers properly implemented
|
|
88
|
-
- Clean Architecture dependencies respected
|
|
89
|
-
- TypeScript compilation successful
|
|
90
|
-
- All tests passing
|
|
1
|
+
# Create Frontend Feature
|
|
2
|
+
|
|
3
|
+
## Purpose
|
|
4
|
+
Create a complete feature following Clean Architecture + DDD principles with all necessary layers.
|
|
5
|
+
|
|
6
|
+
## Task Configuration
|
|
7
|
+
```yaml
|
|
8
|
+
elicit: true
|
|
9
|
+
interactive: true
|
|
10
|
+
required_params:
|
|
11
|
+
- feature_name
|
|
12
|
+
- entities
|
|
13
|
+
- use_cases
|
|
14
|
+
optional_params:
|
|
15
|
+
- api_endpoints
|
|
16
|
+
- ui_components
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Task Execution
|
|
20
|
+
|
|
21
|
+
### Step 1: Elicit Feature Requirements
|
|
22
|
+
Ask user for:
|
|
23
|
+
|
|
24
|
+
**Feature Name**: What is the name of the feature? (use kebab-case)
|
|
25
|
+
**Domain Entities**: What are the main business entities for this feature?
|
|
26
|
+
**Use Cases**: What are the main use cases/operations users can perform?
|
|
27
|
+
**API Endpoints**: What backend endpoints will this feature consume? (optional)
|
|
28
|
+
**UI Components**: Any specific components you know you'll need? (optional)
|
|
29
|
+
|
|
30
|
+
### Step 2: Create Feature Structure
|
|
31
|
+
Generate the following structure:
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
src/features/{feature_name}/
|
|
35
|
+
├── domain/
|
|
36
|
+
│ ├── entities/
|
|
37
|
+
│ ├── repositories/
|
|
38
|
+
│ ├── services/
|
|
39
|
+
│ └── types/
|
|
40
|
+
├── application/
|
|
41
|
+
│ ├── use-cases/
|
|
42
|
+
│ ├── hooks/
|
|
43
|
+
│ └── store/
|
|
44
|
+
├── infrastructure/
|
|
45
|
+
│ ├── repositories/
|
|
46
|
+
│ ├── api/
|
|
47
|
+
│ └── adapters/
|
|
48
|
+
└── presentation/
|
|
49
|
+
├── components/
|
|
50
|
+
├── pages/
|
|
51
|
+
└── styles/
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### Step 3: Generate Domain Layer
|
|
55
|
+
For each entity:
|
|
56
|
+
- Create TypeScript interfaces/types
|
|
57
|
+
- Define value objects if needed
|
|
58
|
+
- Create repository interfaces
|
|
59
|
+
- Define domain services if complex business rules exist
|
|
60
|
+
|
|
61
|
+
### Step 4: Generate Application Layer
|
|
62
|
+
For each use case:
|
|
63
|
+
- Create use case implementation
|
|
64
|
+
- Create custom hooks that consume use cases
|
|
65
|
+
- Setup Zustand store for feature state
|
|
66
|
+
- Implement error handling and loading states
|
|
67
|
+
|
|
68
|
+
### Step 5: Generate Infrastructure Layer
|
|
69
|
+
- Implement repository concrete classes
|
|
70
|
+
- Setup API clients with proper typing
|
|
71
|
+
- Create adapters for external services
|
|
72
|
+
- Configure error handling and retries
|
|
73
|
+
|
|
74
|
+
### Step 6: Generate Presentation Layer
|
|
75
|
+
- Create feature-specific components
|
|
76
|
+
- Setup routing for feature pages
|
|
77
|
+
- Implement accessibility features
|
|
78
|
+
- Add loading and error states
|
|
79
|
+
|
|
80
|
+
### Step 7: Generate Tests
|
|
81
|
+
- Unit tests for domain entities and services
|
|
82
|
+
- Integration tests for use cases
|
|
83
|
+
- Component tests for presentation layer
|
|
84
|
+
- API integration tests for infrastructure layer
|
|
85
|
+
|
|
86
|
+
## Completion Criteria
|
|
87
|
+
- All layers properly implemented
|
|
88
|
+
- Clean Architecture dependencies respected
|
|
89
|
+
- TypeScript compilation successful
|
|
90
|
+
- All tests passing
|
|
91
91
|
- Feature integrated with main application
|
package/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,41 +1,38 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "siesa-agents",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Paquete para instalar y configurar agentes SIESA BMAD en tu proyecto",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"bin": {
|
|
7
|
-
"siesa-agents": "./bin/install.js"
|
|
8
|
-
},
|
|
9
|
-
"scripts": {
|
|
10
|
-
"postinstall": "node ./bin/install.js",
|
|
11
|
-
"prepublishOnly": "node ./bin/prepare-publish.js",
|
|
12
|
-
"postpublish": "node ./bin/restore-folders.js",
|
|
13
|
-
"build": "echo 'Build complete'"
|
|
14
|
-
},
|
|
15
|
-
"keywords": [
|
|
16
|
-
"siesa",
|
|
17
|
-
"bmad",
|
|
18
|
-
"agents",
|
|
19
|
-
"automation",
|
|
20
|
-
"cli"
|
|
21
|
-
],
|
|
22
|
-
"author": "Sistemas de Información Empresarial",
|
|
23
|
-
"license": "MIT",
|
|
24
|
-
"files": [
|
|
25
|
-
"bmad-core/**/*",
|
|
26
|
-
"vscode/**/*",
|
|
27
|
-
"github/**/*",
|
|
28
|
-
"bin/**/*",
|
|
29
|
-
"README.md"
|
|
30
|
-
],
|
|
31
|
-
"engines": {
|
|
32
|
-
"node": ">=14.0.0"
|
|
33
|
-
},
|
|
34
|
-
"dependencies": {
|
|
35
|
-
"fs-extra": "^11.1.1",
|
|
36
|
-
"path": "^0.12.7"
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
"shadcn": "^3.3.1"
|
|
40
|
-
}
|
|
41
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "siesa-agents",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Paquete para instalar y configurar agentes SIESA BMAD en tu proyecto",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"bin": {
|
|
7
|
+
"siesa-agents": "./bin/install.js"
|
|
8
|
+
},
|
|
9
|
+
"scripts": {
|
|
10
|
+
"postinstall": "node ./bin/install.js",
|
|
11
|
+
"prepublishOnly": "node ./bin/prepare-publish.js",
|
|
12
|
+
"postpublish": "node ./bin/restore-folders.js",
|
|
13
|
+
"build": "echo 'Build complete'"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [
|
|
16
|
+
"siesa",
|
|
17
|
+
"bmad",
|
|
18
|
+
"agents",
|
|
19
|
+
"automation",
|
|
20
|
+
"cli"
|
|
21
|
+
],
|
|
22
|
+
"author": "Sistemas de Información Empresarial",
|
|
23
|
+
"license": "MIT",
|
|
24
|
+
"files": [
|
|
25
|
+
"bmad-core/**/*",
|
|
26
|
+
"vscode/**/*",
|
|
27
|
+
"github/**/*",
|
|
28
|
+
"bin/**/*",
|
|
29
|
+
"README.md"
|
|
30
|
+
],
|
|
31
|
+
"engines": {
|
|
32
|
+
"node": ">=14.0.0"
|
|
33
|
+
},
|
|
34
|
+
"dependencies": {
|
|
35
|
+
"fs-extra": "^11.1.1",
|
|
36
|
+
"path": "^0.12.7"
|
|
37
|
+
}
|
|
38
|
+
}
|
package/vscode/mcp.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
{
|
|
2
|
-
"servers": {
|
|
3
|
-
"shadcn": {
|
|
4
|
-
"command": "npx",
|
|
5
|
-
"args": [
|
|
6
|
-
"shadcn@latest",
|
|
7
|
-
"mcp"
|
|
8
|
-
]
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"servers": {
|
|
3
|
+
"shadcn": {
|
|
4
|
+
"command": "npx",
|
|
5
|
+
"args": [
|
|
6
|
+
"shadcn@latest",
|
|
7
|
+
"mcp"
|
|
8
|
+
]
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|