Automated summary
This skill guides the design and implementation of Astro projects with a focus on HTML-centric rendering, Islands architecture, and minimal JavaScript.
Strengths
- Promotes an HTML-first approach that improves performance and accessibility.
- Provides a clear methodology for breaking dynamic UI into small, focused islands.
- Includes a practical checklist to verify performance before deployment.
- Helps avoid common pitfalls like overloading client-side JavaScript.
Limitations
- Does not cover advanced use cases like complex framework integrations.
- May be too restrictive for applications requiring heavy client-side interactivity.
- Assumes a good understanding of basic Astro concepts.
Use this skill when starting a new Astro project or optimizing an existing one for performance and low JavaScript footprint.
Avoid this skill if your project requires a single-page application (SPA) with heavy client state and complex interactions.
Security analysis
SafeThis skill contains only design philosophy and guidance for Astro projects. It does not invoke any tools or perform any actions that could compromise security.
No concerns found
How this analysis is madeExamples
I'm starting a new Astro project for a blog. I want to use SSG with minimal client JavaScript. Can you help me set up the project structure following the Astro Web-First skill?Review my existing Astro site for performance issues. Check for oversized islands, unnecessary client-side JavaScript, and suggest optimizations based on the HTML-centric approach.I have a React component that fetches data and displays a user dashboard. How should I refactor it into a small Astro island to avoid sending too much JavaScript to the client?name: astro category: tech user-invocable: false description: Astroプロジェクトの設計・実装・レビューを、HTML中心/Islands/JS最小化の思想で整理する。doc/input/rdd.md に「技術スタック Astro」があるリポジトリ、またはAstro/Islands/SSG/SSR/パフォーマンス最適化の相談で使う。
Astro Web-First Skill
参照（公式）
発火条件（リポジトリ判定）
- まず
doc/input/rdd.mdを確認し、そこに技術スタック Astroが書かれている場合は、このSkillの方針をデフォルト採用する。 - 書かれていない場合でも、ユーザーの依頼がAstro/Islands/SSG/SSR/JS削減/速度改善に該当するなら適用する。
このSkillの基本方針
- 基本方針: HTML中心（ドキュメント中心）。JSは必要箇所のみ（Islands）。
- レンダリング: まずSSGを第一候補。更新頻度が高い箇所のみSSR/オンデマンドを検討。
- Islands設計: 動的UIは小さく分割し、責務を限定する。島の肥大化は避ける。
- パフォーマンス: 「送らない最適化」を優先（クライアントJS、画像、フォント、3rd party）。
- 参考: Astro公式 / Docs
思想（判断ルール）
- HTMLを先に完成させる（Webはまずドキュメント）。
- クライアントJSはコスト。必要性を説明できる分だけ送る。
- Islandsは「動的UIの特区」。島は小さく、責務を限定する。
- “便利だから全部クライアント”を避け、送信量の最小化を優先する。
出力フォーマット（必ずこの順）
- 推奨方針（1〜3行）
- 理由（Web制約 / 性能 / 保守性）
- 設計案（レンダリング戦略 / Islands粒度 / データ取得 / バンドル・資産 / キャッシュ）
- チェックリスト（実装前に確認）
- 落とし穴（避けるべき）
- 次アクション（小さく試す順）
チェックリスト
- [ ] Islandsは本当に必要箇所だけか
- [ ] 島が大きすぎないか（ページ/一覧まるごとを避ける）
- [ ] 画像・フォント・3rd party が速度を壊していないか
- [ ] SSGを第一候補にできているか（SSRは必要部分だけか）
- [ ] 「送らない最適化」の観点でJS量を説明できるか
よくある落とし穴
- React等を“とりあえず”全部クライアントに送ってAstroの旨味が消える
- 島間の状態共有が増え、結果的にSPA級の複雑さになる
- 解析/広告などの3rd partyがINP/LCPを悪化させる
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 filesThis 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.mdFrom the root of a test project, save the file as .skill-downloads/astro-design-islands-html-first-mm8o511w/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-design-islands-html-first-mm8o511w' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/astro-design-islands-html-first-mm8o511w/download' --output '.skill-downloads/astro-design-islands-html-first-mm8o511w/SKILL.md.part' && mv '.skill-downloads/astro-design-islands-html-first-mm8o511w/SKILL.md.part' '.skill-downloads/astro-design-islands-html-first-mm8o511w/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-design-islands-html-first-mm8o511w/SKILL.md' && test -s '.skill-downloads/astro-design-islands-html-first-mm8o511w/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/astro' && cp -R '.skill-downloads/astro-design-islands-html-first-mm8o511w' '.claude/skills/astro'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 installationopenskills install './.skill-downloads/astro-design-islands-html-first-mm8o511w'openskills read 'astro-design-islands-html-first-mm8o511w'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 syncManual 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-design-islands-html-first-mm8o511w/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.
React Hook Form Best Practices
Development
Master React Hook Form: avoid anti-patterns, manage subscriptions, and handle reset, dirty state, and controlled inputs correctly.
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.
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.