Context7文档获取器 - 为Smile Savers牙科网站获取最新Astro、Tailwind CSS、TypeScript文档
The Agent Skills Directory
安装命令
npx skills add https://smithery.ai/skills/rahlplx/context7-documentation-fetcher🇨🇳中文介绍
Context7 文档获取器
⚠️ 重要提示：始终使用最新的稳定版本
使用 Context7 或生成代码时，务必获取并使用所有库、框架和依赖项的最新稳定版本。切勿使用已弃用的 API 或过时的语法。
此技能集成了 Context7 MCP，用于为 Smile Savers 牙科诊所网站项目获取最新的、特定版本的文档。
什么是 Context7？
Context7 是一个 MCP 服务器，可将最新的文档和代码示例直接拉取到您的提示中，从而避免：
- ❌ 来自旧训练数据的过时代码示例
- ❌ 不存在的虚构 API
- ❌ 针对旧包版本的通用答案
快速使用
在任何提示中添加 use context7 以获取最新文档：
Create an Astro component for a responsive card grid. use context7
或者直接指定一个库：
How do I configure dark mode in Tailwind CSS 3.4? use library /tailwindlabs/tailwindcss
Smile Savers 项目库
以下是本项目所有依赖项的 Context7 库 ID。当您需要特定文档时，请使用这些 ID。
核心框架
| 库 | Context7 ID | 版本 | 用途 |
|---|---|---|---|
| Astro | /withastro/astro | 最新稳定版 | 静态站点框架 |
| Tailwind CSS | /tailwindlabs/tailwindcss | 最新稳定版 | 实用 CSS |
| TypeScript | /microsoft/typescript | 最新稳定版 | 类型安全 |
Astro 集成
| 库 | Context7 ID | 用途 |
|---|---|---|
| @astrojs/tailwind | /withastro/astro | Tailwind 集成 |
| @astrojs/check | /withastro/astro | 类型检查 |
无障碍与测试
| 库 | Context7 ID | 用途 |
|---|---|---|
| pa11y | - | 无障碍审计 |
| Lighthouse | /AuditBuddy/lighthouse-ci | 性能审计 |
Smile Savers 常用提示
Astro 组件
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
无障碍
How do I make accessible cards with proper ARIA labels? use context7
What are the WCAG 2.1 AA color contrast requirements? use context7
性能
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
设置说明
选项 1：添加到代理规则（推荐）
添加此规则以自动将 Context7 用于代码相关问题：
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.
位置：
- Cursor：设置 → Cursor 设置 → 规则
- Claude Code：添加到项目根目录的 CLAUDE.md 文件中
- Antigravity：全局规则文件
选项 2：手动使用
只需在任何提示后附加 use context7：
How do I create a responsive grid in Astro with Tailwind? use context7
特定版本文档
Smile Savers 使用特定版本。请在提示中提及它们以获取准确的文档：
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 规则模板
添加此完整规则，为所有 Smile Savers 开发启用 Context7：
## 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)
故障排除
"库未找到"
如果 Context7 找不到库，请尝试：
- 首先使用 resolve-library-id 工具
- 在 https://context7.com 上检查可用的库
- 使用更常见的库名
"返回的信息已过时"
明确指定版本：
How do I use Astro 4.16 content collections? use context7
"超出速率限制"
在 https://context7.com/dashboard 获取免费的 API 密钥以获得更高的限制。
与 Smile Savers 移动端 UI 技能集成
将 Context7 与 Smile Savers 移动端 UI 技能结合使用：
Using the Smile Savers Mobile UI skill, create a new FeatureCTA card component.
Fetch current Astro component syntax. use context7
这确保您获得：
- ✅ 来自 Context7 的最新 Astro 语法
- ✅ 来自该技能的 Smile Savers 设计模式
- ✅ 正确的 TypeScript 接口
- ✅ 内置的无障碍合规性
快速参考卡
| 任务 | 提示 |
|---|---|
| Astro 组件帮助 | use library /withastro/astro |
| Tailwind 类 | use library /tailwindlabs/tailwindcss |
| TypeScript 类型 | use library /microsoft/typescript |
| 通用文档 | use context7 |
| 特定版本 | 在提示中包含版本 |
项目特定的 Context7 命令
创建新组件
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
实现动画
Add smooth hover animations to cards using Tailwind CSS keyframes
that respect prefers-reduced-motion. use library /tailwindlabs/tailwindcss
设置测试
How do I run Lighthouse CI in a GitHub Actions workflow for an Astro site?
use context7
优化性能
What's the best way to optimize LCP for an Astro static site?
use library /withastro/astro
版本：1.0 最后更新：2026 年 1 月 依赖项：Context7 MCP 服务器
每周安装次数
–
来源
首次出现
–
🇺🇸English
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
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
