From 32f17a10fb0d283975d57994d6816cc9c27b4a68 Mon Sep 17 00:00:00 2001 From: AndyMik90 Date: Mon, 15 Dec 2025 17:20:04 +0100 Subject: [PATCH] auto-claude: subtask-2-5 - Create FirstSpecStep component - guided first spec MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Create FirstSpecStep.tsx component for the onboarding wizard that guides users through creating their first task/spec with helpful tips and an 'Open Task Creator' action. Features include: - Header with icon, title, and description - 4 tip cards: Be Descriptive, Start Small, Include Context, Let AI Help - Example task description card for reference - 'Open Task Creator' primary action button - Success state when task creator has been opened - Standard navigation buttons (Back, Skip, Continue) Follows patterns from OAuthStep and GraphitiStep components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- .../components/onboarding/FirstSpecStep.tsx | 205 ++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 auto-claude-ui/src/renderer/components/onboarding/FirstSpecStep.tsx diff --git a/auto-claude-ui/src/renderer/components/onboarding/FirstSpecStep.tsx b/auto-claude-ui/src/renderer/components/onboarding/FirstSpecStep.tsx new file mode 100644 index 00000000..2716bf54 --- /dev/null +++ b/auto-claude-ui/src/renderer/components/onboarding/FirstSpecStep.tsx @@ -0,0 +1,205 @@ +import { useState } from 'react'; +import { + FileText, + Lightbulb, + CheckCircle2, + ArrowRight, + PenLine, + ListChecks, + Target, + Sparkles +} from 'lucide-react'; +import { Button } from '../ui/button'; +import { Card, CardContent } from '../ui/card'; + +interface FirstSpecStepProps { + onNext: () => void; + onBack: () => void; + onSkip: () => void; + onOpenTaskCreator: () => void; +} + +interface TipCardProps { + icon: React.ReactNode; + title: string; + description: string; +} + +function TipCard({ icon, title, description }: TipCardProps) { + return ( + + +
+
+ {icon} +
+
+

{title}

+

{description}

+
+
+ + + ); +} + +/** + * First spec creation step for the onboarding wizard. + * Guides users through creating their first task/spec with helpful tips + * and provides an action to open the Task Creator. + */ +export function FirstSpecStep({ onNext, onBack, onSkip, onOpenTaskCreator }: FirstSpecStepProps) { + const [hasCreatedSpec, setHasCreatedSpec] = useState(false); + + const tips = [ + { + icon: , + title: 'Be Descriptive', + description: 'Clearly describe what you want to build. Include requirements, constraints, and expected behavior.' + }, + { + icon: , + title: 'Start Small', + description: 'Begin with a focused task like adding a feature or fixing a bug. Smaller tasks are easier to verify.' + }, + { + icon: , + title: 'Include Context', + description: 'Mention relevant files, APIs, or patterns. The more context you provide, the better the results.' + }, + { + icon: , + title: 'Let AI Help', + description: 'The AI can generate titles and classify tasks. Focus on describing what you want, not the details.' + } + ]; + + const handleOpenTaskCreator = () => { + setHasCreatedSpec(true); + onOpenTaskCreator(); + }; + + const handleContinue = () => { + onNext(); + }; + + return ( +
+
+ {/* Header */} +
+
+
+ +
+
+

+ Create Your First Task +

+

+ Describe what you want to build and let Auto Claude handle the rest +

+
+ + {/* Success state after opening task creator */} + {hasCreatedSpec && ( + + +
+ +
+

+ Task Creator Opened +

+

+ Great! You can create your first task now or continue with the wizard. + You can always create tasks later from the main dashboard. +

+
+
+ + + )} + + {/* Tips section */} +
+
+ + Tips for Great Tasks +
+
+ {tips.map((tip, index) => ( + + ))} +
+
+ + {/* Example task card */} + + +
+ +
+

+ Example Task Description: +

+

+ "Add a dark mode toggle to the settings page. It should persist the user's + preference in localStorage and apply the theme immediately without page reload. + Use the existing color variables in styles/theme.css." +

+
+
+ + + + {/* Primary action */} +
+ +
+ + {/* Skip info */} +

+ {hasCreatedSpec + ? 'You can continue with the wizard now or create more tasks.' + : 'You can skip this step and create tasks later from the dashboard.'} +

+ + {/* Action Buttons */} +
+ +
+ + +
+
+
+
+ ); +}