無料GitHub で公開

astro

Assists with building content-driven websites using Astro's island architecture. Use when creating static sites, blogs, documentation, or marketing pages that ship zero JavaScript by default. Trigger words: astro, static site, island architecture, content collections, SSG, hybrid rendering, astro components.

TerminalSkills/skills

インストール方法を見る

含まれるファイル（2）

SKILL.md3.8 KB
_scores.json1.6 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Astro

Overview

Astro is a web framework for building content-driven websites that ships zero JavaScript by default. Its island architecture hydrates only interactive components, achieving excellent Lighthouse scores while supporting React, Vue, Svelte, or any UI framework where interactivity is needed.

Instructions

When creating pages, use file-based routing in src/pages/ with .astro, .md, or .mdx files, and organize shared structure in src/layouts/.
When adding interactivity, use client directives on framework components: prefer client:visible or client:idle over client:load since most components do not need immediate hydration.
When managing content, define Content Collections in src/content/ with strict Zod schemas using defineCollection(), and query with getCollection() and getEntry().
When choosing rendering modes, default to static (SSG) for marketing and content pages, use output: "server" for dynamic pages, or use hybrid rendering with per-page export const prerender = false.
When optimizing images, use the <Image> component from astro:assets for automatic format conversion (WebP/AVIF), resizing, and lazy loading instead of raw <img> tags.
When adding page transitions, enable View Transitions with <ViewTransitions /> for SPA-like navigation without shipping a client-side router.
When integrating UI frameworks, install the appropriate integration (@astrojs/react, @astrojs/vue, @astrojs/svelte) and use Astro components for static content, reaching for framework components only when interactivity is required.

Examples

Example 1: Build a blog with Content Collections

User request: "Create an Astro blog with type-safe Markdown content"

Actions:

Define a blog Content Collection with Zod schema for frontmatter (title, date, tags, author)
Create dynamic route src/pages/blog/[slug].astro with getStaticPaths()
Build blog index page querying getCollection("blog") with sorting
Add layout with SEO meta tags, navigation, and View Transitions

Output: A statically generated blog with validated content, clean URLs, and smooth page transitions.

Example 2: Add interactive components to a static site

User request: "Add a React search component to my Astro documentation site"

Actions:

Install @astrojs/react integration
Create the React search component with state and event handling
Add the component to the page with client:idle directive
Pass static data as props from the Astro page frontmatter

Output: A documentation site that is fully static except for the interactive search island.

Guidelines

Use Astro components (.astro) for static content; only use React/Vue/Svelte when interactivity is needed.
Default to client:visible or client:idle over client:load for hydration directives.
Define Content Collections with strict Zod schemas to catch content errors at build time.
Use astro:assets <Image> over raw <img> tags for automatic optimization.
Keep layouts thin with shared <head>, navigation, and footer; put page-specific content in pages.
Use hybrid rendering: static for marketing pages, SSR only for personalized or dynamic pages.
Enable View Transitions for SPA-like navigation without shipping a router.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

3dsmax-rendering

無料

Scripts and configures production rendering in Autodesk 3ds Max with the V-Ray and Corona renderers: output size and files, render elements, denoising, light mix, batch and command-line rendering, and network rendering. Use when a user asks to set up a production render, render several cameras in one batch, render from the command line or on a render farm, add render passes for compositing, or cut render time for archviz and product shots.

日本語の概要は準備中です。原文の説明を表示しています。