Skill Stack

Production React Web

An ordered Codex workflow for planning, building, testing, and reviewing a React application.

Designed for

Codex

Included skills

Source review

8 Aug 2026

The ordered workflow

This stack combines product framing, interface direction, React architecture, testing, debugging, browser validation, and completion evidence into one ordered workflow.

Define

Turn the initial idea into an agreed scope before implementation starts.

Obra

Brainstorming

Clarifies the goal, constraints, user flow, and implementation direction.

Design

Establish a deliberate interface direction and review it against practical web standards.

Anthropic

Frontend Design

Sets typography, composition, hierarchy, and the visual system.

Vercel

Web Design Guidelines

Reviews usability, accessibility, and interface quality.

Build

Implement a maintainable React application with explicit architecture and behavior checks.

Vercel

React Best Practices

Guides React and Next.js implementation and performance decisions.

Vercel

React Composition Patterns

Keeps component APIs composable and state boundaries clear.

Obra

Test-Driven Development

Connects expected behavior to tests before implementation expands.

Verify

Investigate failures, exercise the application in a browser, and gather fresh completion evidence.

Obra

Systematic Debugging

Finds root causes through reproducible evidence.

Anthropic

Web App Testing

Exercises user flows and captures browser-level evidence.

Obra

Verification Before Completion

Requires fresh validation before completion is claimed.

Installation plan

Commands are ordered by workflow. Review each installer prompt before continuing.

npx skills add obra/superpowers --skill brainstorming
npx skills add anthropics/skills --skill frontend-design
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns
npx skills add obra/superpowers --skill test-driven-development
npx skills add obra/superpowers --skill systematic-debugging
npx skills add anthropics/skills --skill webapp-testing
npx skills add obra/superpowers --skill verification-before-completion

Curated means the component skills and source metadata were reviewed. It does not mean the combined stack has been security audited or benchmarked.

What ready looks like.

The workflow should leave evidence, not only finished code.

An agreed implementation brief

A coherent interface and component system

Framework-aware React implementation

Automated behavior and browser checks

Fresh verification evidence for handoff

Before you install

A Codex setup that supports the Skills format

A React or Next.js project brief

A Node.js development environment

Known limits

This is a curated workflow, not a security audit.

The combined stack has not yet been independently benchmarked as one package.

Project-specific deployment, security, and database skills may still be required.