Développer avec Streamlit

Ceci est une routing skill qui vous oriente vers des sous-skills spécialisées pour le développement Streamlit.

Quand l'utiliser

Invoquez cette skill quand la demande de l'utilisateur porte sur :

• Créer une nouvelle app Streamlit
• Éditer ou modifier une app Streamlit existante
• Déboguer des problèmes Streamlit (erreurs, bugs de session state, problèmes de performance)
• Embellir ou améliorer le design visuel d'une app Streamlit
• Optimiser les performances Streamlit (caching, fragments, reruns)
• Déployer des apps Streamlit (localement ou sur Snowflake)
• Styliser les widgets (couleurs de bouton, arrière-plans, personnalisation CSS)
• Toute question sur les widgets, layouts ou composants Streamlit

Phrases déclencheurs : « streamlit », « st. », « dashboard », « app.py », « embellir app », « la rendre meilleure », « style », « CSS », « couleur », « arrière-plan », « thème », « bouton », « rerun lent », « session state », « performance », « plus rapide », « cache », « déployer »

Workflow

Étape 1 : Localiser le code source Streamlit
    ↓
Étape 2 : Identifier le type de tâche et charger la ou les sous-skill(s) appropriée(s)
    ↓
Étape 3 : Appliquer les conseils de la sous-skill pour éditer le code
    ↓
Étape 4 : Vérifier si l'app s'exécute et proposer de la lancer

Étape 1 : Localiser le code source Streamlit (si nécessaire)

Objectif : Identifier le(s) fichier(s) app à éditer. Ignorez cette étape si c'est déjà clair à partir du contexte.

Quand ignorer :

• L'utilisateur a mentionné un chemin de fichier spécifique (ex. « édite src/app.py »)
• Le(s) fichier(s) est/sont déjà dans le contexte de la conversation
• Le répertoire de travail a un point d'entrée unique évident (app.py, streamlit_app.py)

Quand faire une recherche :

• L'utilisateur dit « ma streamlit app » sans spécifier quel fichier
• Plusieurs fichiers Python existent et il n'est pas clair quel est le point d'entrée

Si une recherche est nécessaire :

1. Scan rapide des fichiers Streamlit :

   find . -name "*.py" -type f | xargs grep -l "import streamlit\|from streamlit" 2>/dev/null | head -10

2. Appliquer les heuristiques du point d'entrée (par ordre de priorité) :

   • streamlit_app.py à la racine → c'est le point d'entrée (nom canonique)
   • app.py à la racine → probable point d'entrée
   • Fichier utilisant st.navigation → point d'entrée pour les apps multi-pages
   • Fichier .py unique à la racine avec import streamlit → point d'entrée
   • Fichiers dans pages/ ou app_pages/ → PAS des points d'entrée (ce sont des sous-pages)

3. Si le point d'entrée est évident → l'utiliser, pas de confirmation nécessaire

   Exemple : Trouvé streamlit_app.py et pages/metrics.py → utiliser streamlit_app.py

4. Demander seulement s'il y a véritable ambiguïté (ex. plusieurs candidats à la racine, aucun nommé streamlit_app.py) :

   Trouvé plusieurs points d'entrée potentiels :
   - dashboard.py
   - main.py
   
   Quel est votre app principale ?

Sortie : Chemin vers le(s) fichier(s) source Streamlit principal(aux)

Étape 2 : Identifier le type de tâche et router vers la sous-skill

Objectif : Déterminer ce dont l'utilisateur a besoin et charger les conseils appropriés.

Utilisez ce tableau de routage pour sélectionner la ou les sous-skill(s). Toujours lire le fichier de la sous-skill avant de faire des modifications :

Fallback — « ce widget n'existe pas dans Streamlit » :

Si l'utilisateur demande un élément UI ou une interaction qui n'a jamais fait partie de l'API Streamlit et ne peut pas être construit avec une combinaison de widgets natifs (ex. drag-and-drop, dessin sur canvas, visualisations interactives personnalisées), router vers la sous-skill CCv2 (skills/building-streamlit-custom-components-v2/SKILL.md). Ne pas router vers CCv2 pour des fonctionnalités qui existent dans les versions Streamlit plus récentes (ex. st.connection, st.segmented_control) — suggérer plutôt une mise à jour.

Combinaisons courantes :

Pour embellir/améliorer une app, lire dans cet ordre :

1. skills/improving-streamlit-design/SKILL.md
2. skills/using-streamlit-layouts/SKILL.md
3. skills/choosing-streamlit-selection-widgets/SKILL.md

Pour construire un dashboard, lire :

1. skills/building-streamlit-dashboards/SKILL.md
2. skills/displaying-streamlit-data/SKILL.md

IMPORTANT - Utiliser les templates :

Quand vous créez une nouvelle app dashboard, préférez démarrer à partir d'un template dans templates/apps/ :

• Si un template correspond étroitement à la demande, le copier et l'adapter :
  • dashboard-metrics / dashboard-metrics-snowflake — cartes KPI avec graphiques en série temporelle
  • dashboard-companies — comparaison d'entreprises/entités
  • dashboard-compute / dashboard-compute-snowflake — monitoring de ressources/crédits
  • dashboard-feature-usage — suivi d'adoption de fonctionnalités
  • dashboard-seattle-weather — exploration de datasets publics (local seulement)
  • dashboard-stock-peers / dashboard-stock-peers-snowflake — analyse de pairs financiers
• Si aucun template ne correspond étroitement, démarrer de zéro mais emprunter les patterns pertinents des templates (ex. caching avec @st.cache_data, filter_by_time_range(), st.set_page_config(), utilitaires de graphiques, structure de layout)
• Voir templates/apps/README.md pour les descriptions des templates

Quand vous éditez une app existante, utilisez les templates comme référence pour les bonnes pratiques :

• Vérifier templates/apps/ pour les patterns de caching, structure de layout et intégration Snowflake
• Appliquer les patterns consistants des templates pour améliorer le code existant

Quand vous appliquez un thème personnalisé, utiliser un template de templates/themes/ :

• Copier un répertoire de thème (snowflake, dracula, nord, stripe, solarized-light, spotify, github, minimal)
• Les thèmes utilisent Google Fonts pour une configuration facile
• Voir templates/themes/README.md pour les aperçus des thèmes

Pour l'optimisation des performances, lire :

1. skills/optimizing-streamlit-performance/SKILL.md

Étape 3 : Appliquer les conseils pour éditer le code

Objectif : Faire des modifications à l'app Streamlit en suivant les bonnes pratiques de la sous-skill.

Actions :

1. Appliquer les patterns et recommandations de la ou des sous-skill(s) chargée(s)
2. Faire des éditions au(x) fichier(s) source identifié(s) à l'étape 1
3. Préserver les fonctionnalités existantes tout en ajoutant des améliorations

Étape 4 : Vérifier les apps en cours d'exécution et proposer de lancer

Objectif : Aider l'utilisateur à voir ses modifications en vérifiant si son app s'exécute.

Actions :

1. Vérifier les apps Streamlit en cours d'exécution sur les ports 850* :

   lsof -nP -iTCP -sTCP:LISTEN 2>/dev/null | grep -i python | awk '{print $2, $9}' | grep ':85' || echo "No Streamlit apps detected on ports 850*"

2. Présenter les résultats à l'utilisateur :

   Si l'app s'exécute :

   Streamlit app trouvée en cours d'exécution :
   - PID: [pid] à http://localhost:[port]
   
   Vos modifications devraient être visibles après un rafraîchissement de la page (Streamlit recharge automatiquement à la sauvegarde du fichier).

   Si aucune app ne s'exécute :

   Aucune app Streamlit détectée sur les ports 850*.
   
   Voulez-vous que je lance l'app ? Je peux la démarrer avec :
     streamlit run [app_file.py]

3. Si l'utilisateur veut lancer l'app, la démarrer :

   streamlit run [path/to/app.py] --server.port 8501

Points d'arrêt

• Étape 2 : Si plusieurs sous-skills semblent pertinentes, demander à l'utilisateur sur quel aspect se concentrer en premier
• Étape 4 : Demander avant de lancer l'app Streamlit

Carte des skills

Ressources

• Streamlit API Reference
• Streamlit Gallery