Habilidades FlowGram Material Component Development
📦

FlowGram Material Component Development

v1.0.0 Revisión del contenido r1 Seguro ⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos

Crear componentes de materiales de FlowGram

Crear componentes de materiales de formulario de FlowGram requiere una estructura, exportaciones y validación en Storybook coherentes. Esta habilidad guía el scaffolding de componentes, los patrones de TypeScript, las exportaciones y las comprobaciones locales.

Compatible con: Claude Codex Code(CC)
🥉 78 Bronce

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente
Review the Skillstore skill "FlowGram Material Component Development" from https://skillstore.io/skills/bytedance-material-component-dev.md and its manifest at https://skillstore.io/api/skills/bytedance-material-component-dev/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/bytedance-material-component-dev.md Manifest firmado GET /api/skills/bytedance-material-component-dev/manifest Lockfile firmado GET /api/skills/bytedance-material-component-dev/lockfile

Pruébalo

Usando "FlowGram Material Component Development". Plan a new schema picker component for form-materials.

Resultado esperado:

Un plan de implementación conciso con la carpeta del componente, archivos requeridos, props, exportaciones con nombre y ubicación de la story de Storybook.

Usando "FlowGram Material Component Development". Review a component that fails to appear in Storybook.

Resultado esperado:

Una lista de verificación de posibles brechas de exportación e importación, seguida de correcciones específicas para los puntos de entrada del componente.

Usando "FlowGram Material Component Development". Fix a TypeScript error about React or json-schema types.

Resultado esperado:

Un diagnóstico que apunta a importaciones explícitas de React o tipos json-schema de FlowGram, con los archivos afectados que deben inspeccionarse.

Auditoría de seguridad

Seguro
v10 • 19/7/2026 Abrir el informe versionado

All 57 static findings are false positives caused by Markdown code formatting, fenced examples, a localhost Storybook URL, and a compile-time relative import. The documented shell commands use fixed local development arguments and show no dynamic input, exfiltration, prompt injection, or malicious intent. No security remediation is required.

1
Archivos escaneados
368
Líneas analizadas
0
Elementos de revisión
0
Falsos positivos ignorados

Factores de riesgo

⚙️ Comandos externos (50)
SKILL.md:12 SKILL.md:17 SKILL.md:23 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:48-50 SKILL.md:50-53 SKILL.md:53-60 SKILL.md:60-66 SKILL.md:66-76 SKILL.md:76-80 SKILL.md:80-99 SKILL.md:99-103 SKILL.md:103-132 SKILL.md:132-135 SKILL.md:135-143 SKILL.md:143-152 SKILL.md:152-156 SKILL.md:156-158 SKILL.md:158-166 SKILL.md:166-168 SKILL.md:168-170 SKILL.md:170-178 SKILL.md:178-182 SKILL.md:182-184 SKILL.md:184-244 SKILL.md:244-248 SKILL.md:248-251 SKILL.md:251-260 SKILL.md:260-262 SKILL.md:262-265 SKILL.md:265-268 SKILL.md:268-277 SKILL.md:277-279 SKILL.md:279-283 SKILL.md:283-285 SKILL.md:285-290 SKILL.md:290-292 SKILL.md:292-296 SKILL.md:296-297 SKILL.md:297-298 SKILL.md:298-303 SKILL.md:303-305 SKILL.md:305-308 SKILL.md:308 SKILL.md:309 SKILL.md:314-316 SKILL.md:316-320
🌐 Acceso a red (1)
SKILL.md:270
📁 Acceso al sistema de archivos (1)
SKILL.md:33
La auditoría estática y semántica completada más reciente no detectó hallazgos de seguridad confirmados. Esto no demuestra que el skill no tenga efectos secundarios.
Auditado por: codex Ver historial de auditorías →
Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado
Evaluación de seguridad

Copiar enlace del informe

https://skillstore.io/skills/bytedance-material-component-dev/audits/10?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/bytedance-material-component-dev/security.svg)](https://skillstore.io/skills/bytedance-material-component-dev?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/bytedance-material-component-dev?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/bytedance-material-component-dev/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/bytedance-material-component-dev.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Citas académicas (APA · BibTeX · CFF)

Cita APA

bytedance. (2026). FlowGram Material Component Development security audit report (audit version 10) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/bytedance-material-component-dev/audits/10

Cita BibTeX

@techreport{bytedance-bytedance-material-component-dev-2026, author = {bytedance}, title = {FlowGram Material Component Development security audit report (audit version 10)}, institution = {Skillstore}, year = {2026}, number = {10}, url = {https://skillstore.io/skills/bytedance-material-component-dev/audits/10}, note = {Author version 1.0.0} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "FlowGram Material Component Development security audit report (audit version 10)" version: "1.0.0" type: report authors: - name: "bytedance" date-released: "2026-07-19" url: "https://skillstore.io/skills/bytedance-material-component-dev/audits/10" identifiers: - type: other value: "skillstore:bytedance-material-component-dev:audit:10" description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto
55
Arquitectura
100
Mantenibilidad
87
Contenido
70
Comunidad
65
Cumplimiento de la especificación

Lo que puedes crear

Agregar un nuevo material de formulario

Crea una carpeta de componente, archivos principales, exportaciones y una demo de Storybook que coincidan con las convenciones de FlowGram.

Estandarizar revisiones de componentes

Revisa props, exportaciones con nombre, uso de dependencias y pasos de validación antes de fusionar cambios de componentes.

Incorporarse al desarrollo de materiales

Aprende la estructura esperada, reglas de importación, ejemplos y criterios de aceptación para el trabajo en form-materials.

Prueba estos prompts

Planificar un componente 
Usa esta habilidad para planificar un nuevo componente de material de formulario de FlowGram llamado MyComponent. Identifica la carpeta, props, exportaciones y story de Storybook que necesito.
Crear los archivos 
Usa esta habilidad para crear el scaffolding de un componente de FlowGram form-materials para seleccionar un campo de esquema JSON. Sigue las reglas de exportación con nombre y Semi UI.
Revisar una implementación 
Usa esta habilidad para revisar mi nuevo componente de form-materials según las convenciones de FlowGram, cobertura de exportación, diseño de props y preparación para Storybook.
Corregir fallos de validación 
Usa esta habilidad para diagnosticar problemas de TypeScript y Storybook en un componente de material de FlowGram. Enfócate en importaciones de React, exportaciones de paquete y tipos json-schema.

Mejores prácticas

  • Mantén cada material enfocado en una función clara con una superficie de props pequeña.
  • Usa tipos internos de FlowGram, componentes de Semi UI y exportaciones con nombre de forma coherente.
  • Valida los cambios con comprobaciones de tipos y una demo de Storybook antes de la revisión.

Evitar

  • No crees un paquete separado para un único componente de form-materials.
  • No uses exportaciones por defecto cuando el paquete espera exportaciones con nombre.
  • No agregues props de configuración amplias que no sean necesarias para el objetivo del componente.

Preguntas frecuentes

¿A qué área del proyecto se dirige esta habilidad?
Se dirige a componentes de FlowGram form-materials dentro del paquete de materiales existente.
¿Crea un paquete npm separado?
No. Guía la creación dentro del paquete form-materials existente.
¿Qué biblioteca de UI espera?
Espera componentes de Semi UI del stack del proyecto FlowGram.
¿Qué estilo de exportación deben usar los componentes?
Los componentes y tipos deben usar exportaciones con nombre para mantener la coherencia del paquete y facilitar tree shaking.
¿Cómo deben probarse los componentes localmente?
Ejecuta la verificación de tipos del proyecto y verifica el comportamiento en el entorno de demo de Storybook.
¿Puede reemplazar el criterio específico del repositorio?
No. Revisa componentes cercanos existentes y adapta la guía a las convenciones actuales del proyecto.

Detalles del desarrollador

Autor

bytedance

Licencia

MIT

Versión del autor

v1.0.0

Revisión de Skillstore

r1

Repositorio

https://github.com/bytedance/flowgram.ai/tree/main/.claude/skills/material-component-dev

Ref.

67e6747f5b57a33ea8c62a0043d8f2ef310189ab

Actualidad del mantenimiento

22/7/2026

Uso

6 descargas · 173 vistas

Estructura de archivos

📄 SKILL.md