ray-so-code-snippet

Par mkurman · zorai

npx skills add https://github.com/mkurman/zorai --skill ray-so-code-snippet

name: ray-so-code-snippet description: Générez de belles images de snippets de code avec ray.so. Cette compétence doit être utilisée quand l'utilisateur demande de créer une image de code, une capture d'écran de code, une image de snippet de code, ou veut rendre son code élégant pour le partager. Enregistre les images localement dans le répertoire de travail actuel ou dans un chemin spécifié par l'utilisateur.

tags: [productivity, agent-skills, ray-so-code-snippet, computer-vision] --------|--------|---------| | theme | N'importe quel thème de la liste | breeze | | padding | 16, 32, 64, 128 | 64 | | background | true, false | true | | darkMode | true, false | true | | language | N'importe quel langage de la liste, ou « auto » | auto | | lineNumbers | true, false | false | | title | Chaîne encodée en URL | (aucun) | | width | Nombre (pixels) | auto | | code | Encodé en Base64, puis en URL | (obligatoire) |

Note sur la largeur : N'INCLUEZ PAS le paramètre width sauf si vous avez besoin d'une largeur fixe. Sans lui, ray.so redimensionne automatiquement le cadre pour s'adapter au contenu du code, en évitant les espaces inutiles.

Exemple de construction d'URL :

# Pour le code : for i in range(23):\n    print(i)
# Thème : midnight, Padding : 64, Mode sombre : true, Arrière-plan : true, Langage : python, Titre : test.py

CODE='for i in range(23):
    print(i)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
TITLE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('test.py'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&title=${TITLE_ENCODED}&code=${CODE_ENCODED}"
echo "$URL"

Étape 5 : Capturer une image haute qualité avec agent-browser

DOIT utiliser agent-browser (vérifié à l'étape 1). Cette approche utilise la bibliothèque html-to-image (identique à celle utilisée en interne par ray.so) avec un pixelRatio élevé pour un rendu de texte net et précis.

IMPORTANT : Utilisez toujours un nom de session unique avec --session pour éviter les problèmes de session obsolète.

# Générer un nom de session unique
SESSION="rayso-$(date +%s)"

# 1. Définir le viewport
agent-browser --session $SESSION set viewport 1400 900

# 2. Ouvrir l'URL
agent-browser --session $SESSION open "$URL"

# 3. Attendre le rendu complet de la page
agent-browser --session $SESSION wait --load networkidle
agent-browser --session $SESSION wait 3000

# 4. Charger la bibliothèque html-to-image (même bibliothèque que ray.so utilise en interne)
agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

# 5. Capturer à 4x résolution avec html-to-image (produit un texte net)
agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt

# 6. Fermer le navigateur
agent-browser --session $SESSION close

# 7. Convertir l'URL data en fichier PNG
DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n')
echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > /path/to/output.png

# 8. Nettoyer le fichier temporaire
rm /tmp/rayso-dataurl-$SESSION.txt

Notes critiques :

  • Utilise la bibliothèque html-to-image qui est celle que ray.so utilise pour sa propre fonction d'export
  • pixelRatio: 4 produit des images haute DPI avec un texte net et précis (4x la résolution native)
  • L'URL data est capturée directement depuis la bibliothèque, pas depuis une capture d'écran
  • Aucun ImageMagick requis - rendu pur basé navigateur à haute résolution
  • La sortie a la bonne taille sans espace blanc supplémentaire

Étape 6 : Confirmer la sortie et ARRÊTER

Signalez l'emplacement du fichier enregistré à l'utilisateur. La tâche est terminée - ne effectuez aucune vérification, exploration ou vérification supplémentaire après l'enregistrement de la capture d'écran.

Exemple complet

Utilisateur : « Crée une image de snippet de code de cette fonction Python »

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

  1. Vérifier which agent-browser - confirmé disponible

  2. Récupérer les thèmes et les langages :

    curl -s "https://raw.githubusercontent.com/raycast/ray-so/main/app/(navigation)/(code)/store/themes.ts" | grep -oE 'id:\s*"[^"]+"' | sed 's/id:\s*"//;s/"//' | sort -u

  3. Demander les paramètres à l'utilisateur via AskUserQuestion :

    • Thème : l'utilisateur sélectionne « midnight »
    • Langage : déduit comme python depuis la syntaxe def - non demandé
    • Mode sombre : l'utilisateur sélectionne « Mode sombre »
    • Arrière-plan : l'utilisateur sélectionne « Oui »
    • Padding : l'utilisateur sélectionne « 64 »
    • Numéros de lignes : l'utilisateur sélectionne « Non »
    • Titre : l'utilisateur sélectionne « Pas de titre »

  4. Construire l'URL (tous les paramètres dans le hash, pas de largeur pour le redimensionnement automatique) :

    CODE='def fibonacci(n):
 if n <= 1:
     return n
 return fibonacci(n-1) + fibonacci(n-2)'
CODE_BASE64=$(echo -n "$CODE" | base64)
CODE_ENCODED=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$CODE_BASE64'))")
URL="https://ray.so/#theme=midnight&padding=64&background=true&darkMode=true&language=python&code=${CODE_ENCODED}"

  5. Capturer une image haute qualité :

    
SESSION="rayso-$(date +%s)"

agent-browser --session $SESSION set viewport 1400 900 agent-browser --session $SESSION open "$URL" agent-browser --session $SESSION wait --load networkidle agent-browser --session $SESSION wait 3000

Charger la bibliothèque html-to-image

agent-browser --session $SESSION eval 'new Promise((r,e)=>{const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.11/dist/html-to-image.js";s.onload=r;s.onerror=e;document.head.appendChild(s)})'

Capturer à 4x résolution

agent-browser --session $SESSION eval 'htmlToImage.toPng(document.querySelector("#frame > div"),{pixelRatio:4,skipAutoScale:true})' > /tmp/rayso-dataurl-$SESSION.txt agent-browser --session $SESSION close

Enregistrer comme PNG

DATAURL=$(cat /tmp/rayso-dataurl-$SESSION.txt | tr -d '"' | tr -d '\n') echo "$DATAURL" | sed 's/data:image\/png;base64,//' | base64 -d > ./fibonacci.png rm /tmp/rayso-dataurl-$SESSION.txt



6. Signaler : « Image de snippet de code enregistrée dans ./fibonacci.png »

## Résolution et qualité de l'image

Cette compétence utilise la bibliothèque `html-to-image` avec `pixelRatio: 4` pour produire des images haute qualité avec un texte net et précis. C'est la même approche de rendu que ray.so utilise pour sa fonction d'export intégrée.

**Qualité de la sortie :**
- Par défaut : 4x la résolution native (le cadre se redimensionne automatiquement au contenu, puis rendu à 4x)
- Le texte est rendu en haute DPI, non upscalé à partir d'une basse résolution
- Les dégradés d'arrière-plan et tous les styles CSS sont préservés
- Aucun espace vide inutile (le cadre se redimensionne automatiquement pour s'adapter au code)

**Ajuster la résolution :**
- Pour des fichiers plus petits : Changez `pixelRatio:4` en `pixelRatio:2` dans la commande eval
- Pour la qualité maximale : Utilisez `pixelRatio:6` (identique à l'option d'export « 6x » de ray.so)

**Forcer une largeur spécifique :**
- N'ajoutez `&width=NUMBER` à l'URL que si vous avez besoin d'une largeur fixe (par exemple, pour un dimensionnement cohérent sur plusieurs images)

## Dépannage

- **Si agent-browser n'est pas disponible :** Informez l'utilisateur et ne continuez pas
- Si curl échoue à récupérer les thèmes/langages, utilisez ces valeurs par défaut courantes :
  - Thèmes : breeze, midnight, candy, crimson, falcon, meadow, raindrop, sunset, vercel, supabase, tailwind
  - Langages : auto, javascript, typescript, python, rust, go, java, ruby, swift, kotlin, css, html, json, yaml, bash
- **Si les paramètres ne s'appliquent pas :** Assurez-vous que TOUS les paramètres se trouvent dans le hash URL (après #), pas dans la chaîne de requête
- **Si le titre ne s'affiche pas :** Le paramètre title doit être dans le hash : `#title=filename.py&code=...`
- **Si html-to-image échoue à charger :** Vérifiez la connectivité réseau ; la bibliothèque se charge depuis le CDN jsdelivr
- **Si la capture retourne vide :** Le sélecteur de cadre `#frame > div` peut avoir changé ; inspectez la structure de la page
- Pour les snippets de code très longs, ray.so peut tronquer ; envisagez de diviser en plusieurs images
- Si la page ne se charge pas correctement, augmentez le temps d'attente (essayez 4000ms ou plus)
- **Si vous obtenez une page vierge :** Utilisez un nom de session unique nouveau avec le drapeau `--session`
- **Si l'URL data est malformée :** Assurez-vous que les guillemets et les sauts de ligne sont supprimés avant le décodage base64

Skills similaires

pr-walkthrough
tldraw / tldraw

Générer une vidéo narrée de présentation d'une pull request GitHub avec sous-titres et diapositives.

47 623
figma-generate-library
figma / mcp-server-guide

Construire des systèmes de design Figma professionnels en orchestrant des workflows multi-phases structurés.

1 549
slang-shader-engineer
github / awesome-copilot

Écrire, réviser et optimiser des shaders Slang pour applications graphiques professionnelles multiplateformes.

34 530
video-sdk/windows
anthropics / knowledge-work-plugins

Développer des applications vidéo personnalisées sur Windows avec le SDK Zoom.

19 276
algorithmic-art
anthropics / skills

Générer des philosophies algorithmiques visuelles en art génératif p5.js.

146 952