Open Claude UI ٹیوٹوریل: اعلیٰ معیار کا AI گفتگو انٹرفیس اور پروڈکشن گریڈ انٹرایکٹو اینیمیشنز بنائیں

پروجیکٹ کا تعارف

open-claude-ui جدید ڈیسک ٹاپ AI کلائنٹس کے لیے ایک اوپن سورس UI کمپوننٹ لائبریری اور اینیمیشن انجن ہے۔ یہ پروجیکٹ REA ریورس انجینئرنگ فریم ورک کی بنیاد پر جامد AST تجزیہ، کلوزر کوڈ ڈی اوبفُسکیشن، رن ٹائم ٹریکنگ اور ASAR وسائل کی ساختی تحلیل مکمل کرتا ہے، اور تحقیقی نتائج کو قابلِ استعمال React کمپوننٹس، Hooks، تھیم اسٹائلز اور تکنیکی دستاویزات میں مرتب کرتا ہے۔

یہ صرف انٹرفیس کی ظاہری شکل کی نقل نہیں کرتا، بلکہ ان انجینئرنگ میکانزم کو بھی بحال کرتا ہے جو انٹرایکشن کے معیار کو متاثر کرتے ہیں، مثلاً فزیکل اسپرنگ پیرامیٹرز، CJK ان پٹ میتھڈ تحفظ، اسکرول کناروں کا تدریجی دھندلا پن، اسٹریمنگ پیغامات کے اسکرول کا کنٹرول، کرسر سے منسلک زوم، ڈریگ ڈیڈ زون اور Web Audio سے تیار کردہ اطلاع کی آوازیں۔

تعمیری وضاحت: یہ پروجیکٹ کمرشل فونٹس، ریکارڈنگ فائلز یا دیگر ملکیتی بائنری اثاثے تقسیم نہیں کرتا، بلکہ سسٹم فونٹ فال بیک اسٹیک اور Web Audio API سے خالص کوڈ پر مبنی صوتی اثرات استعمال کرتا ہے۔ پروجیکٹ MIT License کے تحت ہے، اور متعلقہ نتائج تعلیم، تحقیق اور انجینئرنگ کے تبادلے کے لیے استعمال کیے جاتے ہیں۔

کن پروجیکٹس کے لیے موزوں ہے

اگر آپ AI چیٹ کلائنٹ، ماڈل کنسول، ٹول کال کی منظوری کا انٹرفیس، ڈیسک ٹاپ اسسٹنٹ، میڈیا ویور یا ملٹی ایجنٹ تعاون کی جگہ تیار کر رہے ہیں، تو اس ریپوزٹری سے ضرورت کے مطابق کمپوننٹس شامل کر سکتے ہیں، اور بصری ٹوکنز اور پیچیدہ انٹرایکشن کو خود دوبارہ ڈیبگ کرنے کی ضرورت نہیں رہتی۔

• Web AI ایپلی کیشنز: گفتگو کے بلبلے، رچ ٹیکسٹ ان پٹ باکس، ماڈل سوئچر اور Token ڈیش بورڈ استعمال کریں۔
• اسٹریمنگ جنریشن انٹرفیس: اسکرول پن، سوچ کے عمل کو سمیٹنے اور تدریجی دھندلا ماسک استعمال کریں۔
• ڈیسک ٹاپ ایپلی کیشنز: Electron ونڈو فیکٹری، macOS ٹائٹل بار اور Vibrancy میٹیریل اسکیم استعمال کریں۔
• Artifacts اور ملٹی میڈیا ایپلی کیشنز: کالم ڈریگ، میڈیا لائٹ باکس، مشترکہ عناصر کی ٹرانزیشن اور iframe سینڈ باکس برج استعمال کریں۔
• قابلِ رسائی ایپلی کیشنز: WAI-ARIA کے اصولوں کے مطابق Roving TabIndex فوکس رومنگ Hook استعمال کریں۔

بنیادی خصوصیات

ڈیزائن ٹوکنز اور بصری نظام

پروجیکٹ Surface 0 سے Surface 3 تک کم کنٹراسٹ سطحوں کی درجہ بندی، مٹیالا نارنجی #d97757، ہائی-DPI اسکرینوں کے لیے بال جیسی باریک سرحدوں کی تلافی، سسٹم فونٹ فال بیک اسٹیک، اور بٹن، پینل، بلبلوں اور ان پٹ باکسز کے لیے گول کونوں کا میٹرکس فراہم کرتا ہے۔ عالمی تھیم متغیرات اور کلیدی فریم code-examples/cds-theme.css میں مرکوز ہیں۔

30 آزاد کوڈ ماڈیولز

ریپوزٹری میں 11 بنیادی ایٹامک کنٹرولز اور 19 آرکیٹیکچر یا انٹرایکشن ماڈیولز شامل ہیں۔ کمپوننٹ کا ماخذ کوڈ code-examples میں ہے، جبکہ یکساں TypeScript ایکسپورٹ انٹری پوائنٹ src/index.ts میں ہے۔ یہ ماڈیولز بٹن، سیگمنٹڈ سلیکشن، ان پٹ باکس، گفتگو کے بلبلے، MCP فیصلہ کارڈ، میڈیا ویور، اسٹریمنگ Diff، ڈیسک ٹاپ ونڈو اور ملٹی ایجنٹ کینوس جیسے منظرناموں کا احاطہ کرتے ہیں۔

پروڈکشن گریڈ انٹرایکشن میکانزم

• فزیکل اسپرنگ کے 4 پری سیٹس، جن میں Bouncy، Snappy، Gentle اور Heavy Snap شامل ہیں۔
• اسکرول علاقوں میں 7 درجوں والا نان لائنئر Alpha ماسک استعمال ہوتا ہے، جو اوپر یا نیچے پہنچنے کی حالت کے مطابق متحرک طور پر ایڈجسٹ ہوتا ہے۔
• ان پٹ باکس isComposing اور keyCode === 229 کی دوہری شرط کے ذریعے CJK ان پٹ میتھڈ کی حفاظت کرتا ہے۔
• اسٹریمنگ آؤٹ پٹ میں 40px نچلی برداشت اور 150ms دستی اسکرول کول ڈاؤن استعمال ہوتا ہے، تاکہ خودکار اسکرول ویو پورٹ پر قبضہ نہ کرے۔
• مائیکروفون ویوفارم میں 8% شور کی حد اور 0.7 پاور Gamma کمپریشن استعمال ہوتی ہے۔
• ڈریگ اور گیلری انٹرایکشن میں 4px پوائنٹر موومنٹ ڈیڈ زون شامل ہے، جو ہاتھ کی معمولی کپکپاہٹ کو فلٹر کرتا ہے۔

آف لائن کمپوننٹ پیش منظر

ریپوزٹری میں ایک واحد فائل پر مشتمل انٹرایکٹو اسٹوری بک docs/claude-components-storybook.html بھی شامل ہے۔ مقامی ڈویلپمنٹ سرور شروع کیے بغیر مٹیالے رنگوں کا نظام، ڈارک موڈ، بٹن فیڈبیک، سیگمنٹڈ کیپسول، اسپرنگ اینیمیشن، اٹیچمنٹ ٹائل اور کاپی اسٹیٹ اینیمیشن دیکھی جا سکتی ہے۔

تنصیب اور ماحول کی تیاری

ٹیکنالوجی اسٹیک کی تصدیق

ریپوزٹری کی معلومات کے مطابق، پروجیکٹ میں درج ذیل ماحول ہونا تجویز کیا جاتا ہے:

• React 18 یا اس سے اعلیٰ ورژن۔
• TypeScript 5.5 یا اس سے اعلیٰ ورژن۔
• Tailwind CSS 3.4 یا اس سے اعلیٰ ورژن۔
• Framer Motion 11 یا اس سے اعلیٰ ورژن۔

README میں کسی مخصوص پیکیج مینیجر کے لیے تنصیب کی کمانڈ نہیں دی گئی۔ شروع کرنے سے پہلے، اپنے ورک اسپیس، Git انحصار یا پیکیج پبلشنگ کے طریقے کے مطابق پروجیکٹ کو اس طرح تیار کریں کہ open-claude-ui پاتھ کے ذریعے رسائی ممکن ہو، اور یقینی بنائیں کہ مذکورہ ہم سطح ٹیکنالوجی اسٹیک پہلے سے ترتیب دیا گیا ہے۔

پہلے آف لائن اسٹوری بک دیکھیں

اگر ریپوزٹری کا ماخذ کوڈ دستیاب ہے، تو پیش منظر فائل براہِ راست کھول سکتے ہیں:

open docs/claude-components-storybook.html

کاروباری پروجیکٹ میں تبدیلی کیے بغیر، یہ مرحلہ آپ کو تصدیق کرنے میں مدد دے سکتا ہے کہ کمپوننٹس کی بصری شکل، ڈارک تھیم اور انٹرایکٹو اینیمیشنز پروجیکٹ کی ضروریات سے مطابقت رکھتے ہیں۔

تھیم اسٹائلز کی ترتیب

عالمی CSS شامل کریں

ایپلی کیشن کے عالمی اسٹائل انٹری پوائنٹ میں CDS تھیم فائل شامل کریں۔ اس میں CSS کسٹم پراپرٹیز اور کمپوننٹس کے لیے درکار کلیدی فریم شامل ہیں:

@import "open-claude-ui/code-examples/cds-theme.css";

یہ تھیم سطح کے رنگ، مٹیالا برانڈ رنگ، سرحدیں، سائے اور اینیمیشن کی بنیاد فراہم کرتا ہے۔ کمپوننٹس کے درمیان یکسانیت برقرار رکھنے کے لیے موجودہ CSS متغیرات کو ترجیح دینے کی سفارش کی جاتی ہے، اور ہر کمپوننٹ میں رنگوں کو بار بار ہارڈ کوڈ کرنے سے گریز کریں۔

Tailwind ترتیب کو وسعت دیں

پروجیکٹ کی tailwind.config.js میں ریپوزٹری کی فراہم کردہ تھیم ایکسٹینشن لوڈ کریں:

const cdsTheme = require("open-claude-ui/code-examples/tailwind.config.js");

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/open-claude-ui/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {
      ...cdsTheme.theme.extend
    }
  }
};

content ارے میں آپ کی ایپلی کیشن کے ماخذ کوڈ اور open-claude-ui میں Tailwind کلاس نام رکھنے والی فائلیں دونوں شامل ہونی چاہییں۔ بصورتِ دیگر، پروڈکشن بلڈ کے دوران کمپوننٹس کے استعمال کردہ یوٹیلیٹی کلاسز تیار نہ ہو سکیں گی۔

بنیادی استعمال: ماڈل کنٹرول اور چیٹ ان پٹ علاقہ تیار کریں

ذیل کی مثال تین بنیادی ماڈیولز کو یکجا کرتی ہے:

1. ScrollFadeContainer اسکرول والے علاقے کے اوپری اور نچلے کناروں پر تدریجی دھندلا پن شامل کرتا ہے۔
2. ModelSwitcherWithTokenGauge ماڈل کا انتخاب، Extended Thinking اسٹیٹ اور Token بجٹ دکھاتا ہے۔
3. ChatComposer بنیادی پیغام ان پٹ اور ارسال کال بیک فراہم کرتا ہے۔

import React, { useState } from 'react';
import {
  ChatComposer,
  ModelSwitcherWithTokenGauge,
  ScrollFadeContainer
} from 'open-claude-ui';

export function App() {
  const [model, setModel] = useState<
    'sonnet-3.5' | 'haiku-3.5' | 'opus-3'
  >('sonnet-3.5');
  const [thinking, setThinking] = useState(true);

  return (
    <div className="flex h-screen w-full bg-[var(--cds-surface-1)]">
      <ScrollFadeContainer
        axis="vertical"
        fadeSize={32}
        className="flex-1 p-6"
      >
        <div className="mx-auto max-w-3xl space-y-4">
          <ModelSwitcherWithTokenGauge
            currentModel={model}
            onModelChange={setModel}
            extendedThinking={thinking}
            onThinkingChange={setThinking}
            tokenBudget={{
              inputTokens: 12400,
              outputTokens: 3200,
              cacheReadTokens: 48000,
              cacheWriteTokens: 16000,
              maxContextWindow: 200000
            }}
          />

          <ChatComposer
            onSend={(text) => console.log('Send message:', text)}
          />
        </div>
      </ScrollFadeContainer>
    </div>
  );
}

اسٹیٹ مینجمنٹ کو سمجھیں

currentModel اور extendedThinking دونوں ایپلی کیشن لیئر کے زیرِ انتظام ہیں، اس لیے ماڈل سوئچر کو حقیقی ماڈل درخواست کی ترتیب کے ساتھ ہم وقت کیا جا سکتا ہے۔ مثال میں موجود tokenBudget ان پٹ، آؤٹ پٹ، کیش ریڈ، کیش رائٹ اور زیادہ سے زیادہ کانٹیکسٹ ونڈو کو الگ الگ ڈیش بورڈ میں منتقل کرتا ہے۔

مثال میں ChatComposer کا onSend صرف لاگ آؤٹ پٹ کرتا ہے۔ حقیقی پروجیکٹ میں شامل کرتے وقت، اس کال بیک کے اندر اپنے گفتگو کے سروس کو کال کر سکتے ہیں، پیغامات کی فہرست اپ ڈیٹ کر سکتے ہیں اور اسٹریمنگ رسپانس اسٹیٹ فعال کر سکتے ہیں۔

عام کمپوننٹس کے انتخاب کی رہنما

بنیادی کنٹرولز

• CdsButton: XS، SM، MD اور LG کی 4 جسامتیں، نیز Primary، Secondary، Ghost، Outline اور Danger کی 5 اقسام فراہم کرتا ہے۔
• SegmentedControl: موڈ تبدیل کرنے کے لیے ہے، اور خالص جیومیٹرک پوزیشننگ اور Framer Motion layoutId اینیمیشن اسکیم کو سپورٹ کرتا ہے۔
• StatusIndicators: مٹیالی سانس لیتی روشنی، حقیقی وقت کی سرگرمی کا پلس، سوچنے کے لیے تین نقطوں کی اینیمیشن اور اسکلیٹن اسکین لائٹ شامل ہیں۔
• ConfirmationDialog: عام یا خطرناک کارروائی کی تصدیق کے لیے ہے، اور دھندلے ماسک اور کی بورڈ فوکس پابندی فراہم کرتا ہے۔
• AttachmentCard: ڈیسک ٹاپ ٹائل اور ان پٹ باکس کی ان لائن کیپسول، دونوں اٹیچمنٹ ڈسپلے طریقوں کو سپورٹ کرتا ہے۔

گفتگو اور ٹول کالز

• ChatMessageBubbles: صارف کے بلبلے اور اسسٹنٹ کی شفاف ٹائپوگرافی میں فرق کرتا ہے۔
• ThinkingAccordion: سمیٹنے کے قابل سوچ کا عمل دکھاتا ہے، اور جنریشن کے دوران اسے لازمی طور پر کھلا رکھ سکتا ہے۔
• RichComposerWithMentions: ایسے ان پٹ ٹرمینل کے لیے موزوں ہے جسے / کمانڈ، @ کانٹیکسٹ اور Token پیش گوئی درکار ہو۔
• McpToolDecisionCard: ٹول اجازت کے عمل کے لیے ہے، اور pending_approval، running، success اور error اسٹیٹس کا احاطہ کرتا ہے۔

میڈیا، کوڈ اور Artifacts

• MediaLightboxViewer: 75vw گیلری رن وے، کرسر سے منسلک Pan/Zoom، ڈریگ ڈیڈ زون اور Ctrl وہیل زوم فراہم کرتا ہے۔
• ArtifactsSplitPaneResizer: دو کالموں کی پیمائش، کنارے کا سمیٹنا، ڈبل کلک سے 50/50 اسنیپ اور iframe پوائنٹر ایونٹ کی مداخلت کو سنبھالتا ہے۔
• EpitaxyIframeBridge: Origin کی تصدیق اور الگ تھلگ postMessage RPC پروٹوکول کے ذریعے پیش منظر سینڈ باکس سے جڑتا ہے۔
• StreamingDiffViewer: تدریجی اسٹریمنگ اضافہ، اور یکجا و اسپلٹ اسکرین، دونوں Diff موڈز کو سپورٹ کرتا ہے۔
• CodeBlock: کوڈ کنٹینر اور 2.5 سیکنڈ تک کاپی اسٹیٹ کے بتدریج ختم ہونے کا اثر فراہم کرتا ہے۔

اعلیٰ درجے کے عملی طریقے

چینی، جاپانی اور کوریائی ان پٹ طریقوں کا تحفظ

اگر چیٹ کے ان پٹ باکس میں کی بورڈ ایونٹس کو خود توسیع دینا ضروری ہو، تو ان پٹ طریقے کی کمپوزیشن کے تحفظ کو برقرار رکھنا لازمی ہے۔ جب صارف پِن یِن یا کانا امیدوار ونڈو میں Enter دبائے، تو پیغام جمع نہیں ہونا چاہیے۔ پروجیکٹ میں دوہری جانچ استعمال کی گئی ہے:

const composing =
  event.nativeEvent.isComposing || event.keyCode === 229;

if (event.key === 'Enter' && !composing) {
  // پیغام جمع کریں
}

Escape کلید کے لیے بھی یہ یقینی بنانا چاہیے کہ ان پٹ طریقے کی امیدوار تہہ بند کرتے وقت ایونٹ مزید ببل نہ ہو، ورنہ ڈائیلاگ ونڈو غیر ارادی طور پر بند ہو سکتی ہے۔

اسٹریمنگ آؤٹ پٹ کو اسکرول پوزیشن چھیننے سے روکیں

مسلسل شامل ہونے والے Token کا نظم کرنے کے لیے useClaudeScrollPinning استعمال کیا جا سکتا ہے۔ اس کی بنیادی حکمتِ عملی میں نیچے سے 40px برداشت، صارف کی اسکرولنگ کے بعد 150ms کول ڈاؤن، اور 35vh لچک دار بفر شامل ہیں۔ جب صارف نیچے کے قریب موجود ہو، تو انٹرفیس آؤٹ پٹ کے ساتھ چل سکتا ہے؛ لیکن جیسے ہی صارف سابقہ پیغامات دیکھنے کے لیے خود اوپر اسکرول کرے، خودکار اسکرول کو فوراً ویو پورٹ کو واپس نیچے نہیں کھینچنا چاہیے۔

حرکیات کے پیش سیٹ یکساں طور پر استعمال کریں

پروجیکٹ ClaudeMotionPresets.ts میں چار باریک بینی سے ٹیون کیے گئے اسپرنگ حل فراہم کرتا ہے۔ نیا کمپوننٹ تیار کرتے وقت ہر اینیمیشن کے لیے سختی اور ڈیمپنگ من مانے طور پر مقرر کرنے کے بجائے Bouncy، Snappy، Gentle یا Heavy Snap کو ترجیحاً دوبارہ استعمال کریں۔ اس طرح بٹن، پینل، ڈریگ اٹیچمنٹ اور مشترکہ عناصر کی ٹرانزیشنز میں طبیعیات کی زبان یکساں رہتی ہے۔

iframe کالم ڈریگ کو درست طریقے سے ہینڈل کریں

جب تقسیم کرنے والی پٹی iframe کے اوپر سے گزرتی ہے، تو iframe پوائنٹر ایونٹس کو روک سکتا ہے اور ڈریگ میں خلل ڈال سکتا ہے۔ ArtifactsSplitPaneResizer ڈریگ فعال ہونے پر ایونٹس کو نگلنے سے روکنے کا طریقہ فعال کرتا ہے، اور اسے 4px موومنٹ ڈیڈ زون، کنارے کی پابندیوں اور ڈبل کلک سے مرکز پر اسنیپ کے ساتھ جوڑتا ہے۔ اگر ایپ میں Artifacts پیش نظارہ شامل ہو، تو صرف تقسیم کرنے والی پٹی کے اپنے ماؤس ایونٹس سننے کے بجائے اس ماڈیول کو ترجیحاً دوبارہ استعمال کریں۔

کی بورڈ صارفین کے لیے مکمل نیویگیشن برقرار رکھیں

useClaudeRovingFocus ایک بُعدی یا دو بُعدی سمت نما کلید نیویگیشن، Home اور End کے ذریعے حدود پر منتقلی، اور RTL آئینہ پلٹنے کی سہولت فراہم کرتا ہے۔ ماڈل گرڈ، منسلکات کی فہرست یا ٹول کارڈز کی صف تیار کرتے وقت درست ARIA معنویات اور نظر آنے والی فوکس حالت کو بھی برقرار رکھنا چاہیے۔

ماڈل کی شرحی حد اور سروس کی خرابیوں کو ہینڈل کریں

useRateLimitBackoff 429 اور 503 جوابات کے لیے تیار کیا گیا ہے اور کٹی ہوئی ایکسپونینشل بیک آف، جیٹر انجیکشن اور تین بار خودکار سرکٹ بریکر بحالی فراہم کرتا ہے۔ یہ ماڈل درخواست کی تہہ کے لیے موزوں ہے، لیکن کاروباری منطق کو اپنی API کے جواب کے ڈھانچے کے مطابق خود طے کرنا ہوگا کہ کب دوبارہ کوشش کرنی ہے، کب خرابی دکھانی ہے، اور کب صارف کو دستی بحالی کی اجازت دینی ہے۔

تکنیکی کتابچے کے ذریعے گہرائی سے سیکھیں

کمپوننٹ کے سورس کوڈ کے علاوہ، ریپوزٹری 3,000 سے زیادہ سطروں پر مشتمل ڈیزائن سسٹم کا تکنیکی کتابچہ بھی فراہم کرتی ہے۔ اسے درج ذیل ترتیب سے پڑھنے کی تجویز ہے:

1. پہلے ڈیزائن فلسفہ، Surface رنگوں کی درجہ بندی، گول کونوں کے میٹرکس اور بال سے باریک بارڈر کے اصول پڑھیں۔
2. پھر بٹن، سیگمنٹڈ کنٹرولز، حالت کے اشاروں اور تصدیقی ڈائیلاگ باکسز کا مطالعہ کریں۔
3. اس کے بعد سیشن ان پٹ، CJK گارڈ، ماڈل سوئچر اور MCP اسٹیٹ مشین کا جائزہ لیں۔
4. پیچیدہ حرکیات کی ضرورت ہو تو اسپرنگ پیرامیٹرز، محیطی روشنی اور اسکرول ماسک دیکھیں۔
5. ڈیسک ٹاپ، میڈیا ٹول یا اشتراکی اسپیس تیار کرتے وقت متعلقہ سسٹم آرکیٹیکچر کے ابواب پڑھیں۔

مکمل کتابچہ docs/Claude Design System (CDS).md میں موجود ہے۔ پروجیکٹ کا معکوس تجزیہ REA کے ذریعے مکمل کیا گیا ہے۔

AI Coding Agent کے ساتھ تعاون

ریپوزٹری میں AGENTS.md، CLAUDE.md، .cursorrules اور Copilot کی ہدایتی فائلیں فراہم کی گئی ہیں۔ Cursor، Claude Code، GitHub Copilot اور دیگر ٹولز سے نیا انٹرفیس تیار کرتے وقت Agent سے کہا جا سکتا ہے کہ وہ ریپوزٹری کے موجودہ ٹوکنز، اسپرنگ پیش سیٹس، بارڈر کے اصول اور ان پٹ طریقے کے تحفظ کے قواعد کی پیروی کرے۔

مثالی پرامپٹ: براہِ کرم اس ریپوزٹری میں موجود AGENTS.md کے ضوابط کی سختی سے پیروی کرتے ہوئے CDS کے مٹیالے ڈیزائن ٹوکنز اور ClaudeMotionPresets کے اسپرنگ پیش سیٹس استعمال کر کے موجودہ کمپوننٹ تیار کریں۔

خلاصہ

open-claude-ui AI کلائنٹ کے بصری ٹوکنز، سیشن کنٹرولز، حرکیاتی طبیعیات، ملٹی میڈیا تعاملات اور ڈیسک ٹاپ آرکیٹیکچر کو دوبارہ قابلِ استعمال ماڈیولز میں منظم کرتا ہے۔ انضمام کا سب سے قابلِ اعتماد طریقہ یہ ہے کہ پہلے آف لائن اسٹوری بک کے ذریعے نتیجہ تصدیق کریں، پھر تھیم CSS اور Tailwind کی توسیع شامل کریں، اور آخر میں چیٹ ان پٹ باکس، ماڈل سوئچر اور اسکرول کنٹینر جیسے بنیادی کمپوننٹس سے ترکیب شروع کریں۔ اسٹریمنگ آؤٹ پٹ، CJK ان پٹ، iframe ڈریگ اور کی بورڈ نیویگیشن جیسے پیچیدہ حالات میں ریپوزٹری کے موجودہ Hooks اور اسٹیٹ مشین کو زیادہ سے زیادہ دوبارہ استعمال کرنا چاہیے، بجائے اس کے کہ صرف ظاہری اسٹائل نقل کیے جائیں۔