Навыки react-components

📦

react-components

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

Ревизия содержимого r1 Высокий риск ⚙️ Внешние команды🌐 Доступ к сети📁 Доступ к файловой системе

Преобразование дизайнов Stitch в компоненты React

Преобразование дизайнов Stitch в поддерживаемый код React может быть медленным и непоследовательным. Этот навык направляет Claude, Codex или Claude Code через получение данных, структуру компонентов, сопоставление токенов и валидацию.

Поддерживает: Claude Codex Code(CC)

⚠️ 38 Плохо

Остановитесь и запросите подтверждение перед установкой.

Проверьте план и получите явное согласие пользователя перед изменением файлов.

Установить с помощью моего Агента

Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.

Запрос агента

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.

Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.

Ресурсы для AI-агентов

Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.

Markdown-детали GET /skills/google-labs-code-react-components.md Подписанный manifest GET /api/skills/google-labs-code-react-components/manifest Подписанный lockfile GET /api/skills/google-labs-code-react-components/lockfile

Протестировать

Использование «react-components». Преобразовать карточку ленты активности Stitch в React.

Ожидаемый результат:

Переиспользуемый компонент карточки активности с типизированными props.
Mock content вынесен в отдельный слой данных.
Заметки по валидации структуры props и использования цветов.

Использование «react-components». Создать систему компонентов Vite из экрана дашборда Stitch.

Ожидаемый результат:

Набор небольших компонентов дашборда, организованных по зонам ответственности.
Рекомендации по сопоставлению темы для цветов, типографики и отступов.
Краткий чеклист по структуре, валидации и визуальной проверке.

Использование «react-components». Проверить сгенерированные компоненты на архитектурные проблемы.

Ожидаемый результат:

Краткий список отсутствующих props, жестко заданных стилей и слишком больших файлов.
Предложенные исправления, сохраняющие структуру проекта.
Финальный статус валидации для каждого проверенного компонента.

Аудит безопасности

Высокий риск

v4 • 05.07.2026 Открыть версионный отчет

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.

Просканировано файлов

374

Проанализировано строк

Пункты проверки

Ложные срабатывания проигнорированы

Подтверждённые проблемы безопасности (2)

Высокий

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.

Средний

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.

Пункты проверки возможностей (7)

Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.

Средний

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.

Средний

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.

Средний

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.

Средний

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.

Средний

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.

Средний

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.

Средний

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.

Факторы риска

⚙️ Внешние команды (24)

🌐 Доступ к сети (4)

examples/gold-standard-card.tsx:8 resources/component-template.tsx:8 scripts/fetch-stitch.sh:8 scripts/validate.js:8

📁 Доступ к файловой системе (4)

examples/gold-standard-card.tsx:20 scripts/validate.js:22 scripts/validate.js:22 scripts/validate.js:35

Аудитор:: codex Посмотреть историю аудитов →

Поделиться и цитировать этот отчет

Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.

Открыть версионный отчет

Копировать ссылку на отчёт

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

Значок 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)

Значок 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>

Встраиваемая карточка

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

Академические ссылки (APA · BibTeX · CFF)

Цитата 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

Цитата 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"

Оценка Skillstore

Почему такая оценка Достоверность доказательств: Средний

Архитектура

Сопровождаемость

Контент

Сообщество

Соответствие спецификации

Что вы можете построить

Преобразование экранов дизайна

Преобразуйте экран Stitch в модульные компоненты React с сопоставленными токенами Tailwind и шагами валидации.

Стандартизация UI-результатов

Применяйте единообразную структуру компонентов, разделение данных и использование темы во всех сгенерированных интерфейсных работах.

Прототипирование продуктовых сценариев

Создайте каркас компонентов на базе Vite из дизайна, чтобы команды могли раньше оценить макет и взаимодействия.

Попробуйте эти промпты

Преобразовать один экран

Используй навык react-components, чтобы преобразовать мой экран Stitch с именем [screen] в модульные компоненты React. Валидируй каждый компонент после генерации.

Применить токены проекта

Преобразуй [screen] в компоненты React и сопоставь цвета, отступы и шрифты с темой Tailwind моего проекта. Избегай жестко заданных hex-значений.

Создать систему компонентов

Преобразуй [flow] в систему компонентов. Раздели mock data, hooks, переиспользуемые компоненты и app wiring перед запуском валидации.

Улучшить сгенерированный UI

Проведи аудит сгенерированных компонентов React по архитектурному чеклисту. Исправь структуру, типизацию props, сопоставление темы и ошибки валидации.

Лучшие практики

Подтвердите экран Stitch, viewport и тему проекта перед генерацией файлов.
Проверяйте каждый сетевой fetch и команду перед разрешением запуска workflow.
Выполняйте визуальные проверки после валидации, потому что AST-проверки не могут подтвердить точность макета.

Избегать

Не вставляйте непроверенные design URLs в команды Bash без проверки.
Не оставляйте большие сгенерированные экраны как отдельные файлы React.
Не считайте успешную валидацию доказательством визуальной точности.

Часто задаваемые вопросы

Что делает этот навык?

Он помогает преобразовывать экраны Stitch в модульные компоненты React и Vite с рекомендациями по токенам Tailwind.

Требуется ли Stitch MCP?

Да. Workflow ожидает метаданные Stitch MCP, включая screen HTML и screenshot download URLs.

Запускает ли он команды?

Да. Он может запускать Bash, npm install, npm validation и команду локального dev server.

Какая валидация включена?

Валидатор разбирает TypeScript с помощью SWC и проверяет интерфейсы props и жестко заданные hex-цвета.

Может ли он создать полноценное приложение?

Он фокусируется на структуре сгенерированных компонентов и app wiring. Продуктовая логика и финальная UX-проверка остаются отдельной работой.

Безопасен ли он в заблокированных средах?

Может потребоваться дополнительное одобрение, потому что он использует сетевые fetch-запросы, запись в файловую систему и выполнение локальных команд.