Fähigkeiten react-components

📦

react-components

Name: react-components
Author: google-labs-code

Inhaltsrevision r1 Hohes Risiko ⚙️ Externe Befehle🌐 Netzwerkzugriff📁 Dateisystemzugriff

Stitch-Designs in React-Komponenten umwandeln

Stitch-Designs in wartbaren React-Code zu übertragen, kann langsam und uneinheitlich sein. Dieser Skill führt Claude, Codex oder Claude Code durch Abruf, Komponentenstruktur, Token-Mapping und Validierung.

Unterstützt: Claude Codex Code(CC)

⚠️ 38 Schlecht

Maintain this Skill? Claim it ⚠️ 38 Schlecht

Vor der Installation anhalten und eine Bestätigung anfordern.

Prüfen Sie den Plan und holen Sie vor Änderungen an Dateien die ausdrückliche Zustimmung des Benutzers ein.

Mit meinem Agent installieren

Kopieren Sie diese Anfrage in Ihren Agent. Sie enthält die maßgebliche Skill-Seite und das Manifest.

Agent-Anfrage

Review the Skillstore skill "react-components" from https://skillstore.io/skills/google-labs-code-react-components.md and its manifest at https://skillstore.io/api/skills/google-labs-code-react-components/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

Ihr Agent sollte weiterhin seinen Plan anzeigen und alle von der Sicherheitsrichtlinie verlangten Bestätigungen anfordern.

Agent-lesbare Ressourcen

Verwenden Sie diese Links, wenn ein KI-Agent, Crawler oder Skript sauberen Kontext benötigt, statt die vollständige Seite zu lesen.

Markdown-Detailseite GET /skills/google-labs-code-react-components.md Signiertes manifest GET /api/skills/google-labs-code-react-components/manifest Signiertes lockfile GET /api/skills/google-labs-code-react-components/lockfile

Testen

„react-components“ wird verwendet. Wandle eine Stitch-Aktivitätsfeed-Karte in React um.

Erwartetes Ergebnis:

Eine wiederverwendbare Aktivitätskarten-Komponente mit typisierten Props.
Mock-Inhalte wurden in eine separate Datenschicht verschoben.
Validierungshinweise zur Props-Struktur und Farbnutzung.

„react-components“ wird verwendet. Erstelle ein Vite-Komponentensystem aus einem Stitch-Dashboard-Bildschirm.

Erwartetes Ergebnis:

Ein Satz kleinerer Dashboard-Komponenten, organisiert nach Verantwortlichkeit.
Anleitung zum Theme-Mapping für Farben, Typografie und Abstände.
Eine Checklisten-Zusammenfassung für Struktur, Validierung und visuelle Prüfung.

„react-components“ wird verwendet. Prüfe generierte Komponenten auf Architekturprobleme.

Erwartetes Ergebnis:

Eine knappe Liste fehlender Props, hartcodierter Styles und übergroßer Dateien.
Vorgeschlagene Korrekturen, die die Projektstruktur beibehalten.
Ein abschließender Validierungsstatus für jede geprüfte Komponente.

Sicherheitsaudit

Hohes Risiko

v4 • 5.7.2026 Versionsbericht öffnen

Most static findings are false positives caused by Markdown code spans, JSX template literals, Apache license URLs, and ordinary relative imports. The confirmed risks are the intentional Bash and npm workflow, an unconstrained curl download helper, and validator file reads from CLI-supplied paths. No prompt injection attempt was found in the reviewed files.

Gescannte Dateien

374

Analysierte Zeilen

Prüfelemente

Falschmeldungen ignoriert

Bestätigte Sicherheitsbedenken (2)

Hoch

SKILL.md:20 scripts/fetch-stitch.sh:16-23

Unvalidated External Download and File Write

SKILL.md instructs agents to run a Bash helper with htmlCode.downloadUrl, and scripts/fetch-stitch.sh passes URL and OUTPUT arguments directly to curl. The helper lacks scheme, domain, and output path restrictions.

The Bash workflow and curl command are explicit, and both URL and output path come from script arguments. The expected Stitch source is legitimate, but no allowlist or path guard is present.

Mittel

SKILL.md:4-9

Broad Agent Tool Permissions

The skill declares Bash, Read, Write, and web_fetch access for a design conversion workflow. These broad permissions increase impact if design metadata or prompt content is hostile.

The allowed-tools block explicitly grants broad execution, file, and network capabilities. This is not malicious by itself, but it expands the trust boundary for a community skill.

Elemente der Fähigkeitsprüfung (7)

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.

Mittel

scripts/fetch-stitch.sh:1

Unix shell invocation

#!/bin/bash

This is an executable Bash helper that the skill instructs agents to run. In context it invokes curl with caller-provided URL and output arguments.

Mittel

scripts/validate.js:22

Node.js fs operations

const code = fs.readFileSync(filePath, 'utf-8');

The validator reads a CLI-supplied file path without restricting it to project component files. This is legitimate validation, but unsafe arguments could read arbitrary local files.

Mittel

scripts/validate.js:22

Synchronous file operations

const code = fs.readFileSync(filePath, 'utf-8');

The same readFileSync call performs local file reads from an unconstrained argument. The synchronous API is not itself malicious, but the path handling is a real filesystem exposure.

Mittel

SKILL.md:20

Ruby/shell backtick execution

- Use the `Bash` tool to run: `bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/source.ht

The skill directs the agent to use Bash to run scripts/fetch-stitch.sh with a metadata URL. That is real shell and network execution, even though the command is specific.

Mittel

SKILL.md:36

Ruby/shell backtick execution

1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation t

The skill asks the agent to run npm install when dependencies are missing. npm install fetches packages and may run lifecycle scripts in the target project.

Mittel

SKILL.md:41

Ruby/shell backtick execution

* Run `npm run validate <file_path>` for each component.

The skill instructs agents to run npm run validate with a component path. This launches local Node code that reads the provided file path.

Mittel

SKILL.md:43

Ruby/shell backtick execution

* Start the dev server with `npm run dev` to verify the live result.

The skill instructs agents to start the dev server with npm run dev. This executes project scripts and opens a local service as part of the workflow.

Geprüft von: codex Audit-Verlauf anzeigen →

Diesen Bericht teilen & zitieren

Teile den versionierten Bewertungsbericht, das neutrale Badge, die Einbettungskarte und Zitate. Skillstore berichtet Nachweise, ohne zu entscheiden, ob dieser Skill sicher ist.

Versionsbericht öffnen

Berichtslink kopieren

https://skillstore.io/skills/google-labs-code-react-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown-Badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/google-labs-code-react-components/security.svg)](https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge)

HTML-Badge

<a href="https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/google-labs-code-react-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Einbettungskarte

<iframe src="https://skillstore.io/embed/skills/google-labs-code-react-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Wissenschaftliche Zitate (APA · BibTeX · CFF)

APA-Zitat

google-labs-code. (2026). react-components security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/google-labs-code-react-components/audits/4

BibTeX-Zitat

@techreport{google-labs-code-google-labs-code-react-components-2026,
  author = {google-labs-code},
  title = {react-components security audit report (audit version 4)},
  institution = {Skillstore},
  year = {2026},
  number = {4},
  url = {https://skillstore.io/skills/google-labs-code-react-components/audits/4},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "react-components security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
  - name: "google-labs-code"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/google-labs-code-react-components/audits/4"
identifiers:
  - type: other
    value: "skillstore:google-labs-code-react-components:audit:4"
    description: "Skillstore immutable audit report identifier"

Skillstore-Score

Warum dieser Score Evidenzvertrauen: Mittel

Architektur

Wartbarkeit

Inhalt

Gemeinschaft

Spezifikationskonformität

Was Sie erstellen können

Design-Bildschirme umwandeln

Wandle einen Stitch-Bildschirm in modulare React-Komponenten mit zugeordneten Tailwind-Tokens und Validierungsschritten um.

UI-Ausgaben standardisieren

Wende eine konsistente Komponentenstruktur, Datentrennung und Theme-Nutzung auf generierte Interface-Arbeiten an.

Produktabläufe prototypisieren

Erstelle aus einem Design ein Vite-basiertes Komponenten-Scaffold, damit Teams Layout und Interaktionen früher prüfen können.

Diese Prompts ausprobieren

Einen Bildschirm umwandeln

Verwende den react-components Skill, um meinen Stitch-Bildschirm namens [screen] in modulare React-Komponenten umzuwandeln. Validiere jede Komponente nach der Generierung.

Projekt-Tokens anwenden

Wandle [screen] in React-Komponenten um und ordne Farben, Abstände und Schriftarten meinem Projekt-Tailwind-Theme zu. Vermeide hartcodierte Hex-Werte.

Komponentensystem erstellen

Wandle [flow] in ein Komponentensystem um. Trenne Mock-Daten, Hooks, wiederverwendbare Komponenten und App-Verdrahtung, bevor du die Validierung ausführst.

Generierte UI verfeinern

Prüfe die generierten React-Komponenten anhand der Architektur-Checkliste. Behebe Struktur, Props-Typisierung, Theme-Mapping und Validierungsfehler.

Bewährte Praktiken

Bestätige den Stitch-Bildschirm, den Viewport und das Projekt-Theme, bevor Dateien generiert werden.
Prüfe jeden Netzwerkabruf und Befehl, bevor der Workflow ausgeführt werden darf.
Führe nach der Validierung visuelle Prüfungen aus, da AST-Prüfungen die Layout-Treue nicht verifizieren können.

Vermeiden

Füge keine nicht vertrauenswürdigen Design-URLs ohne Prüfung in Bash-Befehle ein.
Behalte große generierte Bildschirme nicht als einzelne React-Dateien bei.
Betrachte eine erfolgreiche Validierung nicht als Beweis für visuelle Genauigkeit.