| name | Context7 Documentation Fetcher |
| description | Fetch up-to-date library documentation for Astro, Tailwind CSS, TypeScript, and other Smile Savers project dependencies using Context7 MCP |
Context7 Documentation Fetcher
⚠️ IMPORTANT: Always Use Latest Stable Versions
When using Context7 or generating code, always fetch and use the LATEST STABLE versions of all libraries, frameworks, and dependencies. Never use deprecated APIs or outdated syntax.
This skill integrates Context7 MCP to fetch up-to-date, version-specific documentation for the Smile Savers dental practice website project.
What is Context7?
Context7 is an MCP server that pulls current documentation and code examples directly into your prompts, preventing:
- ❌ Outdated code examples from old training data
- ❌ Hallucinated APIs that don't exist
- ❌ Generic answers for old package versions
Quick Usage
Add use context7 to any prompt to fetch current documentation:
Create an Astro component for a responsive card grid. use context7
Or specify a library directly:
How do I configure dark mode in Tailwind CSS 3.4? use library /tailwindlabs/tailwindcss
Smile Savers Project Libraries
Below are the Context7 library IDs for all dependencies in this project. Use these when you need specific documentation.
Core Framework
| Library | Context7 ID | Version | Usage |
|---|
| Astro | /withastro/astro | Latest Stable | Static site framework |
| Tailwind CSS | /tailwindlabs/tailwindcss | Latest Stable | Utility CSS |
| TypeScript | /microsoft/typescript | Latest Stable | Type safety |
Astro Integrations
| Library | Context7 ID | Usage |
|---|
| @astrojs/tailwind | /withastro/astro | Tailwind integration |
| @astrojs/check | /withastro/astro | Type checking |
Accessibility & Testing
| Library | Context7 ID | Usage |
|---|
| pa11y | - | Accessibility auditing |
| Lighthouse | /AuditBuddy/lighthouse-ci | Performance auditing |
Common Prompts for Smile Savers
Astro Components
Create an Astro component that accepts TypeScript props with default values. use library /withastro/astro
How do I pass data from Astro pages to components? use context7
Show me how to use Astro's Content Collections for blog posts. use library /withastro/astro
Tailwind CSS
How do I add custom colors to Tailwind config? use library /tailwindlabs/tailwindcss
What's the correct way to implement dark mode with class strategy in Tailwind 3.4? use context7
How do I create custom animations in Tailwind CSS? use library /tailwindlabs/tailwindcss
Accessibility
How do I make accessible cards with proper ARIA labels? use context7
What are the WCAG 2.1 AA color contrast requirements? use context7
Performance
How do I optimize images in Astro using astro:assets? use library /withastro/astro
What's the best way to lazy load components in Astro? use context7
Setup Instructions
Option 1: Add to Agent Rules (Recommended)
Add this rule to automatically use Context7 for code-related questions:
Always use Context7 MCP when I need library/API documentation, code generation,
setup or configuration steps for Astro, Tailwind CSS, or TypeScript without me
having to explicitly ask.
Location:
- Cursor: Settings → Cursor Settings → Rules
- Claude Code: Add to CLAUDE.md in project root
- Antigravity: Global rules file
Option 2: Manual Usage
Just append use context7 to any prompt:
How do I create a responsive grid in Astro with Tailwind? use context7
Version-Specific Documentation
Smile Savers uses specific versions. Mention them for accurate docs:
How do I set up Tailwind CSS 3.4 with Astro 4? use context7
Show me TypeScript 5 strict mode configuration for Astro. use context7
Smile Savers Rule Template
Add this complete rule to enable Context7 for all Smile Savers development:
## Smile Savers Development Rules
When working on the Smile Savers dental practice website:
1. **Always use Context7** for Astro, Tailwind CSS, and TypeScript documentation
2. **ALWAYS use LATEST STABLE versions:**
- Astro: Latest Stable (use library /withastro/astro)
- Tailwind CSS: Latest Stable (use library /tailwindlabs/tailwindcss)
- TypeScript: Latest Stable (use library /microsoft/typescript)
- All other dependencies: Latest Stable versions only
3. **Apply these constraints:**
- Mobile-first responsive design (2-col → 3-col → 4-col)
- WCAG 2.1 AA accessibility compliance
- Dark/Light mode with class strategy
- Zero runtime JavaScript (pure Astro static)
- Lighthouse 98+ performance score
4. **Use Smile Savers design tokens:**
- Primary: #2d54ff (Professional Blue)
- Accent: #d4a574 (Trust Gold)
- Font: Playfair Display (headings), Geist Sans (body)
Troubleshooting
"Library not found"
If Context7 can't find a library, try:
- Use the resolve-library-id tool first
- Check https://context7.com for available libraries
- Use a more common library name
"Outdated information returned"
Specify the version explicitly:
How do I use Astro 4.16 content collections? use context7
"Rate limit exceeded"
Get a free API key at https://context7.com/dashboard for higher limits.
Integration with Smile Savers Mobile UI Skill
Use Context7 alongside the Smile Savers Mobile UI skill:
Using the Smile Savers Mobile UI skill, create a new FeatureCTA card component.
Fetch current Astro component syntax. use context7
This ensures you get:
- ✅ Current Astro syntax from Context7
- ✅ Smile Savers design patterns from the skill
- ✅ Correct TypeScript interfaces
- ✅ Accessibility compliance built-in
Quick Reference Card
| Task | Prompt |
|---|
| Astro component help | use library /withastro/astro |
| Tailwind classes | use library /tailwindlabs/tailwindcss |
| TypeScript types | use library /microsoft/typescript |
| General docs | use context7 |
| Specific version | Include version in prompt |
Project-Specific Context7 Commands
Creating New Components
Create a premium dental service card component in Astro with TypeScript props,
Tailwind styling, dark mode support, and WCAG 2.1 AA accessibility.
use library /withastro/astro use library /tailwindlabs/tailwindcss
Implementing Animations
Add smooth hover animations to cards using Tailwind CSS keyframes
that respect prefers-reduced-motion. use library /tailwindlabs/tailwindcss
Setting Up Testing
How do I run Lighthouse CI in a GitHub Actions workflow for an Astro site?
use context7
Optimizing Performance
What's the best way to optimize LCP for an Astro static site?
use library /withastro/astro
Version: 1.0
Last Updated: January 2026
Dependencies: Context7 MCP Server
