**Version:** 1.0.0
Execute Phase 5b of TDD workflow: implement minimum code to make all tests pass. Use this after Phase 5a approval to build components that satisfy tests, aiming for 85% coverage and zero linter warnings.
/plugin marketplace add nguyenthienthanh/aura-frog/plugin install aura-frog@aurafrogworkflow/Version: 1.0.0
Purpose: Execute Phase 5b - Implementation (GREEN Phase of TDD)
Trigger: Auto-triggered after Phase 5a approval OR manual /workflow:phase:5b
Write minimum code to make ALL tests pass.
Deliverables:
Focus: Make it work, not perfect (refactor in Phase 5c)
Agents: Primary dev agent + qa-automation
For each component, implement:
// Example: PostCaptionEditor.tsx
import React, { useState } from 'react';
import { View, TextInput, TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@emotion/react';
interface PostCaptionEditorProps {
caption: string;
onCaptionChange: (caption: string) => void;
onGenerate?: () => void;
onSave?: () => void;
canGenerate?: boolean;
isGenerating?: boolean;
isSaving?: boolean;
}
export const PostCaptionEditor: React.FC<PostCaptionEditorProps> = ({
caption,
onCaptionChange,
onGenerate,
onSave,
canGenerate = false,
isGenerating = false,
isSaving = false,
}) => {
const { colors, space, sizes } = useTheme();
return (
<View style={{ padding: space.md }}>
{/* Caption Input */}
<TextInput
value={caption}
onChangeText={onCaptionChange}
placeholder="Enter caption..."
multiline
maxLength={280}
style={{
borderWidth: 1,
borderColor: colors.border,
borderRadius: 8,
padding: space.sm,
minHeight: 100,
}}
/>
{/* Generate Button */}
{canGenerate && onGenerate && (
<TouchableOpacity
onPress={onGenerate}
disabled={isGenerating}
style={{
backgroundColor: colors.primary,
padding: space.sm,
borderRadius: 8,
marginTop: space.sm,
}}
>
<Text style={{ color: 'white', textAlign: 'center' }}>
{isGenerating ? 'Generating...' : 'Generate Caption'}
</Text>
</TouchableOpacity>
)}
{/* Save Button */}
{onSave && (
<TouchableOpacity
onPress={onSave}
disabled={isSaving}
style={{
backgroundColor: colors.secondary,
padding: space.sm,
borderRadius: 8,
marginTop: space.sm,
}}
>
<Text style={{ color: 'white', textAlign: 'center' }}>
{isSaving ? 'Saving...' : 'Save'}
</Text>
</TouchableOpacity>
)}
</View>
);
};
// useSocialMarketingCompositePostLogic.ts
export function useSocialMarketingCompositePostLogic(
post: SocialMarketingPost | undefined,
storyTemplate: StoryTemplate | undefined
) {
// State
const [caption, setCaption] = useState(post?.caption || '');
const [platform, setPlatform] = useState<SocialMarketingPlatform>('facebook');
const [muted, setMuted] = useState(true);
const [isGenerating, setIsGenerating] = useState(false);
// Handlers
const handleSaveCaption = async () => {
// Implementation
};
const handleGenerateCaption = async () => {
// Implementation
};
// ... more handlers
return {
state: {
caption,
platform,
muted,
isGenerating,
// ... more state
},
handlers: {
handleSaveCaption,
handleGenerateCaption,
// ... more handlers
},
};
}
# Watch mode - tests run on file save
npm test -- --watch
# Expected progression:
# Initial: 73 tests, 73 failing
# After implementing PostCaptionEditor: 61 failing
# After implementing PlatformSelector: 49 failing
# After implementing all: 0 failing ā
npm test -- --coverage
# Expected output:
File | % Stmts | % Branch | % Funcs | % Lines |
------------------------------|---------|----------|---------|---------|
PostCaptionEditor.tsx | 87.5 | 85.0 | 90.0 | 87.5 |
PlatformSelector.tsx | 91.2 | 88.5 | 92.0 | 91.2 |
MediaPreviewSection.tsx | 85.3 | 82.0 | 86.0 | 85.3 |
PostActionButtons.tsx | 89.1 | 85.5 | 90.0 | 89.1 |
useSocialMarketingLogic.ts | 92.5 | 90.0 | 94.0 | 92.5 |
------------------------------|---------|----------|---------|---------|
All files | 88.2 | 86.0 | 90.0 | 88.2 | ā
Target: ā„85% overall ā
npm run lint
# Expected: 0 errors, 0 warnings
ā All files pass linting
Phase 5b complete when:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
šÆ PHASE 5b COMPLETE: Implementation (GREEN)
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
š Summary:
Implemented 5 components + 1 custom hook, all tests passing!
š¦ Deliverables:
āļø PostCaptionEditor.tsx (95 lines)
āļø PlatformSelector.tsx (65 lines)
āļø MediaPreviewSection.tsx (85 lines)
āļø PostActionButtons.tsx (75 lines)
āļø SocialMarketingCompositePost.phone.tsx (125 lines - refactored)
š§ useSocialMarketingCompositePostLogic.ts (210 lines)
š¢ Test Results (GREEN Phase):
Total: 73 tests
Passing: 73 ā
Failing: 0 ā
Duration: 12.5s
All tests green! š
š Coverage Report:
Statements: 88.2% ā
(target: 85%)
Branches: 86.0% ā
(target: 80%)
Functions: 90.0% ā
(target: 85%)
Lines: 88.2% ā
(target: 85%)
ā
Linter: 0 errors, 0 warnings ā
ā
Success Criteria:
ā
All components implemented
ā
All 73 tests passing
ā
Coverage exceeds threshold (88% vs 85%)
ā
Linter clean
ā
No breaking changes
āļø Next Phase: Phase 5c - Refactor
Improve code quality while keeping tests green
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ļø ACTION REQUIRED
Type "/workflow:approve" ā Proceed to Phase 5c (REFACTOR)
Type "/workflow:reject" ā Fix implementation issues
Type "/workflow:modify <feedback>" ā Adjust implementation
Your response:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
// Must pass all checks
const validation = {
allTestsPass: true, // ā
REQUIRED
coverageMet: true, // ā
REQUIRED (ā„85%)
linterClean: true, // ā
REQUIRED
noBreakingChanges: true, // ā
REQUIRED
};
if (!validation.allTestsPass) {
throw new Error('Cannot proceed: Tests failing');
}
if (!validation.coverageMet) {
throw new Error('Cannot proceed: Coverage below 85%');
}
src/features/socialMarketing/
āāā components/
āāā SocialMarketingCompositePost/
āāā SocialMarketingCompositePost.phone.tsx (refactored)
āāā components/
ā āāā PostCaptionEditor.tsx ā
ā āāā PlatformSelector.tsx ā
ā āāā MediaPreviewSection.tsx ā
ā āāā PostActionButtons.tsx ā
āāā hooks/
āāā useSocialMarketingCompositePostLogic.ts ā
logs/contexts/{workflow-id}/deliverables/
āāā PHASE_5B_IMPLEMENTATION_REPORT.md
āāā coverage-report.html
After approval ā /workflow:phase:5c:
Status: Active command
Related: workflow:phase:5a, workflow:phase:5c, workflow:approve
Remember:
š¢ GREEN = GREAT! All tests passing means functionality is correct!