Crear componentes frontend reutilizables
Los equipos frontend necesitan una estructura de componentes coherente entre frameworks. Esta skill guía a Claude, Codex y Claude Code para diseñar componentes de UI enfocados y reutilizables.
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "frontend-components" from https://skillstore.io/skills/eis-its-frontend-components.md and its manifest at https://skillstore.io/api/skills/eis-its-frontend-components/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
"frontend-components" 사용 중입니다. Diseña un componente modal reutilizable para una aplicación React.
예상 결과:
Un plan de componente con props para estado abierto, título, contenido, acciones, comportamiento de cierre, manejo del foco y slots de composición.
"frontend-components" 사용 중입니다. Refactoriza un componente de tarjeta Vue grande que mezcla visualización, carga de datos y acciones.
예상 결과:
Una propuesta de refactorización que separa visualización, propiedad de datos y controles de acción en componentes enfocados con interfaces claras.
"frontend-components" 사용 중입니다. Revisa un componente de formulario Svelte antes de añadirlo a un sistema de diseño.
예상 결과:
Una revisión que cubre nombres de props, contratos de eventos, propiedad de validación, expectativas de accesibilidad y lagunas de documentación.
The single static finding is a Markdown link to repository documentation outside the skill directory. I found no evidence of executable filesystem access, prompt injection, data exfiltration, or malicious instructions in SKILL.md.
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
https://skillstore.io/skills/eis-its-frontend-components/audits/9?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/eis-its-frontend-components?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/eis-its-frontend-components/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/eis-its-frontend-components.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>EIS-ITS. (2026). frontend-components security audit report (audit version 9) [Author version unspecified]. Skillstore. https://skillstore.io/skills/eis-its-frontend-components/audits/9@techreport{eis-its-eis-its-frontend-components-2026,
author = {EIS-ITS},
title = {frontend-components security audit report (audit version 9)},
institution = {Skillstore},
year = {2026},
number = {9},
url = {https://skillstore.io/skills/eis-its-frontend-components/audits/9},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "frontend-components security audit report (audit version 9)"
version: "unspecified"
type: report
authors:
- name: "EIS-ITS"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/eis-its-frontend-components/audits/9"
identifiers:
- type: other
value: "skillstore:eis-its-frontend-components:audit:9"
description: "Skillstore immutable audit report identifier"
각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
Guiar a un ingeniero a través de props, límites de estado, composición y documentación para un elemento UI reutilizable.
Ayudar a dividir un componente complejo en unidades más pequeñas con interfaces más claras y menos estado local.
Comprobar si las nuevas APIs de componentes siguen los estándares del proyecto para reutilización, nomenclatura y encapsulación.
Crea un componente reutilizable para este requisito de UI. Define props claras, mantén el estado al mínimo y explica el límite del componente.
Refactoriza este componente en componentes más pequeños y enfocados. Conserva el comportamiento, aclara la propiedad de props e identifica cualquier estado que deba moverse.
Diseña la API pública para este componente. Incluye props, eventos o callbacks, puntos de composición, expectativas de accesibilidad y notas de uso.
Revisa estos componentes en cuanto a reutilización, encapsulación, gestión de estado, riesgos de rendimiento y lagunas de documentación. Prioriza correcciones concretas.
작성자
EIS-ITS라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
72d5025b022c77f7a51bdf5c1637c689c80e89d1
유지보수 최신성
2026. 7. 18.
사용량
38 다운로드 · 207 조회
파일 구조
📄 SKILL.md
Mejorar la accesibilidad frontend
Los equipos frontend suelen pasar por alto los requisitos de teclado, semántica y lectores de pantalla durante el trabajo rutinario de UI. Esta skill guía a Claude, Codex y Claude Code para aplicar comprobaciones de accesibilidad al crear o editar interfaces.
Aplicar un estilo de codificación coherente
El código incoherente ralentiza las revisiones y dificulta el mantenimiento. Esta skill proporciona a Claude, Codex y Claude Code reglas claras para escribir código legible y coherente.
Escribe pruebas de comportamiento enfocadas
Los equipos suelen agregar pruebas frágiles que reflejan detalles de implementación en lugar del comportamiento del usuario. Esta habilidad guía a Claude, Codex y Claude Code para escribir pruebas enfocadas para flujos de trabajo críticos.
Validar entradas en todos los puntos de entrada
La validación de entradas a menudo se vuelve inconsistente entre formularios, APIs y reglas de negocio. Esta habilidad orienta a Claude, Codex y Claude Code hacia patrones de validación seguros.
Crear CSS de frontend coherente
El estilo de frontend a menudo se desvía entre archivos, componentes y frameworks. Esta skill guía a Claude, Codex y Claude Code hacia métodos CSS y tokens de diseño coherentes.
Mejorar el Manejo de Errores de la Aplicación
El manejo inconsistente de errores puede ocultar fallos y confundir a los usuarios. Esta habilidad guía a Claude, Codex y Claude Code hacia excepciones claras, validación, limpieza y rutas de recuperación.
Implementar transiciones de vista en React
작성자 vercel-labs
Las transiciones de vista en React son fáciles de colocar incorrectamente, lo que provoca animaciones silenciosas o ruidosas. Esta skill guía las decisiones de animación de rutas, Suspense, listas y elementos compartidos.
Mejorar componentes de Vue Options API
작성자 vuejs-ai
Los proyectos de Vue Options API pueden perder seguridad de tipos y una vinculación correcta de this. Esta skill ofrece patrones directos para componentes Vue más seguros.
Desarrolla funcionalidades frontend listas para producción
작성자 davila7
Los equipos de frontend necesitan directrices coherentes sobre React y Next.js en todos sus proyectos. Esta habilidad proporciona flujos de trabajo de referencia, prácticas de calidad y scripts auxiliares para el análisis del frontend.
Optimizar el rendimiento de React y Next.js
작성자 vercel-labs
Las apps de React y Next.js a menudo pierden velocidad por waterfalls, bundles grandes y re-renderizados evitables. Esta skill ofrece a los agentes reglas concretas para realizar cambios más seguros centrados en el rendimiento.
Mejorar la fiabilidad de las guardas de Vue Router
작성자 antfu
Los errores en Vue Router pueden causar datos obsoletos, comprobaciones omitidas y bucles de redirección. Esta habilidad ofrece patrones enfocados para guardas seguras, actualizaciones de ruta, limpieza y enrutamiento en producción.
Mejorar la calidad del código Vue 3
작성자 vuejs-ai
Los proyectos Vue suelen acumular errores de reactividad, componentes y rendimiento con el tiempo. Esta skill ofrece orientación específica de Vue 3 para patrones más seguros y código más claro.