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
Use auto mode, not --dangerously-skip-permissions
Two flags promise to stop Claude Code from pausing at every tool call. One of them reads your settings, honours your allowlist, and refuses to run anything g…
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 scri…