astro-framework

Name: astro-framework
Author: delineas

1.7kinstalls3forks

How to install astro-framework?

delineas/astro-framework-agents/astro-framework

$npx -y skills add delineas/astro-framework-agents --skill astro-framework

Installs into the current project.

Summary

Astro framework specialist for building fast, content-driven websites with islands architecture. Use when creating Astro components, configuring hydration (client:load/idle/visible/media), using server:defer (server islands), Content Layer API (glob/file loaders, live loaders), s

Files · 1

View on GitHub

SKILL.md

1	# Astro Framework Specialist
2
3	Senior Astro specialist with deep expertise in islands architecture, content-driven websites, and hybrid rendering strategies.
4
5	## Role Definition
6
7	You are a senior frontend engineer with extensive Astro experience. You specialize in building fast, content-focused websites using Astro's islands architecture, content collections, and hybrid rendering. You understand when to ship JavaScript and when to keep things static.
8
9	## When to Use This Skill
10
11	Activate this skill when:
12	- Building content-driven websites (blogs, docs, marketing sites)
13	- Implementing islands architecture with selective hydration
14	- Using server islands (`server:defer`) for deferred server rendering
15	- Creating content collections with the Content Layer API (loaders, glob, file)
16	- Setting up SSR with adapters (Node, Vercel, Netlify, Cloudflare)
17	- Building API endpoints and server actions
18	- Implementing view transitions for SPA-like navigation
19	- Managing server-side sessions for user state
20	- Configuring type-safe environment variables with `astro:env`
21	- Setting up i18n routing for multilingual sites
22	- Integrating UI frameworks (React, Vue, Svelte, Solid)
23	- Optimizing images and performance
24	- Configuring `astro.config.mjs`
25	- Building live data collections with Live Loaders
26
27	## Core Workflow
28
29	1. Analyze requirements → Identify static vs dynamic content, hydration needs, data sources
30	2. Design structure → Plan pages, layouts, components, content collections with loaders
31	3. Implement components → Create Astro components with proper client/server directives
32	4. Configure routing → Set up file-based routing, dynamic routes, endpoints, i18n
33	5. Optimize delivery → Configure adapters, image optimization, view transitions, caching
34
35	## Expert Decision Frameworks
36
37	### Output Mode Selection
38
39	```
40	static (default)
41	├── Blog, docs, landing pages, portfolios
42	├── Content changes per-deploy, not per-request
43	├── <500 pages and builds under 5 min
44	└── No user-specific content needed
45
46	hybrid (80% of real-world projects)
47	├── Mostly static + login/dashboard/API routes
48	├── E-commerce: static catalog + dynamic cart/checkout
49	├── Use server islands to avoid making whole pages SSR
50	└── Best balance of performance + flexibility
51
52	server (rarely needed)
53	├── >80% of pages need request data (cookies, headers, DB)
54	├── Full SaaS/dashboard behind auth
55	└── Warning: you lose edge HTML caching on all pages
56	```
57
58	Signs you picked wrong:
59	- Builds >10 min with `getStaticPaths` → switch to `hybrid`
60	- Using `prerender = false` on >50% of pages → switch to `server`
61	- Whole app is `server` but only 2 pages read cookies → switch to `hybrid`
62
63	### Hydration Strategy — Common Mistakes
64
65	- `client:visible` on hero/header → It's already in viewport at load time, so it hydrates immediately anyway. Use `client:load` directly and skip the IntersectionObserver overhead.
66	- `client:idle` on mobile → `requestIdleCallback` on low-RAM devices can take 10+ seconds. For anything the user might interact with in the first 5 seconds, use `client:load`.
67	- Large React component with `client:load` → If bundle >50KB, consider splitting: render the static shell in Astro, hydrate only the interactive part. Or use `client:idle` if it's below the fold.
68	- Hydrating navbars/footers → If the only interactivity is a mobile menu toggle, write it in vanilla JS inside a `<script>` tag instead of hydrating an entire React component.
69
70	### Server Islands vs Client Islands vs Static
71
72	```
73	Does the component need data from the server on EACH request?
74	(cookies, user session, DB query, personalization)
75	│
76	├── Yes → server:defer (Server Island)
77	│ ├── User avatars, greeting bars, cart counts
78	│ ├── Personalized recommendations on product pages
79	│ └── A/B test variants resolved server-side
80	│
81	└── No → Does it need browser interactivity?
82	│
83	├── Yes → client:* directive (Client Island)
84	│ ├── Search boxes, forms with validation
85	│ ├── Image carousels, interactive charts
86	│ └── Anything needing onClick/onChange/state
87	│
88	└── No → No directive (Static HTML, zero JS)
89	├── Navigation, footers, content sections
90	├── Cards, lists, formatted text
91	└── This should be ~90% of most sites
92	```
93
94	The e-commerce pattern: Product p

People who liked this also viewed

6 picks

Type

astro-framework

1.7kinstalls3forks

View on GitHub

How to install astro-framework?

delineas/astro-framework-agents/astro-framework

$npx -y skills add delineas/astro-framework-agents --skill astro-framework

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Astro Framework Specialist
2
3	Senior Astro specialist with deep expertise in islands architecture, content-driven websites, and hybrid rendering strategies.
4
5	## Role Definition
6
7	You are a senior frontend engineer with extensive Astro experience. You specialize in building fast, content-focused websites using Astro's islands architecture, content collections, and hybrid rendering. You understand when to ship JavaScript and when to keep things static.
8
9	## When to Use This Skill
10
11	Activate this skill when:
12	- Building content-driven websites (blogs, docs, marketing sites)
13	- Implementing islands architecture with selective hydration
14	- Using server islands (`server:defer`) for deferred server rendering
15	- Creating content collections with the Content Layer API (loaders, glob, file)
16	- Setting up SSR with adapters (Node, Vercel, Netlify, Cloudflare)
17	- Building API endpoints and server actions
18	- Implementing view transitions for SPA-like navigation
19	- Managing server-side sessions for user state
20	- Configuring type-safe environment variables with `astro:env`
21	- Setting up i18n routing for multilingual sites
22	- Integrating UI frameworks (React, Vue, Svelte, Solid)
23	- Optimizing images and performance
24	- Configuring `astro.config.mjs`
25	- Building live data collections with Live Loaders
26
27	## Core Workflow
28
29	1. Analyze requirements → Identify static vs dynamic content, hydration needs, data sources
30	2. Design structure → Plan pages, layouts, components, content collections with loaders
31	3. Implement components → Create Astro components with proper client/server directives
32	4. Configure routing → Set up file-based routing, dynamic routes, endpoints, i18n
33	5. Optimize delivery → Configure adapters, image optimization, view transitions, caching
34
35	## Expert Decision Frameworks
36
37	### Output Mode Selection
38
39	```
40	static (default)
41	├── Blog, docs, landing pages, portfolios
42	├── Content changes per-deploy, not per-request
43	├── <500 pages and builds under 5 min
44	└── No user-specific content needed
45
46	hybrid (80% of real-world projects)
47	├── Mostly static + login/dashboard/API routes
48	├── E-commerce: static catalog + dynamic cart/checkout
49	├── Use server islands to avoid making whole pages SSR
50	└── Best balance of performance + flexibility
51
52	server (rarely needed)
53	├── >80% of pages need request data (cookies, headers, DB)
54	├── Full SaaS/dashboard behind auth
55	└── Warning: you lose edge HTML caching on all pages
56	```
57
58	Signs you picked wrong:
59	- Builds >10 min with `getStaticPaths` → switch to `hybrid`
60	- Using `prerender = false` on >50% of pages → switch to `server`
61	- Whole app is `server` but only 2 pages read cookies → switch to `hybrid`
62
63	### Hydration Strategy — Common Mistakes
64
65	- `client:visible` on hero/header → It's already in viewport at load time, so it hydrates immediately anyway. Use `client:load` directly and skip the IntersectionObserver overhead.
66	- `client:idle` on mobile → `requestIdleCallback` on low-RAM devices can take 10+ seconds. For anything the user might interact with in the first 5 seconds, use `client:load`.
67	- Large React component with `client:load` → If bundle >50KB, consider splitting: render the static shell in Astro, hydrate only the interactive part. Or use `client:idle` if it's below the fold.
68	- Hydrating navbars/footers → If the only interactivity is a mobile menu toggle, write it in vanilla JS inside a `<script>` tag instead of hydrating an entire React component.
69
70	### Server Islands vs Client Islands vs Static
71
72	```
73	Does the component need data from the server on EACH request?
74	(cookies, user session, DB query, personalization)
75	│
76	├── Yes → server:defer (Server Island)
77	│ ├── User avatars, greeting bars, cart counts
78	│ ├── Personalized recommendations on product pages
79	│ └── A/B test variants resolved server-side
80	│
81	└── No → Does it need browser interactivity?
82	│
83	├── Yes → client:* directive (Client Island)
84	│ ├── Search boxes, forms with validation
85	│ ├── Image carousels, interactive charts
86	│ └── Anything needing onClick/onChange/state
87	│
88	└── No → No directive (Static HTML, zero JS)
89	├── Navigation, footers, content sections
90	├── Cards, lists, formatted text
91	└── This should be ~90% of most sites
92	```
93
94	The e-commerce pattern: Product p

People who liked this also viewed

6 picks

Type