تخطَّ إلى المحتوى
+ أضف منتج إنشاء حساب تسجيل الدخول

بانٍ مكونات الويب الأصلية

تطوير واجهات الويب agent-skills filesystem MIT
⬇ تنزيل vsha-be866a9b7286

SHA-256: be866a9b7286681470b8185728c48202a02c06c03459cd668fc1b24aec2873a5 3 كيلوبايت

✦ جاهزة لبيئة عملك

ثبّت هذه المهارة مباشرة داخل وكيلك

اختر الوكيل، انسخ الأمر، وشغّله من مجلد مشروعك. يتولى CLI تنزيل الحزمة والتحقق من بصمة SHA-256 ووضع الملفات في المسار المناسب.

$npx @ai-dalil/skills add web-component-builder --agent codex

@ai-dalil/skills على npm - Node.js 18.18 أو أحدث.

↓ تنزيل ZIP · الإصدار sha-be866a9b7286 بيانات API ↗ سجل الإصدارات ↗

الوصف

عربي

يبني مكونات ويب أصلية قابلة للنقل: ظل معزول، خصائص وسميات موثقة، وعمل عبر الأطر المختلفة.

English

Build portable native web components: isolated shadow DOM, documented attributes, and cross-framework operation.

بيانات المهارة التقنية

SKILL name
web-component-builder
الوصف الأصلي
Build portable native web components: isolated shadow DOM, documented attributes, and cross-framework operation.
إصدار المهارة
1.3.0
التوافق
وكيل يدعم Agent Skills · بيئة Node.js 18+ أو متصفح حديث للمعاينة
الأدوات المسموح بها
Read, Write
الكلمات المفتاحية
web-components, standards, frontend, portability
لغة المصدر
multilingual
الفرع / المرجع
main
دليل الترخيص
Original editorial content authored for the AiDalil catalog and released under MIT by the catalog owner. (high)

بيانات المصدر الأصلية (YAML)

عرض Frontmatter الأصلي
name: web-component-builder
description: Build portable native web components: isolated shadow DOM, documented attributes, and cross-framework operation.
version: 1.3.0
metadata:
  author: AiDalil Editorial
  category: web-frontend
  compatibility: claude-code, opencode, cline, trae, zed, api
  difficulty: advanced
  tags: [web-components, standards, frontend, portability]

تعليمات SKILL.md

المحتوى الأصلي للمهارة كما ورد من المصدر، مع الحفاظ على تنسيق Markdown.

عرض التعليمات الكاملة
# Web Component Builder

**Goal:** Build portable native web components: isolated shadow DOM, documented attributes, and cross-framework operation.

> الهدف: يبني مكونات ويب أصلية قابلة للنقل: ظل معزول، خصائص وسميات موثقة، وعمل عبر الأطر المختلفة.

## When to use
- الحالة النموذجية: يبني مكونات ويب أصلية قابلة للنقل: ظل معزول، خصائص وسميات موثقة، وعمل عبر الأطر المختلفة.
- توحيد مكونات الواجهة داخل نظام تصميم واحد.
- إصلاح مشكلات التوافق بين المتصفحات والأجهزة.
- تحويل تصميم من ملف تصميم إلى كود أمامي دقيق.
- بناء واجهة جديدة من الصفر أو إعادة بناء واجهة قائمة.

## Workflow
1. افحص البنية الحالية للمشروع: نقاط الدخول، نظام التنسيق، وإدارة الحالة، ووثّق ما وجدته.
2. قِس الأداء قبل وبعد التغييرات واحتفظ بالأرقام في ملخص المهام.
3. طبّق التنسيق بنظام المشروع المعتمد مع مبدأ الشاشات الصغيرة أولاً.
4. أضف التفاعلات تدريجياً مع معالجة صريحة لحالات التحميل والفراغ والخطأ.
5. قسّم الواجهة المطلوبة إلى مكوّنات صغيرة قابلة لإعادة الاستخدام مع تحديد مسؤولية كل مكوّن.
6. سلّم التغييرات على دفعات صغيرة مع وصف مراجعة واضح ولقطات شاشة للنتيجة.
7. ابنِ الهيكل الدلالي أولاً بعناصر HTML صحيحة قبل إضافة أي تنسيق أو تفاعل.
8. حدّد الهدف بدقة: بانٍ مكونات الويب الأصلية. اكتب النتيجة المتوقعة في سطر واحد قبل أي كود.

## Rules
- حافظ على حجم الحزمة النهائية؛ كل كيلوبايت مبرر.
- لا تُخفِ الأخطاء؛ اعرض حالة خطأ واضحة ومفهومة للمستخدم.
- التغييرات المرئية تحتاج لقطة قبل/بعد في وصف المراجعة.
- أسماء المكوّنات تصف الوظيفة لا الشكل فقط.
- لا تكتب أنماط تنسيق عامة تكسر صفحات أخرى؛ اضبط النطاق دائماً.

## Output contract
- ملخص تغيير يوضح المكوّنات المضافة والمعدّلة.
- لقطات شاشة للحالات الرئيسية: عادي، تحميل، فراغ، خطأ.
- خطوات إعادة إنتاج محلية لمراجع الكود.
- قائمة قرارات تقنية مع مبرر مختصر لكل قرار.

## Quality checks
- [ ] هل نسب التباين مطابقة للحد الأدنى 4.5:1 للنص العادي؟
- [ ] هل أرقام الأداء بعد التغيير لم تتراجع عن خط الأساس؟
- [ ] هل اجتازت العناصر التفاعلية التنقل الكامل بلوحة المفاتيح؟
- [ ] هل اختُبرت حالات التحميل والفراغ والخطأ للبيانات؟
- [ ] هل حُذف الكود الميت والأنماط غير المستخدمة قبل التسليم؟

## Skill identity
- Skill name: `web-component-builder`
- Version: 1.3.0
- Domain: Web Frontend Development (تطوير واجهات الويب)
- Tags: web-components, standards, frontend, portability

التثبيت اليدوي

استخدم هذا المسار عند عدم استخدام CLI أو عند إدارة ملفات المهارات يدويًا.

  1. نزّل ملف ZIP للإصدار المطلوب من أعلى الصفحة، أو افتح المصدر الأصلي إذا لم تتوفر حزمة مستضافة.
  2. فك الضغط، ثم انقل مجلد المهارة الذي يحتوي مباشرة على SKILL.md إلى مجلد الوكيل.
  3. أعد تحميل الوكيل أو افتح جلسة جديدة، ثم تأكد من ظهور المهارة ضمن المهارات المتاحة.
Codex.agents/skills/web-component-builder/
Claude Code.claude/skills/web-component-builder/
Cursor.cursor/skills/web-component-builder/

تعليمات خاصة بهذه المهارة

Extract the skill folder into your agent's skills directory (for example the project skills folder) or install the ZIP package from the skill page. No build step is required; everything is Markdown.

حالات الاستخدام

• توحيد مكونات الواجهة داخل نظام تصميم واحد. • تحسين سرعة تحميل الصفحات ومؤشرات الأداء الأساسية. • إصلاح مشكلات التوافق بين المتصفحات والأجهزة.

المتطلبات

• Any Agent Skills compatible assistant (Claude Code, Claude Desktop, or API agents). • Basic file access to read the bundled reference playbook. • No external services required for the standard workflow.

الإصدارات

الإصدار الحجم الملفات تاريخ النشر تنزيل
vsha-be866a9b7286 3 كيلوبايت 2 4 نوفمبر، 2026 تحميل

الأمان والفحص

فحص أساسي ✓ — 1 نوفمبر، 2026

مجتمع يبني قدرات أفضل

هل طوّرت مهارة تستحق أن يكتشفها الآخرون؟

ساهم في إثراء مكتبة المهارات، وعرّف المجتمع على عملك مع حفظ نسبه إلى مصدره الأصلي.

أرسل مهارة كيف تعمل المهارات؟
قسم المهارات — دليل AIالعودة إلى دليل AI ↗