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:
Claude AI Guide Project 2025-07-08 00:42:45 -06:00
parent 91225f773b
commit 97de83f0e9

View File

@ -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/)