frontend-testing
Automates the generation of Vitest and React Testing Library tests for the Dify project.
Install
mkdir -p .claude/skills/frontend-testing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/692" && unzip -o skill.zip -d .claude/skills/frontend-testing && rm skill.zipInstalls to .claude/skills/frontend-testing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Generate Vitest + React Testing Library tests for Dify frontend components, hooks, and utilities. Triggers on testing, spec files, coverage, Vitest, RTL, unit tests, integration tests, or write/review test requests.Key capabilities
- →Generate Vitest unit tests
- →Create React Testing Library specs
- →Analyze test coverage
- →Review existing test files
- →Validate frontend component behavior
How it works
It follows established Dify frontend testing conventions to generate and review tests using Vitest and React Testing Library within the project workspace.
Inputs & outputs
When to use frontend-testing
- →Write unit tests for components
- →Generate tests for React hooks
- →Review existing spec files
- →Analyze test coverage
About this skill
Frontend Testing
Read the testing policy for the package that owns the changed tests:
web/:web/docs/test.mdowns Web test boundaries, environments, and commands.packages/dify-ui/:packages/dify-ui/docs/testing.mdowns primitive test boundaries, environments, Storybook, and commands.
This skill adds no parallel policy or check sequence. Follow the selected owner's requirements, including its validation commands. Recommend deleting low-value tests as readily as adding missing behavior coverage, and report the contract verified and any material verification gap.
When not to use it
- →Backend API testing
- →End-to-end testing with Playwright
Prerequisites
Limitations
- →Restricted to Dify frontend workspace
- →Requires adherence to project test documentation
How it compares
It is specifically tuned for the Dify frontend architecture and testing standards.
Compared to similar skills
frontend-testing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| frontend-testing (this skill) | 11 | 4mo | Review | Intermediate |
| feature-flags | 6 | 8mo | Review | Intermediate |
| react-web | 1 | 5mo | Review | Intermediate |
| expect | 0 | 5mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by langgenius
View all by langgenius →You might also like
feature-flags
Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
react-web
alinaqi
React web development with hooks, React Query, Zustand
expect
zakad00e2
Use when editing .tsx/.jsx/.css/.html, React components, pages, routes, forms, styles, or layouts. Also when asked to test, verify, validate, QA, find bugs, check for issues, or fix expect-cli failures.
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.