Come usare
- Copia il comando e controlla il pacchetto prima di installarlo nel tuo ambiente agente.
- Controlla strumenti, credenziali e ambienti richiesti nel documento originale.
- Descrivi input e risultato desiderato; confronta l’output con le fonti.
npx skills add https://github.com/gillesdandrea/gda-skills --skill explain-diff-htmlPrima di iniziare
- L’installazione non include abbonamenti, quote API o accesso ai file.
- Stelle e installazioni indicano attività, non un test indipendente di qualità o sicurezza.
Documento Skill originale
Contenuto dal repository con titoli, esempi, codice, tabelle, link e immagini preservati.
Explain Diff
Build a rich, interactive explanation of the specified code change as a single self-contained HTML file, written with the clarity and flow of Martin Kleppmann: classic style, engaging, smooth transitions between sections.
Sections
- Background: the existing system relevant to this change. Explore the surrounding code broadly for this. The reader's prior knowledge is unknown, so open with a deep background for beginners, marked as skippable, then a narrower background directly relevant to the change.
- Intuition: the essence of the change, not the full details, with concrete toy-data examples and diagrams used liberally.
- Code: a high-level walkthrough of the changes, grouped and ordered so they are understandable.
- Quiz: five interactive multiple-choice questions so the reader can confirm they actually understood. Medium difficulty: answerable only by someone who understood the substance of the PR, with no gotchas. On click, tell the reader whether they were correct and give feedback.
Format
- One long page with section headers and a table of contents; inline CSS and JavaScript; responsive so it reads on a phone.
- Save outside the repo at
/tmp/YYYY-MM-DD-explanation-<slug>.html, today's date first so the files sort by time and stay out of version control. - Diagrams are built from HTML elements. Pick a small number of diagram families and reuse them across cases: a simplified version of the UI the user sees, to explain UI changes; a system diagram of data flow or communication between components, carrying example data.
- Lists are HTML lists; callouts mark key concepts, definitions, and important edge cases.
- Code blocks are
<pre>tags, or a styled div whose CSS includeswhite-space: pre-wrap; otherwise the browser collapses the newlines. Done when every code block in the saved source haswhite-space: preorpre-wrap.
