frontend/island

Convert static Astro pages into self-contained React interactive islands.

Updated Aug 23, 2026

Search Tags:#frontend #react #interactive #component #astro #island #design-contract

Ready to run

npx skills add https://github.com/f-campana/bifrost --skill frontend-island

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend/island
Source: https://github.com/f-campana/bifrost/tree/main/skills/frontend/frontend-island
Command: npx skills add https://github.com/f-campana/bifrost --skill frontend-island

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Client-side interactivity is hard to add to static pages; this skill provides self-contained islands that hydrate in place, enabling dynamic behavior without increasing the surface area of your page.

Core Features & Use Cases

Produces one interactive component file under runestone/src/components/[ComponentName].tsx
Reads the Design Contract and component specification before writing code
Applies CSS-only motion rules and avoids external motion libraries unless explicitly approved
Writes a run report to sanctum/00 Inbox/frontend-island-[name]-[date].md

Quick Start

Create an island by following the Design Contract and component specification, then implement it as a self-contained React component at runestone/src/components/[ComponentName].tsx and load it on the page with client:load.

Frequently Asked Questions about frontend/island

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

FAQPage Schema

How do I add interactive React components to static Astro pages?▼

You can add interactive React components to static Astro pages by creating self-contained interactive islands. These hydrate in place, enabling dynamic behavior without increasing the overall page surface area.

What is an interactive island in frontend development?▼

An interactive island is a self-contained client-side component that hydrates independently on a static page. This approach allows specific page sections to become stateful without affecting the entire document.

How do I create stateful widgets on Astro pages without external libraries?▼

Create stateful widgets on Astro pages by implementing a React island following the Design Contract. The process outputs a component file loaded via client:load, applying CSS-only motion rules without external libraries.

Can I use external motion libraries for interactive galleries on Astro pages?▼

External motion libraries are not allowed for interactive galleries unless explicitly approved. The implementation applies CSS-only motion rules to keep the interactive island self-contained and lightweight.

Where are React island components saved when building client-side interactivity?▼

React island components are saved as self-contained files at runestone/src/components/[ComponentName].tsx. A run report detailing the interactive island generation is also written to sanctum/00 Inbox/.