התקנה

התקנה

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";

על Server Components

TypeScript

החבילה מספקת ESM וקובצי .d.ts. הגדירו את moduleResolution ל-"bundler" או ל-"nodenext", והפעילו verbatimModuleSyntax.

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

סוכני AI

המיומנות /uiify מספקת לסוכן שלכם מתכוני רכיבים, הנחיות UX ודפוסי פריסה. היא קוראת רק את מה שהעמוד צריך, פועלת לפי הנתיבים והעיצוב שלכם ובונה ממשק מותאם כשאין רכיב מתאים. העתיקו אותה לפרויקט:

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

ב-Claude Code השתמשו ב-.claude במקום ב-.agents. ב-monorepo השתמשו בנתיב node_modules שנפתר בפועל. הפעילו אותה עם תיאור קצר של העמוד; סוכנים אחרים משתמשים בתחביר המיומנויות שלהם:

/uiify Build a responsive product page at /products

היא משתמשת בבדיקות הקיימות שלכם ומודיעה מראש על כל התקנה של Playwright או axe-core.

רכיבים · עיצוב · ארכיטקטורה