using-streamlit-layouts

Par streamlit · agent-skills

Skill de référence pour structurer les mises en page d'applications Streamlit : sidebar, colonnes, containers, dialogs, tabs et gestion des espacements.

npx skills add https://github.com/streamlit/agent-skills --skill using-streamlit-layouts

Skill : using-streamlit-layouts

Ce skill fait partie de la collection agent-skills du repo streamlit/agent-skills, un ensemble d'instructions spécialisées destinées aux assistants de développement IA (Claude Code, Cursor, etc.) pour les aider à construire des applications Streamlit. Il est chargé dynamiquement par le skill parent developing-with-streamlit lorsque la tâche en cours implique la disposition et la structure visuelle d'une application.

Ce que couvre ce skill

Le SKILL.md est entièrement documenté et opérationnel — ce n'est pas un squelette. Il couvre l'ensemble des primitives de mise en page de Streamlit :

  • Sidebar : quand et comment l'utiliser (filtres globaux, navigation), ce qu'il ne faut pas y mettre (contenu principal, graphiques).
  • Colonnes : limite recommandée à 4 colonnes, ratios personnalisés, alignement vertical.
  • Containers horizontaux : utilisation de st.container(horizontal=True) pour les groupes de boutons plutôt que des colonnes.
  • Alignement : options left, center, right, distribute via horizontal_alignment.
  • Containers bordés, tabs, expanders, popovers : organisation visuelle et contenu secondaire.
  • Dialogs : usage de @st.dialog pour les interactions focalisées (confirmations, formulaires).
  • Espacement et dimensionnement : gap, st.space, height, width pour un contrôle précis.

Comment l'assistant l'utilise

Lorsqu'un agent IA travaille sur une tâche liée au layout d'une app Streamlit — placer du contenu dans une sidebar, organiser des éléments en colonnes, créer un dialog de confirmation — il charge ce skill pour appliquer les bonnes pratiques recommandées par l'équipe Streamlit. Les exemples de code fournis (# GOOD / # BAD) guident l'IA vers des patterns idiomatiques et évitent les erreurs courantes.

Utilisation dans un projet

Pour bénéficier de ce skill dans Claude Code, il suffit de copier le dossier developing-with-streamlit dans ~/.claude/skills/. Le skill using-streamlit-layouts sera alors disponible comme sous-skill automatiquement routé selon le contexte de la tâche. Des références vers la documentation officielle Streamlit (st.columns, st.container, st.dialog, etc.) sont incluses directement dans le skill pour faciliter les vérifications.

Skills similaires