Habilidades react-components
📦
react-components
Revisión del contenido r1 Riesgo alto ⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos
Convertir diseños de Stitch en componentes React
Convertir diseños de Stitch en código React mantenible puede ser lento e inconsistente. Esta skill guía a Claude, Codex o Claude Code a través de la recuperación, la estructura de componentes, el mapeo de tokens y la validación.
Compatible con: Claude Codex Code(CC)
Detente y solicita confirmación antes de instalar.
Revisa el plan y obtén el consentimiento explícito del usuario antes de modificar archivos.
Instalar con mi Agente
Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.
Solicitud de agente
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.Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.
Recursos legibles por agentes
Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.
Pruébalo
Usando "react-components". Convert a Stitch activity feed card into React.
Resultado esperado:
- Un componente reutilizable de tarjeta de actividad con props tipadas.
- Contenido simulado movido a una capa de datos separada.
- Notas de validación para la estructura de props y el uso de colores.
Usando "react-components". Create a Vite component system from a Stitch dashboard screen.
Resultado esperado:
- Un conjunto de componentes de dashboard más pequeños organizados por responsabilidad.
- Guía de mapeo del tema para colores, tipografía y espaciado.
- Un resumen de checklist para estructura, validación y revisión visual.
Usando "react-components". Review generated components for architecture issues.
Resultado esperado:
- Una lista concisa de props faltantes, estilos hardcodeados y archivos demasiado grandes.
- Correcciones sugeridas que preservan la estructura del proyecto.
- Un estado final de validación para cada componente revisado.
Auditoría de seguridad
Riesgo altov4 • 5/7/2026 Abrir el informe versionado
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.
10
Archivos escaneados
374
Líneas analizadas
7
Elementos de revisión
0
Falsos positivos ignorados
Preocupaciones de seguridad confirmadas (2)
Alto
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.
Medio
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.
Elementos de revisión de capacidades (7)
Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.
Medio
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.
Medio
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.
Medio
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.
Medio
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.
Medio
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.
Medio
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.
Medio
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.
Factores de riesgo
⚙️ Comandos externos (24)
examples/gold-standard-card.tsx:49 examples/gold-standard-card.tsx:50 examples/gold-standard-card.tsx:58-59 resources/component-template.tsx:31 scripts/fetch-stitch.sh:1 scripts/validate.js:41 scripts/validate.js:51 scripts/validate.js:52 SKILL.md:17 SKILL.md:18 SKILL.md:20 SKILL.md:22 SKILL.md:26 SKILL.md:27 SKILL.md:28 SKILL.md:31 SKILL.md:32 SKILL.md:36 SKILL.md:37 SKILL.md:38 SKILL.md:39 SKILL.md:41 SKILL.md:42 SKILL.md:43
🌐 Acceso a red (4)
📁 Acceso al sistema de archivos (4)
Auditado por: codex Ver historial de auditorías →
Compartir y citar este informe
Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.
Copiar enlace del informe
https://skillstore.io/skills/google-labs-code-react-components/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportInsignia Markdown
[](https://skillstore.io/skills/google-labs-code-react-components?utm_source=security_passport_badge)Insignia 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>Tarjeta para insertar
<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>Citas académicas (APA · BibTeX · CFF)
Cita 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/4Cita 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"
Puntuación de Skillstore
Por qué esta puntuación Confianza de la evidencia: Medio 59
Arquitectura
85
Mantenibilidad
87
Contenido
70
Comunidad
83
Cumplimiento de la especificación
Lo que puedes crear
Convertir pantallas de diseño
Convierte una pantalla de Stitch en componentes React modulares con tokens Tailwind mapeados y pasos de validación.
Estandarizar salidas de UI
Aplica una estructura de componentes, separación de datos y uso del tema consistentes en el trabajo de interfaces generado.
Prototipar flujos de producto
Crea un scaffold de componentes basado en Vite a partir de un diseño para que los equipos puedan revisar antes el layout y las interacciones.
Prueba estos prompts
Convertir una pantalla
Use the react-components skill to convert my Stitch screen named [screen] into modular React components. Validate each component after generation.
Aplicar tokens del proyecto
Convert [screen] into React components and map colors, spacing, and fonts to my project Tailwind theme. Avoid hardcoded hex values.
Construir un sistema de componentes
Convert [flow] into a component system. Separate mock data, hooks, reusable components, and app wiring before running validation.
Refinar la UI generada
Audit the generated React components against the architecture checklist. Fix structure, props typing, theme mapping, and validation failures.
Mejores prácticas
- Confirma la pantalla de Stitch, el viewport y el tema del proyecto antes de generar archivos.
- Revisa cada fetch de red y comando antes de permitir que se ejecute el flujo de trabajo.
- Ejecuta comprobaciones visuales después de la validación porque las comprobaciones AST no pueden verificar la fidelidad del layout.
Evitar
- No pegues URLs de diseño no confiables en comandos Bash sin revisarlas.
- No mantengas pantallas generadas grandes como archivos React únicos.
- No trates el éxito de la validación como prueba de precisión visual.
Preguntas frecuentes
¿Qué hace esta skill?
Ayuda a convertir pantallas de Stitch en componentes modulares React y Vite con guía de tokens Tailwind.
¿Requiere Stitch MCP?
Sí. El flujo de trabajo espera metadatos de Stitch MCP, incluidas URLs de descarga del HTML de pantalla y de capturas de pantalla.
¿Ejecuta comandos?
Sí. Puede ejecutar Bash, npm install, validación npm y un comando de servidor de desarrollo local.
¿Qué validación se incluye?
El validador analiza TypeScript con SWC y comprueba interfaces props y colores hexadecimales hardcodeados.
¿Puede construir una app completa?
Se centra en la estructura de componentes generados y el cableado de la app. La lógica de producto y la revisión final de UX siguen siendo trabajo separado.
¿Es seguro en entornos bloqueados?
Puede necesitar aprobación adicional porque usa fetches de red, escrituras en el filesystem y ejecución de comandos locales.
Detalles del desarrollador
Autor
google-labs-codeLicencia
MIT
Revisión de Skillstore
r1
Aviso de versión
El autor no declaró una versión.
Ref.
30c73eac2afe762f6aa9c4553158769369d47351
Actualidad del mantenimiento
21/7/2026
Uso
10 descargas · 180 vistas
Estructura de archivos