Communitygithub.com

loganngarcia/framer-chatbot

Erstelle Portfolio-Websites mit Mini-App, Dokument und Whiteboard. Verwende dies, wenn nach „Portfolio“, „präsentiere meine Arbeit“, „Portfolio-Website“, „Design-Portfolio“, „Projektportfolio“ oder „Erstelle mein Portfolio“ gefragt wird.

Was ist framer-chatbot?

Diese Fähigkeit (Skill) ermöglicht es einem KI-Agenten, Studierende beim Aufbau eines professionellen Portfolios zu unterstützen, indem drei Kernfunktionen der Curastem-Plattform genutzt werden: der Dokumenteneditor (update_doc) für Textinhalte, das Whiteboard (update_whiteboard) für visuelle Planung und der Mini-App-Builder (create_app) für interaktive Portfolio-Websites. Der Skill ist ideal für Szenarien, in denen Nutzer nach Job- oder Praktikumsportfolios fragen, Design- oder Programmierarbeiten präsentieren möchten oder Feedback zu bestehenden Portfolios benötigen. Der Workflow folgt einem klaren Dreischritt: Planung (Whiteboard – Mindmaps, Wireframes), Entwurf (Dokument – About-Texte, Projektbeschreibungen) und Bau (Mini-App – eine funktionale, reaktionsschnelle HTML-Seite mit eingebettetem CSS/JS gemäß den Curastem-Richtlinien wie #141414-Hintergrund, 48px oberem Rand und neobrutalistischem Design). Der Skill unterstützt Iterationen und betont klare Struktur (Hero, Projekte, About, Kontakt), mobile Reaktionsfähigkeit und Barrierefreiheit.

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

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Ein Portfolio erstellen

Führe Studierende durch den Aufbau eines professionellen Portfolios mit Curastems integrierten Werkzeugen. Curastem bietet drei Kernfunktionen, die du verwenden musst: den Dokumenteneditor (update_doc) für Textinhalte, das Whiteboard (update_whiteboard) für visuelle Planung und den Mini-App-Builder (create_app) für interaktive Portfolio-Websites.

Curastem-Werkzeuge zur Verwendung

1. Dokumenteneditor (update_doc)

Verwende ihn zum Verfassen von Portfolio-Texten, About-Abschnitten, Projektbeschreibungen und Kontaktinformationen. Das Dokument unterstützt vollständiges HTML: Überschriften, Listen, Links, Fett, Kursiv. Perfekt zum Schreiben und Bearbeiten von Texten, bevor du zur Portfolio-App wechselst.

2. Whiteboard (update_whiteboard)

Verwende es zur Planung der Portfolio-Struktur: Mindmaps von Abschnitten, Flussdiagramme der Benutzerreise, Drahtgitter-Skizzen des Layouts. Erstelle visuelle Diagramme, die den Ablauf Startseite → Projekte → About → Kontakt zeigen. Hilft Studierenden, sich vor dem Bau zu organisieren.

3. Mini-App-Builder (create_app)

Verwende ihn, um eine funktionierende Portfolio-Website zu generieren. Gib eine einzelne HTML-Datei mit eingebettetem CSS und JavaScript aus. Muss enthalten: Projektkarten, Navigation, About-Abschnitt, Kontaktformular oder -links. Befolge die Curastem-App-Richtlinien: #141414-Hintergrund, 48px oberer Abstand, Curastem.org-Label unten rechts, neobrutalistische oder moderne 28px abgerundete Ecken, eindeutige IDs auf allen interaktiven Elementen.

Wann anwenden

  • Der Student möchte ein Portfolio für Bewerbungen auf Jobs oder Praktika erstellen
  • Der Student muss Design-, Programmier- oder kreative Arbeiten präsentieren
  • Der Student fragt nach Portfolio-Struktur, Plattformen oder Best Practices
  • Der Student möchte Feedback zu einem bestehenden Portfolio oder eines von Grund auf neu erstellen

Arbeitsablauf

  1. Planen – Verwende das Whiteboard, um Portfolio-Abschnitte und -Struktur zu skizzieren
  2. Entwerfen – Verwende den Dokumenteneditor, um About-Texte, Projektbeschreibungen und Kontaktinformationen zu schreiben
  3. Bauen – Verwende create_app, um eine interaktive Portfolio-Website zu generieren, die der Student ansehen und iterieren kann

Wichtige Hinweise

  • Empfohlene Struktur: Hero, Projekte (mit Beschreibungen), About, Kontakt
  • Betone Klarheit, Projektfallstudien mit Ergebnissen und einfache Kontaktmöglichkeit
  • Bei create_app: Stelle ein mobil-responsives Layout sicher, zugängliche Schaltflächen, Links öffnen in neuem Tab
  • Iteriere: Studierende können Änderungen an der App, dem Dokument oder dem Whiteboard anfordern, während sie verfeinern

Verwandte Skills