GenAI ‐ Prompting
Dos & Donts
Generating Working Code in Claude AI
Prompt ExampleHi Claude,
I hope you're having an amazing day! I need your help designing a React feature.
Here's the feature description:
Please incorporate these components:
Create a high-level blueprint focusing on:
- State flow
- Data flow
- Ideal-world architecture
Prompt will ask you to specify an use case, describe your desired usecase as the feature, claude will automatically generate the code and will run by itself
Generating a task management app in chatgpt
Source code generated for UI and API by chatgpt - for reference
create a clean, functional task management component with all CRUD operations. Here's a breakdown of the key features:
State Management:
Uses React's useState for managing tasks and UI states Each task has an id, text, and completed status Tracks editing state separately for smooth UX
CRUD Operations:
Create: Add new tasks with the input field Read: Display list of tasks with completion status Update: Edit task text and toggle completion status Delete: Remove tasks from the list
UI/UX Features:
Clean, modern design using shadcn/ui components Responsive layout Keyboard support (Enter to add/save) Visual feedback for task completion Intuitive edit/delete actions Hover states for better interaction feedback
Component Structure:
Single, self-contained component for easy integration Uses Lucide icons for clear visual actions Properly typed props and handlers
add additional features, For example:
create this program in angular 19
Add task categories/labels Implement drag-and-drop reordering Add due dates Include task priority levels Add filter/sort capabilities add localstorage for persistence
Add more advanced features like task persistence Implement task categories or priorities Add more sophisticated validation rules Add animations for task transitions
how to dynamically interchange different implementation of IValidationService
additional options:
