# Css Testing

> Visual and automated testing strategies for CSS (visual regression, cross-browser, accessibility).

- **Type:** Skill
- **Install:** `agentstack add skill-caraya-agent-skills-css-testing`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [caraya](https://agentstack.voostack.com/s/caraya)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [caraya](https://github.com/caraya)
- **Source:** https://github.com/caraya/agent-skills/tree/main/skills/css-testing

## Install

```sh
agentstack add skill-caraya-agent-skills-css-testing
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# CSS Testing

Purpose: ensure CSS changes are safe, visually correct, and accessible across supported viewports and browsers.

Testing types:
- Unit/DOM assertions: use `@testing-library` + `jest-dom` for style assertions on computed values when deterministic.
- End-to-end (E2E): Playwright or Puppeteer for screenshot captures and interaction flows.
- Visual regression: Percy, Chromatic, Loki, or Playwright Snapshot tests to catch visual regressions.
- Accessibility: axe-core (automated) plus manual audit for keyboard + screen-reader flows.

Color & contrast checks:
- Integrate `color-expert` into visual tests to assert APCA/WCAG thresholds for important text and UI components.
- When programmatically generating palettes for tests, use OKLCH unless `color-expert` suggests another space.

Best practices:
- Use token-driven tests — assert token values produce expected computed CSS rather than hard-coded colors.
- Keep visual baselines stable: lock fonts, viewport sizes, and emulate consistent device pixel ratio in CI.
- For flaky visual diffs, add heuristics: ignore anti-aliased text minor diffs, mask dynamic regions, and use thresholds.

CI recommendations:
- Run unit and accessibility checks on PRs; run visual regression on a nightly job or when visual-impacting files change.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [caraya](https://github.com/caraya)
- **Source:** [caraya/agent-skills](https://github.com/caraya/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-caraya-agent-skills-css-testing
- Seller: https://agentstack.voostack.com/s/caraya
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.