/show-me: कोडिंग एजेंट्स के लिए कॉम्पैक्ट विज़ुअल रिप्रेजेंटेशन

tl;dr अपने एजेंट को प्रोज़ की दीवारों के बजाय विज़ुअली बात कराएं।

1npx skills add humanlayer/skills --skill show-me

HTML से हल्का और तेज़, ज़्यादातर डेवलपमेंट से जुड़ी समस्याओं के लिए काफ़ी अच्छा।

कोडिंग एजेंट काफी हद तक अपठनीय हैं

reddit के पूर्व CEO:

https://x.com/yishan/status/2086534431075098628

Mario Zechner, pi के निर्माता:

https://x.com/badlogicgames/status/2087068077309542889

Replicas से Connor:

https://x.com/connortbot/status/2081881377147109413

Dillon Mulroy ने भी एक स्किल बनाई *@backnotprop की एक स्किल को लोकप्रिय बनाया, जो मॉडल से भाषा सरल करने के लिए कहती है।

https://x.com/dillon_mulroy/status/2079238358358778142

कंटेंट कुछ इस तरह है:

अपना आखिरी संदेश दोबारा कहें। शब्दजाल बंद करें और स्पष्ट बोलें। इसे और सरल और संक्षिप्त तरीके से कहें, जैसे एक इंसान दूसरे इंसान से बात कर रहा हो।

मैं इससे बहुत तंग आ गया हूँ

एजेंट कागज़ पर ज़्यादा बुद्धिमान हो गए, लेकिन इस मामले में उनके इस्तेमाल का अनुभव काफ़ी बिगड़ गया है

जिस चीज़ के लिए लोग claude से प्यार करते थे - उसकी आवाज़, उसका व्यक्तित्व, उसकी 'आत्मा' - वह सब RL की कालकोठरी में बह गया है

sol कुछ कम cringe ज़रूर है, लेकिन फिर भी नियमित रूप से शब्दजाल की दीवारें खड़ी कर देता है, जिन्हें पढ़कर आँखों में नींद आ जाती है

यह रहा एक हालिया जवाब जो मुझे मिला। ऐसा दिन में कई बार होता है

मेरा प्रस्ताव: show me

हम इसे बेहतर बनाने के लिए इंटरनल टूल्स के साथ प्रयोग कर रहे हैं, खासकर कोडिंग के लिए, और उन्हें show-me नामक एक स्किल में प्रकाशित कर रहे हैं।

यह आज humanlayer में लाइव है, और अगर आप इसे किसी और कोडिंग एजेंट में चाहते हैं - तो इसे यहाँ पा सकते हैं:

1npx skills add humanlayer/skills --skill show-me

या, बिल्ट-इन humanlayer वर्जन पाएं, जिसमें inline html और diagrams को पूरी तरह सपोर्ट मिलता है:

1brew trust humanlayer/humanlayer
2brew tap humanlayer/humanlayer
3brew install humanlayer

अगर आपने कभी coda hale की infrastructure systems में intuition vs. attention पर टॉक देखी है, तो यह कुछ-कुछ उसी से प्रेरित है:

• जानकारी का विश्लेषण करना कठिन और थकाऊ है
• आपका visual cortex लाखों वर्षों में ऐसा विकसित हुआ है कि वह समृद्ध विज़ुअल जानकारी को सहजता से प्रोसेस कर लेता है
• इसलिए टूल्स को उसी हिसाब से ऑप्टिमाइज़ करें

जिस तरह कुल्हाड़ी उपयोगी होने के लिए इंसान के हाथ में फिट बैठनी चाहिए, उसी तरह सॉफ्टवेयर उपयोगी होने के लिए इंसान के दिमाग में फिट बैठना चाहिए

/show-me एजेंट से कहता है कि वह प्रोज़ की दीवारों के बजाय संक्षिप्त विज़ुअल्स से समझाए कि क्या हो रहा है।

यह program design के लिए वाकई बहुत अच्छा है - वह चरण जिसे आजकल कई लोग छोड़ देते हैं, लेकिन जो मेरी राय में आवश्यक है। एजेंट के कोड लिखने का काम शुरू करने से पहले, आपको कोड के आकार (types, signatures, call stacks) पर चर्चा करनी चाहिए।

यही तकनीकें बड़े diffs को बाद में एक्सप्लोर करने के लिए भी इस्तेमाल की जा सकती हैं, ताकि review के दौरान समझ आ सके कि किसमें गहराई से जाना है।

अंदर क्या है

component trees

फ्रंटएंड पर भी यही आइडिया है - जो state hooks और module boundaries मायने रखते हैं, उन्हें रखा जाता है और बाकी सब हटा दिया जाता है।

मैंने इसे दिसंबर 2025 में twitter पर शेयर किया था:

https://x.com/dexhorthy/status/1998968236617199803

call stacks

Orchestration या control-flow के काम के लिए, या किसी भी backend-जैसी समस्या के लिए, dillon ने हमें यह 'call stack' प्रारूप दिया।

https://x.com/dillon_mulroy/status/2059985696148849025

Tanishq ने तो इन्हें सीधे AST से निकालने का एक टूल भी लिख दिया है

https://x.com/tanishqk/status/2085800689129935342

diagrams

क्लासिक। अगर आपका chat interface inline mermaid सपोर्ट करता है, तो ये काफी मदद कर सकते हैं। (कभी-कभी ये फिर भी बेकार होते हैं, लेकिन आमतौर पर शब्द पढ़ने से बेहतर होते हैं)

यहाँ कई विकल्प हैं। हमें state diagrams और sequence diagrams सबसे ज़्यादा पसंद हैं।

file layouts

एक उथला file tree, जिसमें हर entry के लिए एक लाइन में ज़िम्मेदारी लिखी हो। यह 'यह चीज़ कहाँ रहती है' जानने और refactor का दायरा तय करने के लिए अच्छा है।

pseudocode

खासकर algorithmic चीज़ों के लिए, pseudocode ज़्यादा संक्षिप्त हो सकता है।

types and signatures

कोड के अस्तित्व में आने से पहले उसका आकार - वह चीज़ जो architecture doc के लिए बहुत internal है, लेकिन जिसे एजेंट फिर भी गलत कर सकता है।

1interface Item {
2  id: ItemId
3  parentId: ItemId | null
4  // ...
5}
6
7interface Cursor {
8  position: ItemId
9  direction: 'up' | 'down'
10  // ...
11}
12
13resolveTarget(items: Item[], cursor: Cursor) -> ItemId | null

diff syntax

अगर ज़्यादातर content वैसा ही है, तो आप इसके लिए diff syntax का भी उपयोग कर सकते हैं:

एक component बदलाव के लिए:

एक call-tree बदलाव के लिए:

एक file-layout बदलाव के लिए:

और state या control-flow बदलाव के लिए, जहाँ आकार असली कोड के बजाय pseudocode होता है:

html mockups

HTML ने हमारे काफी prototyping काम के लिए figma की जगह ले ली है। (वैसे, सच कहूँ तो मैं कभी figma में खास माहिर नहीं था)

html diagrams

कभी-कभी आपको बस एक diagram या explainer की ज़रूरत होती है।

humanlayer में हम एजेंट को assistant responses में सीधे HTML शामिल करने देते हैं।

लेकिन आप इसे बस अपने browser में भी खोल सकते हैं।

अन्य प्रेरणा

मैं @mattpocockuk को उनकी /teach स्किल से बनने वाले html explainers के लिए श्रेय देना चाहता हूँ - बहुत बढ़िया हैं।

जाकर आज़माएं

1npx skills add humanlayer/skills --skill show-me

स्किल इंस्टॉल करने के बाद, /show-me चलाएं या एजेंट से show-me स्किल इस्तेमाल करने के लिए कहें। इसे किसी route, service, feature, pull request या मौजूदा topic पर पॉइंट करें, या बस इसका इस्तेमाल करके मॉडल से किसी सवाल या बात को दोबारा कहलवाएं।

यह बहुत ज़्यादा content है। मुझे दिखाओ।

या

/show-me को एक html explainer के रूप में

आपको क्या लगता है, हमें बताएं! @humanlayer_dev या @dexhorthy को टैग करें - अपने नतीजों या जो आपने customize किया/जोड़ा उसके साथ - और चलिए, मिलकर कुछ नया सोचते हैं!

GIF