Fec tdd workflow
frontend-craft is a universal frontend plugin that brings the same opinionated engineering standards to all 15 AI coding assistants.
npx -y skills add bovinphang/frontend-craft --skill fec-tdd-workflowAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 19 stars19 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Use when implementing new frontend behavior, fixing bugs, or refactoring logic where tests can describe the expected behavior first. Apply to components, hooks/composables, utilities, API clients, route guards, or user workflows; Chinese triggers include TDD, test-driven, write tests first, red-green refactoring, regression testing.
SKILL.md
3.1 KB, as published. Nobody here has run it
Front-end TDD workflow
Purpose
Use the rhythm of "write failing tests first, then implement the minimum code, and then refactor" to deliver front-end functions to avoid supplementing coverage only after implementation.
Procedure
- Identify observable behaviors: UI, component contracts, hook/composable return values, route guard results, API client output or error status that users can see.
- First write a minimum failure test:
- Pure logic first unit testing.
- Prioritize component interaction Testing Library / Vue Test Utils.
- Prioritize critical processes across pages Playwright/Cypress.
- Run the test and confirm that the failure reason is correct and should come from behavior that has not yet been implemented, rather than a syntax, import, or test environment error.
- Write the minimum implementation that can just pass the test, and do not expand the scope easily.
- Rerun the test and confirm it turns green.
- Refactor naming, boundaries and duplication logic while keeping tests passing.
- Fix bugs and retain regression tests that can reproduce the problem.
- Only one observable behavior is expanded in each round; new requirements, new boundaries and new abnormal paths enter the next round respectively.
Prove-It Pattern
When fixing a defect, make the test fail first, then make it pass. If it cannot fail first, it means that the test does not cover the original problem, and the input, assertion or test level needs to be narrowed.
Frontend Test Selection
| Risk | Preferred Test |
|---|---|
| utils, schema, status calculation | unit testing |
| hooks / composables | unit or lightweight integration testing |
| Component props, emits, interactions, status | Component testing |
| Router, Provider, Store collaboration | Lightweight integration testing |
| Login, payment, permissions, key CRUD | E2E testing |
Constraints
- Do not introduce new testing frameworks for the sake of TDD that are not used by the project and whose benefits are not clear.
- Does not test implementation details, private state, or fragile DOM structures.
- Don’t treat E2E as the default answer for all risks; prioritize the test layer closest to the risk.
- If the existing warehouse does not have testing infrastructure, output the minimum test implementation suggestions first, and then ask the user to confirm whether to introduce it.
- Do not refactor at the same time during the red light stage; prove the problem first, then make minimal repairs, and then organize the structure.
Expected Output
- At least one fail-then-pass test covering the new or fixed behavior.
- Implementation is kept to a minimum scope and refactoring is done only after the tests pass.
- Summarize the test commands run, behaviors covered, and risks not covered.