GSAP for React
greensock/gsap-skills
Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.
A skill your agent uses when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per…
Install Component Testing
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install makifbaysal/tasktrooper component-testing --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .claude/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .claude/skills/component-testing && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .claude/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testingType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install makifbaysal/tasktrooper component-testing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .agents/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .agents/skills/component-testing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .agents/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install makifbaysal/tasktrooper component-testing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .cursor/skills/component-testing && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .cursor/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/makifbaysal/tasktrooper.git --path catalog/agents/frontend-developer/skills/component-testing--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install makifbaysal/tasktrooper component-testing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .gemini/skills/component-testing && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .gemini/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install makifbaysal/tasktrooper component-testingInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .github/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .github/skills/component-testing && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .github/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add makifbaysal/tasktrooper --skill component-testing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install makifbaysal/tasktrooper component-testing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/makifbaysal/tasktrooper.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/catalog/agents/frontend-developer/skills/component-testing .opencode/skills/component-testing && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "component-testing" agent skill from https://github.com/makifbaysal/tasktrooper/tree/main/catalog/agents/frontend-developer/skills/component-testing into .opencode/skills/component-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "component-testing", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
component-testing- GitHub stars
- 109
- Token cost
- ~1.2k tokens
- SKILL.md length
- 540 words
- Files
- 1
- Skills in repo
- 99
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
A skill your agent uses when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per…
- Changing any React component - React Testing Library tests are behavior-focused (byRole first)
- SKILL.md covers Overview, Rules, Worked Example and Common Mistakes, plus 1 more section
- Calls npm
- Assert on accessible output
What it does
Component Testing is an agent skill from makifbaysal/tasktrooper. Use when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per test, and run in npm test
Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering React components and Accessibility. It works with Testing Library and npm. The repository describes itself as: Local-first agent platform: board + role agents + agent CLI runs (Claude Code, Cursor, Antigravity, OpenCode) or local and API models (Ollama, LM Studio), all on your own Mac. The licence is Apache-2.0.
When your agent uses it
- Changing any React component - React Testing Library tests are behavior-focused (byRole first)
- Assert on accessible output
- One behavior per test
- Run in npm test
Example prompts
- “/component-testing”
What it can do on your machine
Read from SKILL.md and the folder at commit 09f6258. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Component Testing loads about 1.2k tokens when it runs. Until then it costs about 55 tokens; SKILL.md has 540 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from makifbaysal/tasktrooper at commit 09f6258, republished under its Apache-2.0 licence (© makifbaysal). 540 words, ~1,163 tokens.
Download SKILL.mdSave it as
.claude/skills/component-testing/SKILL.md (or your agent's skills folder).- name
- component-testing
- description
- Use when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per test, and run in npm test
- category
- testing
- tech_stack
- React
Component Testing (React Testing Library)
Overview
A component test that queries by data-testid or asserts on internal state proves the implementation didn't change, not that the component works for a user. React Testing Library tests must exercise the component the way a user (and a screen reader) does: find things by role/label/text, interact with them, and assert on what actually rendered.
Core principle: Test behavior, not implementation. If a refactor that keeps the same user-facing behavior breaks the test, the test is coupled to the wrong thing.
Rules
- Query priority:
byRolefirst. PrefergetByRole(with{ name: ... }) overbyLabelText/byText, and both overbyTestId.byTestIdis a last resort for a node with no accessible role or text — reach for it only when nothing else identifies the element, and treat its presence as a smell worth a follow-up (usually a missing label/role, per accessibility-basics). user-eventoverfireEvent.fireEvent.clickfires one DOM event;userEvent.clicksimulates the real sequence of events a browser produces (focus, pointer, keyboard) and catches bugsfireEventcannot (e.g. a control that only works because it happens to be focused). Alwaysawait userEvent.setup()/await user.click(...).- Assert on accessible, user-visible output. Check rendered text, roles,
aria-*state (aria-expanded,aria-invalid,aria-disabled), and focus — not component internals, prop values, or CSS class names. - One behavior per test. A test named for the behavior it proves (
"shows a validation error when the field is left empty"), not"renders correctly". Multiple assertions are fine as long as they all check the same behavior; a second, unrelated behavior gets its own test. - No implementation-detail mocking. Mock the network/API boundary (MSW or the API client module), never a child component or a hook's internals just to make the test pass — that tests the mock, not the component.
- Wire it into
npm test. New component test files must run under the project's existingnpm testscript (Vitest/Jest) with no extra flags — a suite that only runs when invoked by hand is not part of the pipeline (see ci-cd-pipeline-authoring). - TDD still applies (see tdd-workflow): write the test against the intended behavior first, watch it fail, then implement.
Show full SKILL.md (192 more words)Show less
Worked Example
// ❌ implementation-coupled: breaks on any internal refactor, proves nothing
// about what the user sees
test("renders correctly", () => {
render(<LoginForm />);
expect(screen.getByTestId("submit-btn")).toBeInTheDocument();
});
// ✅ behavior-focused: fails only when the real user-facing behavior breaks
test("shows a validation error when submitting with an empty email", async () => {
const user = userEvent.setup();
render(<LoginForm />);
await user.click(screen.getByRole("button", { name: /sign in/i }));
expect(screen.getByRole("alert")).toHaveTextContent(/email is required/i);
expect(screen.getByRole("textbox", { name: /email/i })).toHaveAttribute("aria-invalid", "true");
});The second test finds the button and field the way a user would (by their accessible name), drives them with user-event, and asserts on what actually appears — it stays green through any internal rewrite that keeps this behavior.
Common Mistakes
- Querying by
data-testidwhen a role/label query would work — usually a sign the component is missing an accessible name in the first place. - Using
fireEventfor anything a real user would do with a mouse or keyboard. - One giant test asserting the whole component "renders correctly" instead of named tests per behavior.
- Snapshot tests as the only coverage — they fail on any markup change, meaningful or not, and don't document behavior.
- Mocking a child component to isolate the parent, hiding real integration bugs.
- A new
*.test.tsxfile thatnpm testnever picks up (wrong glob, wrong location) — decoration, not a gate.
Red Flags
screen.getByTestId(...)with no comment on why no role/label query worked.fireEventanywhere auser-eventequivalent exists.- A test file with only snapshot assertions.
- Assertions on a component's props/state instead of its rendered output.
- Test suite green locally but
npm testin CI never runs the new file.
© makifbaysal, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in catalog/agents/frontend-developer/skills/component-testing of makifbaysal/tasktrooper.
Open the folder on GitHubat commit 09f6258
Compare with similar skills
Component Testing next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Component Testing this skillmakifbaysal/tasktrooper | 109 | — | ~1.2k | Automated safety check: Pass | Apache-2.0 | |
| GSAP for Reactgreensock/gsap-skills | 16k | 4 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Blog ChartAgriciDaniel/claude-blog | 2.3k | 1 repos | ~2.4k | Automated safety check: Pass | MIT | |
| Connect Component To Figmadequelabs/cauldron | 129 | — | ~2k | Automated safety check: Pass | MPL-2.0 | |
| A11y Auditscaleway/ultraviolet | 127 | — | ~979 | Automated safety check: Pass | Apache-2.0 | |
| Acarshub Design Languagesdr-enthusiasts/docker-acarshub | 117 | — | ~1.1k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Blog Chart
AgriciDaniel/claude-blog
Generate dark-mode-compatible inline SVG data visualization charts for blog posts.
Connect Component To Figma
dequelabs/cauldron
Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.
A11y Audit
scaleway/ultraviolet
Audit components for accessibility. An agent skill from scaleway/ultraviolet.
Acarshub Design Language
sdr-enthusiasts/docker-acarshub
Use ONLY when working in the docker-acarshub repository AND building UI -- React components, SCSS modules, theme variables, accessibility, mobile responsiveness, Catppuccin color usage, Zustand…
Framer Component Best Practices
framer/plugins
Best practices for building and improving React code components in Framer, a no-code website builder.
More from makifbaysal/tasktrooper
All 99 skills in this repoAPI Contract Testing
makifbaysal/tasktrooper
A skill your agent uses when a task adds or changes an HTTP endpoint, its request/response shape, status codes, auth or error format - the request matrix, curl templates and what counts as a…
Acceptance Criteria Gwt
makifbaysal/tasktrooper
A skill your agent uses when writing acceptance criteria for a task - express each as an observable Given/When/Then that QA can execute, including negative cases
Accessibility Check
makifbaysal/tasktrooper
A skill your agent uses when a task changes any screen, form, dialog, menu or control - Lighthouse/axe scan of the changed screens, a keyboard walk, and the thresholds that fail a task
Analiz Gate
makifbaysal/tasktrooper
A skill your agent uses when deciding whether a request needs an analiz task before implementation - the conditions that require the architect's analysis versus going straight to implementation
Analiz HTML Report
makifbaysal/tasktrooper
A skill your agent uses when you write or revise the analiz deliverable - the ONE self-contained HTML report (spec and plan as sections) a human reviews passage by passage
Analiz Human Review Gate
makifbaysal/tasktrooper
A skill your agent uses when you finish an analiz report - the human must approve the analysis before any implementation task is created, via the analizreview column
Related
Works with
Categories
Questions about Component Testing
What does Component Testing do?
A skill your agent uses when writing or changing any React component - React Testing Library tests are behavior-focused (byRole first), use user-event, assert on accessible output, one behavior per…. Component Testing is an agent skill from makifbaysal/tasktrooper.
When should I use Component Testing?
Component Testing fits situations like: changing any React component - React Testing Library tests are behavior-focused (byRole first); assert on accessible output; one behavior per test; run in npm test.
How do I install Component Testing in Claude Code?
Run `npx skills add makifbaysal/tasktrooper --skill component-testing -a claude-code`. Or copy the skill folder (catalog/agents/frontend-developer/skills/component-testing in makifbaysal/tasktrooper) into .claude/skills/component-testing in your project. Claude Code loads it when a task matches its description.
How do I install Component Testing in Codex?
Run `npx skills add makifbaysal/tasktrooper --skill component-testing -a codex`. Or copy the skill folder (catalog/agents/frontend-developer/skills/component-testing in makifbaysal/tasktrooper) into .agents/skills/component-testing in your project. Codex loads it when a task matches its description.
Can I use Component Testing in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add makifbaysal/tasktrooper --skill component-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/component-testing, .gemini/skills/component-testing, .github/skills/component-testing and .opencode/skills/component-testing in your project.
What does Component Testing need to run?
Going by SKILL.md and its folder, Component Testing needs the command-line tools its instructions call (npm).
Does Component Testing access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Component Testing safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Component Testing use?
Component Testing is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Component Testing use?
About 1.2k tokens (SKILL.md is roughly 4.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Component Testing?
Skills that share tags, products or a category with Component Testing: GSAP for React (greensock/gsap-skills, 16k stars), Blog Chart (AgriciDaniel/claude-blog, 2.3k stars), Connect Component To Figma (dequelabs/cauldron, 129 stars) and A11y Audit (scaleway/ultraviolet, 127 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Component Testing?
makifbaysal (a GitHub user) maintains it in makifbaysal/tasktrooper, which has 109 GitHub stars. The repository holds 99 skills in this directory. The repository was last updated on October 7, 2026.
Source: makifbaysal/tasktrooper on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.