Core Principles of Cue Engineering
An effective communication strategy is crucial when collaborating with AI code assistants. Imagine you're mentoring a colleague who is technically competent but knows nothing about your project's background, and you need to provide enough information for him to understand and solve the problem.
Key principles
Provide adequate contextual information
- Programming language and framework version used
- Specific error messages and stack traces
- Expected functionality and actual performance of the code
- Relevant project constraints and technology stacks
Clarification of specific objectives Avoid vague descriptions and clearly state what problem you are trying to solve:
❌ "Make my code better" ✅ "Refactor this function to improve readability, reduce code duplication, and use ES6 syntax"
Step-by-step handling of complex tasks Break down big tasks into small steps:
1. First generate the basic structure of the React component
2. Then add state management logic
3. Finally, integrate API calls and error handling.
Provide input and output examples Desired behavior is illustrated through specific examples:
// Expected: formatPrice(2.5) returns "$2.50".
// Expected: formatPrice(100) returns "$100.00".
Efficient tips for debugging scenarios
Real-world example: React Hook dependency issue
Problem Code:
const UserProfile = ({ userId }) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetchUser(userId).then(setUser).finally(() => setLoading(false));
}, [userId, setUser, setLoading]); // here's the problem
return loading ? <div>Loading...</div> : <div>{user?.name}</div>;
};
❌ Ineffective tips:
I'm having trouble with useEffect, the component keeps re-rendering!
✅ Efficient Tip:
I have a React component with infinite re-rendering issues:
Expected behavior: get user data once when userId changes
Actual behavior: Component re-renders in an infinite loop
Error message: Warning: Maximum update depth exceeded
The code is as above, the problem is in the dependency array of useEffect. should setUser and setLoading be added to the dependency? Why does it cause infinite loop? Please explain the best practices for React Hook dependencies.
Debugging Tip Templates
Problem description: [brief description of the problem]
Expected Behavior: [what the code should do]
Actual Behavior: [What happens now]
Error message: [complete error message].
Relevant Code: [Provide code snippet].
Technical environment: [Language version, framework version]
A systematic approach to reconstructing scenarios
Clarify the objectives of the reconfiguration
Refactoring should be done with a clear direction for improvement:
| Reconfiguration goals | Tip templates | typical example |
|---|---|---|
| performance optimization | "Optimize this function for [specific performance metric]" | "Optimize this function to eliminate O(n²) complexity." |
| Code cleanup | "Refactoring to improve [readability/maintainability]" | "Refactor this function to reduce nesting and improve naming" |
| Technology upgrades | "Rewrite [old technology] as [new technology]" | "Rewriting class components as function components using Hooks" |
Practical Case: Performance Optimization Refactoring
Original code (with O(n²) problem):
function processUserData(users, orders) {
const result = [];
for (let user of users) {
const userOrders = [];
for (let order of orders) {
if (order.userId === user.id) {
userOrders.push(order);
}
}
const totalSpent = userOrders.reduce((sum, order) => sum + order.amount, 0);
result.push({ ...user, orders: userOrders, totalSpent });
}
return result;
}
✅ Performance optimization tips:
The following function has an O(n²) time complexity problem and needs to be optimized to O(n):
[code]
Optimization requirements:
1. eliminate nested loops, use Map for O(1) lookups
2. reduce repeated calculations, a traversal to complete the data aggregation
3. keep the code readable, add performance comments
4. handle edge cases: users without orders
Please provide the refactored code and explain the optimization idea.
Progressive Tips for Feature Development
Layered development from architecture to implementation
Step 1: Architecture Design
Design a state management architecture for multi-step forms:
Functional Requirements:
- Support for a 3-step form process
- Real-time validation and data persistence
- Forward/backward navigation
Technology Stack: React + TypeScript + React Hook Form
Please provide:
- State structure design
- Main Hook interface design
- State transition logic
Step 2: Core realization
Based on the previous architectural design, implement the core useMultiStepForm Hook:
Requirements:
1. manage the current step and form data
2. provide nextStep, prevStep, updateStepData methods
3. integrate form validation logic
4. automatically saved to localStorage
Please provide the complete Hook implementation code.
Functional Development Templates
## Description of the task
[The problem you are trying to solve]
## Technical Environment
- Language/Framework:
- Version Information:
- Related libraries:
## Specific Requirements.
- Functional Requirements:
- Performance Requirements:
- Code Style:
## Constraints
- Cannot be used:
- Must be followed:
## Desired Outputs
[Describe the format of the desired result].
Advanced Prompting Tips and Common Misconceptions
Top 10 Highly Effective Cueing Tips
| finesse | templates | application scenario |
|---|---|---|
| persona | "You are a senior [language] developer, please [task]" | Code reviews, architectural recommendations |
| Problem diagnosis | "This is the problem: [description] with the following code, what is the cause?" | Bug Location |
| Example Driver | "Function input [X] should output [Y], please realize" | Function Development |
| step by step | "Analyze this function line by line, how do the values of the variables change?" | logic debugging |
| restrict sth. to a certain extent | "Please avoid [X], use [Y], optimize [Z]" | Compliance with project specifications |
Common Misconceptions and Solutions
1. Information overload ❌ Multiple complex problems required at one time ✅ Step-by-step approach to solving each problem
2. Insufficient information ❌ "Fix my code" ✅ Provide error message, expected behavior, related code
3. Ambiguity of purpose ❌ "Make code better" ✅ "Improve readability and reduce memory usage"
Code Review Alert Mode
Play the role of a senior technical architect and perform an in-depth review of the following code:
[code content]
Review dimensions:
1. architectural design: does it comply with SOLID principles?
2. performance considerations: are there any performance bottlenecks?
3. Security: Are there security vulnerabilities?
4. maintainability: is the code easy to understand and modify?
Please provide specific issues, suggestions and examples of improvements.
Best Practice Recommendations
Continuous Iterative Improvement
Round 1: Getting the basic solution
Round 2: Optimize and improve
Round 3: Add error handling and testing
Validation and Learning
- Always validate AI-generated code
- Run tests to ensure correct functionality
- Analyzing AI's solution ideas
- Documenting effective cueing patterns
concluding remarks
Cue engineering is a practical skill that needs to be honed in practice. With clear communication, specific requirements, and patient iteration, you can significantly improve your programming efficiency. Remember, an AI helper is like a partner who is smart but needs clear guidance, and good prompting can make it a capable assistant on your programming journey.
