Communitygithub.com

loganngarcia/framer-chatbot

Créez des sites web de portfolio avec mini-app, document et tableau blanc. À utiliser en cas de demande concernant "portfolio", "montrer mon travail", "site web portfolio", "portfolio de design", "portfolio de projets" ou "construire mon portfolio".

Qu'est-ce que framer-chatbot ?

Cette compétence guide les étudiants dans la création d'un portfolio professionnel en utilisant les outils intégrés de Curastem : l'éditeur de documents (update_doc) pour le contenu écrit, le tableau blanc (update_whiteboard) pour la planification visuelle, et le constructeur de mini-applications (create_app) pour les sites interactifs. Elle est idéale pour les étudiants souhaitant postuler à des emplois ou stages, présenter des travaux de design, de code ou de création, ou demander des retours sur un portfolio existant. Le workflow comprend trois étapes : planifier la structure sur le tableau blanc, rédiger le contenu dans l'éditeur de documents, puis construire le site avec create_app. Les consignes clés incluent une structure recommandée (héro, projets, à propos, contact), un design mobile-responsive, des boutons accessibles, et la possibilité d'itérer facilement grâce aux modifications des outils.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/loganngarcia/framer-chatbot/tree/HEAD/skills/create-a-portfolio

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Créer un Portfolio

Guide les étudiants dans la construction d'un portfolio professionnel en utilisant les outils intégrés de Curastem. Curastem propose trois capacités essentielles que vous devez utiliser : l'éditeur de documents (update_doc) pour le contenu écrit, le tableau blanc (update_whiteboard) pour la planification visuelle, et le constructeur de mini-applications (create_app) pour les sites de portfolio interactifs.

Outils Curastem à Utiliser

1. Éditeur de Documents (update_doc)

Utilisez-le pour rédiger le contenu du portfolio, les sections à propos, les descriptions de projets et les informations de contact. Le document prend en charge le HTML complet : titres, listes, liens, gras, italique. Idéal pour écrire et éditer du texte avant de passer à l'application portfolio.

2. Tableau Blanc (update_whiteboard)

Utilisez-le pour planifier la structure du portfolio : cartes mentales des sections, organigrammes du parcours utilisateur, croquis de wireframes de la mise en page. Créez des diagrammes visuels montrant le flux page d'accueil → projets → à propos → contact. Aide les étudiants à s'organiser avant de construire.

3. Constructeur de Mini-App (create_app)

Utilisez-le pour générer un site web de portfolio fonctionnel. Générez un seul fichier HTML avec CSS et JavaScript intégrés. Doit inclure : des cartes de projets, une navigation, une section à propos, un formulaire de contact ou des liens. Suivez les directives de l'application Curastem : fond #141414, marge supérieure de 48px, étiquette Curastem.org en bas à droite, coins arrondis de 28px de style néobrutaliste ou moderne, identifiants uniques sur tous les éléments interactifs.

Quand l'Utiliser

  • L'étudiant souhaite créer un portfolio pour des candidatures à un emploi ou un stage
  • L'étudiant a besoin de présenter son travail de design, de code ou de création
  • L'étudiant pose des questions sur la structure du portfolio, les plateformes ou les bonnes pratiques
  • L'étudiant souhaite des retours sur un portfolio existant ou en construire un de zéro

Flux de Travail

  1. Planifier — Utilisez le tableau blanc pour cartographier les sections et la structure du portfolio
  2. Rédiger — Utilisez l'éditeur de documents pour écrire le texte à propos, les descriptions de projets et les informations de contact
  3. Construire — Utilisez create_app pour générer un site de portfolio interactif que l'étudiant peut visualiser et améliorer

Conseils Clés

  • Structure recommandée : héros, projets (avec descriptions), à propos, contact
  • Mettez l'accent sur la clarté, les études de cas de projets avec résultats, et un contact facile
  • Pour create_app : assurez une mise en page responsive pour mobile, des boutons accessibles, des liens s'ouvrant dans un nouvel onglet
  • Itérez : les étudiants peuvent demander des modifications à l'application, au document ou au tableau blanc au fur et à mesure de leurs améliorations

Skills associés