Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

tdd-frontend

Estrellas1

Forks0

Actualizado18 de mayo de 2026, 00:31

Implement a Next.js component or page using TDD with Jest, React Testing Library, and Playwright for PlaylistMiner frontend.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

ManikantaR

ManikantaR/playlistminer

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

SKILL.md

readonly

name	tdd-frontend
description	Implement a Next.js component or page using TDD with Jest, React Testing Library, and Playwright for PlaylistMiner frontend.

TDD Feature Implementation (Next.js)

Implement the requested component or page using TDD.

Step 1: Write Jest Test

Create test file alongside the component: ComponentName.test.tsx
Use React Testing Library: render, screen, userEvent
Test rendering, user interactions, edge cases
Run npm test in src/web/ — confirm tests FAIL

Step 2: Implement Component

Write minimal component to pass tests
TypeScript strict — no any types
Use TanStack Query for API calls via custom hooks in hooks/
Tailwind CSS only — no custom CSS
Server components by default, "use client" only for interactivity
Run npm test — confirm tests PASS

Step 3: E2E Test (for pages)

Add Playwright test in src/web/e2e/ for the user flow
Test the happy path end-to-end
Run npm run test:e2e

Rules

API calls go through hooks, never directly in components
All hooks use the auto-generated OpenAPI client
Check dark mode rendering
Check responsive layout at mobile width

Más de este repositorio

mismo repositorio

categorization-debug

ManikantaR/playlistminer

Debug why a PlaylistMiner video was categorized incorrectly or not categorized, by tracing through all 3 pipeline layers.

2026-05-181

ef-migration

ManikantaR/playlistminer

Create or modify an EF Core migration for PlaylistMiner database schema changes, with review and verification steps.

2026-05-181

tdd-dotnet

ManikantaR/playlistminer

Implement a .NET feature using strict Red-Green-Refactor TDD with xUnit, FluentAssertions, and Moq for PlaylistMiner backend.

2026-05-181

categorization-debug

ManikantaR/playlistminer

Debug why a video was categorized incorrectly or not categorized at all in PlaylistMiner.

2026-05-181

ef-migration

ManikantaR/playlistminer

Create or modify an Entity Framework Core migration for PlaylistMiner database schema changes.

2026-05-181

tdd-dotnet

ManikantaR/playlistminer

Write a new feature using Red-Green-Refactor TDD with xUnit and FluentAssertions for PlaylistMiner .NET backend.

2026-05-181

name	tdd-frontend
description	Implement a Next.js component or page using TDD with Jest, React Testing Library, and Playwright for PlaylistMiner frontend.

TDD Feature Implementation (Next.js)

Implement the requested component or page using TDD.

Step 1: Write Jest Test

Create test file alongside the component: ComponentName.test.tsx
Use React Testing Library: render, screen, userEvent
Test rendering, user interactions, edge cases
Run npm test in src/web/ — confirm tests FAIL

Step 2: Implement Component

Write minimal component to pass tests
TypeScript strict — no any types
Use TanStack Query for API calls via custom hooks in hooks/
Tailwind CSS only — no custom CSS
Server components by default, "use client" only for interactivity
Run npm test — confirm tests PASS

Step 3: E2E Test (for pages)

Add Playwright test in src/web/e2e/ for the user flow
Test the happy path end-to-end
Run npm run test:e2e

Rules

API calls go through hooks, never directly in components
All hooks use the auto-generated OpenAPI client
Check dark mode rendering
Check responsive layout at mobile width