القائمة
Architecture rules for building UI widgets, supporting i18n locales, and multi-theme logic.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| name | widget-i18n-architecture |
| description | Architecture rules for building UI widgets, supporting i18n locales, and multi-theme logic. |
Todo nuevo Widget que se construya en el Frontend (React/Vite) DEBE cumplir estrictamente con esta arquitectura de Componentes, Temas e Idiomas, para mantener la estandarización y escalabilidad del Showcase.
fetch directamente a la API por su cuenta. Toda la data se obtiene de manera global en el componente padre (ej: App.tsx) y se inyecta en el Widget a través de props (ej: data={profileData}). Esto evita colapsar el backend con peticiones repetidas.apps/web/src/components/widgets/.css-structure, cada Widget debe alojar su archivo de estilos dentro de una subcarpeta local styles/.apps/web/src/locales/dictionaries.ts. Si se necesita un nuevo texto, debe agregarse allí.lang: Cada Widget debe recibir obligatoriamente la prop lang?: Language (con default 'es'). El componente debe extraer las traducciones locales usando const t = dictionaries[lang];.es), Inglés (en), Portugués (pt), Italiano (it) y Francés (fr).theme: Cada Widget debe recibir la prop theme?: 'light' | 'dark' (con default 'dark').<div className={\theme-${theme}`}>...`.var(--text-color), var(--text-muted)), permitiendo así que el widget se conmute impecablemente entre claro y oscuro dependiendo del padre.Node.js best practices and runtime configuration for GitData-BackEnd.
Mandatory rule requiring a corresponding Vitest/React Testing Library test file for every React component (.tsx) in GitData frontend.
Catalog of all specialized skills used across the GitData Monorepo project.
Guidelines for mathematically deducing advanced widget data on the backend.
Rules for using both GraphQL and REST APIs simultaneously for GitHub data fetching.
Mandatory rule to keep CSS files inside a styles/ folder relative to their component.