📦

web-artifacts-builder

Name: web-artifacts-builder
Author: anthropics

مراجعة المحتوى r1 مخاطر متوسطة ⚙️ الأوامر الخارجية⚡ يحتوي على سكربتات🌐 الوصول إلى الشبكة📁 الوصول إلى نظام الملفات

إنشاء عناصر ويب تفاعلية غنية

تحتاج العناصر المعقدة إلى بنية أكبر مما يمكن أن يوفره ملف HTML واحد. تقوم هذه المهارة بإنشاء هيكل مساحة عمل React حديثة، ثم تجمع التطبيق النهائي في عنصر HTML واحد قابل للمشاركة.

يدعم: Claude Codex Code(CC)

⚠️ 50 ضعيف

توقف واطلب التأكيد قبل التثبيت.

راجع الخطة واحصل على موافقة صريحة من المستخدم قبل تغيير الملفات.

التثبيت باستخدام Agent لدي

انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.

طلب الوكيل

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

يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.

موارد مهيّأة لـ Agents

استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.

تفاصيل Markdown GET /skills/web-artifacts-builder.md manifest موقَّع GET /api/skills/web-artifacts-builder/manifest lockfile موقَّع GET /api/skills/web-artifacts-builder/lockfile

اختبرها

جارٍ استخدام "web-artifacts-builder". أنشئ مشروعا لعنصر مخطط سير عمل.

النتيجة المتوقعة:

تم إنشاء مساحة عمل جديدة باستخدام React وTypeScript مع Tailwind CSS ومكونات shadcn/ui وأسماء مستعارة للمسارات جاهزة للتطوير.

جارٍ استخدام "web-artifacts-builder". اجمع العنصر المكتمل الخاص بي من أجل Claude.

النتيجة المتوقعة:

تم بناء المشروع باستخدام Parcel، وتم تضمين الأصول داخل الملف، وتم إنتاج ملف bundle.html واحد للمشاركة.

جارٍ استخدام "web-artifacts-builder". أنشئ وحدة تحكم إعدادات معقدة تحتوي على مربعات حوار وعلامات تبويب.

النتيجة المتوقعة:

يستخدم العنصر مكونات واجهة مستخدم مثبتة مسبقا لعلامات التبويب، والنماذج، ومربعات الحوار، والتلميحات، وأقسام التخطيط المتجاوبة.

التدقيق الأمني

مخاطر متوسطة

v8 • ٧‏/٧‏/٢٠٢٦ فتح التقرير المرتبط بالإصدار

The skill performs expected local project generation work, including Bash execution, package installation, local file writes, and archive extraction. No prompt injection attempt was found, and several markdown and documentation URL matches are false positives. The main residual risk is supply chain exposure from npm package installation and the bundled component archive.

الملفات التي تم فحصها

653

الأسطر التي تم تحليلها

عناصر المراجعة

تم تجاهل الإيجابيات الكاذبة

مخاوف أمنية مؤكدة (1)

متوسط

scripts/init-artifact.sh:34-37 scripts/init-artifact.sh:58-79 scripts/init-artifact.sh:270-273 scripts/bundle-artifact.sh:19-21

Network Package Installation During Project Setup

The initializer and bundler run pnpm and npm commands that fetch and install packages from external registries. This is expected for the toolchain but creates supply chain exposure.

The commands explicitly install pnpm, create a Vite project, and add npm dependencies. These operations require network access in normal use.

عناصر مراجعة القدرات (18)

هذه قدرات محلية حقيقية قد يُتوقع وجودها لهذه المهارة، لذا فهي تتطلب مراجعة ولكن لا تُحتسب كسلوك خبيث مؤكد.

متوسط

scripts/bundle-artifact.sh:47

Shell command substitution

FILE_SIZE=$(du -h bundle.html | cut -f1)

The bundling script uses shell command substitution to calculate the generated bundle file size. This is expected local shell behavior but still executes external commands.

متوسط

scripts/bundle-artifact.sh:1

Unix shell invocation

#!/bin/bash

The file is a Bash script intended to be executed by the user during artifact bundling.

متوسط

scripts/init-artifact.sh:7

Shell command substitution

NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1)

The initialization script runs node and cut through shell command substitution to detect the local Node.js major version.

متوسط

scripts/init-artifact.sh:13

Shell command substitution

echo " Current version: $(node -v)"

The script executes node -v inside command substitution when reporting an unsupported Node.js version.

متوسط

scripts/init-artifact.sh:46

Shell command substitution

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"

The script uses command substitution with cd, dirname, and pwd to locate its directory before reading the component archive.

متوسط

scripts/init-artifact.sh:1

Unix shell invocation

#!/bin/bash

The initializer is a Bash script that creates a project, installs packages, writes files, and extracts local components.

متوسط

scripts/init-artifact.sh:230

Node.js fs operations

const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));

The script runs Node.js code that reads tsconfig.json from the generated project.

متوسط

scripts/init-artifact.sh:234

Node.js fs operations

fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));

The script writes an updated tsconfig.json file in the generated project.

متوسط

scripts/init-artifact.sh:242

Node.js fs operations

const content = fs.readFileSync(path, 'utf8');

The script reads tsconfig.app.json from the generated project before modifying path aliases.

متوسط

scripts/init-artifact.sh:250

Node.js fs operations

fs.writeFileSync(path, JSON.stringify(config, null, 2));

The script writes an updated tsconfig.app.json file in the generated project.

متوسط

scripts/init-artifact.sh:230

Synchronous file operations

const config = JSON.parse(fs.readFileSync('tsconfig.json', 'utf8'));

The Node.js snippet performs synchronous file reads during local project setup.

متوسط

scripts/init-artifact.sh:234

Synchronous file operations

fs.writeFileSync('tsconfig.json', JSON.stringify(config, null, 2));

The Node.js snippet performs synchronous file writes during local project setup.

متوسط

scripts/init-artifact.sh:242

Synchronous file operations

const content = fs.readFileSync(path, 'utf8');

The Node.js snippet reads tsconfig.app.json synchronously during setup.

متوسط

scripts/init-artifact.sh:250

Synchronous file operations

fs.writeFileSync(path, JSON.stringify(config, null, 2));

The Node.js snippet writes tsconfig.app.json synchronously during setup.

متوسط

SKILL.md:10

Ruby/shell backtick execution

1. Initialize the frontend repo using `scripts/init-artifact.sh`

The skill instructs users to run the initialization shell script as part of the main workflow.

متوسط

SKILL.md:12

Ruby/shell backtick execution

3. Bundle all code into a single HTML file using `scripts/bundle-artifact.sh`

The skill instructs users to run the bundling shell script as part of the main workflow.

متوسط

SKILL.md:27-30

Ruby/shell backtick execution

```bash

The code block includes Bash commands for running the initializer and entering the created project.

متوسط

SKILL.md:48-50

Ruby/shell backtick execution

```bash

The code block includes a Bash command for running the bundling script.

عوامل الخطر

⚙️ الأوامر الخارجية (15)

scripts/bundle-artifact.sh:47 scripts/bundle-artifact.sh:1 scripts/init-artifact.sh:7 scripts/init-artifact.sh:13 scripts/init-artifact.sh:46 scripts/init-artifact.sh:1 SKILL.md:10 SKILL.md:12 SKILL.md:27-30 SKILL.md:30-35 SKILL.md:35-48 SKILL.md:48-50 SKILL.md:50-52 SKILL.md:52-54 SKILL.md:54-58

⚡ يحتوي على سكربتات (1)

scripts/init-artifact.sh:93

🌐 الوصول إلى الشبكة (2)

scripts/init-artifact.sh:283 SKILL.md:74

📁 الوصول إلى نظام الملفات (9)

scripts/init-artifact.sh:230 scripts/init-artifact.sh:234 scripts/init-artifact.sh:242 scripts/init-artifact.sh:250 scripts/init-artifact.sh:230 scripts/init-artifact.sh:234 scripts/init-artifact.sh:242 scripts/init-artifact.sh:250 scripts/init-artifact.sh:34

دقّقه: codex عرض سجل التدقيق →

شارك واستشهد بهذا التقرير

شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.

فتح التقرير المرتبط بالإصدار

نسخ رابط التقرير

https://skillstore.io/skills/web-artifacts-builder/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

شارة Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/web-artifacts-builder/security.svg)](https://skillstore.io/skills/web-artifacts-builder?utm_source=security_passport_badge)

شارة HTML

<a href="https://skillstore.io/skills/web-artifacts-builder?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/web-artifacts-builder/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

بطاقة قابلة للتضمين

<iframe src="https://skillstore.io/embed/skills/web-artifacts-builder.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

anthropics. (2026). web-artifacts-builder security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/web-artifacts-builder/audits/8

اقتباس BibTeX

@techreport{anthropics-web-artifacts-builder-2026,
  author = {anthropics},
  title = {web-artifacts-builder security audit report (audit version 8)},
  institution = {Skillstore},
  year = {2026},
  number = {8},
  url = {https://skillstore.io/skills/web-artifacts-builder/audits/8},
  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: "web-artifacts-builder security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
  - name: "anthropics"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/web-artifacts-builder/audits/8"
identifiers:
  - type: other
    value: "skillstore:web-artifacts-builder:audit:8"
    description: "Skillstore immutable audit report identifier"

مقارنة المتغيرات

5 متغيرات قابلة للتثبيت

تبقى مهارة كل مؤلف عنصراً مستقلاً قابلاً للتثبيت. يُرتب المتغير الموصى به وفق أدلة Skillstore.

سبب تصدر هذا المتغير

استخدام أعلى في Skillstore

المؤلف / المصدر تقييم Skillstore موثوقية الأدلة استخدام Skillstore تم التحديث

davila7 موصى به

davila7-web-artifacts-builder

تقييم Skillstore 67

موثوقية الأدلة مرتفع

استخدام Skillstore 9

تم التحديث

2026-09-09

Azeem-2

azeem-2-web-artifacts-builder

تقييم Skillstore 67

موثوقية الأدلة مرتفع

استخدام Skillstore 8

تم التحديث

2026-09-09

sickn33

sickn33-web-artifacts-builder

تقييم Skillstore 66

موثوقية الأدلة متوسط

استخدام Skillstore 9

تم التحديث

2026-09-09

anthropics الحالي

web-artifacts-builder

تقييم Skillstore 50

موثوقية الأدلة مرتفع

استخدام Skillstore 45

تم التحديث

2026-09-09

ZhanlinCui

zhanlincui-web-artifacts-builder

تقييم Skillstore 38

موثوقية الأدلة متوسط

استخدام Skillstore 78

تم التحديث

2026-09-09

تقييم Skillstore

سبب هذا التقييم موثوقية الأدلة: مرتفع

الهندسة المعمارية

قابلية الصيانة

المحتوى

المجتمع

الامتثال للمواصفات

ما الذي يمكنك بناؤه

إنشاء نموذج أولي للوحة معلومات تفاعلية

أنشئ مساحة عمل React للمخططات ذات الحالة، وعناصر التحكم، والجداول، وعروض لوحات المعلومات المتجاوبة.

إنشاء عرض توضيحي غني بالمكونات

استخدم مكونات shadcn/ui المثبتة مسبقا لتجميع مربعات الحوار، والقوائم، والنماذج، وعلامات التبويب، وعروض البيانات.

تجهيز عنصر قابل للمشاركة

اجمع تطبيق React مكتمل في ملف HTML واحد لاستخدامه مباشرة داخل عنصر Claude.

جرّب هذه الموجّهات

بدء عنصر جديد

Use web-artifacts-builder to create a React artifact project named customer-dashboard. Include Tailwind CSS and shadcn/ui components.

إنشاء واجهة ذات حالة

Build a multi-panel analytics artifact with filters, tabs, cards, and a responsive table. Use the generated React project structure.

التجميع للمشاركة

Bundle the current React artifact into a single HTML file. Confirm the output file name and note any build issues.

التحسين والتحقق

Review the artifact for responsive layout, component consistency, and bundle readiness. Fix issues before creating the final HTML artifact.

أفضل الممارسات

استخدم هذه المهارة عندما يحتاج العنصر إلى حالة، أو توجيه، أو عدة مكونات قابلة لإعادة الاستخدام.
أبق الاختبار المرئي منفصلا ما لم يكن العنصر عالي المخاطر أو يطلب المستخدم المراجعة.
قم بالتجميع فقط بعد أن يتم بناء التطبيق بنجاح داخل المشروع الذي تم إنشاؤه.