Scrollcraft اور Claude Code کے ساتھ منفرد اسکرول پر مبنی ویب سائٹس بنائیں

Scrollcraft کیا ہے؟

Scrollcraft Claude Code کی ایک اسکل ہے جو ڈیزائن کرافٹ کے مستقل معیار کو برقرار رکھتے ہوئے پریمیم، اسکرول سے متحرک ویب سائٹس بنانے کے لیے استعمال ہوتی ہے۔ یہ تعامل، بصری سمت، نوعِ خط، فاصلہ، رنگ، گہرائی اور تصدیق کو ایک ہی عمل کے حصوں کے طور پر دیکھتی ہے۔

ہر بار ہیرو، فیچر کارڈز، تعریفوں اور کال ٹو ایکشن سیکشنز کی مانوس ترتیب بنانے کے بجائے، Scrollcraft صفحے کی گرامر منتخب کرنے سے آغاز کرتی ہے۔ یہ گرامر طے کرتی ہے کہ تجربہ کیسے آگے بڑھے گا، اس میں نیویگیشن کیسے ہوگی، اور کن مانوس نمونوں سے گریز کرنا ہوگا۔

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

Scrollcraft تعمیرات کو منفرد کیسے رکھتی ہے

Scrollcraft آٹھ باہمی طور پر غیر مشترک صفحہ گرامرز پیش کرتی ہے:

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

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

PERKFORM فلمی، پروڈکٹ پر مرکوز سمت کی مثال ہے۔ یہ روایتی سیکشنز کی ترتیب پر انحصار کرنے کے بجائے ون شاٹ پیشکش اور مکمل چوڑائی والے متضاد پس منظر میں اچانک کٹس استعمال کرتی ہے۔

Fallowbank دکھاتا ہے کہ یہی اسکل کس طرح ایک پُرسکون دستاویزی انداز پیدا کر سکتی ہے، جس میں تصاویر پر عجائب گھر کے لیبل جیسا متن استعمال ہوتا ہے اور اختتام عام بٹن کے بجائے رواں متن سے کیا جاتا ہے۔

فنگرپرنٹ گیٹ

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

پہلی تعمیر کو موجودہ فنگرپرنٹ پاس کرنے کی ضرورت نہیں، کیونکہ رجسٹری خالی شروع ہوتی ہے۔ یہ دانستہ ہے: گیٹ آپ کو اپنا کام دہرانے سے روکنے کے لیے بنایا گیا ہے۔

ڈیزائن اور تعامل کے معیارات

انفرادی ایکٹس کی تعریف سے پہلے، Scrollcraft احساسات کا ایک منحنی خاکہ بناتی ہے۔ ہر ایکٹ کو ایک مطلوبہ جذبہ اور اسکرین پر اس کی وجہ دی جاتی ہے۔ اگر ملحقہ دو ایکٹس ایک ہی احساس پیدا کریں، تو ممکن ہے ان میں سے ایک غیر ضروری ہو۔

اس کے بعد صفحہ ایک منصوبہ بند عروج کے گرد منظم کیا جاتا ہے۔ اس لمحے کو سب سے بڑا اثاثہ بجٹ، اس سے پہلے مناسب خاموشی، اور کافی اسکرول فاصلہ دیا جاتا ہے۔ یوں ہر سیکشن کو یکساں طور پر ڈرامائی سمجھنے کے بجائے peak-end rule براہِ راست لاگو کیا جاتا ہے۔

کرافٹ کے اصول

• نوعِ خط: زیادہ سے زیادہ دو فونٹ خاندان، قابو میں رکھی گئی حرفی فاصلہ بندی، 45 سے 75 حروف کی پیمائش، اور پیمائش کے مطابق ایڈجسٹ کی گئی سطر کی اونچائی۔
• فاصلہ: 4px کا بنیادی پیمانہ، سرخیوں کے نیچے سے زیادہ اوپر فاصلہ، اور چھوٹی اسکرینوں کے مطابق ڈھلنے والی سیال سیکشن پیڈنگ۔
• رنگ: چھ کردار اور ایک ایکسنٹ، ثانوی متن میں رنگت، خالص سیاہ سے گریز، اور ہلکے و گہرے پس منظر کے درمیان سوچے سمجھے کٹس کی معاونت۔
• گہرائی: آف سیٹ شیڈوز، کنارے کی روشنی، اسکیل اور بلر، اوورلیپ اور گرین کو الگ الگ اوزار سمجھا جاتا ہے۔
• برانڈ مطابقت: فراہم کردہ برانڈ کٹ کے اصول Scrollcraft کی طے شدہ ترجیحات پر فوقیت رکھتے ہیں، جن میں وہ پابندیاں بھی شامل ہیں جو ان تکنیکوں کو ممنوع کرتی ہیں جنہیں اسکل ورنہ منتخب کر سکتی ہے۔

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

Claude Code پلگ اِن انسٹال کریں

پلگ اِن مارکیٹ پلیس شامل کریں، پھر ڈیزائن پلگ اِن انسٹال کریں:

/plugin marketplace add nateherkai/scroll-craft
/plugin install nateherk-design

اگر Claude Code Run /reload-plugins to activate. کی اطلاع دے، تو آگے بڑھنے سے پہلے یہ کمانڈ چلائیں۔

آپ Scrollcraft کو براہِ راست اس طرح چلا سکتے ہیں:

/nateherk-design:scrollcraft

آپ Claude Code میں اپنی مطلوبہ اسکرول سے متحرک سائٹ کی وضاحت کر کے بھی یہ اسکل استعمال کر سکتے ہیں۔ براہِ راست کمانڈ اس وقت مفید ہے جب آپ اس کا طریقۂ کار واضح طور پر شروع کرنا چاہتے ہوں۔

انسٹال کیے بغیر ڈیولپ کریں

اسکل کی ریپوزٹری کو مقامی طور پر دیکھنے یا تبدیل کرنے کے لیے، اسے پلگ اِن کے طور پر انسٹال کیے بغیر، Claude Code کو پلگ اِن ڈائریکٹری کے ساتھ شروع کریں:

claude --plugin-dir ./plugins/nateherk-design

تقاضے چیک کریں

Scrollcraft کئی مقامی ٹولز پر منحصر ہے۔ تعمیر شروع کرنے سے پہلے ان کی تصدیق کریں:

• Node.js 18 یا اس کے بعد کا ورژن: شامل تمام اسکرپٹس کے لیے ضروری ہے۔
• ffmpeg کی مکمل build: کلپس کو encode کرنے کے لیے استعمال ہوتی ہے تاکہ وہ معمول کے مطابق چلنے کے بجائے درست طور پر scrub ہوں۔ مختصر builds میں scale جیسے ضروری filters شامل نہ ہوں گے۔
• playwright-core اور Chrome: براؤزر پر مبنی verification pass کے لیے استعمال ہوتے ہیں۔
• KIE_AI_API_KEY: اختیاری ہے اور صرف assets بنانے کے وقت درکار ہوتی ہے۔ اپنے photographs یا footage سے بنائے گئے projects کے لیے یہ key ضروری نہیں۔

playwright-core کو build folder کے اندر install کریں تاکہ module resolution درست مقام سے ہو:

npm i playwright-core

اگر Scrollcraft کو درست executables نہ ملیں تو SCROLLCRAFT_FFMPEG اور SCROLLCRAFT_CHROME اس کی تلاش کو override کر سکتے ہیں۔

Scrollcraft کو اب تک صرف Windows پر مکمل builds کے لیے استعمال کیا گیا ہے۔ اس کے scripts عام Windows، macOS اور Linux مقامات میں تلاش کرتے ہیں، لیکن README یہ دعویٰ نہیں کرتا کہ macOS پر کوئی build مکمل کی گئی ہے۔

Preflight چلائیں اور workspace بنائیں

کسی بھی اور کام سے پہلے diagnostic script چلائیں۔ یہ گم شدہ یا غیر موافق dependencies کی اطلاع دیتی ہے، جو بعد میں گمراہ کن failures کا سبب بن سکتی ہیں۔

node scripts/doctor.mjs

یہ check خاص طور پر اہم ہے کیونکہ مختصر ffmpeg binary کسی missing filter کو syntax error کے طور پر رپورٹ کر سکتی ہے، missing WebP muxer بظاہر filename کا مسئلہ لگ سکتا ہے، اور playwright-core غلط directory سے resolve ہو سکتا ہے۔

Preflight کامیاب ہونے کے بعد workspace اور اس کی خالی fingerprint registry بنائیں:

node scripts/workspace.mjs --ensure

Workspace کا انتخاب کیسے ہوتا ہے

Scrollcraft درج ذیل ترتیب سے workspace resolve کرتا ہے اور پہلی مطابقت پر رک جاتا ہے:

1. SCROLLCRAFT_HOME میں محفوظ path۔
2. موجودہ directory سے اوپر کی طرف تلاش کے دوران ملنے والی قریب ترین .scrollcraft.json کی جانب سے نامزد workspace۔
3. Project root کے اندر موجود scrollcraft directory۔

Workspace configuration file کی ساخت یہ ہوتی ہے:

{ "workspace": "path/to/builds" }

Builds کو <workspace>/builds/<name>/ کے اندر لکھا جاتا ہے، جبکہ fingerprint registry <workspace>/FINGERPRINTS.md میں محفوظ ہوتی ہے۔

اپنا پہلا project بنائیں

Plugin فعال ہونے اور workspace موجود ہونے کے بعد Scrollcraft چلائیں:

/nateherk-design:scrollcraft

Site، اس کے موضوع، دستیاب assets اور قابلِ اطلاق brand rules کی وضاحت کریں۔ اگر KIE_AI_API_KEY configured ہو تو generated-asset route اختیار کر سکتے ہیں، یا generation costs کے بغیر اپنی photographs اور footage استعمال کر سکتے ہیں۔ موجودہ assets کا استعمال fallback نہیں بلکہ بنیادی workflow ہے۔

Skill ایک ایسے طریقۂ کار پر عمل کرتی ہے جس میں interviewing، grammar کا انتخاب، concept کی scoring، page کی building اور نتیجے کی verification شامل ہیں۔ اس کے references feeling curves، scroll devices، continuous-world construction، art direction، asset preparation اور design standards بھی متعین کرتے ہیں۔

منتخب grammar کا احترام کریں

منتخب grammar کو visual preset نہ سمجھیں۔ مثال کے طور پر continuous-world project کو ایک ہی fixed stage کی طرح برتاؤ کرنا چاہیے، جس میں sections کے درمیان seams نہ ہوں۔ Chaptered editorial project مختلف structure اور navigation model کی پیروی کرتا ہے۔ ان کے مطلوبہ patterns کو ملانے سے وہ mechanism کمزور ہو جائے گا جو projects کو ایک دوسرے سے ممتاز رکھتا ہے۔

ایک signature move کی منصوبہ بندی کریں

ہر site میں ایک bespoke interaction شامل ہونی چاہیے جو صرف اسی project کے لیے موجود ہو۔ Spotlight کا سادہ recoloring اس معیار پر پورا نہیں اترتا۔ یہ move subject اور experience سے اخذ ہونی چاہیے، نہ کہ عام decoration کے طور پر شامل کی جائے۔

Engine درست طور پر استعمال کریں

سب سے اہم implementation rule یہ ہے کہ engine کو ہر project کے لیے کبھی edit نہ کیا جائے۔ یہ builds میں مشترک mechanism فراہم کرتا ہے، configurable page generator نہیں۔

ہر project کے لیے:

1. Engine کو چھ color tokens اور زیادہ سے زیادہ دو fonts کے ساتھ theme کریں۔
2. Site کے لیے مخصوص semantic HTML لکھیں۔
3. BesPoke behavior چلانے کے لیے engine کی شائع کردہ --sc-p custom property استعمال کریں۔
4. Project-specific layout اور interactions کو shared engine سے باہر رکھیں۔

Configuration object سے runtime پر پورا page بنانے سے گریز کریں۔ Scrollcraft کے design philosophy کے مطابق یہی abstraction ایک ہی system سے بننے والی sites کو ایک جیسا بنا دیتی ہے۔

Verification pass کو سمجھیں

Scrollcraft مکمل page کا ہر scroll position پر معائنہ کرنے کے لیے headless browser استعمال کرتا ہے۔ Video-driven experiences کے لیے frame کا جائزہ لینے سے پہلے یہ playhead کے settle ہونے کا انتظار کرتا ہے۔

Verification process یہ رپورٹ کرتا ہے:

• Dead scroll: ایسا scroll distance جو screen پر نظر آنے والی کسی چیز کو تبدیل نہ کرے۔
• Incomplete cues: ایسا text یا دیگر cue جو کبھی مکمل opacity تک نہ پہنچے۔
• Composited contrast failures: ہر line کے نیچے سے گزرنے والے روشن ترین frame کے مقابلے میں contrast check کیا جاتا ہے، جبکہ direction کا انتخاب light-on-dark یا dark-on-light text کے مطابق ہوتا ہے۔
• Undecoded clips: ایسی video جو poster frame پر رکی رہے اور بظاہر جان بوجھ کر روکی گئی film معلوم ہو سکتی ہے۔

یہ process انسانی جائزے کے لیے contact sheet بھی بناتا ہے۔ Automated checks یہ ثابت کر سکتے ہیں کہ page کام کرتا ہے، لیکن وہ یہ طے نہیں کر سکتے کہ experience بامعنی یا جذباتی طور پر مؤثر ہے یا نہیں۔

Advanced workflow tips

Fingerprint registry کو درست رکھیں

شامل مثالوں سے رجسٹری کو پہلے سے پُر نہ کریں۔ ریپوزٹری کی EXAMPLES.md فائل دکھاتی ہے کہ بھری ہوئی رجسٹری کیسی نظر آتی ہے اور کون سی ساختیں عموماً ایک دوسرے سے متصادم ہوتی ہیں، لیکن یہ پابندیوں کی فہرست نہیں ہے۔ اپنے پروجیکٹس خود درج کریں اور ایسے ہر نئے تصور کو ازسرِنو ڈیزائن کریں جو چھ میں سے چار انفرادیت کی شرط پوری نہ کرتا ہو۔

وسائل کو ایک عروج کے لیے مختص کریں

ہر منظر کو یکساں طور پر پُرجوش بنانے کی خواہش کی مزاحمت کریں۔ سب سے مضبوط اثاثہ، طویل ترین اسکرول وقفہ، اور واضح ترین تمہید ایک عروج کے لیے محفوظ رکھیں۔ متعدد مسابقتی عروج مجموعی بہاؤ کو کمزور کر دیتے ہیں۔

ریسپانسیو ردھم کو سوچ سمجھ کر ڈیزائن کریں

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

قیاس آرائی کے بجائے تشخیصی اووررائیڈز کو ترجیح دیں

اگر غلط ffmpeg یا Chrome انسٹالیشن کا پتا چلے تو SCROLLCRAFT_FFMPEG یا SCROLLCRAFT_CHROME واضح طور پر مقرر کریں۔ پھر doctor.mjs دوبارہ چلائیں، بجائے اس کے کہ بعد میں انکوڈنگ یا براؤزر کی خرابیوں کو الگ الگ ڈیبگ کریں۔

پروجیکٹ کی تاریخ پڑھیں

ریپوزٹری کی CHANGELOG.md فائل درج کرتی ہے کہ بلڈز کے دوران کیا ناکام ہوا اور اس کے جواب میں کون سا ڈیزائن یا انجینئرنگ اصول بنایا گیا۔ یہ محض فیچر ہسٹری کے بجائے عملی اسباق کے ماخذ کے طور پر مفید ہے۔

قابلِ غور حدود

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

نتیجہ

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