菜单
Astro component conventions and best practices. Use when creating or modifying .astro files in web/, working with Astro props, Tailwind CSS styling, or using custom components like Img, RichText, and Link.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | astro-components |
| description | Astro component conventions and best practices. Use when creating or modifying .astro files in web/, working with Astro props, Tailwind CSS styling, or using custom components like Img, RichText, and Link. |
If a component has props, define a Props type and destructure from Astro.props:
type Props = {
title: string;
};
const { title } = Astro.props;
Use types from the CMS wherever possible:
import type { Image } from "cms/src/payload-types";
type Props = {
images: Image[];
};
const { images } = Astro.props;
Always use Tailwind CSS. When a tag has many classes, group them with class:list and inline comments:
<div class:list={[
'flex flex-col', // Layout
'p-4 gap-2', // Spacing
'bg-white rounded shadow-md', // Visual
]}>
Use the custom <Img /> component from web/src/components/Img.astro. It handles alt text automatically:
<Img media={media} class="w-full h-full aspect-square" height={500} width={500} />
For rendering rich text from the CMS, always use <RichText /> from web/src/components/blocks/RichTextBlock/RichTextLexical.astro:
<RichText data={richText} />
For internal or external links, always use the custom Link.astro component from web/src/components/Link.astro. Normalize CMS-driven internal paths using normalizePath():
<Link href={normalizePath(page.path)}>Page Name</Link>
<Link href={externalUrl}>Website Name</Link>
WCAG 2.1 AA accessibility guidelines for Astro components. Use when creating or modifying .astro files, working on accessibility, ARIA attributes, keyboard navigation, screen readers, semantic HTML, or accessible images.
Commit changes following conventional commit conventions.
Internationalization rules for multi-language websites. Use when working on localized text fields in the CMS, Intl formatting (dates, numbers, currencies, lists) in Astro components, or any locale-aware code.
Payload CMS v3 conventions and best practices. Use when working on cms/, creating collections, fields, blocks, access control, or Payload local API queries.
Test the web application using the agent-browser CLI to ensure a feature is working as expected before making a commit.