Analyze and optimize user prompts for clarity, specificity, and completeness using interactive questionnaires or direct analysis...
This skill analyzes user prompts and provides optimized versions that are clearer, more specific, and more actionable.
Transform vague, incomplete, or ambiguous user requests into well-structured prompts that lead to better outcomes. By analyzing prompts against quality criteria and providing optimized versions, this skill helps users communicate their needs more effectively.
Use this skill when user prompts exhibit one or more of these issues:
Activate this skill when detecting:
Two modes available:
Use the AskUserQuestion tool to guide users through structured questions. This collaborative approach helps users clarify their needs step-by-step.
When to use: Medium to complex requests, or when user prefers guided interaction.
Analyze the prompt and provide suggested improvements in one response.
When to use: Simple optimization needs, or when user wants quick results.
Default: Start with Mode 2 (Direct Analysis). If user requests interactive mode or if the request is very complex, switch to Mode 1.
Carefully read the user's original prompt to understand their intent.
Systematically check for issues using references/optimization-principles.md:
Clarity Check:
Specificity Check:
Completeness Check:
Structure Check:
Actionability Check:
List all identified issues by category:
Create an improved version following these principles:
Add Specificity:
Improve Clarity:
Ensure Completeness:
Enhance Structure:
Make Actionable:
Reference references/optimization-principles.md for patterns and examples.
Provide a structured response:
Original Prompt: Show the user's original request
Identified Issues: List specific problems found
Optimized Prompt: Provide improved version
Key Improvements: Highlight main changes
Optional: Offer to refine further or proceed with the optimized prompt
If the user explicitly asks for interactive/questionnaire mode, or if the prompt has multiple complex issues, use this workflow.
Quickly identify the main categories of missing information:
Based on the analysis, prepare 1-4 targeted questions using AskUserQuestion tool.
Question Structure:
Question Categories:
For Code Requests:
For Component Requests:
For UI/Design Requests:
Call the AskUserQuestion tool with structured questions.
Important: Always include a final open-ended question that allows users to add custom requirements using the "Other" option.
AskUserQuestion({
questions: [
{
question: "What technology stack should this use?",
header: "Tech Stack",
multiSelect: false,
options: [
{
label: "React + TypeScript",
description: "Modern React with full type safety"
},
{
label: "React + JavaScript",
description: "React without TypeScript"
},
{
label: "Vue 3",
description: "Vue 3 Composition API"
},
{
label: "Vanilla JavaScript",
description: "Plain JS without frameworks"
}
]
},
{
question: "What styling approach would you like?",
header: "Styling",
multiSelect: false,
options: [
{
label: "Tailwind CSS",
description: "Utility-first CSS framework"
},
{
label: "CSS Modules",
description: "Scoped CSS with modules"
},
{
label: "styled-components",
description: "CSS-in-JS solution"
}
]
},
{
question: "Which features are needed?",
header: "Features",
multiSelect: true,
options: [
{
label: "Multiple variants",
description: "Different color/style variants (primary, secondary, etc.)"
},
{
label: "Size options",
description: "Different sizes (sm, md, lg)"
},
{
label: "Loading state",
description: "Show spinner during async operations"
},
{
label: "Disabled state",
description: "Disabled/inactive state"
}
]
},
{
question: "Any additional requirements or constraints?",
header: "Extra Needs",
multiSelect: false,
options: [
{
label: "No, that's all",
description: "I don't need anything else"
},
{
label: "Yes, let me specify",
description: "I have additional requirements (use 'Other' to describe)"
}
]
}
]
})
Note: The "Other" option is automatically provided by AskUserQuestion tool, allowing users to input custom text for any question.
After receiving user's answers:
Using the gathered information, create a complete, well-structured prompt:
## Optimized Prompt (Based on Your Answers)
[Combine original intent + user's answers into structured prompt]
**Technology**: [Answer 1]
**Styling**: [Answer 2]
**Features**: [Answer 3, Answer 4, ...]
[Full detailed requirements...]
Ask user if the optimized prompt looks good, or if they want to adjust anything:
### Does this look good?
1. ✅ Yes, proceed with this specification
2. 🔄 Let me adjust some details
3. ➕ Add more requirements
User: "生成个按钮"
Prompt Optimizer (Interactive Mode):
我会通过几个问题来帮你明确需求。
[Calls AskUserQuestion with 4 targeted questions]
Question 1: 使用什么技术栈?
- React + TypeScript
- React + JavaScript
- Vue 3
- Other
Question 2: 使用什么样式方案?
- Tailwind CSS
- CSS Modules
- styled-components
- Other
Question 3: 需要哪些功能?(可多选)
- 多种变体 (primary, secondary, danger等)
- 多种尺寸 (sm, md, lg)
- Loading 状态
- Disabled 状态
Question 4: 还有其他需求或约束吗?
- 不需要,就这些
- 需要,让我补充 (可以在 "Other" 中输入)
Example 1 - User without extra needs: User selects: React + TypeScript, Tailwind CSS, [多种变体, Loading 状态], "不需要,就这些"
Prompt Optimizer:
## 优化后的需求
基于你的选择,这是完整的需求规格:
创建一个 React Button 组件,使用 TypeScript 和 Tailwind CSS。
技术栈:
- React + TypeScript
- Tailwind CSS 样式
功能需求:
- 支持多种变体:primary (蓝色), secondary (灰色), danger (红色)
- 支持 loading 状态(显示 spinner)
- Props 定义:
- variant: 'primary' | 'secondary' | 'danger'
- loading?: boolean
- onClick?: () => void
- children: React.ReactNode
- className?: string
这样可以吗?
1. ✅ 可以,开始生成
2. 🔄 我想调整一下
Example 2 - User with extra needs: User selects: React + TypeScript, Tailwind CSS, [多种变体, Loading 状态], "Other: 需要支持图标,并且要有 fullWidth 选项让按钮占满整行"
Prompt Optimizer:
## 优化后的需求
基于你的选择,这是完整的需求规格:
创建一个 React Button 组件,使用 TypeScript 和 Tailwind CSS。
技术栈:
- React + TypeScript
- Tailwind CSS 样式
功能需求:
- 支持多种变体:primary (蓝色), secondary (灰色), danger (红色)
- 支持 loading 状态(显示 spinner)
- ✨ 支持图标显示(用户补充)
- ✨ 支持 fullWidth 选项让按钮占满整行(用户补充)
Props 定义:
- variant: 'primary' | 'secondary' | 'danger'
- loading?: boolean
- icon?: React.ReactNode
- iconPosition?: 'left' | 'right'
- fullWidth?: boolean
- onClick?: () => void
- children: React.ReactNode
- className?: string
这样可以吗?
1. ✅ 可以,开始生成
2. 🔄 我想调整一下
Structure the output as follows:
## Prompt Analysis
### Original Prompt
[User's original request]
### Identified Issues
**Clarity**:
- [Issue 1]
- [Issue 2]
**Specificity**:
- [Issue 1]
- [Issue 2]
**Completeness**:
- [Issue 1]
[Other categories as applicable]
### Optimized Prompt
[Improved, well-structured version]
### Key Improvements
- ✅ [Improvement 1]
- ✅ [Improvement 2]
- ✅ [Improvement 3]
### Next Steps
Would you like me to:
1. Proceed with the optimized prompt?
2. Refine it further based on your feedback?
3. Focus on a specific aspect?
User: "Make a button"
Analysis:
Optimized:
Create a reusable Button component in React with TypeScript and Tailwind CSS.
Requirements:
- Support variants: primary, secondary, danger
- Support sizes: sm, md, lg
- Accept onClick handler and children
- Include loading and disabled states
- Proper TypeScript types for all props
Example usage:
<Button variant="primary" size="md" onClick={handleClick}>
Click me
</Button>
User: "The app crashes"
Analysis:
Optimized:
Debug and fix the crash in the Shopping Cart component.
Current behavior:
- App crashes when clicking "Checkout" button
- Only when cart has more than 5 items
- Console error: "Cannot read property 'price' of undefined"
Location:
- File: src/components/ShoppingCart.tsx
- Started after recent pricing logic refactor
Expected behavior:
- Checkout button should work regardless of cart size
- Should navigate to checkout page
Steps to reproduce:
1. Add 6+ items to cart
2. Click "Checkout" button
3. Observe crash
User: "Build a dashboard"
Analysis:
Optimized:
Create a responsive analytics dashboard with the following requirements:
Data to Display:
- User statistics (total users, active users, new signups)
- Revenue metrics (daily, weekly, monthly)
- Traffic sources (chart showing breakdown)
- Recent activity feed
Technical Requirements:
- React with TypeScript
- Chart library: Chart.js or Recharts
- State management: Zustand
- Styling: Tailwind CSS
- Responsive design (mobile, tablet, desktop)
Features:
- Date range filter
- Data refresh button
- CSV export functionality
- Loading states for data fetching
Layout:
- Grid layout with stat cards at top
- Charts in middle section
- Activity feed on the side or bottom
Consult references/optimization-principles.md for:
If the user's prompt is already clear, specific, and complete:
If critical information is missing and cannot be reasonably assumed:
If the prompt is ambiguous:
If the scope is unrealistic:
This skill can serve as a "pre-processor":
When request-analyzer skill is available:
request-analyzer identifies when optimization is neededprompt-optimizer performs the optimizationrequest-analyzer can then re-analyze the optimized prompt