| name | design-feature |
| description | Guide feature development through contract establishment and UI design phases. Use when discussing, designing, or planning a new feature that is not yet implemented. Ensures requirements are clarified, acceptance criteria defined, and UI layouts drafted before any code is written. |
Design Feature Skill
Guide new feature development through structured planning phases before implementation.
Workflow
Phase 1: Contract Establishment
Before any design or code, establish the feature contract:
- Clarify requirements - Ask questions to fully understand the feature
- Define scope - What is and isn't included
- Set acceptance criteria - Specific, testable conditions for completion
- Identify constraints - Technical limitations, dependencies, edge cases
Output a contract summary:
## Feature Contract: [Feature Name]
### Scope
- [What's included]
- [What's excluded]
### Acceptance Criteria
- [ ] Criterion 1
- [ ] Criterion 2
- [ ] Criterion 3
### Constraints
- [Technical constraints]
- [Dependencies]
Phase 2: UI Design
After contract agreement, draft the UI layout (to be included in the ticket).
Include:
- Desktop layout - Full-width design
- Mobile layout - Responsive/stacked design
- Component hierarchy - Parent-child relationships
- Interactions - User actions and responses
- Required assets - Icons, images, fonts
UI Layout template:
# [Feature Name] - UI Layout
## Desktop Layout
┌─────────────────────────────────────┐
│ Header │
├─────────────────────────────────────┤
│ Component A │ Component B │
│ │ │
├─────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────┘
## Mobile Layout
┌─────────────┐
│ Header │
├─────────────┤
│ Component A │
├─────────────┤
│ Component B │
├─────────────┤
│ Footer │
└─────────────┘
## Component Hierarchy
- ParentComponent
- ChildComponent1
- ChildComponent2
- GrandchildComponent
## Interactions
| Action | Response |
|--------|----------|
| Click X | Shows Y |
| Hover Z | Highlights |
## Required Assets
- [ ] Icon: description
- [ ] Image: description
Process Flow
- User describes feature idea
- Ask clarifying questions (no assumptions)
- Draft and agree on contract
- Draft UI layout
- Review UI together, adjust as needed
- Only after agreement, proceed to creation of ticket (include UI layout in the ticket)
