Token导航 LogoToken导航

Agent Skill · 前端设计

prompt-optimizer(提示优化器)

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码,整理组件结构,或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式,避免只生成孤立片段;涉及页面改动时,应配合本地预览和构建检查确认视觉效果。

prompt-optimizer 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为需要联网;许可证为 MIT,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 5,365。

总安装 685周安装 28GitHub Stars 240下载 222核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
MIT

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:prompt-optimizer(提示优化器)
来源仓库:https://github.com/smallnest/langgraphgo
仓库路径:skills/prompt-optimizer
安装命令:
npx skills add https://github.com/smallnest/langgraphgo --skill prompt-optimizer
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。不同来源提供的安装方式可能略有差异;本站展示可直接复制的安装命令,安装前请核对来源页面。

skills.shnpx skills
npx skills add https://github.com/smallnest/langgraphgo --skill prompt-optimizer

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

前端项目中专用的提示词优化工具集。适用宿主包括 Codex、Claude、Cursor、Gemini CLI,接入前应确认版本、权限和运行环境要求。针对 UI 组件、样式逻辑和交互流程设计。输出符合现代框架规范的代码片段。prompt-optimizer 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

需配合项目现有架构理解上下文语义。生成的代码需经过本地构建验证正确性。

来源仓库内路径:skills/prompt-optimizer

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/smallnest/langgraphgo --skill prompt-optimizer;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要需要联网,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

prompt-optimizer 怎么安装?

在终端执行 npx skills add https://github.com/smallnest/langgraphgo --skill prompt-optimizer。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

prompt-optimizer 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

prompt-optimizer 需要什么权限?

权限级别是需要联网。该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

prompt-optimizer 是免费的吗?

来源标注的许可证是 MIT。本站不代收任何费用,也不托管安装包;能否商用、要不要署名,以许可证原文为准。

prompt-optimizer 用的人多吗?

公开数据是累计安装 685 次,近一周安装 28 次,下载 222 次,GitHub 240 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

prompt-optimizer 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 3 个目录同时收录,说明这个 Skill 流传比较广。
  • 许可证明确为 MIT,商用和分发边界好判断。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。
  • 需要许可证清楚、并且有第三方扫描结果的团队项目。

不太适合

  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
prompt-optimizer

提示优化器 · 本页

685240需要联网MIT通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Prompt Optimizer

This skill analyzes user prompts and provides optimized versions that are clearer, more specific, and more actionable.

Purpose

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.

When to Use This Skill

Use this skill when user prompts exhibit one or more of these issues:

Clarity Issues

  • Vague language: "something", "thing", "stuff", "it", "this"
  • Ambiguous pronouns without clear referents
  • Multiple possible interpretations
  • Unclear desired outcome

Specificity Issues

  • Missing context about the problem domain
  • No technical specifications (language, framework, version)
  • Lack of examples when examples would help
  • Undefined scope or boundaries

Completeness Issues

  • Missing required information or inputs
  • No success criteria defined
  • Undefined behavior for edge cases
  • Missing constraints or requirements

Structure Issues

  • Disorganized information
  • Complex requests without clear structure
  • Mixing context with requests
  • No logical flow

Actionability Issues

  • No clear action verb or request
  • Passive voice making intent unclear
  • Confusing or conflicting instructions
  • Missing output format specification

Activation Triggers

Activate this skill when detecting:

  • Vague words: "something", "thing", "stuff", "it", "this", "that"
  • Quality indicators: "better", "good", "nice" (without criteria)
  • Incomplete requests: "help with...", "can you...", "fix..." (without details)
  • Overly broad requests: "build an app", "create a system"
  • Missing specifications in technical requests
  • Requests without clear success criteria

Analysis Workflow

Two modes available:

Mode 1: Interactive Questionnaire (Recommended for Complex Requests)

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.

Mode 2: Direct Analysis (Fast)

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.


Mode 2: Direct Analysis Workflow

Step 1: Receive and Read the Prompt

Carefully read the user's original prompt to understand their intent.

Step 2: Identify Issues

Systematically check for issues using references/optimization-principles.md:

Clarity Check:

  • Is the language specific and concrete?
  • Are all terms clearly defined?
  • Is there only one reasonable interpretation?

Specificity Check:

  • Is sufficient context provided?
  • Are technical requirements specified?
  • Are examples included when helpful?

Completeness Check:

  • Is all necessary information present?
  • Are success criteria defined?
  • Are edge cases considered?

Structure Check:

  • Is information organized logically?
  • Is the request easy to parse?
  • Is context separated from the task?

Actionability Check:

  • Is there a clear action requested?
  • Is the output format specified?
  • Are instructions unambiguous?

Step 3: Categorize Issues

List all identified issues by category:

  • Clarity problems: [list]
  • Specificity gaps: [list]
  • Completeness deficiencies: [list]
  • Structure issues: [list]
  • Actionability concerns: [list]

Step 4: Generate Optimized Prompt

Create an improved version following these principles:

Add Specificity:

  • Replace vague terms with concrete descriptions
  • Add missing technical specifications
  • Include relevant context

Improve Clarity:

  • Use clear, unambiguous language
  • Define all terms
  • Eliminate multiple interpretations

Ensure Completeness:

  • Add missing requirements
  • Define success criteria
  • Specify constraints

Enhance Structure:

  • Organize information logically
  • Use bullet points and sections
  • Separate context from task

Make Actionable:

  • Start with clear action verb
  • Specify output format
  • Provide concrete deliverables

Reference references/optimization-principles.md for patterns and examples.

Step 5: Present Analysis

Provide a structured response:

  1. Original Prompt: Show the user's original request
  2. Identified Issues: List specific problems found

- Categorized by type - Brief explanation of each

  1. Optimized Prompt: Provide improved version

- Well-structured - Complete - Actionable

  1. Key Improvements: Highlight main changes

- What was added - What was clarified - Why it's better

  1. Optional: Offer to refine further or proceed with the optimized prompt

Mode 1: Interactive Questionnaire Workflow

When User Requests Interactive Mode

If the user explicitly asks for interactive/questionnaire mode, or if the prompt has multiple complex issues, use this workflow.

Step 1: Quick Initial Analysis

Quickly identify the main categories of missing information:

  • Technical specifications needed?
  • Functional requirements unclear?
  • Design/styling preferences missing?
  • Scope or constraints undefined?

Step 2: Design Question Set

Based on the analysis, prepare 1-4 targeted questions using AskUserQuestion tool.

Question Structure:

  • Each question should have a clear header (max 12 chars)
  • Provide 2-4 specific options
  • Include descriptions explaining each option
  • Allow "Other" for custom input (automatically provided)

Question Categories:

For Code Requests:

  1. Technology Stack (React, Vue, vanilla JS, etc.)
  2. Type System (TypeScript, JavaScript)
  3. Styling Approach (Tailwind, CSS Modules, styled-components, etc.)
  4. Feature Requirements (specific functionality needed)

For Component Requests:

  1. Component Type (Button, Form, Card, Modal, etc.)
  2. Variants Needed (primary/secondary, sizes, states)
  3. Props/API (what should it accept?)
  4. Use Cases (how will it be used?)

For UI/Design Requests:

  1. Platform (Web, Mobile, Desktop app)
  2. Design Style (Modern, Minimal, Colorful, Corporate)
  3. Responsive Needs (Mobile-first, Desktop-only, Adaptive)
  4. Key Features (what must be included?)

Step 3: Use AskUserQuestion Tool

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.

Step 4: Process Answers

After receiving user's answers:

  1. Extract all selected options from each question
  2. Handle "Other" responses if user provided custom input
  3. Pay special attention to the "Extra Needs" question:

- If user selected "Yes, let me specify" and provided text in "Other", include those requirements - If user selected "No, that's all", proceed without additional requirements

  1. Combine all answers with original request

Step 5: Generate Optimized Prompt

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...]

Step 6: Confirm and Proceed

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

Example Interactive Flow

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. 🔄 我想调整一下

Output Format

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?

Example Workflows

Example 1: Vague Code Request

User: "Make a button"

Analysis:

  • Missing: language/framework
  • Missing: styling requirements
  • Missing: functionality details
  • Missing: props/API

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>

Example 2: Incomplete Bug Report

User: "The app crashes"

Analysis:

  • Missing: where/when it crashes
  • Missing: error message
  • Missing: reproduction steps
  • Missing: expected behavior

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

Example 3: Broad Request

User: "Build a dashboard"

Analysis:

  • Too broad, no scope
  • Missing: what data to display
  • Missing: technical requirements
  • Missing: design requirements

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

Quality Criteria Reference

Consult references/optimization-principles.md for:

  • Prompt Quality Checklist - Systematic evaluation criteria
  • Common Prompt Patterns - Templates for different request types
  • Red Flags - Indicators of poor prompt quality
  • Optimization Strategies - Techniques by problem type
  • Full Examples - Before/after optimization examples

Special Cases

When the Prompt is Already Good

If the user's prompt is already clear, specific, and complete:

  1. Acknowledge the quality of the prompt
  2. Note what makes it effective
  3. Proceed directly with the task
  4. Don't over-optimize

When Clarification is Needed

If critical information is missing and cannot be reasonably assumed:

  1. Identify what's missing
  2. Ask targeted clarifying questions
  3. Provide options when applicable
  4. Suggest a framework for their answer

When Multiple Interpretations Exist

If the prompt is ambiguous:

  1. Identify the different possible interpretations
  2. Present them clearly to the user
  3. Ask which interpretation is correct
  4. Or suggest the most likely interpretation and ask for confirmation

When the Request is Too Broad

If the scope is unrealistic:

  1. Break it down into phases or components
  2. Suggest starting with a specific part
  3. Provide a prioritized list
  4. Recommend an MVP approach

Integration with Other Skills

Before Other Skills Activate

This skill can serve as a "pre-processor":

  1. Optimize the prompt first
  2. The optimized prompt then triggers appropriate skills
  3. Other skills work with clearer requirements

Working with request-analyzer

When request-analyzer skill is available:

  • request-analyzer identifies when optimization is needed
  • prompt-optimizer performs the optimization
  • request-analyzer can then re-analyze the optimized prompt

Best Practices

  1. Be helpful, not pedantic - Focus on meaningful improvements
  2. Maintain user intent - Don't change what they're asking for
  3. Add value - Only optimize when it genuinely helps
  4. Be concise - Don't over-explain obvious changes
  5. Stay respectful - Frame as helpful enhancement, not criticism
  6. Offer options - When multiple valid interpretations exist
  7. Know when to skip - If prompt is already good, proceed directly

Important Notes

  • Always preserve the user's core intent and goals
  • Don't make assumptions about technical choices unless necessary
  • Clearly mark assumptions when made
  • Offer to refine based on user feedback
  • Sometimes asking a clarifying question is better than assuming
  • Balance between thoroughness and practicality
  • The goal is better outcomes, not perfect prompts

平台分布

OpenCode

29.13%
按下载量换算65

Claude Code

22.78%
按下载量换算51

Antigravity

17.77%
按下载量换算39

windsurf

11.4%
按下载量换算25

Codex

7.54%
按下载量换算17

Gemini CLI

3.68%
按下载量换算8

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API;具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。

继续浏览同类 Skills