building-components

द्वारा vercel

आधुनिक, सुलभ और संयोजनीय UI घटकों के निर्माण के लिए व्यापक मार्गदर्शिका। इसमें घटक वर्गीकरण (प्राथमिकताएँ, घटक, ब्लॉक, टेम्पलेट), मुख्य डिज़ाइन सिद्धांत, और ARIA, कीबोर्ड नेविगेशन तथा WCAG अनुपालन सहित पहुँच कार्यान्वयन शामिल है। इसमें संयोजनीय API, बहुरूपता, नियंत्रित/अनियंत्रित स्थिति, और लचीले तत्व संयोजन के लिए as-child पैटर्न के पैटर्न शामिल हैं। डिज़ाइन टोकन, थ

npx skills add https://github.com/vercel/components.build --skill building-components

ZIP डाउनलोड करें GitHub

इस स्किल को आज़माएँप्रायोजित

Building Components

When to use this skill

Use when the user is:

Building new UI components (primitives, components, blocks, templates)
Implementing accessibility features (ARIA, keyboard navigation, focus management)
Creating composable component APIs (slots, render props, controlled/uncontrolled state)
Setting up design tokens and theming systems
Publishing components to npm or a registry
Writing component documentation
Implementing polymorphism or as-child patterns
Working with data attributes for styling/state

References

definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)
principles.mdx - Core principles for component design
accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
composition.mdx - Composable component patterns
as-child.mdx - The as-child pattern for element polymorphism
polymorphism.mdx - Polymorphic component patterns
types.mdx - TypeScript typing patterns for components
state.mdx - Controlled vs uncontrolled state management
data-attributes.mdx - Using data attributes for styling and state
design-tokens.mdx - Design token systems and theming
styling.mdx - Component styling approaches
registry.mdx - shadcn-style registry distribution
npm.mdx - Publishing components to npm
marketplaces.mdx - Component marketplace distribution
docs.mdx - Writing component documentation

vercel की और Skills

स्थानीय विकास और परीक्षण के लिए अनुकरणित Vercel REST API। उपयोग तब करें जब उपयोगकर्ता को स्थानीय रूप से Vercel API एंडपॉइंट्स के साथ इंटरैक्ट करने, Vercel इंटीग्रेशन का परीक्षण करने की आवश्यकता हो,…

Vercel Cron Jobs कॉन्फ़िगरेशन और सर्वोत्तम अभ्यास। vercel.json में शेड्यूल किए गए कार्यों को जोड़ने, संपादित करने या डीबग करने पर उपयोग करें।

json-render के लिए कोड जनरेशन उपयोगिताएँ। UI स्पेक्स से कोड जनरेट करते समय, कस्टम कोड एक्सपोर्टर बनाते समय, स्पेक्स को ट्रैवर्स करते समय, या प्रॉप्स को सीरियलाइज़ करते समय उपयोग करें…

next-best-practice

Next.js सर्वोत्तम अभ्यास - फ़ाइल परंपराएँ, RSC सीमाएँ, डेटा पैटर्न, async API, मेटाडेटा, त्रुटि प्रबंधन, रूट हैंडलर, इमेज/फ़ॉन्ट अनुकूलन,…

benchmark-sandbox

Vercel Sandboxes में vercel-plugin eval परिदृश्य चलाएँ, स्थानीय WezTerm पैनलों के बजाय। Claude Code + प्लगइन पूर्व-स्थापित के साथ अस्थायी microVMs प्रदान करता है,…

एक तकनीकी गाइड तैयार करें जो प्रगतिशील उदाहरणों के माध्यम से एक वास्तविक दुनिया के उपयोग के मामले को सिखाता है। अवधारणाओं को केवल तब पेश किया जाता है जब पाठक को उनकी आवश्यकता होती है।

benchmark-testing

बेंचमार्क परीक्षण परियोजनाएँ बनाएँ और लॉन्च करें ताकि वास्तविक परिदृश्यों में vercel-plugin कौशल इंजेक्शन का परीक्षण किया जा सके। पृथक निर्देशिकाएँ सेट करता है, इंस्टॉल करता है…

Vercel AI गेटवे विशेषज्ञ मार्गदर्शन। मॉडल रूटिंग, प्रदाता फेलओवर, लागत ट्रैकिंग, या एकीकृत माध्यम से कई AI प्रदाताओं के प्रबंधन को कॉन्फ़िगर करते समय उपयोग करें…