lookup

/lookup Command

Fast API verification and documentation search using the astro-knowledge skill.

Usage

/lookup [api-name or topic]

Description

The /lookup command provides quick access to Astro and Starlight API documentation, syntax examples, and best practices via the astro-knowledge skill.

Examples

/lookup getStaticPaths
/lookup content collections
/lookup starlight config
/lookup client directives
/lookup image optimization
/lookup defineCollection

What You Get

1. Current Syntax

// Latest API syntax with TypeScript types
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');

2. Usage Examples

// Common patterns
const published = await getCollection('blog', ({ data }) => {
  return data.draft !== true;
});

3. Documentation Links

• Official Astro docs URL
• Related API references
• Migration guides (if applicable)

4. Best Practices

• Performance tips
• Common pitfalls
• Security considerations

Common Lookups

Content Collections

/lookup getCollection

Returns:

import { getCollection, getEntry, getEntries } from 'astro:content';

// Get all entries
const allPosts = await getCollection('blog');

// Filter entries
const publishedPosts = await getCollection('blog', ({ data }) => 
  !data.draft
);

// Get single entry
const post = await getEntry('blog', 'post-slug');

Dynamic Routes

/lookup getStaticPaths

Returns:

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  
  return posts.map(post => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

const { post } = Astro.props;

Client Directives

/lookup client directives

Returns:

<!-- Load on page load -->
<Component client:load />

<!-- Load when browser idle -->
<Component client:idle />

<!-- Load when visible -->
<Component client:visible />

<!-- Conditional load -->
<Component client:media="(max-width: 768px)" />

<!-- Client-only render -->
<Component client:only="react" />