# Frontend Workflow

> A Claude skill from Mallikarjun-Roddannavar/playwright-agentic-automation.

- **Type:** Skill
- **Install:** `agentstack add skill-mallikarjun-roddannavar-playwright-agentic-automation-frontend-workflow`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Mallikarjun-Roddannavar](https://agentstack.voostack.com/s/mallikarjun-roddannavar)
- **Installs:** 0
- **Category:** [AI & ML](https://agentstack.voostack.com/c/ai-and-ml)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Mallikarjun-Roddannavar](https://github.com/Mallikarjun-Roddannavar)
- **Source:** https://github.com/Mallikarjun-Roddannavar/playwright-agentic-automation/tree/main/.agents/skills/frontend-workflow

## Install

```sh
agentstack add skill-mallikarjun-roddannavar-playwright-agentic-automation-frontend-workflow
```

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

## About

# Frontend Workflow Skill

## Purpose
Use this skill when working on React + TypeScript + Vite frontend changes in this repository.

## Applies to
- `frontend/src/**/*`
- `frontend/package.json`
- `frontend/index.html`
- `frontend/vite.config.ts`

## Core rules
- Preserve route behavior:
  - `/login`
  - `/oauth/callback`
  - `/folders`
  - `/folders/:folderId`
  - `/preferences`
- Keep `data-testid` on all interactive elements.
- Keep RBAC UI behavior aligned with backend role rules.
- Keep theme and profile menu behaviors intact.
- Keep toast notifications (`react-toastify`) for async user feedback.

## Standard workflow
1. Update components/pages with minimal diffs.
2. Reuse shared classes (`btn-primary`, `btn-secondary`, `btn-danger`, `icon-btn`, `app-card`, `app-input`).
3. Keep API calls through `src/api.ts`.
4. Ensure new actions have test IDs.
5. Build and verify.

## Styling guidance
- Extend the shared visual system in `frontend/src/index.css` before creating new one-off patterns.
- Preserve the current frontend direction:
  - premium glass shell for chrome and navigation
  - clearer work surfaces for content and CRUD screens
  - cinematic but controlled motion on the home page
- For home-page work specifically:
  - keep content centered on app practice flows, storage, folders/files, and roles
  - avoid drifting into generic product-marketing copy
  - avoid drifting into internal automation-framework copy unless the user explicitly wants that
  - prefer scroll, wheel, pointer, and reveal effects that support the existing cards instead of introducing new decorative panels by default
  - respect readability first; motion is secondary

## Validation commands
Run from `frontend/`:

```bash
npm install
npm run build
npm run dev
```

## Playwright-focused checklist
- Interactive controls have stable test IDs.
- Success/error toasts remain visible and deterministic.
- Deep links continue to work in new tab and direct navigation.
- Polling/refresh behavior remains available on folder and file views.

## Guardrails
- Do not remove existing test IDs without explicit request.
- Avoid one-off button styles; use shared button classes.
- Keep API auth as Bearer token-based.

## Verification Marker (Temporary)
- If this skill is applied in a run, include this exact phrase once in a progress update:
  - `frontend-workflow skill applied`

## Source & license

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

- **Author:** [Mallikarjun-Roddannavar](https://github.com/Mallikarjun-Roddannavar)
- **Source:** [Mallikarjun-Roddannavar/playwright-agentic-automation](https://github.com/Mallikarjun-Roddannavar/playwright-agentic-automation)
- **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-mallikarjun-roddannavar-playwright-agentic-automation-frontend-workflow
- Seller: https://agentstack.voostack.com/s/mallikarjun-roddannavar
- 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%.