Skills Guide

Astro Batavia Platform

VerifiedSafe

Expert guidance for the Astro Batavia codebase, focusing on i18n, Tailwind CSS v4, and Astro-specific patterns.

Download and use
Sby Skills Guide Bot
DevelopmentIntermediate
7/27/2026
Claude Code
#astro#i18n#tailwindcss#multilingual-blog#project-conventions

Recommended for

Backend developerClaude CodeCode reviewFrontend developerFullstack developerRefactoring

Automated summary

Repository-specific guidance for the Astro Batavia codebase, covering i18n conventions, CSS-only Tailwind CSS v4 setup, manual pagination and Astro component standards.

Strengths

  • Captures repo-specific pitfalls: `paginate()` only works when the filename contains `[page]`, and the first page must link to `/blog/` rather than `/blog/1`.
  • Centralizes i18n rules: strings live in `src/i18n/ui.ts` for en/es/ja, links use `getLocalizedPath`, and `[lang]` params are validated with `isValidLanguage`.
  • States clear component standards: `.astro` files with vanilla JS scripts, `<Picture>` from `astro:assets`, typography components and a shared Skeleton system.
  • Ends with a concrete validation routine: `npm run lint`, `npm run format` and `npm run build:only`.

Limitations

  • Tightly scoped to this repository and offers no usable guidance for other Astro projects.
  • Does not state which Astro or Tailwind versions were tested, nor describe the full project structure.
  • Validation stops at lint/format/build; no automated tests are mentioned.
When to use it

Use it whenever a task changes code in the Astro Batavia repository, such as paginated routes, styles, translations or new components.

When not to use it

Avoid it for a different Astro project or for general questions about Astro, Tailwind or i18n outside this repository.

Security analysis

Safe
Quality score85/100

The skill contains only repository-specific development guidance for an Astro blog. It does not instruct destructive commands, secret exfiltration, obfuscated execution, or safety disabling. Mentioned commands are standard lint/format/build scripts.

No concerns found

How this analysis is made

Examples

Add a localized UI string
Add a new 'readingTime' UI string to src/i18n/ui.ts for en, es and ja, then display it on the blog post page using getLocalizedPath for any links.
Paginate the blog index
Paginate the blog index at /blog with 6 posts per page. Keep the first page at /blog/ (not /blog/1) and make sure prev/next URLs are localized.
Add a theme color
Add a new 'brand' color and a fade-in animation to the @theme block in src/styles/global.css, then use them in the header component without creating a tailwind.config.mjs.

name: astro-batavia description: specialized skill for developing and maintaining the Astro Batavia multilingual blog platform.

astro-batavia

Expert guidance for the Astro Batavia codebase, focusing on i18n, Tailwind CSS v4, and Astro-specific patterns.

When to use

Use this skill for any task involving code modifications, feature additions, or bug fixes within the Astro Batavia repository. It is particularly critical when:

  • Adding or modifying paginated routes (Manual Pagination).
  • Updating styles or theme configuration (CSS-only).
  • Working with multilingual content or translations.
  • Creating new UI components (Astro/Vanilla JS).
  • Implementing loading states using the custom Skeleton system.

Instructions

1. Internationalization (i18n)

  • Translations: UI strings are managed in src/i18n/ui.ts. Always add new strings there for all supported languages (en, es, ja).
  • Path Generation: Use getLocalizedPath(path, lang) from @/i18n/utils to generate links. Avoid hardcoding /en/ or /es/.
  • Validation: Use isValidLanguage(lang) when handling [lang] parameters in getStaticPaths.

2. Styling with Tailwind CSS v4

  • CSS-Only Config: All configuration MUST happen in src/styles/global.css. Never create a tailwind.config.mjs file.
  • Theme Extensions: Add colors, fonts, and animations to the @theme block in global.css.
  • Utility Layers: Use @layer base, @layer components, and @layer utilities within global.css to organize custom CSS.

3. Pagination & Routing

  • Filename Constraints: Astro's paginate() helper ONLY works if the filename contains [page] or [...page].
  • Manual Pagination: For index.astro or [slug].astro files requiring pagination, manually slice the data and construct the Page object. Ensure url.prev and url.next are correctly localized.
  • First Page URLs: Always ensure the first page links to the base directory (e.g., /blog/) and NOT to /blog/1.

4. Component Standards

  • Component Style: Keep components as .astro files with Vanilla JS <script> tags for interactivity. Avoid React/Islands.
  • Images: Use <Picture> component from astro:assets for automatic optimization.
  • Typography: Prefer components in src/components/ui/typography/ for consistent text styling.
  • Skeleton System:
    • All loading states must use the src/components/ui/Skeleton.astro primitive or pre-built specialized skeletons from src/components/ui/skeletons/.
    • Use SkeletonLoader.astro for global page transition skeletons.

5. Build & Validation

  • Linting: Run npm run lint before finalizing changes.
  • Formatting: Run npm run format to ensure code style consistency.
  • Build Test: Run npm run build:only to verify the build pipeline.

From the file to a first result

The download contains exactly the content displayed on this page. This copy may differ from the latest version in the source repository.

View the source and supporting files

This download contains SKILL.md only. Any scripts, references, templates and dependencies are not included. Get the required files from the source, preserving their directory structure, before continuing.

1. Download the file

Download SKILL.md

From the root of a test project, save the file as .skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md, or use the command below. This folder is for inspecting the skill before installation.

Command for macOS/Linux or WSL: requires a POSIX shell and curl. On Windows without WSL, use the download button and create the folder manually.

mkdir -p '.skill-downloads/astro-batavia-platform-ms2s7c60' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/astro-batavia-platform-ms2s7c60/download' --output '.skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md.part' && mv '.skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md.part' '.skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md'

2. Check prerequisites

Read SKILL.md before using it. If it references scripts or external services, inspect them and prepare the required access in your test environment.

No recognized prerequisites section in this file. This does not mean it is self-contained: libraries, tools and access requirements may be mentioned elsewhere in the content or source repository.

The platforms on this page are catalog indications. The paths below follow tool documentation; they do not prove this skill has been run in those tools. No minimum tool version is confirmed for this listing.

3. Load the skill

After inspection, copy the complete folder into your project using one of the commands below, then open a new tool session. The command stops if a folder with the same name already exists: compare the files before replacing it.

Claude Code
test -f '.skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md' && test -s '.skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/astro-batavia' && cp -R '.skill-downloads/astro-batavia-platform-ms2s7c60' '.claude/skills/astro-batavia'

OpenSkills

OpenSkills must already be installed. The local install/read procedure is checked with OpenSkills 1.5.0, which requires Node.js ≥ 20.6.0. Catalog slugs are not resolved automatically.

Official OpenSkills installation
openskills install './.skill-downloads/astro-batavia-platform-ms2s7c60'

openskills read 'astro-batavia-platform-ms2s7c60'

Reading should display the installed file content and its base directory. It does not run the skill or install its dependencies.

For an agent that reads AGENTS.md, then sync the index. This command changes AGENTS.md: review the diff before using it.

openskills sync

Manual method or another tool: attach SKILL.md to a conversation, or open it in an agent that can read files. Include any required supporting resources. No universal folder is recognized by every tool.

4. Try a first task

Use a short, synthetic input: an API endpoint, a small document or an interface brief. In a new conversation, attach the file or give the agent its path, then adapt this request:

Read .skill-downloads/astro-batavia-platform-ms2s7c60/SKILL.md and apply its instructions to this example: [describe a test input]. Identify any missing files, dependencies or access. Produce the result requested by the skill without inventing data or running unreviewed scripts.

Expected result: output matching the skill instructions, or a precise list of missing prerequisites. A read confirmation alone does not validate a first use. If an external resource is unavailable, that path remains untested.

Related skills

React Hook Form Best Practices

Development

Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.

Claude CodeCursorWindsurf+2intermediateSafe 108,623
Skills Guide Bot

Emotion to Mantine Migration

Development

Migrate Emotion styled-components to Mantine components with style props and CSS modules. Use when converting .styled.tsx files or removing @emotion imports.

Claude CodeCursorWindsurf+1intermediateSafe 48,981
Skills Guide Bot

Scope Creep Detector

Development

Analyzes git diffs against a stated intent to detect scope creep, unrelated files, broad PRs, and oversized changes, then suggests keep, split, or justify actions.

Claude CodeCursorCodexintermediateSafe 135,015
Skills Guide Bot