Human Experience

Vision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.

7 stars 1 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add andrew-shwetzer/human-experience --skill human-experience
Manual install
git clone --depth 1 https://github.com/andrew-shwetzer/human-experience.git /tmp/human-experience
mkdir -p ~/.claude/skills
cp -r /tmp/human-experience/. ~/.claude/skills/human-experience

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# /human-experience -- Vision-Powered UX Simulation Engine v2

You are a UX testing lab compressed into a single agent. You don't guess what a UI looks like from code. You **render it in a real browser, screenshot it, click through it, and analyze what you see.** Every judgment is calibrated against empirical UX research AND verified against actual rendered output.

Code analysis tells you what SHOULD happen. Vision analysis tells you what ACTUALLY renders. Discrepancies between the two are findings.

## What This Is

A step-by-step simulation of real humans using a UI, grounded in:
1. **Actual rendered screenshots** at multiple viewports (mobile, tablet, desktop)
2. **Interactive testing** via Playwright (clicking buttons, filling forms, triggering states)
3. **Empirical UX research** from `ux-research.md` (quantified thresholds, not opinions)
4. **Video recording** of full interaction sessions
5. **Automated QA** (error states, empty states, edge cases)
6. **CTA funnel mapping** (follow every link, screenshot destinations, detect signup forms)
7. **Signup flow testing** with AgentMail (create temp inbox, fill signup, verify confirmation email)
8. **Multi-page flow runner** (script user journeys across page navigations)
9. **Animation-aware hover** (waits for CSS transitions/animations before capturing)

## What This Is NOT

- Not a code review
- Not a test suite (use actual tests)
- Not a design critique from a designer's perspective
Read the full skill on GitHub

Details

Skill name
human-experience
License
MIT
Repo updated
10 March 2026

FAQ

What does the Human Experience skill do?

Vision-powered UX simulation engine. Opens UIs in a real browser, takes screenshots, clicks through flows, records video, and analyzes everything through Claude's vision + empirical UX research. Replaces a 1000-person user testing panel with automated multi-viewport, multi-persona, interactive analysis. Karpathy-style ratchet loop for iterative perfection.

How do I install the Human Experience skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add andrew-shwetzer/human-experience --skill human-experience. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Human Experience popular?

It lives in andrew-shwetzer/human-experience, which has 7 GitHub stars and 1 forks.

Related skills

Linkedin Hdr Logo

8

Adamodigi/linkedin-hdr-logo

Convert a logo into an HDR JPEG whose whites glow brighter than the screen's normal white, in the one format that survives LinkedIn's image processing (Rec2020 PQ ICC profile JPEG). Use this skill whenever the user wants a logo's white to look extra bright, glowing, or HDR on LinkedIn or on social profiles, mentions the "LinkedIn HDR logo" effect, says their HDR upload loses its glow after LinkedIn processes it, or asks to make a logo "pop", "glow", or "defy screen brightness". Also use it when the user gives a logo file and asks to boost, expose, or brighten its whites for LinkedIn.

Frontend & Design

Compliance Auditor

8

FuzulsFriend/compliance-auditor

Use this skill whenever the user asks for a privacy policy, terms of service, cookie policy, accessibility statement, GDPR / CCPA / COPPA / Israel PPL / UK GDPR review, sub-processor list, or any "make my site compliant" task. Also trigger when the user mentions Privacy Policy, Terms, ToS, ToU, "legal pages", compliance audit, data processing agreement, DPA, DPIA, consent flow, cookie banner, CAN-SPAM footer, data retention, breach-notification, or regulator names (EDPB, ICO, CPPA, FTC, Israeli PPA). The skill runs a deterministic multi-agent pipeline - researches primary-source regulator requ

Frontend & Design

Shain Dls

8

Dishain/Shain-Design-System-Skill

Token-based design system skill for Figma + code handoff. Use whenever working with Figma components, design tokens, color variables, token migration, component creation, design-to-code handoff, or DS audits. Trigger on: design system, DS, DLS, tokens, figma variables, component spec, token naming, token hierarchy, which color to use, variant properties, theme config, dark mode. Even for "which color should I use" or "create a component" — use this skill.

Frontend & Design

Motion Ref

7

joepUI/motion-ref-skill

UI 动效参考库,帮你给产品加上合适的动画。不需要懂动效 — 描述你的产品场景(页面加载慢、用户点了没反应、想让页面高级一点),直接推荐方案 + 代码。触发词:页面没动画、交互没反馈、怎么加动效、让页面动起来、加载太慢怎么办、想让产品高级一点、motion ref。

Frontend & Design

Wcss Slurm

8

dawidlinek/slurm-wcss-skill

Use this skill for any HPC task on the WCSS site in Wrocław - the Bem2 and Lem clusters (partitions like bem2-cpu-short, lem-gpu-short), login node ui.wcss.pl, grants and PD storage from KDM / e-science.pl. Trigger on any mention of WCSS, KDM, Bem2, Lem, ui.wcss.pl, a PD directory, $PDDIR, finished_jobs, a Wrocław or Polish supercomputer, or a job ID on that site, whatever the question is about - writing sbatch, MPI, array or GPU (H100) jobs, CPU-hours or GPU-hours left on a grant service, whether a job fits, a job PENDING with QOSGrpCPUMinutesLimit or killed or failed, results in $TMPDIR afte

Frontend & Design

Brand Yml

7

stephenturner/skill-brand-yml

Create a _brand.yml file for Quarto projects that captures brand colors, typography, and identity in a structured YAML format. Use this skill whenever the user mentions _brand.yml, brand.yml, Quarto branding, brand identity for Quarto, or wants consistent colors and fonts across Quarto documents, websites, presentations, or Shiny apps. Also trigger when the user asks to extract brand colors or fonts from a website, PDF brand guidelines, or style guide for use with Quarto. Even if the user just says "set up my brand" or "make my Quarto docs match our brand," this is the right skill.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.