Compétences react-components

📦

react-components

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

Révision du contenu r1 Risque élevé ⚙️ Commandes externes🌐 Accès réseau📁 Accès au système de fichiers

Convertir des designs Stitch en composants React

Transformer des designs Stitch en code React maintenable peut être lent et incohérent. Cette compétence guide Claude, Codex ou Claude Code à travers la récupération, la structure des composants, le mapping des tokens et la validation.

Prend en charge: Claude Codex Code(CC)

⚠️ 38 Médiocre

Maintain this Skill? Claim it ⚠️ 38 Médiocre

Arrêtez-vous et demandez confirmation avant l’installation.

Examinez le plan et obtenez le consentement explicite de l’utilisateur avant de modifier des fichiers.

Installer avec mon Agent

Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.

Demande d’agent

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.

Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.

Ressources lisibles par les agents

Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.

Détail Markdown GET /skills/google-labs-code-react-components.md manifest signé GET /api/skills/google-labs-code-react-components/manifest lockfile signé GET /api/skills/google-labs-code-react-components/lockfile

Tester

Utilisation de « react-components ». Convertir une carte de flux d'activité Stitch en React.

Résultat attendu:

Un composant de carte d'activité réutilisable avec des props typées.
Le contenu mocké déplacé vers une couche de données séparée.
Des notes de validation pour la structure des props et l'utilisation des couleurs.

Utilisation de « react-components ». Créer un système de composants Vite à partir d'un écran de dashboard Stitch.

Résultat attendu:

Un ensemble de composants de dashboard plus petits, organisés par responsabilité.
Des recommandations de mapping du thème pour les couleurs, la typographie et l'espacement.
Un résumé de checklist pour la structure, la validation et la revue visuelle.

Utilisation de « react-components ». Examiner les composants générés pour détecter les problèmes d'architecture.

Résultat attendu:

Une liste concise des props manquantes, des styles codés en dur et des fichiers trop volumineux.
Des corrections suggérées qui préservent la structure du projet.
Un statut de validation final pour chaque composant examiné.

Audit de sécurité

Risque élevé

v4 • 05/07/2026 Ouvrir le rapport versionné

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.

Fichiers analysés

374

Lignes analysées

Éléments à examiner

Faux positifs ignorés

Préoccupations de sécurité confirmées (2)

Élevé

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.

Moyen

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.

Éléments d’évaluation des capacités (7)

Il s’agit de capacités locales réelles qui peuvent être attendues pour cette compétence ; elles nécessitent donc un examen, mais ne sont pas comptabilisées comme comportement malveillant confirmé.

Moyen

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.

Moyen

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.

Moyen

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.

Moyen

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.

Moyen

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.

Moyen

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.

Moyen

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.

Audité par: codex Voir l’historique des audits →

Partager et citer ce rapport

Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.

Ouvrir le rapport versionné

Copier le lien du rapport

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

Badge Markdown

[![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)

Badge HTML

<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>

Carte intégrable

<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>

Citations académiques (APA · BibTeX · CFF)

Citation APA

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

Citation BibTeX

@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"

Score Skillstore

Pourquoi ce score Niveau de confiance des preuves: Moyen

Architecture

Maintenabilité

Contenu

Communauté

Conformité aux spécifications

Ce que vous pouvez créer

Convertir des écrans de design

Transformer un écran Stitch en composants React modulaires avec des tokens Tailwind mappés et des étapes de validation.

Standardiser les sorties UI

Appliquer une structure de composants cohérente, une séparation des données et une utilisation du thème à l'ensemble du travail d'interface généré.

Prototyper des parcours produit

Créer une ossature de composants basée sur Vite à partir d'un design afin que les équipes puissent examiner plus tôt la mise en page et les interactions.

Essayez ces prompts

Convertir un écran

Utilise la compétence react-components pour convertir mon écran Stitch nommé [screen] en composants React modulaires. Valide chaque composant après génération.

Appliquer les tokens du projet

Convertis [screen] en composants React et mappe les couleurs, l'espacement et les polices avec le thème Tailwind de mon projet. Évite les valeurs hexadécimales codées en dur.

Créer un système de composants

Convertis [flow] en système de composants. Sépare les données mockées, les hooks, les composants réutilisables et le câblage de l'application avant d'exécuter la validation.

Affiner l'UI générée

Audite les composants React générés par rapport à la checklist d'architecture. Corrige la structure, le typage des props, le mapping du thème et les échecs de validation.

Bonnes pratiques

Confirmer l'écran Stitch, le viewport et le thème du projet avant de générer des fichiers.
Examiner chaque fetch réseau et chaque commande avant d'autoriser l'exécution du workflow.
Exécuter des contrôles visuels après la validation, car les contrôles AST ne peuvent pas vérifier la fidélité de la mise en page.

Éviter

Ne pas coller d'URLs de design non fiables dans des commandes Bash sans revue préalable.
Ne pas conserver de grands écrans générés sous forme de fichiers React uniques.
Ne pas considérer une validation réussie comme une preuve d'exactitude visuelle.

Foire aux questions

Que fait cette compétence ?

Elle aide à convertir des écrans Stitch en composants React et Vite modulaires avec des recommandations de tokens Tailwind.

Nécessite-t-elle Stitch MCP ?

Oui. Le workflow attend des métadonnées Stitch MCP, y compris le HTML de l'écran et les URLs de téléchargement des captures d'écran.

Exécute-t-elle des commandes ?

Oui. Elle peut exécuter Bash, npm install, npm validation et une commande de serveur de développement local.

Quelle validation est incluse ?

Le validateur parse TypeScript avec SWC et vérifie les interfaces de props ainsi que les couleurs hexadécimales codées en dur.

Peut-elle construire une application complète ?

Elle se concentre sur la structure des composants générés et le câblage de l'application. La logique produit et la revue UX finale restent des travaux distincts.

Est-elle sûre dans des environnements verrouillés ?

Elle peut nécessiter une approbation supplémentaire, car elle utilise des fetches réseau, des écritures sur le système de fichiers et l'exécution de commandes locales.