Astro coding conventions and rules. Loaded by the developer subagent via skills field.
Coding conventions and rules for implementing Astro sites from Stitch design data.
PascalCase.astro (e.g., HeroSection.astro)kebab-case.astro or [...slug].astro for dynamic routeskebab-case.csskebab-case/index.mdx---
// 1. Imports
import BaseLayout from "../layouts/BaseLayout.astro";
// 2. Props interface
interface Props {
title: string;
}
// 3. Data fetching / processing
const { title } = Astro.props;
---
<!-- 4. Template -->
<section class="hero">
<h1>{title}</h1>
<slot />
</section>
<!-- 5. Scoped styles -->
<style>
.hero {
padding: var(--spacing-lg);
color: var(--color-text);
}
</style>
global.css for design tokensvar(--*) tokens for font-size, font-weight, color, spacing, and border-radius to maintain site-wide consistency. If no suitable token exists, add one to global.css firstmax-width or letter-spacing for a single component) may be inlined in scoped styles when tokenizing would not benefit reuse<style> tags)is:global only when absolutely necessary (e.g., content collection rendered HTML)@media (min-width: 768px) for desktoprem units; use px only for borders, shadows, and fine-tuned valuessrc/content/config.ts using ZodgetCollection() and getEntry() for data access[...slug].astro with getStaticPaths()src/assets/images/ or co-located in src/content/<Picture> component for optimization (generates multiple formats like WebP/AVIF and responsive sizes)