codegen
Generate Typed UI Code from Render Specs
Turning UI specifications into maintainable application code can require repetitive traversal and prop serialization. This skill provides reusable utilities for generating structured code and custom exporters from json-render specifications.
التثبيت باستخدام Agent لدي
انسخ هذا الطلب إلى Agent لديك. يتضمن صفحة Skill المعتمدة وملف manifest.
Review the Skillstore skill "codegen" from https://skillstore.io/skills/vercel-labs-codegen.md and its manifest at https://skillstore.io/api/skills/vercel-labs-codegen/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.يجب أن يواصل Agent عرض خطته وطلب أي تأكيد تفرضه سياسة الأمان.
موارد مهيّأة لـ Agents
استخدم هذه الروابط عندما يحتاج AI Agent أو crawler أو script إلى سياق نظيف بدلًا من قراءة الصفحة كاملة.
اختبرها
جارٍ استخدام "codegen". A nested dashboard specification containing panels, headings, data tables, and action controls.
النتيجة المتوقعة:
A traversal summary that lists each component type in hierarchy order and identifies the nesting depth of every element.
جارٍ استخدام "codegen". A component specification with strings, numbers, booleans, arrays, and nested property values.
النتيجة المتوقعة:
A normalized property representation suitable for insertion into generated application code, with unsupported values clearly identified.
جارٍ استخدام "codegen". A request for an exporter targeting a custom component runtime.
النتيجة المتوقعة:
An exporter design covering tree traversal, component mapping, property serialization, output formatting, and validation responsibilities.
التدقيق الأمني
آمنAll 12 static findings are false positives caused by Markdown code fences and JavaScript or TypeScript template literals, not shell execution. No additional semantic security findings were identified from the available evidence.
عوامل الخطر
شارك واستشهد بهذا التقرير
شارك تقرير التقييم المرتبط بالإصدار والشارة المحايدة وبطاقة التضمين والاستشهادات. تعرض Skillstore الأدلة من دون أن تقرر ما إذا كانت هذه المهارة آمنة.
نسخ رابط التقرير
https://skillstore.io/skills/vercel-labs-codegen/audits/1?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportشارة Markdown
[](https://skillstore.io/skills/vercel-labs-codegen?utm_source=security_passport_badge)شارة HTML
<a href="https://skillstore.io/skills/vercel-labs-codegen?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vercel-labs-codegen/security.svg" alt="Skillstore security assessment" loading="lazy"></a>بطاقة قابلة للتضمين
<iframe src="https://skillstore.io/embed/skills/vercel-labs-codegen.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>الاستشهادات الأكاديمية (APA · BibTeX · CFF)
اقتباس APA
vercel-labs. (2026). codegen security audit report (audit version 1) [Author version unspecified]. Skillstore. https://skillstore.io/skills/vercel-labs-codegen/audits/1اقتباس BibTeX
@techreport{vercel-labs-vercel-labs-codegen-2026,
author = {vercel-labs},
title = {codegen security audit report (audit version 1)},
institution = {Skillstore},
year = {2026},
number = {1},
url = {https://skillstore.io/skills/vercel-labs-codegen/audits/1},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "codegen security audit report (audit version 1)"
version: "unspecified"
type: report
authors:
- name: "vercel-labs"
date-released: "2026-09-29"
url: "https://skillstore.io/skills/vercel-labs-codegen/audits/1"
identifiers:
- type: other
value: "skillstore:vercel-labs-codegen:audit:1"
description: "Skillstore immutable audit report identifier"
تقييم Skillstore
سبب هذا التقييم موثوقية الأدلة: متوسطما الذي يمكنك بناؤه
Prototype UI Exporters
Create an exporter that converts structured UI specifications into a format used by a prototype application.
Inspect Component Trees
Traverse nested render specifications to inspect component types, hierarchy, and serialized properties during development.
Build Production Generators
Extend the code generation pipeline with a custom target that produces consistent application code from approved UI specifications.
جرّب هذه الموجّهات
Explain what this code generation utility does, which input specification it expects, and what output it produces.
Given this json-render UI specification, describe its component hierarchy and list each component type in traversal order.
Convert the supplied component properties into stable generated-output values, preserving nested structures and documenting unsupported values.
Design a custom exporter for the specified target framework. Define traversal behavior, prop serialization rules, formatting decisions, unsupported cases, and validation checks.
أفضل الممارسات
- Validate the input specification before generating output.
- Define explicit mappings for supported components and property types.
- Review and test generated code within the target application.
تجنب
- Treating generated output as production-ready without review.
- Accepting arbitrary property values without serialization rules.
- Adding target-specific behavior without exporter-level tests.
الأسئلة المتكررة
What input does this skill require?
Can it generate code for any framework?
Does it create the UI design?
Can it serialize nested properties?
Is generated output ready to deploy?
Who benefits most from this skill?
تفاصيل المطور
المؤلف
vercel-labsالترخيص
MIT
مراجعة Skillstore
r1
تنبيه الإصدار
لم يعلن المؤلف عن إصدار.
مرجع
bad9dafc37d1638cd29cb9bab06d5f8dbcd0f6c2
حداثة الصيانة
٣٠/٩/٢٠٢٦
الاستخدام
0 تنزيلات · 0 مشاهدات
بنية الملفات
📄 SKILL.md