implement-feature
Implement an approved feature file using ATDD workflow with test-first development
来源信息
- 仓库
- bdfinst/vsm-workshop
- 最近来源活动
- 2026年3月16日 12:07
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 19
- Forks
- 7
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- implement-feature
- description
- Implement an approved feature file using ATDD workflow with test-first development
- user-invocable
- true
- allowed-tools
- Read, Write, Edit, Grep, Glob, Bash
# Skill: Implement Feature
Implement an approved feature using ATDD workflow.
## Usage
```
/implement-feature <feature-file-path>
```
## Prerequisites
- Feature file must exist and be approved
- Do NOT use this skill without an approved feature file
## Process
1. Read the approved feature file
2. Create step definitions in `features/step-definitions/`
3. Run acceptance tests (should fail)
4. Implement minimum code to pass first scenario
5. Refactor while keeping tests green
6. Repeat for remaining scenarios
## Step Definition Template
```javascript
// features/step-definitions/{feature}.steps.js
import { Given, When, Then } from '@cucumber/cucumber'
import { expect } from 'chai'
Given('I have an empty value stream map', function () {
this.vsm = { steps: [], connections: [] }
})
When('I add a step named {string} with process time {int} minutes', function (name, processTime) {
const step = {
id: crypto.randomUUID(),
name,
processTime,
leadTime: processTime,
percentCompleteAccurate: 100,
queueSize: 0,
batchSize: 1,
}
this.vsm.steps.push(step)
})
Then('the map should contain {int} step(s)', function (count) {
expect(this.vsm.steps).to.have.lengthOf(count)
})
Then('the step should display {string}', function (name) {
const step = this.vsm.steps.find(s => s.name === name)
expect(step).to.exist
})
```
## Implementation Order
1. **Step definitions first** - Make them fail meaningfully
2. **Data layer** - Stores, state management
3. **Business logic** - Calculations, validations
4. **UI components** - React components
5. **Integration** - Wire everything together
## Component Implementation Pattern
```jsx
// src/components/builder/StepEditor.jsx
import { useState } from 'react'
import PropTypes from 'prop-types'
function StepEditor({ step, onUpdate }) {
const [name, setName] = useState(step?.name || '')
const [processTime, setProcessTime] = useState(step?.processTime || 0)
const handleSubmit = (e) => {
e.preventDefault()
onUpdate({ ...step, name, processTime })
}
return (
<form onSubmit={handleSubmit} data-testid="step-editor">
<label>
Step Name
<input
value={name}
onChange={(e) => setName(e.target.value)}
data-testid="step-name-input"
/>
</label>
<label>
Process Time (minutes)
<input
type="number"
value={processTime}
onChange={(e) => setProcessTime(Number(e.target.value))}
data-testid="process-time-input"
/>
</label>
<button type="submit">Save</button>
</form>
)
}
StepEditor.propTypes = {
step: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
processTime: PropTypes.number,
}),
onUpdate: PropTypes.func.isRequired,
}
export default StepEditor
```
## Testing Commands
```bash
# Run acceptance tests for specific feature
npm run test:acceptance -- features/builder/add-step.feature
# Run in watch mode during implementation
npm run test:acceptance --watch
# Run all acceptance tests
npm run test:acceptance
```
## Done Criteria
- [ ] All scenarios in the feature file pass
- [ ] No skipped or pending steps
- [ ] Code is refactored and clean
- [ ] Unit tests added for complex logic
在 GitHub 查看