Habilidades frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: BOM-98

Revisión del contenido r2 Seguro ⚡ Contiene scripts⚙️ Comandos externos📁 Acceso al sistema de archivos🌐 Acceso a red

Construye frontends React consistentes

Los equipos frontend pierden tiempo cuando los patrones de la app varían entre enrutamiento, obtención de datos, carga y estilos. Esta skill proporciona guías concisas para Next.js, React, TypeScript, shadcn/ui, MUI y TanStack Query.

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 "frontend-dev-guidelines" from https://skillstore.io/skills/bom-98-frontend-dev-guidelines.md and its manifest at https://skillstore.io/api/skills/bom-98-frontend-dev-guidelines/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/bom-98-frontend-dev-guidelines.md Manifest firmado GET /api/skills/bom-98-frontend-dev-guidelines/manifest Lockfile firmado GET /api/skills/bom-98-frontend-dev-guidelines/lockfile

Pruébalo

Usando "frontend-dev-guidelines". Planifica una página de panel de publicaciones con filtros, una tabla y acciones de edición.

Resultado esperado:

Usa una carpeta de funcionalidad con API, hooks, componentes, tipos y helpers.
Renderiza la tabla dentro de un límite de Suspense y carga de forma diferida la cuadrícula pesada.
Usa claves de TanStack Query para la lista, los registros de detalle y las mutaciones.
Agrega límites de carga y error que preserven la estructura de la página.

Usando "frontend-dev-guidelines". Revisa un editor de perfiles para el comportamiento de carga y error.

Resultado esperado:

Evita retornos tempranos de carga que reemplacen la estructura de la página.
Envuelve secciones independientes en SuspenseLoader cuando los datos puedan cargarse por separado.
Usa manejadores de éxito y error de mutaciones para invalidación de caché y feedback al usuario.

Usando "frontend-dev-guidelines". Organiza una nueva funcionalidad que necesita vistas de lista, detalle y edición.

Resultado esperado:

Crea un directorio de funcionalidad con servicios de API, componentes de ruta, subcomponentes reutilizables, hooks y tipos compartidos.
Mantén los componentes de UI genéricos fuera de la funcionalidad solo cuando se reutilicen en varias áreas.
Documenta las exportaciones públicas mediante el archivo index de la funcionalidad.

Auditoría de seguridad

Seguro

v9 • 23/7/2026 Abrir el informe versionado

All 151 static findings are false positives in instructional Markdown and TypeScript examples. Dynamic imports use fixed paths, backticks are documentation syntax, and relative imports do not access the filesystem. Network examples use application clients or a same-origin endpoint, and no prompt injection or malicious intent was found.

Archivos escaneados

5,553

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚡ Contiene scripts (19)

resources/complete-examples.md:301 resources/complete-examples.md:504 resources/complete-examples.md:505 resources/complete-examples.md:506 resources/complete-examples.md:613 resources/component-patterns.md:65 resources/component-patterns.md:70 resources/component-patterns.md:86 resources/component-patterns.md:134 resources/component-patterns.md:370 resources/component-patterns.md:491 resources/loading-and-error-states.md:38 resources/performance.md:377 resources/performance.md:383 resources/routing-guide.md:56 resources/routing-guide.md:99 resources/routing-guide.md:111 resources/routing-guide.md:323 resources/routing-guide.md:354

⚙️ Comandos externos (44)

resources/complete-examples.md:85-146 resources/complete-examples.md:192-207 resources/complete-examples.md:207-212 resources/complete-examples.md:212-215 resources/complete-examples.md:309-327 resources/data-fetching.md:227-237 resources/data-fetching.md:237-252 resources/data-fetching.md:252-262 resources/data-fetching.md:262-265 resources/data-fetching.md:406-408 resources/file-organization.md:137-145 resources/typescript-standards.md:72-81 resources/typescript-standards.md:81-83 SKILL.md:44 SKILL.md:47 SKILL.md:48 SKILL.md:55 SKILL.md:59 SKILL.md:67-76 SKILL.md:76-80 SKILL.md:80-91 SKILL.md:91-95 SKILL.md:95-120 SKILL.md:120-124 SKILL.md:124-142 SKILL.md:142-146 SKILL.md:146-160 SKILL.md:160-164 SKILL.md:164-193 SKILL.md:193-197 SKILL.md:197-217 SKILL.md:217-223 SKILL.md:223-258 SKILL.md:258-285 SKILL.md:285-333 SKILL.md:333-341 SKILL.md:341-350 SKILL.md:350-353 SKILL.md:353-357 SKILL.md:357-362 SKILL.md:362-366 SKILL.md:366-384 SKILL.md:384-388 SKILL.md:388-402

📁 Acceso al sistema de archivos (28)

🌐 Acceso a red (4)

resources/data-fetching.md:269 resources/data-fetching.md:453 resources/data-fetching.md:461 resources/performance.md:224

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

Copiar enlace del informe

https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/bom-98-frontend-dev-guidelines/security.svg)](https://skillstore.io/skills/bom-98-frontend-dev-guidelines?utm_source=security_passport_badge)

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/bom-98-frontend-dev-guidelines.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

BOM-98. (2026). frontend-dev-guidelines security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9

Cita BibTeX

@techreport{bom-98-bom-98-frontend-dev-guidelines-2026,
  author = {BOM-98},
  title = {frontend-dev-guidelines security audit report (audit version 9)},
  institution = {Skillstore},
  year = {2026},
  number = {9},
  url = {https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9},
  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: "frontend-dev-guidelines security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
  - name: "BOM-98"
date-released: "2026-07-23"
url: "https://skillstore.io/skills/bom-98-frontend-dev-guidelines/audits/9"
identifiers:
  - type: other
    value: "skillstore:bom-98-frontend-dev-guidelines:audit:9"
    description: "Skillstore immutable audit report identifier"

Comparar variantes

7 variantes instalables

Cada autor sigue siendo un skill instalable independiente. La variante recomendada se ordena según la evidencia de Skillstore.

Por qué esta variante es la primera

Mayor puntuación de Skillstore

Autor / fuente Puntuación de Skillstore Confianza de la evidencia Uso en Skillstore Actualizado

BrianDai22 Recomendado

briandai22-frontend-dev-guidelines

Puntuación de Skillstore 79

Confianza de la evidencia Alto

Uso en Skillstore 13

Actualizado

2026-09-09

0Chan-smc

0chan-smc-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 194

Actualizado

2026-09-09

BOM-98 Actual

bom-98-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 12

Actualizado

2026-09-09

sickn33

sickn33-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 11

Actualizado

2026-09-09

DojoCodingLabs

dojocodinglabs-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 10

Actualizado

2026-09-09

Dimon94

dimon94-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 9

Actualizado

2026-09-09

diet103

diet103-frontend-dev-guidelines

Puntuación de Skillstore 78

Confianza de la evidencia Alto

Uso en Skillstore 9

Actualizado

2026-09-09

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Alto

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Estandarizar una nueva funcionalidad

Planifica el enrutamiento, los límites de componentes, los servicios de API, los hooks, los estados de carga y los estilos antes de construir una funcionalidad.

Revisar la arquitectura frontend

Comprueba si un pull request sigue patrones compartidos para Suspense, obtención de datos, TypeScript y estructura de archivos.

Incorporarse a un codebase React

Aprende las convenciones esperadas para componentes, estilos, enrutamiento, comportamiento de caché y manejo de errores.

Prueba estos prompts

Planificar una página

Usa frontend-dev-guidelines para planificar una nueva página para [route]. Incluye tipo de componente, obtención de datos, estado de carga, estado de error y decisiones de estilo.

Diseñar un componente

Usa frontend-dev-guidelines para diseñar un [component] reutilizable. Define props, límites de estado, uso de biblioteca de UI, necesidades de accesibilidad y ubicación de archivos.

Refactorizar obtención de datos

Usa frontend-dev-guidelines para refactorizar [screen] a TanStack Query con Suspense. Incluye claves de caché, invalidación, comportamiento de carga y manejo de errores.

Auditar arquitectura de funcionalidad

Usa frontend-dev-guidelines para revisar [feature folder]. Identifica desviaciones en enrutamiento, componentes, servicios de API, hooks, TypeScript, estilos y patrones de rendimiento.

Mejores prácticas

Usa Server Components o flujos de datos basados en Suspense salvo que la interactividad requiera estado de cliente.
Mantén el código de funcionalidades organizado por servicios de API, hooks, componentes, helpers y tipos compartidos.
Agrega comprobaciones de carga, error, TypeScript, estilos y rendimiento antes de marcar el trabajo frontend como completo.

Evitar

No agregues componentes solo de cliente cuando el renderizado del servidor o Suspense pueda manejar el flujo de trabajo.
No disperses llamadas de API entre componentes cuando exista una capa de servicios de funcionalidad.
No uses retornos tempranos de carga que causen desplazamiento de layout u oculten la estructura de la página.

Preguntas frecuentes

¿Para qué proyectos encaja mejor esta skill?

Encaja con proyectos frontend React y TypeScript que usan patrones modernos de enrutamiento, componentes, obtención de datos y UI.

¿Genera código de aplicación funcional?

Proporciona patrones y ejemplos que un asistente de IA puede aplicar al escribir o revisar código de proyecto.

¿Se puede usar con Claude, Codex y Claude Code?

Sí. El informe marca compatibilidad con flujos de trabajo de Claude, Codex y Claude Code.

¿Requiere Next.js?

No. Los patrones de Next.js son centrales, pero varios recursos también cubren TanStack Router y arquitectura React general.

¿Incluye orientación de seguridad?

Solo se incluye orientación limitada sobre seguridad frontend. Usa una revisión de seguridad separada para autenticación, autorización y exposición de datos.

¿Cómo deberían usarla los equipos durante la revisión de código?

Pide al asistente que compare los archivos modificados con los patrones documentados para obtención de datos, carga, estructura de archivos, TypeScript y estilos.