page-inspector

Connects to a running Chrome browser session via Chrome DevTools MCP, navigates to the target page, and captures a comprehensive snapshot of the current layout, styles, and structure. This output serves as a baseline reference for implementation.

For the main content area and key UI elements, capture:

التقط تخطيط الصفحة الحالية وأنماطها وبنيتها من صفحة ويب مباشرة باستخدام Chrome DevTools MCP. يُستخدم عندما تحتاج إلى فهم واجهة المستخدم الحالية قبل إجراء التغييرات — يلتقط لقطات الشاشة وبنية DOM والأنماط المحسوبة وخصائص التخطيط. مفيد كخط أساس قبل التنفيذ للتغييرات التي تؤثر على الواجهة الأمامية أو واجهة المستخدم. المصدر: delexw/claude-code-misc.

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/delexw/claude-code-misc --skill page-inspector بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw