docs-sandpack

Skill do tworzenia interaktywnych przykładów kodu w dokumentacji React. Umożliwia osadzanie edytowalnych fragmentów kodu, które użytkownicy mogą modyfikować i uruchamiać bezpośrednio w przeglądarce. Obsługuje pliki wielomodułowe, style CSS, zależności zewnętrzne oraz zaawansowane funkcje takie jak podświetlanie linii, referencje do kodu i przykłady z oczekiwanymi błędami.

1. Zainstaluj skill docs-sandpack w swoim projekcie dokumentacji React — umieść go w katalogu .claude/skills/docs-sandpack.

2. Przygotuj podstawowy przykład, kopiując szablon Quick Start: otwórz blok <Sandpack> i wstaw kod JavaScript z export default function. Kod powinien być umieszczony w bloku markdown z trzema backticks i tagiem js.

3. Dla przykładów wieloplikowych dodaj kolejne bloki kodu z prefiksami src/FileName.js — każdy plik powinien mieć export default lub być importowany z głównego pliku. Dodaj blok CSS jeśli potrzebujesz stylów.

4. Jeśli przykład wymaga zewnętrznych bibliotek, utwórz blok package.json z listą zależności — Sandpack automatycznie zainstaluje pakiety takie jak use-immer czy inne moduły npm.

5. Aby wyróżnić ważne linie, użyj składni {2-4} w tagu bloku kodu — zaznaczone linie będą podświetlone. Dla numerowanych calloutów zastosuj składnię [[1, 4, "age"], [2, 4, "setAge"]] wskazującą na konkretne zmienne.

6. Dla przykładów pokazujących błędy dodaj {expectedErrors: {'react-compiler': [7]}} — linia 7 wyświetli się jako oczekiwany błąd, pomagając użytkownikom zrozumieć, co się nie powinno robić.