astro-developmentlisted

End-to-end Astro architecture and implementation for sites and light-to-medium web apps. Use when creating or auditing an Astro project, running Astro CLI commands, adding pages, content collections, React/shadcn islands, Actions, sessions, endpoints, middleware, adapters, Cloudflare Workers deployment, or choosing static versus on-demand rendering. Also use for Astro-based admin dashboards, with admin-dashboard leading UX decisions and shadcn-ui leading component APIs. Not for generic native-feature questions (native-first), SEO strategy/audits (seo-website-builder), or visual direction (design-taste).
ongkipro/dotfiles · ★ 0 · Web & Frontend · score 53

Install: claude install-skill ongkipro/dotfiles

# Astro Development Inspect `package.json`, the lockfile, `astro.config.*`, `tsconfig.json`, and the route/component tree before proposing commands or architecture. Installed code wins over this skill; current official docs win over remembered APIs. ## Use this skill for - New Astro projects - Existing Astro refactors - Blogs, docs, landing pages, business websites, content hubs - Hybrid Astro apps with a few dynamic routes - Content collections and MD/MDX workflows - React/Vue/Svelte islands inside Astro - SEO, sitemap, robots, schema, metadata - Tailwind-based UI systems - GSAP-powered motion, reveal effects, and scroll-driven animation in Astro islands or vanilla JS - Contact forms, APIs, and optional database-backed features - Deployment to Vercel, Netlify, Cloudflare, or Node ## Default mindset - Prefer **Astro first**, minimal JS by default - Ship **static HTML** unless interactivity is required - Hydrate only the **smallest interactive island** - Start with static output and opt individual routes into on-demand rendering; use `output: 'server'` only when most routes are dynamic - Build for **clarity, performance, and maintainability** - For websites, prioritize **real content + strong information architecture + SEO** - When animation is needed, follow the `design-taste` motion ladder: CSS-first (transitions, scroll-driven animations), then vanilla JS + IntersectionObserver; reach for **GSAP** (via the installed GSAP skills) only for real pin/scrub/timeline work