create form variations
Create New Document Form Variations
Option A: Simple Single-Step Form
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent │├──────────────────────────────────────────────────────────────────────────────┤│ ││ Name * ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ discovery-agent │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ Filename: discovery-agent.md ││ ││ Description * ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ Explores codebases to find patterns and understand architecture │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ ││ Tools (optional) ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ [×] Write [×] Read [×] Bash [+ Add tool] │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ ││ Model (optional) ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ ▼ Select model... │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ │├──────────────────────────────────────────────────────────────────────────────┤│ [Cancel] [Create Agent →] │└──────────────────────────────────────────────────────────────────────────────┘Pros: All fields visible, quick to complete, familiar pattern Cons: Can feel overwhelming if many optional fields
Option B: Two-Step Wizard (Metadata → Content)
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent ││ ●━━━━━━━━━━○ Step 1 of 2 │├──────────────────────────────────────────────────────────────────────────────┤│ ││ STEP 1: Basic Information ││ ││ What should this agent be called? * ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ discovery-agent │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ ││ Describe what this agent does * ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ Explores codebases to find patterns and understand architecture │ ││ │ │ ││ │ │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ ││ 📁 Will be saved as: .claude/agents/discovery-agent.md ││ │├──────────────────────────────────────────────────────────────────────────────┤│ [Cancel] [Next: Content →] │└──────────────────────────────────────────────────────────────────────────────┘
↓ Step 2
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent ││ ○━━━━━━━━━━● Step 2 of 2 │├──────────────────────────────────────────────────────────────────────────────┤│ ││ STEP 2: Write Content ││ ││ ┌─────────────────────────────────┬────────────────────────────────────────┐││ │ # Discovery Agent │ Discovery Agent │││ │ │ ═══════════════ │││ │ This agent explores codebases │ │││ │ to find patterns and... │ This agent explores codebases │││ │ │ to find patterns... │││ │ │ │││ └─────────────────────────────────┴────────────────────────────────────────┘││ │├──────────────────────────────────────────────────────────────────────────────┤│ [← Back] [Create Agent →] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Guided flow, less overwhelming, validates before content Cons: Extra step, can’t see content while setting metadata
Option C: Modal with Tabs
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent [×] │├──────────────────────────────────────────────────────────────────────────────┤│ [Metadata] [Content] [Preview] │├──────────────────────────────────────────────────────────────────────────────┤│ ││ Name * Description * ││ ┌──────────────────────────┐ ┌───────────────────────────────────────┐ ││ │ discovery-agent │ │ Explores codebases to find patterns │ ││ └──────────────────────────┘ └───────────────────────────────────────┘ ││ ││ Tools Model ││ ┌──────────────────────────┐ ┌───────────────────────────────────────┐ ││ │ Write, Read, Bash │ │ ▼ claude-haiku-4-5 │ ││ └──────────────────────────┘ └───────────────────────────────────────┘ ││ ││ Related Commands Related Skills ││ ┌──────────────────────────┐ ┌───────────────────────────────────────┐ ││ │ ▼ Select... │ │ ▼ Select... │ ││ └──────────────────────────┘ └───────────────────────────────────────┘ ││ ││ 📁 .claude/agents/discovery-agent.md ││ │├──────────────────────────────────────────────────────────────────────────────┤│ [Cancel] [Create Agent →] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Compact, organized by concern, can switch freely Cons: Tabs add cognitive load, easy to miss required fields
Option D: Inline Expanding Form (Accordion)
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent [×] │├──────────────────────────────────────────────────────────────────────────────┤│ ││ ▼ Required Information ││ ┌────────────────────────────────────────────────────────────────────────┐ ││ │ Name: [discovery-agent ] │ ││ │ Description: [Explores codebases to find patterns and understand...] │ ││ └────────────────────────────────────────────────────────────────────────┘ ││ ││ ▶ Tools & Model (optional) ││ ──────────────────────────────────────────────────────────────────────── ││ ││ ▶ Related Items (optional) ││ ──────────────────────────────────────────────────────────────────────── ││ ││ ▶ Advanced Options ││ ──────────────────────────────────────────────────────────────────────── ││ ││ 📁 Will create: .claude/agents/discovery-agent.md ││ │├──────────────────────────────────────────────────────────────────────────────┤│ [Cancel] [Create Agent →] │└──────────────────────────────────────────────────────────────────────────────┘Pros: Focus on required fields, optional fields hidden but accessible Cons: Can miss optional fields, requires extra clicks
Option E: Side-by-Side Form + Preview
┌──────────────────────────────────────────────────────────────────────────────┐│ Create New Agent [×] │├───────────────────────────────────────┬──────────────────────────────────────┤│ │ PREVIEW ││ Name * │ ││ ┌─────────────────────────────────┐ │ --- ││ │ discovery-agent │ │ name: discovery-agent ││ └─────────────────────────────────┘ │ description: "Explores..." ││ │ tools: Write, Read, Bash ││ Description * │ --- ││ ┌─────────────────────────────────┐ │ ││ │ Explores codebases to find... │ │ # Discovery Agent ││ └─────────────────────────────────┘ │ ││ │ [Content will appear here] ││ Tools │ ││ ┌─────────────────────────────────┐ │ ││ │ [×] Write [×] Read [×] Bash │ │ ││ └─────────────────────────────────┘ │ ││ │ ││ Model │ ││ ┌─────────────────────────────────┐ │ ││ │ ▼ claude-haiku-4-5 │ │ ││ └─────────────────────────────────┘ │ │├───────────────────────────────────────┴──────────────────────────────────────┤│ [Cancel] [Create Agent →] │└──────────────────────────────────────────────────────────────────────────────┘Pros: See output as you type, validates mental model Cons: Takes more horizontal space, complex layout
Recommendation
Option A: Simple Single-Step Form for v1
- Fastest to implement
- All required fields visible
- Familiar pattern (most forms work this way)
- Can add wizard flow later if users request it
For complex document types (like Epics with many fields), consider Option D (Accordion) to keep focus on required fields while hiding optional ones.