Run any Skill in Manus with one click

tdd-frontend

Stars1

Forks0

UpdatedMay 18, 2026 at 00:31

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

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

ManikantaR

ManikantaR/playlistminer

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·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

More from this repository

same repository

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