From shipshitdev-library
Enforces React Testing Library best practices with 43 rules across 9 categories including query selection, async handling, anti-patterns, user interactions, and accessibility for writing and reviewing tests.
npx claudepluginhub shipshitdev/skillsThis skill uses the workspace's default tool permissions.
Comprehensive testing guide for React components using Testing Library, designed for AI agents and LLMs. Contains 43 rules across 9 categories, prioritized by impact to guide test writing and code review.
README.mdassets/templates/_template.mdreferences/_sections.mdreferences/a11y-role-queries-verify.mdreferences/a11y-test-aria-states.mdreferences/a11y-verify-focus.mdreferences/anti-container-queries.mdreferences/anti-empty-waitfor.mdreferences/anti-implementation-details.mdreferences/anti-manual-cleanup.mdreferences/anti-redundant-roles.mdreferences/anti-unnecessary-act.mdreferences/assert-accessible-description.mdreferences/assert-have-value.mdreferences/assert-jest-dom-matchers.mdreferences/assert-text-content.mdreferences/assert-visible-over-in-document.mdreferences/async-await-findby.mdreferences/async-findby-over-waitfor.mdreferences/async-no-side-effects-waitfor.mdProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
Analyzes competition with Porter's Five Forces, Blue Ocean Strategy, and positioning maps to identify differentiation opportunities and market positioning for startups and pitches.
Comprehensive testing guide for React components using Testing Library, designed for AI agents and LLMs. Contains 43 rules across 9 categories, prioritized by impact to guide test writing and code review.
Reference these guidelines when:
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Query Selection | CRITICAL | query- |
| 2 | Async Handling | CRITICAL | async- |
| 3 | Common Anti-Patterns | CRITICAL | anti- |
| 4 | User Interaction | HIGH | user- |
| 5 | Assertions | HIGH | assert- |
| 6 | Component Setup | MEDIUM | setup- |
| 7 | Test Structure | MEDIUM | struct- |
| 8 | Debugging | LOW-MEDIUM | debug- |
| 9 | Accessibility Testing | LOW | a11y- |
query-prefer-role - Prefer getByRole over other queriesquery-avoid-testid - Avoid getByTestId as primary queryquery-use-screen - Use screen for queriesquery-label-text-forms - Use getByLabelText for form fieldsquery-role-name-option - Use name option with getByRolequery-get-vs-query - Use getBy for present, queryBy for absentquery-within-scope - Use within() to scope queriesasync-findby-over-waitfor - Use findBy instead of waitFor + getByasync-await-findby - Always await findBy queriesasync-single-assertion-waitfor - Single assertion in waitForasync-no-side-effects-waitfor - Avoid side effects in waitForasync-waitfor-disappear - Use waitForElementToBeRemovedanti-unnecessary-act - Avoid unnecessary act() wrappinganti-manual-cleanup - Remove manual cleanup callsanti-implementation-details - Avoid testing implementation detailsanti-empty-waitfor - Avoid empty waitFor callbacksanti-container-queries - Avoid using container for queriesanti-redundant-roles - Avoid adding redundant ARIA rolesuser-prefer-userevent - Use userEvent over fireEventuser-setup-before-render - Setup userEvent before renderuser-await-interactions - Always await userEvent interactionsuser-keyboard-for-special-keys - Use keyboard() for special keysuser-clear-before-type - Use clear() before retypingassert-jest-dom-matchers - Use jest-dom matchersassert-visible-over-in-document - Use toBeVisible() for visibilityassert-text-content - Use toHaveTextContent() for textassert-have-value - Use toHaveValue() for inputsassert-accessible-description - Use toHaveAccessibleDescription()setup-wrapper-providers - Use wrapper option for providerssetup-custom-render - Create custom render with providerssetup-mock-modules - Mock modules at module levelsetup-fake-timers - Configure userEvent with fake timerssetup-render-hook - Use renderHook for testing hooksstruct-arrange-act-assert - Follow Arrange-Act-Assert patternstruct-one-behavior-per-test - Test one behavior per teststruct-descriptive-names - Use descriptive test namesstruct-avoid-beforeeach-render - Avoid render() in beforeEachdebug-screen-debug - Use screen.debug() to inspect DOMdebug-logroles - Use logRoles to find available rolesdebug-testing-playground - Use Testing Playground for queriesa11y-role-queries-verify - Role queries verify accessibilitya11y-verify-focus - Test focus managementa11y-test-aria-states - Test ARIA states and propertiesRead individual reference files for detailed explanations and code examples:
| File | Description |
|---|---|
| references/_sections.md | Category definitions and ordering |
| assets/templates/_template.md | Template for new rules |
| metadata.json | Version and reference information |