React-Agent-Interfaces erstellen
Teams benötigen Agent-Chat-Interfaces, ohne Streaming, Genehmigungen und Tool-Anzeigen neu zu entwickeln. Diese Skill-Anleitung führt durch die Einrichtung der inference.sh Agent-Komponente in React und Next.js.
Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.
Review the Skillstore skill "agent-ui" from https://skillstore.io/skills/inference-sh-9-agent-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-agent-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.
Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.
„agent-ui“ wird verwendet. Füge die Komponente zu einem neuen Next.js-Dashboard hinzu.
Erwartetes Ergebnis:
„agent-ui“ wird verwendet. Plane einen Agent, der nach Genehmigung ein Formular ausfüllen kann.
Erwartetes Ergebnis:
Ein Tool-Design, das Formularfelder scannt, Bestätigung anfordert, Eingaben validiert und den Abschluss meldet, ohne die Benutzerkontrolle zu verbergen.
„agent-ui“ wird verwendet. Prüfe die Sicherheit vor dem Launch.
Erwartetes Ergebnis:
Eine Checkliste zu Vertrauen in Remote-Pakete, Speicherung von Umgebungsvariablen, Upload-Berechtigungen, Modellkonfiguration und Genehmigungsverwaltung.
The skill is mostly documentation for installing and using a React and Next.js agent component. Most static shell, environment, and URL detections are markdown examples or normal documentation links. Confirmed risks are remote install commands and a hosted image that depend on external infrastructure.
Dies sind echte lokale Fähigkeiten, die für diese Fähigkeit erwartet werden können; daher müssen sie überprüft werden, werden jedoch nicht als bestätigtes bösartiges Verhalten gezählt.
Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.
https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-agent-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/inference-sh-9-agent-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>inference-sh-9. (2026). agent-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6@techreport{inference-sh-9-inference-sh-9-agent-ui-2026,
author = {inference-sh-9},
title = {agent-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "agent-ui security audit report (audit version 6)"
version: "unspecified"
type: report
authors:
- name: "inference-sh-9"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6"
identifiers:
- type: other
value: "skillstore:inference-sh-9-agent-ui:audit:6"
description: "Skillstore immutable audit report identifier"
Jeder Autor bleibt ein eigener installierbarer Skill. Die empfohlene Variante wird nach Skillstore-Nachweisen bewertet.
Warum diese Variante zuerst steht
inference-sh-9-agent-ui
2026-09-09
inference-sh-agent-ui
2026-09-09
inferen-sh-agent-ui
2026-09-09
Ein Frontend-Entwickler kann einer Next.js-Seite ein fertiges Agent-Interface mit Streaming- und Dateioptionen hinzufügen.
Ein Produktteam kann Assistenten-Workflows mit Genehmigungen, Widgets und clientseitigen Tools testen, bevor eine individuelle Implementierung erfolgt.
Ein KI-Plattformingenieur kann Proxy-Routing, API-Schlüssel-Einrichtung und Komponentenkonfiguration für interne Teams dokumentieren.
Hilf mir, die Agent-UI-Komponente zu einer Next.js-App hinzuzufügen. Erkläre die Installationsschritte, die Proxy-Route und die erforderliche Umgebungsvariable.
Plane eine Agent-Konfiguration für einen SaaS-Support-Assistenten. Beziehe Modellauswahl, Ziele des System-Prompts und sicheres Genehmigungsverhalten ein.
Entwirf browserseitige Tools zum Ausfüllen eines Kundenformulars mit menschlicher Genehmigung. Beschreibe Zustandsverwaltung, Validierung und Benutzerbestätigung.
Prüfe meine geplante Agent-UI-Integration auf Sicherheit und Benutzererfahrung. Überprüfe Remote-Installationen, API-Schlüssel-Verwaltung, Datei-Uploads und Genehmigungsabläufe.
Autor
inference-sh-9Lizenz
MIT
Skillstore-Revision
r1
Versionshinweis
Der Autor hat keine Version angegeben.
Ref.
0519034dad657fb1f7706e0550e962beeda73fdf
Aktualität der Wartung
18.7.2026
Nutzung
6 Downloads · 104 Aufrufe
Dateistruktur
📄 SKILL.md
Tool-Lebenszyklus-UI zu Agent-Apps hinzufügen
Agent-Anwendungen benötigen klare Anzeigen für Tool-Status, Genehmigungen und Ergebnisse. Dieser Skill bietet React- und Next.js-Komponentenleitlinien für diese Workflows.
JSON-Widgets in React rendern
Agentenausgaben benötigen oft eine interaktive UI statt reinem Text. Dieser Skill zeigt, wie strukturierte Widget-Definitionen als React- und Next.js-Komponenten gerendert werden.
React-Chat-Oberflächen erstellen
Teams benötigen Chat-Oberflächen, die zu modernen React-Apps passen. Diese Skill stellt Komponenten und Muster im shadcn-Stil für Nachrichten, Eingaben, Avatare und Streaming-Zustände bereit.
KI-Prompts für Text, Bilder und Video verbessern
KI-Ergebnisse scheitern oft, wenn Prompts vage oder schlecht strukturiert sind. Diese Skill bietet wiederverwendbare Muster für LLM-, Bild- und Video-Prompts.
Wettbewerber mit strukturierten Teardowns analysieren
Wettbewerbsrecherche verteilt sich oft über Notizen, Screenshots, Preisseiten und Bewertungsportale. Dieser Skill bietet wiederholbare Teardown-Frameworks, Vergleichsvorlagen und Recherche-Workflows für klare strategische Entscheidungen.
Python-Code in einer verwalteten Sandbox ausführen
Python-Aufgaben benötigen oft Bibliotheken und isolierte Ausführung. Diese Skill führt Python über inference.sh aus, mit Tools für Daten, Medien, Scraping und Automatisierung.
Fullstack-Apps mit Senior-Anleitung erstellen
von alirezarezvani
Fullstack-Projekte benötigen oft ein konsistentes Setup, Architekturentscheidungen und Qualitätsprüfungen. Dieser Skill bietet Skripte und Referenzen für Arbeiten mit React, Next.js, Node.js, GraphQL und PostgreSQL.
React View Transitions implementieren
von vercel-labs
React View Transitions lassen sich leicht falsch platzieren, was zu unbemerkten oder störenden Animationen führt. Dieser Skill unterstützt Entscheidungen zu Animationen für Routen, Suspense, Listen und Shared Elements.
Produktionsreife Frontend-Funktionen entwickeln
von davila7
Frontend-Teams benötigen projektübergreifend einheitliche Leitlinien für React und Next.js. Dieser Skill bietet Referenz-Workflows, Qualitätspraktiken und Hilfsskripte für die Frontend-Analyse.
Next.js-Performance optimieren
von Atman36
Next.js-Anwendungen können durch große Bundles, schwaches Caching und nicht optimierte Medien langsam werden. Dieser Skill führt Claude, Codex und Claude Code durch gezielte Performance-Verbesserungen für Produktions-Apps.
React- und Next.js-Performance optimieren
von vercel-labs
React- und Next.js-Apps verlieren oft durch Waterfalls, große Bundles und vermeidbare Re-Renderings an Geschwindigkeit. Diese Skill gibt Agenten konkrete Regeln für sicherere, performanceorientierte Änderungen.
Web-App-Lokalisierung automatisieren
von DNYoussef
Das Hinzufügen mehrsprachiger Unterstützung verteilt Strings, Routing, Metadaten und Locale-Dateien oft über die gesamte Codebasis. Diese Skill plant und implementiert eine i18n-Einrichtung mit Übersetzungen, Validierung und Dokumentation.