delriodev-skills

Use this skill when working on frontend. Orchestrates specialized sub-skills covering architecture, components, rendering, styles, data fetching, testing, performance, and security. Stack: React 19+, Next.js 15+, Vite 6+, TypeScript strict, Tailwind CSS, pnpm.

Use this skill as the entry point for every software development task. Routes the agent to the correct sub-skills based on context: frontend, backend, architecture, CI/CD, Docker, Git, scripting and TypeScript. Automatically activates cross-cutting skills (clean-code-principles, typescript-patterns, git-usage) that must be present in every code interaction.

Usa esta skill cuando trabajes en frontend. Orquesta sub-skills especializadas que cubren arquitectura, componentes, rendering, estilos, data fetching, testing, performance y seguridad. Stack: React 19+, Next.js 15+, Vite 6+, TypeScript strict, Tailwind CSS, pnpm.

Usa esta skill como punto de entrada para toda tarea de desarrollo de software. Enruta al agente hacia las sub-skills correctas según el contexto: frontend, backend, architecture, CI/CD, Docker, Git, scripting y TypeScript. Activa automáticamente skills transversales (clean-code-principles, typescript-patterns, git-usage) que deben estar presentes en toda interacción de código.

Use this skill ALWAYS before adding, updating, or removing any dependency in a Node.js project. Applies to frontend, backend, and monorepos. Covers mandatory pnpm usage, exact pinning without carets, querying the latest stable version, post-install auditing, protection against compromised packages with free tools, and Dependabot for controlled updates.

Usa esta skill SIEMPRE antes de añadir, actualizar o eliminar cualquier dependencia en un proyecto Node.js. Aplica a frontend, backend y monorepo. Cubre pnpm obligatorio, pin exact sin carets, consulta de última versión estable, auditoría post-instalación, protección contra paquetes comprometidos con herramientas gratuitas, y configuración de Dependabot para actualizaciones controladas.

Use this skill when configuring or writing stories in Storybook 8+. Covers setup for Vite and Next.js, CSF3, controls, play functions, accessibility addon, provider decorators, design token integration, dark mode, and visual testing with test-storybook in CI.

Usa esta skill cuando configures o escribas stories en Storybook 8+. Cubre setup para Vite y Next.js, CSF3, controls, play functions, addon de accesibilidad, decorators de providers, integración de tokens de diseño, dark mode y testing visual con test-storybook en CI.

Use this skill when building or reviewing React/Next.js components that require WCAG 2.2 level AA compliance: ARIA roles and attributes, focus management, keyboard navigation, landmarks, live regions, accessible forms, and automated testing (axe-core, Lighthouse).

Use this skill when building Design System components: atoms (Button, Input, Badge), molecules (SearchBar, FormField), organisms (Header, DataTable). Covers unified dimension token scale, CVA/cn variants, built-in WCAG 2.2 AA accessibility, i18n without hardcoded strings, internal state with Signals, Storybook and visual testing.

Use this skill when implementing internationalization in a Vite SPA with React: react-i18next + i18next, ICU MessageFormat, pluralization, date/number/currency formatting with Intl API, translation file organization, RTL support, and browser locale detection.

Usa esta skill cuando construyas o revises componentes React/Next.js que requieran cumplimiento WCAG 2.2 nivel AA: roles y atributos ARIA, gestión de focus, navegación por teclado, landmarks, live regions, formularios accesibles y testing automatizado (axe-core, Lighthouse).

Usa esta skill cuando construyas componentes de Design System: átomos (Button, Input, Badge), moléculas (SearchBar, FormField), organismos (Header, DataTable). Cubre escala unificada de tokens de dimensión, variantes CVA/cn, accesibilidad WCAG 2.2 AA integrada, i18n sin strings hardcoded, estado interno con Signals, Storybook y testing visual.

Usa esta skill cuando implementes internacionalización en un proyecto Vite SPA con React: react-i18next + i18next, ICU MessageFormat, pluralización, formateo de fechas/números/moneda con Intl API, organización de archivos de traducción, soporte RTL y detección de locale del navegador.

Use this skill as the agent's master protocol in any project. Applies whenever the agent receives a task (feature, bug fix, brainstorming) or arrives at a project without context. Orchestrates sub-skills: docs-structure, requirements-format, iteration-rules, project-resumption, and project-documentation. If anything about business logic is unclear, the agent asks — never infers.

Use this skill when developing backend with Node.js (NestJS, Express). Orchestrator index of sub-skills covering project structure, REST API design, authentication, middleware, validation, error handling, DB patterns, caching, jobs, testing, security, logging, real-time, file handling, DB schema design, and external API consumption. Each sub-skill is atomic and focused on HOW to implement in code, not on which cloud service to use (that's covered by architecture/).

Usa este skill como protocolo maestro del agente en cualquier proyecto. Aplica siempre que el agente reciba una tarea (feature, bug fix, brainstorming) o llegue a un proyecto sin contexto. Orquesta los sub-skills: docs-structure, requirements-format, iteration-rules, project-resumption y project-documentation. Si algo de negocio no está claro, el agente pregunta — nunca infiere.

Usa esta skill cuando desarrolles backend con Node.js (NestJS, Express). Índice orquestador de sub-skills que cubren estructura de proyecto, diseño de API REST, autenticación, middleware, validación, error handling, patrones de DB, caching, jobs, testing, seguridad, logging, real-time, archivos, diseño de esquemas DB y consumo de APIs externas. Cada sub-skill es atómica y enfocada en CÓMO implementar en código, no en qué servicio cloud usar (eso lo cubre architecture/).

Use this skill when the agent is about to implement a feature or work block. Defines the full cycle: decompose into tasks, present plan, execute with checkpoints, handle deviations (no-drift), verify A/C, and close with context/ and memory/. Applies whenever there is code to implement, even if the user doesn't explicitly mention "iteration" or "plan".

Use this skill as the entry point when the software requires regulatory compliance, data protection, information security, or auditing. Routes to the specific sub-skill based on the applicable regulation. All sub-skills apply regardless of geographic location.

Use this skill when implementing error handling in React: Error Boundaries (Next.js error.tsx / React Router errorElement), typed errors (Result pattern), Sentry integration, retries with exponential backoff, and toast notifications.

Use this skill when implementing security in frontend applications: XSS prevention, CSP, input sanitization, CORS, secure token storage (httpOnly cookies in Next.js, in-memory for SPA), security headers, env vars, and cross-reference with GRC skills.

Use this skill when managing state in React: tool selection (useState, useReducer, Context, Zustand, Jotai, Signals), store patterns, derived state, server vs client state, and common gotchas.

Use this skill when writing tests in React (Next.js or Vite SPA): Vitest configuration, React Testing Library (queries, userEvent), Playwright E2E, mocking with MSW, hook testing, coverage targets, and test patterns.

Usa este skill cuando el agente vaya a implementar un feature o bloque de trabajo. Define el ciclo completo: descomponer en tareas, presentar plan, ejecutar con checkpoints, manejar desvíos (no-drift), verificar A/C, y cerrar con context/ y memory/. Aplica siempre que haya código que implementar, incluso si el usuario no menciona "iteración" o "plan" explícitamente.

Usa este skill como punto de entrada cuando el software requiera cumplimiento normativo, protección de datos, seguridad de la información o auditoría. Enruta a la sub-skill específica según la normativa aplicable. Todas las sub-skills se aplican independientemente de la ubicación geográfica.

Usa esta skill cuando implementes manejo de errores en React: Error Boundaries (Next.js error.tsx / React Router errorElement), errores tipados (Result pattern), integración con Sentry, reintentos con backoff exponencial, y notificaciones toast.

Usa esta skill cuando implementes seguridad en aplicaciones frontend: prevención de XSS, CSP, sanitización de input, CORS, almacenamiento seguro de tokens (httpOnly cookies en Next.js, memoria en SPA), headers de seguridad, env vars, y cross-reference con GRC skills.

Usa esta skill cuando gestiones estado en React: selección de herramienta (useState, useReducer, Context, Zustand, Jotai, Signals), patrones de stores, estado derivado, servidor vs cliente, y gotchas comunes.

Usa esta skill cuando escribas tests en React (Next.js o Vite SPA): Vitest configuración, React Testing Library (queries, userEvent), Playwright E2E, mocking con MSW, testing de hooks, coverage targets, y patrones de test.

Use this skill when implementing forms in React: React Hook Form + Zod, client/server validation, multi-step, file upload, error UX, accessibility, and Server Actions with useActionState.

Usa esta skill cuando implementes formularios en React: React Hook Form + Zod, validación client/server, multi-step, file upload, UX de errores, accesibilidad, y Server Actions con useActionState.

Use this skill when implementing internationalization in a Next.js App Router project: next-intl, useTranslations, getTranslations, ICU MessageFormat, useFormatter, locale detection via middleware, RTL support with app/[locale]/layout.

Usa esta skill cuando implementes internacionalización en un proyecto Next.js App Router: next-intl, useTranslations, getTranslations, ICU MessageFormat, useFormatter, detección de locale vía middleware, soporte RTL con app/[locale]/layout.

Use this skill when the agent receives a feature to implement, needs to interpret a feature.md, or participates in a brainstorming that could graduate to a feature. Also applies when the agent detects an incomplete feature (no overview, no A/C, vague A/C) and needs to request clarification before implementing. If anything about business logic is unclear, the agent asks — never infers.

Usa este skill cuando el agente reciba un feature para implementar, necesite interpretar un feature.md, o participe en un brainstorming que pueda graduarse a feature. También aplica cuando el agente detecta que un feature está incompleto (sin overview, sin A/C, A/C vagos) y necesita pedir clarificación antes de implementar. Si algo de negocio no está claro, el agente pregunta — nunca infiere.

Use this skill when implementing data fetching in React/Next.js: TanStack Query v5, Server Components fetch, cache invalidation, optimistic updates, prefetching, infinite scroll, and loading/error patterns.

Usa esta skill cuando implementes data fetching en React/Next.js: TanStack Query v5, Server Components fetch, cache invalidation, optimistic updates, prefetching, infinite scroll, y patrones de loading/error.

Use this skill when structuring frontend projects with Next.js App Router: feature-based organization, app/ folder with route groups, barrel files, path aliases, layer separation, and naming conventions.

Use this skill when implementing routing in Next.js App Router: nested layouts, route groups, parallel routes, intercepting routes, authentication guards, typed search params, redirects and rewrites.