التثبيت

التثبيت

npm install @gunkin/uiify react react-dom

تحميل behavior.css

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

import "@gunkin/uiify/components/behavior.css";

استيراد مكوّن

في شيفرة العميل، استورد من نقطة الدخول الجذرية؛ وتزيل عملية tree-shaking المكوّنات غير المستخدمة.

import { Button } from "@gunkin/uiify";

في Server Component، استورد من نقطة الدخول الخاصة بالمكوّن:

import { Accordion } from "@gunkin/uiify/components/accordion";

انظر مكوّنات الخادم

TypeScript

توفّر الحزمة ESM وملفات .d.ts. اضبط moduleResolution على "bundler" أو "nodenext"، وفعّل verbatimModuleSyntax.

{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "verbatimModuleSyntax": true
  }
}

وكلاء الذكاء الاصطناعي

تزوّد مهارة /uiify وكيلك بوصفات للمكوّنات وإرشادات لتجربة المستخدم وأنماط للتخطيط. لا تقرأ إلا ما تحتاج إليه الصفحة، وتتبع مسارات مشروعك وتنسيقه، وتبني واجهة مخصّصة حين لا يناسبها مكوّن متاح. انسخها إلى مشروعك:

mkdir -p .agents/skills/uiify
cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/

مع Claude Code، استخدم .claude بدلًا من .agents. وفي مستودع متعدد الحزم، استخدم مسار node_modules المحلول. شغّلها مع موجز للصفحة؛ وتستخدم الوكلاء الأخرى صيغتها الخاصة لاستدعاء المهارات:

/uiify Build a responsive product page at /products

تعيد استخدام فحوص مشروعك، وتُعلن أولًا عن أي تثبيت لـ Playwright أو axe-core.

المكوّنات · التنسيق · البنية