Automates React/Next.js frontend development with strict Test-Driven-Development cycles.
npx skills add https://github.com/ITSalt/NaCl --skill nacl-tl-dev-fe
Please help me install this Agent Skill. Skill: nacl-tl-dev-fe Source: https://github.com/ITSalt/NaCl/tree/main/nacl-tl-dev-fe Command: npx skills add https://github.com/ITSalt/NaCl --skill nacl-tl-dev-fe
This skill streamlines frontend development by enforcing a strict Test-Driven Development workflow for building React/Next.js applications, from planning through delivery.
Begin by reviewing the frontend task at .tl/tasks/UC###/task-fe.md and start the RED phase by writing failing RTL tests.
High-intent search queries and answers about installing and using this skill.
To automate a frontend TDD workflow, this skill reads task files like task-fe.md and drives the RED-GREEN-REFACTOR cycle to generate React and Next.js components, pages, and hooks. It strictly enforces writing RTL tests before any UI implementation.
The RED-GREEN-REFACTOR cycle for Next.js App Router components starts by writing failing RTL tests, then building the UI implementation to make tests pass, and finally refactoring the code. This skill automates that exact sequence using MSW-backed tests.
Yes, you need MSW and RTL to test React hooks in this TDD workflow. The skill requires MSW-backed tests and React Testing Library to enforce strict test-driven development before implementing any UI components or pages.
To start frontend TDD for UI tasks, you must provide complete task-fe.md, test-spec-fe.md, impl-brief-fe.md, acceptance.md, and api-contract.md files located within the .tl/tasks/UC###/ directory structure.
Test-driven development with Next.js App Router conventions works by first writing failing RTL tests for your pages and components, then implementing the UI to pass those tests. This skill enforces App Router conventions throughout the entire RED-GREEN-REFACTOR cycle.
After completing the frontend TDD cycle for a React feature, the skill generates a result-fe.md file documenting the completed work and automatically updates the necessary tracking files to finalize the delivery process.
samdaeGenerate spec and architecture markdown files from backend and frontend code.
morodomiStage changes, run pre-commit checks, and commit with a conventional message.
JNZader-VaultAutomate React app testing with Vitest, Testing Library, and MSW for components, hooks, stores, and APIs.
treesus6Automate React Native test-driven development with Jest and RN Testing Library.
