← ClaudeAtlas

astrolisted

Build content-driven websites and web apps with Astro: islands, Tailwind CSS v4, Content Layer, Vitest, Prettier, and mise tasks. Use for Astro sites, SSG, SSR, or islands.
fmind/dot · ★ 4 · Web & Frontend · score 80
Install: claude install-skill fmind/dot
# Astro Standard Astro builds content-driven websites and web apps with islands architecture and zero JavaScript by default. Shared TypeScript conventions come from [typescript-stack](../typescript-stack/SKILL.md); documentation sites can also evaluate [hugo](../hugo/SKILL.md); deploy targets from [firebase](../firebase/SKILL.md) and [cloud-run](../cloud-run/SKILL.md). ## 1. Core Stack - **CLI & framework**: `astro` via project scripts (`pnpm astro`, `pnpm run build`) or `pnpm dlx create-astro@latest`; every project pins `astro` in `package.json` with `pnpm`. - **Architecture**: zero JavaScript by default, partial hydration islands (`client:load`, `client:idle`, `client:visible`, `client:only`), Server Islands (`server:defer`), Content Layer API. - **Styling**: Tailwind CSS v4 via `@tailwindcss/vite` plugin in [astro.config.mjs](references/astro.config.mjs) and `@import "tailwindcss";`; `@astrojs/tailwind` is deprecated. - **Type safety**: `astro check` with `@astrojs/check` and `typescript`; TypeScript 7 native compiler lacks the required programmatic API, so pin `typescript@^5` in `devDependencies`. - **Testing**: `pnpm exec vitest run` with [vitest.config.ts](references/vitest.config.ts) (`getViteConfig`); browser e2e via [playwright](../playwright/SKILL.md) against `pnpm run preview`. - **Hygiene & audit**: Knip detects unused dependencies; [knip.json](references/knip.json) excuses task-only and CSS-imported packages; `pnpm audit` scans vulnerabilities. - **Formatting*