UI Security Review Skill: Catch Frontend Risks Before Merge

Where this fits

You just got a PR that adds a client-side file preview feature: it renders user-supplied HTML, reads a token from localStorage, and fetches a different-origin API. The code works, but you need to know whether it is safe to merge. ui-secure-review gives an agent a focused checklist for auditing UI changes with a security-first lens, turning 'look at this frontend' into a structured assessment.

Why agents benefit

• It maps changed files and ranks them by risk, so the agent focuses on auth, routing, and rendering paths rather than CSS.
• It detects concrete sinks like dangerouslySetInnerHTML, innerHTML, eval, and unsafe URL assignment before a human reviewer has to read the diff.
• It traces input to render, confirming exploitability instead of reporting generic vulnerabilities.
• It reports findings with file and line references in severity order, so the agent can communicate exactly what to fix.
• It suggests minimal safe fixes and regression tests, making the review actionable in the same conversation.

Practical scenarios

React PR with dangerouslySetInnerHTML

An agent reviews a comment component that uses dangerouslySetInnerHTML to render message bodies. It identifies an XSS path from an unsanitized API field, then suggests using a sanitizer library and an escape hatch regression test.

OAuth callback token leakage

A PR adds a popup-based OAuth flow with token handling in window.opener and postMessage. The agent checks for missing origin validation and discovers a token-leak path where any parent window can receive the callback payload.

Vue dashboard client-side authorization

A Vue admin dashboard hides buttons based on roles stored in localStorage. The agent flags this as a client-side authorization gap, confirms that the real enforcement is missing on the API layer, and reports the exact guard to remove or secure.

Add it to your agent workflow

Install the skill with:

npx skills add LazyAGI/LazyMind --skill ui-secure-review

Then point the agent at the code:

Review the UI security of this PR:
- src/components/UserProfile.tsx
- src/hooks/useSession.ts
Include confirmed risks, severity, and minimal fixes.

The agent will map the changed files, scan for high-risk patterns, and return an actionable report.

Compare before adopting

Compare this skill with alternatives like Semgrep rules, ESLint security plugins, or your own manual checklist. Evaluate whether the agent's structured workflow and severity-ranked findings fit your review process better than static analysis alone. Also check repo freshness and maintainer responsiveness; the GitHub project has 74 stars, so community interest is early but small. The skill listing at https://www.openagentskill.com/skills/lazyagi-ui-secure-review is a useful reference point for how it is positioned.

Why it is worth tracking

The skill's value is not in advanced sophistication but in packaging the right questions into a repeatable agent workflow. Its quality signals are modest: 74 stars and a single-author project, so monitor issue resolution and update cadence. When UI security review becomes a recurring step in your agent pipeline, that is the moment to evaluate this skill seriously.