I'm Samuel FajreldinesI am a specialist in the entire JavaScript and TypeScript ecosystem (including Node.js, React, Angular and Vue.js) I am expert in AI and in creating AI integrated solutions I am expert in DevOps and Serverless Architecture (AWS, Google Cloud and Azure) I am expert in PHP and its frameworks (such as Codeigniter and Laravel). |
Samuel FajreldinesI am a specialist in the entire JavaScript and TypeScript ecosystem. I am expert in AI and in creating AI integrated solutions. I am expert in DevOps and Serverless Architecture I am expert in PHP and its frameworks.
|
Imagine Claude Code running 100% autonomously for hours, coding and reviewing its own code until everything is fully done.
This is Claudiomiro! https://github.com/samuelfaj/claudiomiro
When using Claude Code directly for complex tasks, you've probably noticed it stops before completing the job. This happens for good reasons:
The result? You find yourself typing "continue" over and over again, managing the workflow manually.
Claudiomiro is a Node.js CLI application that wraps Claude AI in a structured, autonomous workflow. It doesn't just answer questions or generate code - it completes entire features and refactorings by following a disciplined 5-step process:
Here's how it works:
┌─────────────────────────────────────────────────────────────┐
│ AUTONOMOUS LOOP │
├─────────────────────────────────────────────────────────────┤
│ │
│ 1. Check State: What step are we on? │
│ ↓ │
│ 2. Execute Current Step │
│ ↓ │
│ 3. Check Completion Markers: │
│ • PROMPT.md exists? → Move to Research │
│ • TODO.md exists? → Check if "Fully implemented: YES" │
│ • Not fully implemented? → Run Implementation again │
│ • Fully implemented? → Move to Testing │
│ • GITHUB_PR.md exists? → Move to Commit │
│ ↓ │
│ 4. Loop back to Step 1 │
│ │
│ Maximum 15 iterations to prevent infinite loops │
│ │
└─────────────────────────────────────────────────────────────┘
Here's what happens when you run a complex task:
$ claudiomiro --prompt="Refactor authentication system"
Cycle 1: [Step 1] Creating PROMPT.md and TODO.md
Cycle 2: [Step 2] Researching codebase and updating TODO.md
Cycle 3: [Step 3] Implementing tasks (TODO.md shows "Fully implemented: NO")
Cycle 4: [Step 3] Continue implementing (still "NO")
Cycle 5: [Step 3] Continue implementing (still "NO")
Cycle 6: [Step 3] Final implementation (changes to "Fully implemented: YES")
Cycle 7: [Step 4] Running tests... ❌ 3 tests failed
Cycle 8: [Step 3] Fixing failing tests
Cycle 9: [Step 4] Running tests... ✅ All tests passed!
Cycle 10: [Step 5] Creating commit and pushing
✓ Task completed in 10 autonomous cycles
To prevent infinite loops, Claudiomiro has safeguards:
--push=false
to review before final commitThe magic isn't in the tool itself - it's in how Claudiomiro thinks through complex problems and persists until completion.
# Install globally
npm install -g claudiomiro
# Run with a complex prompt
claudiomiro --prompt="Your complex task description here"
# Or run interactively
claudiomiro
For Claudiomiro to work at its best, your codebase should have linting and unit tests configured. Here's why:
Linters provide immediate feedback about code quality, style violations, and potential errors. When Claudiomiro runs a linter (like ESLint, Prettier, or Pylint), it receives clear signals about:
Without linting: Claudiomiro might write code that compiles but doesn't follow your project's conventions.
With linting: Claudiomiro automatically fixes style issues and catches errors early, ensuring the code integrates seamlessly with your existing codebase.
Unit tests are Claudiomiro's feedback loop. They tell the AI whether its implementation actually works:
Without tests: Claudiomiro writes code but has no way to verify if it works correctly. It might think it's done when bugs still exist.
With tests: Claudiomiro runs the test suite, sees failures, analyzes the errors, fixes the issues, and re-runs tests until everything passes. This creates an autonomous quality assurance loop.
Step 3: Implementation
↓
Claudiomiro writes code
↓
Runs tests
↓
Tests fail? → Analyzes errors → Fixes code → Runs tests again
↓
Tests pass? → Marks task complete → Moves to next task
↓
All tasks done? → Proceeds to Step 4
This loop can run multiple times automatically until all tests pass. That's what makes Claudiomiro truly autonomous - it doesn't need you to tell it "continue" or "try again."
Minimum:
Optimal:
Example package.json:
{
"scripts": {
"lint": "eslint . --fix",
"test": "jest --coverage",
"test:watch": "jest --watch"
}
}
Claudiomiro will automatically discover and use these scripts, creating a robust feedback mechanism that ensures code quality.
Now let's dive into real-world scenarios that demonstrate Claudiomiro's capabilities.
You have a financial management system with near-identical modules:
The code is 95% identical - same structure, same validation, same UI patterns. The only difference is the backend table. Every time you change one, you must manually replicate the change in the other. This is a maintenance nightmare.
claudiomiro --prompt="
/Users/dev/project/frontend/src/modules/financial/bills/bills-to-pay-form
/Users/dev/project/frontend/src/modules/financial/bills/bills-to-pay-list
/Users/dev/project/frontend/src/modules/financial/bills/bills-to-receive-form
/Users/dev/project/frontend/src/modules/financial/bills/bills-to-receive-list
These are practically identical and will continue to be. The only difference is that
one is for accounts payable and the other for accounts receivable.
I want you to analyze each of them and unify as much as possible to avoid complexity.
Unify and componentize to share the maximum amount of code possible.
Normally, whenever I change something in accounts payable, I expect the same change
in accounts receivable. The structure is exactly the same. Only the backend table differs.
"
Claudiomiro's Thought Process:
💭 "I've been given 4 file paths. Let me first read all of them to understand
the full scope of duplication."
Reading:
- bills-to-pay-form (523 lines)
- bills-to-pay-list (612 lines)
- bills-to-receive-form (531 lines)
- bills-to-receive-list (618 lines)
💭 "Interesting patterns emerging:
1. Both forms have identical field structures:
- amount, date, description, category, payment_method
- Same validation rules (required fields, date format, amount > 0)
- Same form layout and styling
2. Both lists have identical features:
- Same table columns (date, description, amount, status, actions)
- Same filtering options (date range, status, search)
- Same pagination logic
- Same action buttons (edit, delete, view details)
3. Only differences:
- API endpoints: /api/bills-to-pay vs /api/bills-to-receive
- Page titles: 'Bills to Pay' vs 'Bills to Receive'
- Some status labels: 'Paid' vs 'Received'
4. Total duplication: ~2,200 lines of nearly identical code"
Enhanced Prompt Generated (PROMPT.md):
# Task: Unify Duplicated Bills Management Modules
## Problem Analysis
- 2,200+ lines of duplicated code across 4 files
- 95% code similarity between accounts payable and receivable
- High maintenance burden: changes must be replicated manually
- Risk of inconsistencies and bugs from incomplete synchronization
## Solution Strategy
Create a unified, configurable architecture:
1. **Shared Components**
- BillForm (configurable for pay/receive)
- BillList (configurable for pay/receive)
- BillFilters (common filtering logic)
- BillTableRow (common row rendering)
2. **Configuration-Based Approach**
- Single source of truth for business logic
- Type parameter distinguishes pay/receive
- Backend API routes dynamically constructed
3. **Benefits**
- Reduce codebase by ~1,800 lines
- Single place to make changes
- Eliminate synchronization bugs
- Easier testing and maintenance
## Technical Approach
- Create shared components in: modules/financial/bills/shared/
- Use TypeScript generics for type safety
- Implement hooks for shared business logic
- Comprehensive tests for both configurations
Claudiomiro's Research Process:
💭 "Let me research the codebase patterns and best practices..."
Analyzing project structure:
✓ Found: React with TypeScript
✓ Found: React Hook Form for form management
✓ Found: React Query for API calls
✓ Found: Existing shared components in /shared folder
✓ Found: Theme system with consistent styling
Researching similar patterns in codebase:
✓ Found: /modules/inventory - uses similar shared component pattern
✓ Found: /modules/customers - good example of type-based configuration
Context7 research:
✓ React Hook Form best practices for dynamic forms
✓ TypeScript discriminated unions for type safety
✓ React Query configuration patterns
💭 "I have enough information to create a robust, maintainable solution."
Generated TODO.md:
Fully implemented: NO
## Analysis Complete
- Total code to unify: 2,264 lines
- Duplication percentage: 94.8%
- Estimated reduction: 1,847 lines (~82%)
## Implementation Tasks
### Phase 1: Create Shared Types & Configuration
- [ ] Create BillType enum ('payable' | 'receivable')
- [ ] Create BillConfig interface for configuration
- [ ] Create shared type definitions
- [ ] Create API endpoint resolver utility
### Phase 2: Extract Shared Business Logic
- [ ] Create useBillForm hook (shared form logic)
- [ ] Create useBillList hook (shared list logic)
- [ ] Create useBillFilters hook (shared filtering)
- [ ] Create useBillAPI hook (dynamic API calls)
### Phase 3: Build Shared Components
- [ ] Create BillForm component (configurable)
- [ ] Create BillList component (configurable)
- [ ] Create BillFilters component (shared)
- [ ] Create BillTableRow component (shared)
- [ ] Create BillStatusBadge component (shared)
- [ ] Create BillActions component (shared)
### Phase 4: Create Entry Point Components
- [ ] Create BillsToPayPage (thin wrapper)
- [ ] Create BillsToReceivePage (thin wrapper)
- [ ] Update routing configuration
### Phase 5: Migration & Cleanup
- [ ] Migrate all existing functionality to shared components
- [ ] Verify feature parity
- [ ] Remove old duplicated files
- [ ] Update imports across codebase
### Phase 6: Testing
- [ ] Unit tests for all shared hooks
- [ ] Component tests for shared components
- [ ] Integration tests for both bill types
- [ ] E2E tests for complete workflows
- [ ] Test edge cases and error handling
### Phase 7: Documentation
- [ ] Add JSDoc comments to shared components
- [ ] Update README with new architecture
- [ ] Create migration guide for future similar modules
Claudiomiro's Implementation Reasoning:
💭 "Starting with the foundation - types and configuration..."
Creating: modules/financial/bills/shared/types.ts
Rationale: Type safety is crucial for this refactoring. Strong types will catch
configuration errors at compile time.
What Claudiomiro Creates:
// modules/financial/bills/shared/types.ts
export enum BillType {
PAYABLE = 'payable',
RECEIVABLE = 'receivable'
}
export interface BillConfig {
type: BillType;
title: string;
endpoint: string;
statusLabels: {
pending: string;
completed: string;
cancelled: string;
};
actionLabels: {
create: string;
edit: string;
delete: string;
markComplete: string;
};
}
export const BILL_CONFIGS: Record<BillType, BillConfig> = {
[BillType.PAYABLE]: {
type: BillType.PAYABLE,
title: 'Bills to Pay',
endpoint: '/api/bills-to-pay',
statusLabels: {
pending: 'Pending Payment',
completed: 'Paid',
cancelled: 'Cancelled'
},
actionLabels: {
create: 'Add Bill to Pay',
edit: 'Edit Bill',
delete: 'Delete Bill',
markComplete: 'Mark as Paid'
}
},
[BillType.RECEIVABLE]: {
type: BillType.RECEIVABLE,
title: 'Bills to Receive',
endpoint: '/api/bills-to-receive',
statusLabels: {
pending: 'Pending Receipt',
completed: 'Received',
cancelled: 'Cancelled'
},
actionLabels: {
create: 'Add Bill to Receive',
edit: 'Edit Bill',
delete: 'Delete Bill',
markComplete: 'Mark as Received'
}
}
};
💭 "Now the shared form logic. This was duplicated in both forms with 500+ lines each.
I'll extract all common logic into a reusable hook."
Creating: modules/financial/bills/shared/hooks/useBillForm.ts
Rationale: React Hook Form logic was 98% identical. This hook will handle all form
state, validation, and submission logic for both bill types.
// modules/financial/bills/shared/hooks/useBillForm.ts
export const useBillForm = (config: BillConfig, billId?: string) => {
const { control, handleSubmit, formState: { errors } } = useForm<BillFormData>({
resolver: zodResolver(billFormSchema),
defaultValues: {
amount: 0,
date: new Date(),
description: '',
category: '',
paymentMethod: ''
}
});
// Fetch existing bill if editing
const { data: existingBill, isLoading } = useQuery(
['bill', config.type, billId],
() => billId ? fetchBill(config.endpoint, billId) : null,
{ enabled: !!billId }
);
// Save mutation
const saveMutation = useMutation(
(data: BillFormData) => saveBill(config.endpoint, billId, data),
{
onSuccess: () => {
toast.success(`Bill ${billId ? 'updated' : 'created'} successfully`);
queryClient.invalidateQueries(['bills', config.type]);
}
}
);
const onSubmit = handleSubmit((data) => saveMutation.mutate(data));
return {
control,
errors,
isLoading,
existingBill,
onSubmit,
isSaving: saveMutation.isLoading
};
};
💭 "The list component had complex filtering, pagination, and action handling.
All of it was duplicated. Let me extract that into a hook."
Creating: modules/financial/bills/shared/hooks/useBillList.ts
Rationale: 600+ lines of list logic in each file. This consolidates filtering,
sorting, pagination, and actions into one reusable hook.
// modules/financial/bills/shared/hooks/useBillList.ts
export const useBillList = (config: BillConfig) => {
const [filters, setFilters] = useState<BillFilters>({
search: '',
status: 'all',
dateFrom: null,
dateTo: null
});
const [pagination, setPagination] = useState({ page: 1, pageSize: 20 });
// Fetch bills with filters
const { data, isLoading, refetch } = useQuery(
['bills', config.type, filters, pagination],
() => fetchBills(config.endpoint, filters, pagination)
);
// Delete mutation
const deleteMutation = useMutation(
(billId: string) => deleteBill(config.endpoint, billId),
{
onSuccess: () => {
toast.success('Bill deleted successfully');
refetch();
}
}
);
// Mark as complete mutation
const completeMutation = useMutation(
(billId: string) => markComplete(config.endpoint, billId),
{
onSuccess: () => {
toast.success(config.statusLabels.completed);
refetch();
}
}
);
return {
bills: data?.bills || [],
totalCount: data?.totalCount || 0,
isLoading,
filters,
setFilters,
pagination,
setPagination,
handleDelete: deleteMutation.mutate,
handleComplete: completeMutation.mutate,
config
};
};
💭 "Now the UI components. They can be thin wrappers around the hooks."
Creating: modules/financial/bills/shared/components/BillForm.tsx
Rationale: Generic form component that works for both bill types through configuration.
// modules/financial/bills/shared/components/BillForm.tsx
interface BillFormProps {
config: BillConfig;
billId?: string;
onSuccess?: () => void;
}
export const BillForm: React.FC<BillFormProps> = ({ config, billId, onSuccess }) => {
const { control, errors, isLoading, onSubmit, isSaving } = useBillForm(config, billId);
if (isLoading) return <LoadingSpinner />;
return (
<form onSubmit={onSubmit}>
<FormField
name="amount"
control={control}
label="Amount"
type="currency"
error={errors.amount}
/>
<FormField
name="date"
control={control}
label="Date"
type="date"
error={errors.date}
/>
<FormField
name="description"
control={control}
label="Description"
type="textarea"
error={errors.description}
/>
<FormField
name="category"
control={control}
label="Category"
type="select"
options={CATEGORIES}
error={errors.category}
/>
<FormField
name="paymentMethod"
control={control}
label="Payment Method"
type="select"
options={PAYMENT_METHODS}
error={errors.paymentMethod}
/>
<FormActions>
<Button type="submit" loading={isSaving}>
{billId ? 'Update' : config.actionLabels.create}
</Button>
<Button variant="secondary" onClick={onSuccess}>
Cancel
</Button>
</FormActions>
</form>
);
};
💭 "The list component follows the same pattern."
Creating: modules/financial/bills/shared/components/BillList.tsx
// modules/financial/bills/shared/components/BillList.tsx
interface BillListProps {
config: BillConfig;
}
export const BillList: React.FC<BillListProps> = ({ config }) => {
const {
bills,
totalCount,
isLoading,
filters,
setFilters,
pagination,
setPagination,
handleDelete,
handleComplete
} = useBillList(config);
return (
<div>
<PageHeader>
<h1>{config.title}</h1>
<Button onClick={() => navigate(`/bills/${config.type}/new`)}>
{config.actionLabels.create}
</Button>
</PageHeader>
<BillFilters filters={filters} onChange={setFilters} />
<Table>
<TableHeader>
<TableRow>
<TableHead>Date</TableHead>
<TableHead>Description</TableHead>
<TableHead>Amount</TableHead>
<TableHead>Status</TableHead>
<TableHead>Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{bills.map(bill => (
<BillTableRow
key={bill.id}
bill={bill}
config={config}
onDelete={handleDelete}
onComplete={handleComplete}
/>
))}
</TableBody>
</Table>
<Pagination
currentPage={pagination.page}
pageSize={pagination.pageSize}
totalCount={totalCount}
onPageChange={(page) => setPagination({ ...pagination, page })}
/>
</div>
);
};
💭 "Finally, the entry points become incredibly simple - just configuration wrappers."
Creating: modules/financial/bills/BillsToPayPage.tsx
Creating: modules/financial/bills/BillsToReceivePage.tsx
Rationale: These go from 600+ lines each to ~10 lines each.
// modules/financial/bills/BillsToPayPage.tsx
export const BillsToPayPage: React.FC = () => {
return <BillList config={BILL_CONFIGS[BillType.PAYABLE]} />;
};
// modules/financial/bills/BillsToReceivePage.tsx
export const BillsToReceivePage: React.FC = () => {
return <BillList config={BILL_CONFIGS[BillType.RECEIVABLE]} />;
};
💭 "Now updating TODO.md to track progress..."
Updating: TODO.md
Status: Fully implemented: YES
Claudiomiro's Testing Strategy:
💭 "I need comprehensive tests to ensure both bill types work identically."
Running: npm test
Creating tests:
✓ useBillForm.test.ts - Tests hook with both configurations
✓ useBillList.test.ts - Tests filtering, pagination, actions
✓ BillForm.test.tsx - Tests form rendering and validation
✓ BillList.test.tsx - Tests list rendering and interactions
✓ integration.test.tsx - Tests complete workflows for both types
Test Results:
✅ 45 tests passed
Coverage:
- Statements: 98.7%
- Branches: 96.2%
- Functions: 100%
- Lines: 98.5%
💭 "All tests passing. Let me verify both configurations work identically..."
Running manual verification:
✓ Bills to Pay form works correctly
✓ Bills to Receive form works correctly
✓ Both lists display properly
✓ Filtering works on both
✓ Actions (edit, delete, complete) work on both
✓ Pagination works on both
💭 "Perfect. Creating GITHUB_PR.md..."
Generated Pull Request Description (GITHUB_PR.md):
## Summary
Unified duplicated Bills management modules by extracting shared logic into configurable components.
## Problem
- 2,264 lines of duplicated code across Bills to Pay and Bills to Receive
- Manual synchronization of changes between modules
- High risk of inconsistencies and bugs
## Solution
Created a configuration-based architecture with shared components:
- Single source of truth for business logic
- Type parameter distinguishes payable vs receivable
- All common logic extracted into reusable hooks and components
## Changes Made
### New Shared Architecture
- ✅ Created `shared/types.ts` - Configuration system
- ✅ Created `shared/hooks/useBillForm.ts` - Unified form logic
- ✅ Created `shared/hooks/useBillList.ts` - Unified list logic
- ✅ Created `shared/components/BillForm.tsx` - Generic form component
- ✅ Created `shared/components/BillList.tsx` - Generic list component
- ✅ Created `shared/components/BillTableRow.tsx` - Shared row rendering
- ✅ Created `shared/components/BillFilters.tsx` - Shared filtering
- ✅ Created `shared/components/BillStatusBadge.tsx` - Shared status display
### Simplified Entry Points
- ✅ Refactored `BillsToPayPage.tsx` - From 612 lines to 8 lines
- ✅ Refactored `BillsToReceivePage.tsx` - From 618 lines to 8 lines
- ✅ Refactored `BillsToPayForm.tsx` - From 523 lines to 8 lines
- ✅ Refactored `BillsToReceiveForm.tsx` - From 531 lines to 8 lines
### Testing
- ✅ 45 comprehensive tests (unit + integration)
- ✅ 98.7% code coverage
- ✅ Both bill types tested identically
## Impact
### Code Reduction
- **Before**: 2,264 lines
- **After**: 417 lines
- **Reduction**: 1,847 lines (81.6%)
### Maintenance Benefits
- Changes now made in ONE place instead of FOUR
- Zero risk of synchronization bugs
- Easier to add new features
- Simpler to understand and onboard new developers
### Future Extensibility
This pattern can be applied to other similar modules:
- Invoices (issued vs received)
- Orders (purchase vs sales)
- Contracts (customer vs supplier)
## Migration Required
None - All functionality preserved, architecture improved
## Breaking Changes
None - All public APIs remain unchanged
## Testing
All tests passing: ✅
- Unit tests: 32 passed
- Integration tests: 13 passed
- Coverage: 98.7%
💭 "Creating meaningful commit message from the work done..."
git add .
git commit -m "refactor: unify bills management modules into shared architecture
- Extracted 1,847 lines of duplicated code into shared components
- Created configuration-based system for payable/receivable bills
- Reduced codebase complexity by 81.6%
- Maintained 100% feature parity with comprehensive tests
- Simplified future maintenance with single source of truth"
git push origin feature/unify-bills-modules
✓ Commit created and pushed successfully
Before Claudiomiro:
After Claudiomiro:
You need to build a complete user onboarding flow with multiple steps, backend processing, email notifications, and analytics tracking.
claudiomiro --prompt="
Create a comprehensive user onboarding system:
1. Multi-step wizard (5 steps):
- Step 1: Basic profile (name, email, password)
- Step 2: Company information (name, size, industry)
- Step 3: Team setup (invite team members)
- Step 4: Integrations (connect external services)
- Step 5: Preferences (notifications, timezone, language)
2. Backend requirements:
- Create user record with email verification
- Send welcome email
- Process team invitations (send emails)
- Set up integrations via OAuth
- Create analytics events for each step
- Save progress (allow resume later)
3. Frontend requirements:
- Beautiful step indicator
- Form validation with real-time feedback
- Save & continue later functionality
- Progress bar
- Congratulations screen on completion
- Mobile responsive
4. Testing:
- Full test coverage for all steps
- Test email sending (mocked)
- Test OAuth flows (mocked)
- Test progress saving/resuming
"
Step 1: Analysis & Planning
💭 "This is a complex feature with multiple interconnected parts. Let me break it down..."
Analyzing requirements:
- Frontend: Multi-step wizard (complex state management)
- Backend: 7 new API endpoints
- Database: 3 new tables (users, invitations, onboarding_progress)
- External integrations: Email service, OAuth providers
- Testing: ~50 tests needed
Creating PROMPT.md with enhanced breakdown...
Creating TODO.md with 47 specific tasks...
Generated TODO.md (excerpt):
Fully implemented: NO
## Architecture Decisions
- Use React Context for wizard state management
- Zustand for step progress persistence
- React Hook Form for each step's validation
- React Query for API calls
- Backend: Node.js + Express + PostgreSQL
- Email: Nodemailer with template system
- OAuth: Passport.js
## Implementation Plan
### Phase 1: Database & Migrations (6 tasks)
- [ ] Create users table migration
- [ ] Create onboarding_progress table migration
- [ ] Create team_invitations table migration
- [ ] Add OAuth tokens table
- [ ] Create database indexes for performance
- [ ] Create database seed data for development
### Phase 2: Backend API (12 tasks)
- [ ] POST /api/onboarding/step1 - Save basic profile
- [ ] POST /api/onboarding/step2 - Save company info
- [ ] POST /api/onboarding/step3 - Send team invitations
- [ ] GET /api/onboarding/integrations - List available integrations
- [ ] POST /api/onboarding/step4 - Connect integration
- [ ] POST /api/onboarding/step5 - Save preferences
- [ ] GET /api/onboarding/progress - Get current progress
- [ ] POST /api/onboarding/complete - Mark onboarding complete
- [ ] Email service - Welcome email template
- [ ] Email service - Team invitation template
- [ ] OAuth service - Google integration
- [ ] OAuth service - Slack integration
### Phase 3: Frontend Components (15 tasks)
- [ ] OnboardingProvider (Context)
- [ ] useOnboarding hook
- [ ] StepIndicator component
- [ ] ProgressBar component
- [ ] Step1BasicProfile component
- [ ] Step2CompanyInfo component
- [ ] Step3TeamSetup component
- [ ] Step4Integrations component
- [ ] Step5Preferences component
- [ ] OnboardingComplete component
- [ ] SaveProgressButton component
- [ ] NavigationButtons component
- [ ] FormField components
- [ ] Validation schemas (Zod)
- [ ] Mobile responsive styling
### Phase 4: Testing (14 tasks)
- [ ] Unit tests: OnboardingProvider
- [ ] Unit tests: useOnboarding hook
- [ ] Unit tests: All 5 step components
- [ ] Unit tests: Backend API endpoints
- [ ] Integration tests: Complete flow
- [ ] Email mocking tests
- [ ] OAuth flow tests (mocked)
- [ ] Progress save/resume tests
- [ ] Validation tests
- [ ] Mobile responsiveness tests
Step 2: Research
💭 "Let me research best practices and existing patterns in this codebase..."
Researching via Context7:
✓ React Context patterns for complex state
✓ Multi-step form best practices
✓ OAuth implementation guides
✓ Email template best practices
Analyzing existing codebase:
✓ Found existing email service - can extend it
✓ Found auth system - can integrate OAuth there
✓ Found design system - consistent UI components
✓ Found analytics service - can add tracking events
Updating TODO.md with refined approach...
Step 3: Implementation
Claudiomiro systematically builds everything:
Step 4: Testing
Running all tests...
Backend Tests:
✅ User creation and email verification - 6 tests passed
✅ Onboarding progress save/load - 4 tests passed
✅ Team invitation emails - 5 tests passed
✅ OAuth integration flow - 8 tests passed
✅ Preferences saving - 3 tests passed
✅ API validation - 12 tests passed
Frontend Tests:
✅ OnboardingProvider state management - 8 tests passed
✅ Step components rendering - 15 tests passed
✅ Form validation - 18 tests passed
✅ Navigation between steps - 6 tests passed
✅ Progress save/resume - 5 tests passed
✅ Mobile responsive behavior - 4 tests passed
Integration Tests:
✅ Complete onboarding flow - 8 tests passed
✅ Resume interrupted onboarding - 3 tests passed
Total: 105 tests passed ✅
Coverage: 97.3%
Step 5: Documentation & Commit
Creating comprehensive PR description...
git commit -m "feat: implement complete user onboarding system
- Multi-step wizard with 5 steps and progress tracking
- Backend API with 8 endpoints
- Email notifications for welcome and team invitations
- OAuth integrations (Google, Slack)
- Save & resume functionality
- Mobile responsive design
- 105 comprehensive tests with 97.3% coverage"
git push origin feature/user-onboarding
✓ Complete onboarding system ready for review
What Claudiomiro Built in 25 Minutes:
Manual Estimate: 3-5 days Claudiomiro Time: 25 minutes Time Saved: 95%
Your application uses an outdated authentication pattern. You need to refactor from session-based auth to JWT across the entire stack.
claudiomiro --prompt="
Refactor authentication from session-based to JWT tokens:
Current state:
- Backend uses Express sessions with Redis
- Frontend stores session cookie
- 25+ protected routes
- 15+ API endpoints check session
- User context relies on session data
Target state:
- JWT tokens (access + refresh)
- Secure httpOnly cookies for refresh tokens
- Access token in memory
- All endpoints validate JWT
- Frontend automatically refreshes tokens
- Logout blacklists tokens
- Maintain all existing functionality
Important:
- Zero downtime migration
- Backward compatible during transition
- Comprehensive tests
- Update all 25+ routes
- Update all 15+ API endpoints
"
Analysis Phase:
💭 "This is a large-scale refactoring touching multiple layers. Let me map out everything..."
Scanning codebase for authentication usage:
Found 127 files using authentication:
- 25 protected routes
- 15 API endpoints with auth middleware
- 8 frontend components using user context
- 12 services making authenticated requests
- Backend session configuration in 3 files
- Redis session store
- Logout functionality in 5 places
💭 "I need a phased migration strategy to avoid breaking anything..."
Creating migration strategy:
Phase 1: Add JWT alongside sessions (both work)
Phase 2: Update backend to accept both
Phase 3: Update frontend to use JWT
Phase 4: Remove session code
This ensures zero downtime and allows rollback at any point.
Implementation Strategy:
## Migration Plan
### Phase 1: Foundation
1. Install JWT libraries
2. Create JWT service (generate, verify, refresh)
3. Create token blacklist (Redis)
4. Add JWT middleware (parallel to session)
5. Update login endpoint to return both session + JWT
### Phase 2: Backend Migration
6. Update all 15 API endpoints to accept JWT OR session
7. Add refresh token endpoint
8. Add token blacklist to logout
9. Tests for JWT flow
### Phase 3: Frontend Migration
10. Create token management service
11. Update auth context to use JWT
12. Add token refresh interceptor
13. Update all API calls to include JWT
14. Update logout to clear tokens
15. Tests for new auth flow
### Phase 4: Cleanup
16. Remove session code from backend
17. Remove Redis session store
18. Remove session cookies from frontend
19. Update documentation
Execution:
Claudiomiro methodically:
Testing Results:
Running comprehensive test suite...
✅ JWT generation and validation - 12 tests
✅ Token refresh mechanism - 8 tests
✅ Token blacklist on logout - 4 tests
✅ All 15 API endpoints accept JWT - 30 tests
✅ All 25 frontend routes protected - 25 tests
✅ Auth context state management - 15 tests
✅ Automatic token refresh - 8 tests
✅ Logout clears all tokens - 6 tests
✅ Expired token handling - 10 tests
✅ Invalid token handling - 8 tests
Total: 126 tests passed ✅
No breaking changes detected ✅
What Changed:
Manual Estimate: 2 weeks Claudiomiro Time: 35 minutes Time Saved: 98%
Users report intermittent data corruption in a financial calculation system. The bug only happens under specific conditions.
claudiomiro --prompt="
Investigate and fix bug:
User reports: 'Transaction totals are sometimes incorrect'
Symptoms:
- Happens randomly (can't reproduce consistently)
- Only on transactions with multiple line items
- More likely during high traffic
- Database shows correct data, but API returns wrong totals
Additional context:
- Financial calculation service: backend/services/FinancialService.js
- Transaction API: backend/routes/transactions.js
- Frontend displays: frontend/components/TransactionSummary.tsx
Requirements:
- Find root cause
- Fix the bug
- Add tests to prevent regression
- Add logging for future debugging
"
Investigation Phase:
💭 "Random bugs are usually race conditions or caching issues. Let me investigate..."
Reading: backend/services/FinancialService.js
Found suspicious code:
```javascript
let runningTotal = 0; // ⚠️ Global variable!
function calculateTotal(lineItems) {
runningTotal = 0; // Reset
for (const item of lineItems) {
runningTotal += item.amount;
}
return runningTotal;
}
💭 "There's the bug! Global variable in a concurrent environment."
Analysis:
This explains:
💭 "Let me check if this pattern exists elsewhere..."
Scanning codebase for similar patterns: ⚠️ Found in: DiscountService.js (similar global variable) ⚠️ Found in: TaxCalculator.js (similar global variable) ✓ No issues in: PaymentProcessor.js
💭 "Three files to fix. Let me create a comprehensive solution..."
**Solution Design:**
```markdown
## Root Cause
Global variables in calculation functions cause race conditions under concurrent requests.
## Fix Strategy
1. Remove all global variables
2. Use pure functions (local variables only)
3. Add concurrency tests
4. Add logging for calculation tracking
5. Apply fix to all affected services
## Affected Files
- backend/services/FinancialService.js
- backend/services/DiscountService.js
- backend/services/TaxCalculator.js
Implementation:
// BEFORE (buggy code):
let runningTotal = 0;
function calculateTotal(lineItems) {
runningTotal = 0;
for (const item of lineItems) {
runningTotal += item.amount;
}
return runningTotal;
}
// AFTER (fixed code):
function calculateTotal(lineItems) {
// Local variable - safe for concurrent requests
let runningTotal = 0;
for (const item of lineItems) {
runningTotal += item.amount;
}
// Add logging for debugging
logger.debug('Transaction total calculated', {
lineItemCount: lineItems.length,
total: runningTotal,
timestamp: Date.now()
});
return runningTotal;
}
Tests Created:
// Concurrency test to prevent regression
describe('FinancialService - Concurrency Safety', () => {
it('should handle concurrent calculations correctly', async () => {
// Simulate 100 concurrent requests
const promises = [];
for (let i = 0; i < 100; i++) {
const lineItems = [
{ amount: 10 * i },
{ amount: 20 * i },
{ amount: 30 * i }
];
promises.push(FinancialService.calculateTotal(lineItems));
}
const results = await Promise.all(promises);
// Verify each result is correct (no interference)
results.forEach((total, i) => {
expect(total).toBe(60 * i);
});
});
it('should log calculation details', () => {
const lineItems = [{ amount: 100 }, { amount: 200 }];
FinancialService.calculateTotal(lineItems);
expect(logger.debug).toHaveBeenCalledWith(
'Transaction total calculated',
expect.objectContaining({
lineItemCount: 2,
total: 300
})
);
});
});
Bug Fixed:
Impact:
Perfect For:
Less Suitable For:
Write Better Prompts:
Trust the Process:
--push=false
to review before pushingMaximize Value:
Claudiomiro transforms AI assistance from interactive chat to autonomous development agent. By following a structured workflow and making intelligent decisions, it handles complex development tasks that would take days or weeks in just minutes.
The examples shown demonstrate:
This isn't about replacing developers - it's about eliminating tedious, time-consuming work so you can focus on creative problem-solving and architectural decisions.
Get Started:
npm install -g claudiomiro
claudiomiro --prompt="Your complex task here"
Impact: Transform days of work into minutes while maintaining code quality and comprehensive test coverage.
Innovation: The first AI development agent that truly thinks through problems and implements complete, production-ready solutions autonomously.
About Me
Since I was a child, I've always wanted to be an inventor. As I grew up, I specialized in information systems, an area which I fell in love with and live around it. I am a full-stack developer and work a lot with devops, i.e., I'm a kind of "jack-of-all-trades" in IT. Wherever there is something cool or new, you'll find me exploring and learning... I am passionate about life, family, and sports. I believe that true happiness can only be achieved by balancing these pillars. I am always looking for new challenges and learning opportunities, and would love to connect with other technology professionals to explore possibilities for collaboration. If you are looking for a dedicated and committed full-stack developer with a passion for excellence, please feel free to contact me. It would be a pleasure to talk with you! |
SecurityScoreCard
Nov. 2023 - Present
New York, United States
Senior Software Engineer
I joined SecurityScorecard, a leading organization with over 400 employees, as a Senior Full Stack Software Engineer. My role spans across developing new systems, maintaining and refactoring legacy solutions, and ensuring they meet the company's high standards of performance, scalability, and reliability.
I work across the entire stack, contributing to both frontend and backend development while also collaborating directly on infrastructure-related tasks, leveraging cloud computing technologies to optimize and scale our systems. This broad scope of responsibilities allows me to ensure seamless integration between user-facing applications and underlying systems architecture.
Additionally, I collaborate closely with diverse teams across the organization, aligning technical implementation with strategic business objectives. Through my work, I aim to deliver innovative and robust solutions that enhance SecurityScorecard's offerings and support its mission to provide world-class cybersecurity insights.
Technologies Used:
Node.js Terraform React Typescript AWS Playwright and Cypress