UX design stack (frontend design + browser QA)
Install a skill or read the field note below to see how we apply this pattern in real Claude Code projects.
For designing, shipping, and validating product UI — distinctive components without the AI-generic aesthetic, plus browser-QA to catch regressions before users do. Run this command to install a skill and start from a working baseline instead of rebuilding the setup from scratch.
Files this command writes (4 files)
.claude/skills/stack-ux/SKILL.md← artifact/SKILL.md.claude/skills/e2e-review/SKILL.md← artifact/skills/e2e-review/SKILL.md.claude/skills/qa/SKILL.md← artifact/skills/qa/SKILL.md.claude/skills/voice-test/SKILL.md← artifact/skills/voice-test/SKILL.md
UX design stack installed. Layer `stack-fullstack` on top once you're past UI exploration.
UX design stack
For designing, shipping, and validating product UI — distinctive components without the AI-generic aesthetic, plus browser-QA to catch regressions before users do.
One line
npx -y frenxt-cables stack stack-ux --force
What it installs
Claude plugins (3):
frontend-design— distinctive, production-grade interface codevercel(shadcn, Turbopack, Next.js App Router) — component library + build toolingsuperpowers— brainstorming discipline for UX exploration
Skills:
e2e-review— visual-correctness audit after UI changes (Playwright/Cypress/Jest)qa— autonomous browser-use agents for golden-path regressionvoice-test— if the UX has voice surfaces (realtime audio, interviews)
When to use this
UI-heavy work: design explorations, component libraries, front-end prototypes, voice UI. Layer stack-fullstack on top once you're past exploration.
When not
Pure agent or backend work → stack-ai-agent or stack-fullstack.
Quick answers
What do I get from this cable?
You get a skill plus a dated field note that explains how we use it in real Claude Code workflows.
How much time should I budget?
Typical effort is 5 min. The cable is marked beginner.
How do I install the artifact?
Run npx frenxt-cables add stack-ux. The install block shows the files it writes and any prerequisites before you run it.
How fresh is the guidance?
The cable is explicitly last verified on 2026-04-18, and includes source links for traceability.
Work with FRE|Nxt
We build the production AI systems we write about.
Cables are the field notes. The playbooks come from client engagements — multi-agent systems, RAG pipelines, and LLM cost cuts that ship and hold up in production. If something here maps to a problem on your roadmap, two ways in:
Audit capacity: 5 slots/month · No pitch deck · NDA on request
Publish your stack to Cables (automated)
A skill that walks Claude Code through publishing your Claude stack to the Cables community in one conversation. No manual repo setup, no hand-written `stack…
Replicate Ragav's stack (skills + plugins + scripts)
Pick the stack that matches what you're building. Each one is a single `npx` command — plugins installed, skills synced, marketplaces configured, no bash scr…
AI agent dev stack (LangGraph + LangSmith)
For building, debugging, and evaluating multi-step LLM agents. The skills that catch the problems traces-first: cache misses, regression in eval scores, trac…