Agent skill
Selection Q&A
Add selection-based Q&A functionality to ChatKit UI allowing users to ask about highlighted text with proper integration.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/selection-qa
SKILL.md
Selection Q&A
Instructions
-
Implement text selection detection:
- Add event listeners for text selection
- Capture selected text content
- Determine selection boundaries
- Handle multiple selection scenarios
-
Create "Ask About Selection" interface:
- Add contextual button/menu for selections
- Position UI element appropriately
- Style button consistently with theme
- Handle mobile vs desktop differences
-
Integrate with backend Q&A:
- Send selection context to POST /chat endpoint
- Include selection as additional context
- Format request properly with main query
- Handle response integration
-
Display results appropriately:
- Show backend answer with selection context
- Include proper citation of sources
- Maintain conversation flow
- Handle error cases gracefully
-
Follow Context7 MCP documentation:
- Follow ChatKit component architecture
- Use deterministic patch protocols
- Include proper error handling
- Maintain existing functionality
Examples
Input: "Add selection-based Q&A to ChatKit" Output: Patches UI files to add text selection detection and contextual Q&A functionality.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?