القائمة
Fetch up-to-date library documentation for Astro, Tailwind CSS, TypeScript, and other Smile Savers project dependencies using Context7 MCP
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Master agentic skill for the Smile Savers project. Enforces 'Council of Experts' standards for Astro 6, Tailwind 4, and Edge-Native excellence.
Guide for building Astro 5+ components using Content Layer, Actions, and Server Islands.
Use this skill when the user asks to create a new section or module (e.g., /blog, /docs) using Astro 6 standards.
Performance profiling principles. Measurement, analysis, and optimization techniques.
Python development principles and decision-making. Framework selection, async patterns, type hints, project structure. Teaches thinking, not copying.
SEO fundamentals, E-E-A-T, Core Web Vitals, and Google algorithm principles.
| 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 |
⚠️ 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.
Context7 is an MCP server that pulls current documentation and code examples directly into your prompts, preventing:
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
Below are the Context7 library IDs for all dependencies in this project. Use these when you need specific documentation.
| 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 |
| Library | Context7 ID | Usage |
|---|---|---|
| @astrojs/tailwind | /withastro/astro | Tailwind integration |
| @astrojs/check | /withastro/astro | Type checking |
| Library | Context7 ID | Usage |
|---|---|---|
| pa11y | - | Accessibility auditing |
| Lighthouse | /AuditBuddy/lighthouse-ci | Performance auditing |
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
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
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:
Just append use context7 to any prompt:
How do I create a responsive grid in Astro with Tailwind? use context7
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
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)
If Context7 can't find a library, try:
Specify the version explicitly:
How do I use Astro 4.16 content collections? use context7
Get a free API key at https://context7.com/dashboard for higher limits.
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:
| 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 |
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
Version: 1.0
Last Updated: January 2026
Dependencies: Context7 MCP Server