Skill155.4k repo starsupdated today

frontend-testing

This skill generates comprehensive Vitest and React Testing Library tests for Dify frontend components, hooks, and utilities. Use it when writing or reviewing test files, improving test coverage, or working with Vitest fixtures and mocking patterns specific to the Dify codebase.

View source Repository: dify

Install in Claude Code

Copy

git clone --depth 1 https://github.com/langgenius/dify /tmp/frontend-testing && cp -r /tmp/frontend-testing/.agents/skills/frontend-testing ~/.claude/skills/frontend-testing

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# Frontend Testing

`web/docs/test.md` is the single policy owner. Read it before changing frontend tests; this skill adds no separate requirements.

1. Identify the observable contract and regression risk.
2. Choose the smallest boundary that includes the behavior owner.
3. Establish the failing case first when practical, then implement one coherent scenario.
4. Run the focused spec before the affected suite and relevant static checks.
5. Report the behavior verified and any remaining browser, visual, or end-to-end risk.

Recommend deleting low-value tests as readily as adding missing behavior coverage. Use `web/docs/test.md` for policy and Web commands; use `packages/dify-ui/docs/testing.md` for Dify UI commands.

More from this repository

backend-code-reviewSkill

Use only when the user explicitly requests a review or audit of backend code under `api/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, frontend code, or backend code outside `api/`.

component-refactoringSkill

Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component --json` shows complexity > 50 or lineCount > 300, when the user asks for code splitting, hook extraction, or complexity reduction, or when `pnpm analyze-component` warns to refactor before testing; avoid for simple/well-structured components, third-party wrappers, or when the user explicitly wants testing without refactoring.

e2e-cucumber-playwrightSkill

Use when writing, changing, or reviewing Cucumber and Playwright tests under `e2e/`, including feature files, step definitions, support code, scenario tags, locators, and assertions. Do not use for Vitest, React Testing Library, backend tests, or generic browser automation outside the E2E suite.

frontend-code-reviewSkill

Use only when the user explicitly requests a review or audit of frontend code under `web/` or `packages/dify-ui/`. Supports pending-change, file-focused, and pasted-diff reviews. Do not use for implementation-only requests, diagnosis without review intent, or backend-only code.

how-to-write-componentSkill

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

karpathy-guidelinesSkill

Lightweight coding guardrails for making focused, simple, and verifiable changes in this repo. Use for all coding work.