feat: Transform Quick Reference with comprehensive component enhancement
📚 QUICK REFERENCE COMPLETE MAKEOVER: 🎯 Navigation Enhancement: - Topic clusters transformed into visual Cards with icons - Emergency help section with prominent Aside callouts - Interactive navigation with jump links and visual hierarchy 💬 Conversation Starters Revolution: - All conversation templates organized into logical Tabs - Code blocks for easy copy/paste of conversation starters - Context-specific examples with clear use cases - Linked to relevant full guides for deeper learning 🗂️ Topic Organization with Cards: ✅ Communication & Style - Tone matching and authentic responses ✅ Information & Research - Better research and fact-checking ✅ Creative & Personal - Brainstorming, feedback, and decisions ✅ Advanced Techniques - Persona prompts and conversation control 🚨 Problem Finder Transformation: - Visual Cards for instant problem identification - LinkCards for immediate access to solutions - Color-coded problem categories with descriptive icons - 'Fix Now' badges for urgency and clear action 📋 Component Showcase: ✅ CardGrid layouts for organized information ✅ Tabs for categorized conversation starters ✅ Code blocks for copyable conversation templates ✅ LinkCards for seamless navigation between guides ✅ Asides for emergency help and important callouts ✅ Professional icons and visual hierarchy 🎨 User Experience: - Dramatically improved scannability and findability - Quick problem diagnosis and instant solutions - Professional reference format that's actually quick to use - Maintains conversational voice while adding visual structure The Quick Reference is now a genuinely useful, scannable, professional reference that users will actually bookmark!
This commit is contained in:
parent
91225f773b
commit
97de83f0e9
@ -3,62 +3,252 @@ title: "Quick Reference Guide"
|
||||
description: "Bookmark this: Everything you need for better AI conversations"
|
||||
---
|
||||
|
||||
import { Card, CardGrid, LinkCard, Aside, Badge, Steps, Tabs, TabItem, Code } from '@astrojs/starlight/components';
|
||||
|
||||
*Bookmark this: Everything you need for better AI conversations*
|
||||
|
||||
## Navigation Shortcuts
|
||||
|
||||
### 🗂️ Topic Clusters
|
||||
- **[Communication & Style](#communication--style)** - Getting Claude to sound like you
|
||||
- **[Information & Research](#information--research)** - Better answers and sources
|
||||
- **[Creative & Personal](#creative--personal)** - Brainstorming, feedback, decisions
|
||||
- **[Advanced Techniques](#advanced-techniques)** - Sophisticated collaboration methods
|
||||
<CardGrid>
|
||||
<Card title="💬 Communication & Style" icon="chat">
|
||||
Getting Claude to sound like you, match your tone, and fix misunderstandings
|
||||
|
||||
### 🚨 Quick Fixes
|
||||
- **[Problem Finder](#problem-finder-claude-isnt-giving-me-what-i-want)** - "Claude isn't giving me what I want"
|
||||
- **[Emergency Fixes](#emergency-fixes)** - Common problems, instant solutions
|
||||
- **[Troubleshooting](#troubleshooting-flowchart)** - Step-by-step conversation repair
|
||||
[Jump to section ↓](#communication--style)
|
||||
</Card>
|
||||
|
||||
<Card title="🔍 Information & Research" icon="magnifier">
|
||||
Better answers, useful sources, fact-checking, and avoiding information overload
|
||||
|
||||
[Jump to section ↓](#information--research)
|
||||
</Card>
|
||||
|
||||
<Card title="🎨 Creative & Personal" icon="pencil">
|
||||
Brainstorming, feedback, personal decisions, and maintaining your voice
|
||||
|
||||
[Jump to section ↓](#creative--personal)
|
||||
</Card>
|
||||
|
||||
<Card title="⚡ Advanced Techniques" icon="rocket">
|
||||
Sophisticated collaboration methods and persona prompts
|
||||
|
||||
[Jump to section ↓](#advanced-techniques)
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
<Aside type="caution" title="Emergency Help">
|
||||
**Claude not giving you what you want?** Skip to the [Problem Finder](#problem-finder-claude-isnt-giving-me-what-i-want) section for instant troubleshooting.
|
||||
</Aside>
|
||||
|
||||
---
|
||||
|
||||
## Conversation Starters Cheat Sheet
|
||||
|
||||
### When You Don't Know What You Want
|
||||
- "I've been thinking about [topic] and I can't figure out what's bugging me about it..."
|
||||
- "I'm feeling [emotion] about [situation] and I can't put my finger on why..."
|
||||
- "I have this problem but I think I'm approaching it wrong..."
|
||||
- "I want to understand [situation] better before I decide what to do..."
|
||||
<Tabs>
|
||||
<TabItem label="🤔 When You Don't Know What You Want">
|
||||
Perfect for when you know you need help but can't articulate what kind:
|
||||
|
||||
### Communication & Style
|
||||
- "Can we talk about [topic] like we're [specific context]? I want your take on..."
|
||||
- "I write pretty [casually/formally/conversationally] - can you match that energy when we discuss..."
|
||||
- "Pretend we're having coffee and I just said: [your real thoughts about the topic]"
|
||||
- "I'm not looking for generic advice here - what would you actually think about..."
|
||||
<Code
|
||||
code={`"I'm feeling [emotion] about [situation] and I can't figure out why"`}
|
||||
lang="text"
|
||||
title="Feeling-based starter"
|
||||
/>
|
||||
|
||||
### Information & Research
|
||||
- "I'm researching [topic] but I keep finding the same basic stuff. What angles am I missing?"
|
||||
- "Can you help me fact-check this? Here's what I found: [info], but I'm skeptical about..."
|
||||
- "I need sources that aren't just the first Google results everyone uses..."
|
||||
- "What questions should I be asking about [topic] that I probably haven't thought of?"
|
||||
<Code
|
||||
code={`"I'm stuck on [situation] and usually I [your normal approach] but that's not working"`}
|
||||
lang="text"
|
||||
title="Stuck-pattern starter"
|
||||
/>
|
||||
|
||||
### Creative & Personal
|
||||
- "I'm working on [project] and my brain is stuck. Can we just throw ideas around?"
|
||||
- "Here's my terrible first draft of [thing]. What if we made it completely different?"
|
||||
- "I have this weird idea about [concept]. Want to explore where it could go?"
|
||||
- "What would happen if we took [existing thing] and completely flipped [aspect]?"
|
||||
<Code
|
||||
code={`"I want to understand what's really going on with [situation] before I decide what to do"`}
|
||||
lang="text"
|
||||
title="Exploration-first starter"
|
||||
/>
|
||||
|
||||
### When You Need Feedback
|
||||
- "I just finished [thing]. Can you tell me what's working and what's not?"
|
||||
- "This feels off to me but I can't figure out why: [your work]"
|
||||
- "What would make this [writing/idea/project] actually stand out?"
|
||||
- "I'm trying to [goal]. Does this approach make sense, or am I missing something obvious?"
|
||||
[Full guide →](/beginners/how-to/ask-when-uncertain/)
|
||||
</TabItem>
|
||||
|
||||
### When You Want Simple Answers
|
||||
- "Quick question: [your question]"
|
||||
- "Give me the most important thing to know about [topic]"
|
||||
- "What's the one thing I should focus on for [situation]?"
|
||||
- "Bottom line: should I [specific choice A] or [specific choice B]?"
|
||||
<TabItem label="🎯 When You Have a Clear Goal">
|
||||
Use these when you know exactly what you want to accomplish:
|
||||
|
||||
### When You're Making Personal Decisions
|
||||
<Code
|
||||
code={`"I need to [specific goal] and I'm looking for [type of help] because [context about your situation]"`}
|
||||
lang="text"
|
||||
title="Goal-oriented starter"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"I'm working on [project] and I need help with [specific aspect] - here's what I've tried so far: [your attempts]"`}
|
||||
lang="text"
|
||||
title="Project-based starter"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"I want to brainstorm [topic] but I'm coming at it from [your perspective/constraints] - what angles am I missing?"`}
|
||||
lang="text"
|
||||
title="Brainstorming starter"
|
||||
/>
|
||||
</TabItem>
|
||||
|
||||
<TabItem label="🔧 When Something's Not Working">
|
||||
For when Claude's responses aren't hitting the mark:
|
||||
|
||||
<Code
|
||||
code={`"This isn't quite what I'm looking for - I need something more [specific direction]. Can we try a different approach?"`}
|
||||
lang="text"
|
||||
title="Redirect conversation"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"I think we're talking past each other. Let me try explaining this differently: [reframe your request]"`}
|
||||
lang="text"
|
||||
title="Reset and clarify"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"That's helpful but too [general/technical/long/etc.] - can you give me something more [specific need]?"`}
|
||||
lang="text"
|
||||
title="Adjust response style"
|
||||
/>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
---
|
||||
|
||||
## Communication & Style
|
||||
|
||||
<CardGrid>
|
||||
<Card title="💬 Conversational Tone" icon="chat">
|
||||
Get Claude to match your natural speaking style:
|
||||
|
||||
<Code
|
||||
code={`"Can we talk about [topic] like we're [specific context]? I want your take on..."`}
|
||||
lang="text"
|
||||
title="Context-setting"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"Pretend we're having coffee and I just said: [your real thoughts about the topic]"`}
|
||||
lang="text"
|
||||
title="Casual conversation"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/match-tone-style/)
|
||||
</Card>
|
||||
|
||||
<Card title="🎯 Authentic Responses" icon="star">
|
||||
Get past generic advice to real insights:
|
||||
|
||||
<Code
|
||||
code={`"I write pretty [casually/formally/conversationally] - can you match that energy when we discuss..."`}
|
||||
lang="text"
|
||||
title="Style matching"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"I'm not looking for generic advice here - what would you actually think about..."`}
|
||||
lang="text"
|
||||
title="Authentic perspective"
|
||||
/>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
## Information & Research
|
||||
|
||||
<CardGrid>
|
||||
<Card title="🔍 Better Research" icon="magnifier">
|
||||
Go beyond basic Google results:
|
||||
|
||||
<Code
|
||||
code={`"I'm researching [topic] but I keep finding the same basic stuff. What angles am I missing?"`}
|
||||
lang="text"
|
||||
title="Unique angles"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"What questions should I be asking about [topic] that I probably haven't thought of?"`}
|
||||
lang="text"
|
||||
title="Better questions"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/research-unfamiliar-topics/)
|
||||
</Card>
|
||||
|
||||
<Card title="✅ Fact-Checking" icon="approve-check">
|
||||
Validate information effectively:
|
||||
|
||||
<Code
|
||||
code={`"Can you help me fact-check this? Here's what I found: [info], but I'm skeptical about..."`}
|
||||
lang="text"
|
||||
title="Skeptical validation"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"I need sources that aren't just the first Google results everyone uses..."`}
|
||||
lang="text"
|
||||
title="Source quality"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/fact-check/)
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
## Creative & Personal
|
||||
|
||||
<CardGrid>
|
||||
<Card title="🎨 Brainstorming" icon="rocket">
|
||||
Break through creative blocks:
|
||||
|
||||
<Code
|
||||
code={`"I'm working on [project] and my brain is stuck. Can we just throw ideas around?"`}
|
||||
lang="text"
|
||||
title="Open brainstorming"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"What would happen if we took [existing thing] and completely flipped [aspect]?"`}
|
||||
lang="text"
|
||||
title="Perspective flipping"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/brainstorm-comfortably/)
|
||||
</Card>
|
||||
|
||||
<Card title="💭 Getting Feedback" icon="comment">
|
||||
Improve your work with constructive input:
|
||||
|
||||
<Code
|
||||
code={`"I just finished [thing]. Can you tell me what's working and what's not?"`}
|
||||
lang="text"
|
||||
title="Balanced feedback"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"This feels off to me but I can't figure out why: [your work]"`}
|
||||
lang="text"
|
||||
title="Diagnostic feedback"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/get-helpful-feedback/)
|
||||
</Card>
|
||||
|
||||
<Card title="⚖️ Personal Decisions" icon="star">
|
||||
Think through life choices more clearly:
|
||||
|
||||
<Code
|
||||
code={`"I'm trying to decide between [options] and my usual decision-making process isn't working..."`}
|
||||
lang="text"
|
||||
title="Decision paralysis"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"What questions should I be asking myself about [life situation]?"`}
|
||||
lang="text"
|
||||
title="Better questions"
|
||||
/>
|
||||
|
||||
[Full guide →](/beginners/how-to/personal-decisions/)
|
||||
</Card>
|
||||
</CardGrid>
|
||||
- "I'm trying to decide between [options] and my usual decision-making process isn't working..."
|
||||
- "What questions should I be asking myself about [life situation]?"
|
||||
- "I keep going back and forth on [decision]. Can you help me think through what's really driving this?"
|
||||
@ -66,29 +256,73 @@ description: "Bookmark this: Everything you need for better AI conversations"
|
||||
|
||||
## Advanced Techniques
|
||||
|
||||
### Persona Prompts
|
||||
- "Can you respond as someone who [specific expertise/perspective] would approach this?"
|
||||
- "What would a [specific type of expert] say about [topic] that the usual advice misses?"
|
||||
- "Imagine you're [specific role/background] looking at [situation]. What stands out to you?"
|
||||
- "From the perspective of someone who [specific experience], how would you think about [problem]?"
|
||||
<CardGrid>
|
||||
<Card title="🎭 Persona Prompts" icon="star">
|
||||
Get specialized perspectives:
|
||||
|
||||
### Conversation Control
|
||||
- **Steering technique**: "Actually, what I'm really trying to figure out is..."
|
||||
- **Perspective shift**: "Let me try this a different way..."
|
||||
- **Specificity ladder**: Start broad, get more specific with follow-ups
|
||||
- **Context anchoring**: Reference previous parts of conversation to maintain continuity
|
||||
<Code
|
||||
code={`"Can you respond as someone who [specific expertise/perspective] would approach this?"`}
|
||||
lang="text"
|
||||
title="Expert perspective"
|
||||
/>
|
||||
|
||||
### Response Shaping
|
||||
- **Length control**: "Quick take:" for short answers, "Let's dive deep into..." for comprehensive responses
|
||||
- **Style matching**: Explicitly request tone/style in your opening message
|
||||
- **Format requests**: "Can you break this down into..." / "Give me this as..." / "Structure this like..."
|
||||
- **Perspective control**: Use persona prompts for specialized viewpoints
|
||||
<Code
|
||||
code={`"From the perspective of someone who [specific experience], how would you think about [problem]?"`}
|
||||
lang="text"
|
||||
title="Experience-based view"
|
||||
/>
|
||||
|
||||
### Information Quality
|
||||
- **Source validation**: Ask for specific types of sources, not just "sources"
|
||||
- **Bias checking**: "What perspective might this be missing?"
|
||||
- **Depth control**: "What am I not thinking about?" for broader context
|
||||
- **Practical focus**: "What can I actually do with this information?"
|
||||
[Full guide →](/beginners/how-to/persona-prompts/)
|
||||
</Card>
|
||||
|
||||
<Card title="🎮 Conversation Control" icon="seti:config">
|
||||
Steer conversations effectively:
|
||||
|
||||
<Code
|
||||
code={`"Actually, what I'm really trying to figure out is..."`}
|
||||
lang="text"
|
||||
title="Steering technique"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"Let me try this a different way..."`}
|
||||
lang="text"
|
||||
title="Perspective shift"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="📝 Response Shaping" icon="edit">
|
||||
Get exactly the format you want:
|
||||
|
||||
<Code
|
||||
code={`"Quick take:" for short answers`}
|
||||
lang="text"
|
||||
title="Length control"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"Can you break this down into..." / "Give me this as..." / "Structure this like..."`}
|
||||
lang="text"
|
||||
title="Format requests"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="🔬 Information Quality" icon="magnifier">
|
||||
Ensure accuracy and depth:
|
||||
|
||||
<Code
|
||||
code={`"What perspective might this be missing?"`}
|
||||
lang="text"
|
||||
title="Bias checking"
|
||||
/>
|
||||
|
||||
<Code
|
||||
code={`"What can I actually do with this information?"`}
|
||||
lang="text"
|
||||
title="Practical focus"
|
||||
/>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
### Creative Collaboration
|
||||
- **Idea volleyball**: Build on each other's suggestions rather than just generating lists
|
||||
@ -106,23 +340,77 @@ description: "Bookmark this: Everything you need for better AI conversations"
|
||||
|
||||
## Problem Finder: "Claude Isn't Giving Me What I Want"
|
||||
|
||||
**Claude's responses feel robotic/generic**
|
||||
→ [How to Get Claude to Match Your Tone and Style](/how-to/match-tone-style/)
|
||||
<Aside type="caution" title="Quick Problem Diagnosis">
|
||||
Find your exact issue below and get an instant solution:
|
||||
</Aside>
|
||||
|
||||
**Claude completely missed what I was asking**
|
||||
→ [How to Fix It When Claude Completely Misses the Point](/how-to/fix-misunderstandings/)
|
||||
<CardGrid>
|
||||
<Card title="🤖 Responses Feel Robotic" icon="warning">
|
||||
Claude sounds formal, generic, like a manual
|
||||
|
||||
**I get walls of text when I want simple answers**
|
||||
→ [How to Avoid Getting Walls of Text When You Want Something Simple](/how-to/avoid-walls-of-text/)
|
||||
<LinkCard
|
||||
title="How to Get Claude to Match Your Tone"
|
||||
description="Make conversations feel natural and personalized"
|
||||
href="/beginners/how-to/match-tone-style/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
**I don't know how to start the conversation**
|
||||
→ [How to Ask When You Don't Know What You Want](/how-to/ask-when-uncertain/)
|
||||
<Card title="🎯 Completely Missed the Point" icon="error">
|
||||
Claude answered the wrong question entirely
|
||||
|
||||
**I can't tell if Claude's information is reliable**
|
||||
→ [How to Fact-Check Claude's Answers](/how-to/fact-check/)
|
||||
<LinkCard
|
||||
title="How to Fix Misunderstandings"
|
||||
description="Get conversations back on track quickly"
|
||||
href="/beginners/how-to/fix-misunderstandings/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
**Claude gives me obvious/surface-level sources**
|
||||
→ [How to Get Sources You Can Actually Use](/how-to/get-useful-sources/)
|
||||
<Card title="📄 Walls of Text" icon="document">
|
||||
Too much information when you want simple answers
|
||||
|
||||
<LinkCard
|
||||
title="How to Avoid Information Overload"
|
||||
description="Get concise, focused responses"
|
||||
href="/beginners/how-to/avoid-walls-of-text/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="🤔 Can't Get Started" icon="question">
|
||||
Don't know how to begin the conversation
|
||||
|
||||
<LinkCard
|
||||
title="How to Ask When You Don't Know What You Want"
|
||||
description="Start productive conversations from uncertainty"
|
||||
href="/beginners/how-to/ask-when-uncertain/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="❓ Can't Trust the Information" icon="approve-check">
|
||||
Unsure if Claude's answers are reliable
|
||||
|
||||
<LinkCard
|
||||
title="How to Fact-Check Claude's Answers"
|
||||
description="Verify information and find reliable sources"
|
||||
href="/beginners/how-to/fact-check/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="📚 Surface-Level Sources" icon="magnifier">
|
||||
Getting obvious results instead of useful sources
|
||||
|
||||
<LinkCard
|
||||
title="How to Get Sources You Can Actually Use"
|
||||
description="Find unique, valuable information sources"
|
||||
href="/beginners/how-to/get-useful-sources/"
|
||||
badge="Fix Now"
|
||||
/>
|
||||
</Card>
|
||||
</CardGrid>
|
||||
|
||||
**I feel awkward brainstorming with AI**
|
||||
→ [How to Brainstorm Without Feeling Silly](/how-to/brainstorm-comfortably/)
|
||||
|
Loading…
x
Reference in New Issue
Block a user