الواجهات والتصميم

توثيق المكونات مع Storybook

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor Windsurf

نظرة عامة

توثيق المكونات مع Storybook يمكّن وكيل البرمجة من إنشاء وصيانة stories تفاعلية لكل مكون في الواجهة. كل story تعرض المكون بحالاته المختلفة مع إمكانية التفاعل معه مباشرة.

يستطيع الوكيل كتابة stories جديدة لمكونات موجودة، إضافة توثيق MDX مع أمثلة تفاعلية، وتكوين args و argTypes لإنشاء واجهة تحكم بخصائص المكون. كما يمكنه دمج اختبارات بصرية وإمكانية وصول في نفس Story.

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

لمن هذه الأداة؟

فرق الواجهات التي تبني مكتبات مكونات
مطوري Design Systems الذين يوثقون المكونات
فرق التطوير التي تريد مراجعة بصرية للمكونات
مطورين يختبرون مكونات UI بمعزل عن التطبيق

التثبيت

إعداد Claude Code

npx storybook@latest init

الإعدادات

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/react-vite";
const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(ts|tsx)"],
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
  framework: "@storybook/react-vite",
};
export default config;

زيارة المصدر (الموقع الرسمي)

مهارات مشابهة

الواجهات والتصميم

Figma MCP

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor

الواجهات والتصميم

فحص إمكانية الوصول (axe-core)

فحص تلقائي لمشاكل إمكانية الوصول وتقديم اقتراحات لتحسين تجربة جميع المستخدمين.

Claude Code Copilot Cursor