React Todo App

Learn how to build a complete React Todo application using Human.

1.0

# React Todo App Generator
# Creates modern, accessible, and feature-rich todo applications
# Last Updated: 2024-01-15

AGENT react_todo_generator
SYSTEM ./prompts/react-todo-generator.md

CONSTRAINTS react_best_practices
  # Security boundaries - prevent vulnerabilities
  NEVER use dangerouslySetInnerHTML
  NEVER use eval or Function constructor
  NEVER trust user input without sanitization
  NEVER store sensitive data in localStorage
  NEVER use inline event handlers with strings

  # Modern React requirements - enforce current standards
  MUST use functional components only
  MUST use hooks for state management
  MUST include unique key props
  MUST handle errors with boundaries
  MUST validate prop types or typescript
  MUST prevent XSS vulnerabilities
  MUST use controlled components

  # Accessibility requirements - WCAG compliance
  SHOULD include aria labels
  SHOULD support keyboard navigation
  SHOULD announce state changes
  SHOULD use semantic html
  SHOULD provide focus management
  SHOULD include skip links
  SHOULD maintain focus visible

  # Code quality standards - maintainable code
  AVOID inline styles except dynamic
  AVOID direct dom manipulation
  AVOID unnecessary re-renders
  AVOID prop drilling beyond two levels
  AVOID magic numbers
  AVOID console logs in production
  AVOID any type in typescript

  # Feature permissions - allowed enhancements
  MAY use typescript
  MAY add animations with framer
  MAY implement drag and drop
  MAY add dark mode
  MAY use css modules or styled
  MAY include testing setup

FLOW component_architecture
  design component tree
  identify shared state
  plan prop flow
  determine context needs
  structure file organization
  implement components
  connect state management
  add side effects

FLOW feature_implementation
  implement add todo
  implement delete todo
  implement toggle complete
  implement edit todo
  add filtering options
  add sorting options
  implement bulk actions
  add persistence
  implement undo redo
  add search functionality

FLOW accessibility_enhancement
  add aria attributes
  implement keyboard shortcuts
  add screen reader announcements
  ensure focus management
  test with keyboard only
  validate color contrast
  add reduced motion support

# Component structure tests
TEST
  INPUT "Create a React todo app"
  EXPECT CONTAINS "function"
  EXPECT NOT CONTAINS "class"

TEST
  INPUT "Create a React todo app with state"
  EXPECT CONTAINS "useState"
  EXPECT CONTAINS "useEffect"
  EXPECT proper hook usage

TEST
  INPUT "Create a todo list with multiple items"
  EXPECT CONTAINS "key="
  EXPECT NOT CONTAINS "key={index}"

# Feature implementation tests
TEST
  INPUT "Create todo app with add feature"
  EXPECT CONTAINS "addTodo"
  EXPECT contains input validation
  EXPECT CONTAINS "preventDefault"

TEST
  INPUT "Create todo app with delete feature"
  EXPECT CONTAINS "filter"
  EXPECT contains confirmation or immediate

TEST
  INPUT "Create todo app with completion toggling"
  EXPECT CONTAINS "completed"
  EXPECT contains checkbox or toggle

TEST
  INPUT "Create todo app with inline editing"
  EXPECT CONTAINS "edit"
  EXPECT contains save and cancel

# State management tests
TEST
  INPUT "Create todo input form"
  EXPECT CONTAINS "value="
  EXPECT NOT CONTAINS "ref"

TEST
  INPUT "Create todo app with good UX"
  EXPECT CONTAINS "no todos"

TEST
  INPUT "Create todo app with subscriptions"
  EXPECT contains cleanup in useEffect
  EXPECT CONTAINS "return () =>"

# Persistence tests
TEST
  INPUT "Create persistent todo app"
  EXPECT CONTAINS "localStorage.setItem"
  EXPECT CONTAINS "localStorage.getItem"
  EXPECT CONTAINS "JSON.parse"

TEST
  INPUT "Create robust persistent todo app"
  EXPECT CONTAINS "try"
  EXPECT handles quota exceeded

# Accessibility tests
TEST
  INPUT "Create accessible todo app"
  EXPECT CONTAINS "aria-label"
  EXPECT CONTAINS "role"

TEST
  INPUT "Create keyboard-navigable todo app"
  EXPECT CONTAINS "onKeyDown"
  EXPECT CONTAINS "Enter"

TEST
  INPUT "Create screen-reader friendly todo app"
  EXPECT CONTAINS "aria-live"
  EXPECT contains status updates

# Security tests
TEST
  INPUT "Create secure todo app"
  EXPECT NOT CONTAINS "dangerouslySetInnerHTML"
  EXPECT sanitizes user input

TEST
  INPUT "Create todo app with input validation"
  EXPECT CONTAINS "trim()"
  EXPECT prevents empty todos

# Performance tests
TEST
  INPUT "Create performant todo app"
  EXPECT CONTAINS "useCallback"
  EXPECT explains optimization

TEST
  INPUT "Create todo app that handles 1000+ items"
  EXPECT CONTAINS "virtualization"
  EXPECT mentions performance

# UI/UX tests
TEST
  INPUT "Create todo app with filters (all/active/completed)"
  EXPECT contains filter logic
  EXPECT CONTAINS "all"

TEST
  INPUT "Create todo app with statistics"
  EXPECT CONTAINS "count"
  EXPECT shows remaining or completed

TEST
  INPUT "Create todo app with bulk actions"
  EXPECT CONTAINS "clear"
  EXPECT contains batch operation

# Style and responsiveness tests
TEST
  INPUT "Create mobile-friendly todo app"
  EXPECT CONTAINS "responsive"
  EXPECT mentions viewport or breakpoints

TEST
  INPUT "Create todo app with dark mode"
  EXPECT contains theme switching
  EXPECT contains CSS variables or theme context

# Complete app test
TEST
  INPUT "Create a complete, production-ready React todo app with all features"
  EXPECT contains add, delete, edit, toggle
  EXPECT CONTAINS "localStorage"
  EXPECT contains accessibility features
  EXPECT contains error handling
  EXPECT contains responsive design
  EXPECT proper component structure
  EXPECT clean code patterns
  EXPECT length > 200 lines