Habilidades frontend-dev-guidelines

📦

frontend-dev-guidelines

Name: frontend-dev-guidelines
Author: diet103

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

Construye frontends React TypeScript de forma consistente

Los proyectos React suelen desviarse en la obtención de datos, el enrutamiento, los estilos y la organización de archivos. Esta skill proporciona a Claude, Codex y Claude Code patrones frontend claros para aplicar.

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

Pruébalo

Usando "frontend-dev-guidelines". Crea un componente de perfil de usuario que obtenga un usuario por id.

Resultado esperado:

Un componente React tipado con una interfaz de props clara.
Un hook de consulta Suspense conectado a un servicio de API de funcionalidad.
Estilos MUI sx y un patrón de default export.

Usando "frontend-dev-guidelines". Agrega una ruta de publicaciones con lazy loading.

Resultado esperado:

Un archivo de ruta TanStack Router con un componente de funcionalidad cargado de forma diferida.
Un esquema de carpetas por funcionalidad para la API, hooks, componentes y tipos de publicaciones.
Una recomendación de límite Suspense para un comportamiento de carga estable.

Usando "frontend-dev-guidelines". Revisa este dashboard en busca de problemas de rendimiento.

Resultado esperado:

Una lista de mejoras de memoización, callbacks y renderizado de listas.
Guía de limpieza para efectos, timers, listeners y cancelación de fetch.
Notas sobre componentes pesados que deberían cargarse de forma diferida.

Auditoría de seguridad

Seguro

v8 • 6/7/2026 Abrir el informe versionado

The static findings are false positives from Markdown documentation and TypeScript examples. Dynamic imports are React code-splitting patterns, path findings are relative imports or links, backtick findings are Markdown or template literals, and network findings use local API examples. No prompt injection, data exfiltration intent, or malicious behavior was found.

Archivos escaneados

5,490

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Factores de riesgo

⚡ Contiene scripts (22)

⚙️ Comandos externos (68)

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:31 SKILL.md:32 SKILL.md:33 SKILL.md:34 SKILL.md:35 SKILL.md:37 SKILL.md:40 SKILL.md:46 SKILL.md:47 SKILL.md:48 SKILL.md:49 SKILL.md:50 SKILL.md:53 SKILL.md:61 SKILL.md:62 SKILL.md:63 SKILL.md:64 SKILL.md:72-96 SKILL.md:96-105 SKILL.md:105-106 SKILL.md:106-107 SKILL.md:107-125 SKILL.md:125-129 SKILL.md:129-130 SKILL.md:130-132 SKILL.md:132 SKILL.md:141-142 SKILL.md:142-145 SKILL.md:145-153 SKILL.md:153-162 SKILL.md:162-163 SKILL.md:163-166 SKILL.md:166-167 SKILL.md:167-168 SKILL.md:168-171 SKILL.md:171-174 SKILL.md:174-183 SKILL.md:183-185 SKILL.md:185-189 SKILL.md:189-199 SKILL.md:199-209 SKILL.md:209-219 SKILL.md:219-224 SKILL.md:224-225 SKILL.md:225-226 SKILL.md:226-235 SKILL.md:235-236 SKILL.md:236-237 SKILL.md:237-248 SKILL.md:248-250 SKILL.md:250-263 SKILL.md:263-316 SKILL.md:316-345 SKILL.md:345-351 SKILL.md:351-386

📁 Acceso al sistema de archivos (30)

🌐 Acceso a red (5)

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

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/diet103-frontend-dev-guidelines/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

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

Insignia HTML

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

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/diet103-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

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

Cita BibTeX

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

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 Actual

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

Crear un módulo de funcionalidad

Usa el patrón de carpetas por funcionalidad para organizar servicios de API, hooks, componentes, helpers y tipos compartidos.

Estandarizar la guía de revisión

Revisa pull requests frontend según reglas consistentes para estados de carga, imports, estilos y uso de TypeScript.

Incorporarse a una base de código React

Aprende la estructura esperada del proyecto, los patrones de rutas, el enfoque de obtención de datos y las convenciones comunes de componentes.

Prueba estos prompts

Crear un componente

Crea un componente React TypeScript para [purpose]. Sigue la skill frontend-dev-guidelines para props, estados de carga, estilos y exports.

Agregar obtención de datos

Agrega obtención de datos para [entity]. Usa useSuspenseQuery, un servicio de API de funcionalidad, query keys tipadas y la guía cache-first cuando sea útil.

Construir una funcionalidad de ruta

Construye una nueva ruta de [feature] usando TanStack Router. Incluye la estructura de carpetas por funcionalidad, lazy loading, Suspense, servicio de API, hooks y tipos.

Refactorizar patrones frontend

Revisa este código frontend para verificar su alineación con las guías. Refactoriza estados de carga, carga de rutas, estilos MUI, imports, tipos TypeScript y problemas de rendimiento.

Mejores prácticas

Usa la skill antes de crear rutas, módulos de funcionalidad o componentes compartidos.
Mantén los ejemplos alineados con los imports, aliases y nombres de servicios de API del proyecto.
Solicita una revisión de guías después de grandes refactorizaciones frontend o trabajo en nuevas funcionalidades.

Evitar

No apliques estos patrones a proyectos que no usen el stack frontend indicado.
No copies nombres de rutas o rutas de API de ejemplo sin adaptarlos.
No reemplaces las reglas del sistema de diseño local cuando el proyecto ya define estándares más sólidos.