skills.rest
bittlinkm
bittlinkmCOMMUNITY
Explore all skills by this author →
GitHub

astro-webapp-conventions

Enforces feature-slice architecture and Content Collections conventions in static Astro projects.

Updated Aug 20, 2026
Search Tags:#typescript#coding conventions#static site#astro#content collections#feature-slice architecture#bem css
One-click install
npx skills add https://github.com/bittlinkm/claude-setup --skill astro-webapp-conventions-bittlinkm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: astro-webapp-conventions
Source: https://github.com/bittlinkm/claude-setup/tree/main/skills/astro-webapp-conventions
Command: npx skills add https://github.com/bittlinkm/claude-setup --skill astro-webapp-conventions-bittlinkm

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Astro projects built with a feature-slice architecture (paired src/features/ and src/content/ folders, Content Collections, no UI framework) drift into inconsistency when contributors write generic Astro code instead of matching the project's established patterns. This Skill ensures generated or reviewed code follows the project's actual conventions for pages, components, schemas, queries, styling, and interactivity. ## Core Features & Use Cases - Architecture enforcement: Keeps src/pages/ files as thin wrappers around features/ Page components, routes all data access through per-feature queries.ts files, and applies the folder-vs-singleton Content Collection pattern correctly. - Styling and interactivity conventions: Applies scoped BEM CSS with design tokens, :global() usage rules, and vanilla-JS-only interactivity (no client:* directives, no React/Vue/Svelte). - Use Case: When asked to add a blog detail page to an Astro site, the Skill produces a thin src/pages/blog/[slug].astro with getStaticPaths sourcing from blog.queries.ts, rendering a BlogDetailPage.astro that slots the Markdown Content — matching sibling files exactly. ## Quick Start Use the astro-webapp-conventions skill to add a new content-backed feature page to this Astro project following its existing folder and naming patterns.

Frequently Asked Questions about astro-webapp-conventions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure a new page in an Astro feature-slice project?▼

Create a Page component in src/features/<feature>/<Name>Page.astro containing all markup, data fetching, and styles, then add a thin src/pages/<name>.astro that only imports and renders it. Page logic should never live directly in the pages/ directory.

How do Astro Content Collections work with the glob loader?▼

Each feature defines a collection in its schema.ts using the glob loader over Markdown files, registered in src/content.config.ts. Folder collections hold many entries under src/content/<feature>/<slug>/index.md, while singletons fake a one-entry folder collection since the glob loader has no single-file mode.

Can I use React or Vue components in this type of Astro project?▼

No. Projects following this convention have no UI framework integration and no client:* directives. All interactivity uses plain script tags with DOM APIs, toggling state via BEM modifier classes like site-header__nav--open through classList.

Why does my Astro singleton content collection have a double-nested folder path?▼

The double nesting (e.g. content/footer/footer/index.md) is intentional, not a typo. The glob loader has no single-file mode, so a singleton fakes being a one-entry folder collection, queried via getCollection and taking the first result.

When should I not apply these Astro conventions?▼

Do not apply them to SSR-first Astro projects, projects built on a UI framework like React or Vue, or component-library-driven codebases. Confirm the project has the features/content folder pairing, a glob-loader content.config.ts, and no client directives before assuming the conventions fit.

Related Skills

Explore More Software Engineering Skills→
northguildnorthguild
6

astro

Guides building Astro sites with components, pages, adapters, and CLI commands.

Official
Basic
fabricioctellesfabricioctelles
47

astro-sites-manager

Build, migrate, validate, and deploy Astro v6 and v7 websites.

Community
Advanced
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
oakossoakoss
14

astro

Create content-driven websites with Astro content collections and island architecture.

Official
Intermediate