Skip to main content
Back to the field guide

A field guide to the /prism-stack skill

AI Frontend Stack Best Practices

Best practices change per major version. /prism-stack detects React/Vue/Svelte/Next.js version and applies the right guidelines. No Vue 2 advice on Vue 3.

Prism · Frontend/DX7 min readFebruary 2, 2026

Frontend best practices change per major version. React class components were the right answer in 2018 and the wrong one now. Vue 2 Options API is the wrong answer in a Vue 3 codebase. Svelte 5 runes replace Svelte 4 stores in many cases. Generalist tools that do not check the version produce advice that is correct for some other version of the framework, which is the kind of advice that creates technical debt.

The /prism-stack skill detects the major version of the framework in use and applies the right guidelines. React 19 patterns for React 19, Vue 3 Composition API for Vue 3, Svelte 5 runes for Svelte 5, Next.js App Router for Next.js 15+. The output is the patterns and conventions that are current for the version, not for some other version the model was trained on.

How /prism-stack works

The skill reads the project's package.json and source code to detect the framework, the major version, and the patterns currently in use. It produces guidance calibrated to that version: hooks vs classes, Composition vs Options API, runes vs stores, Server Components vs Client Components, App Router vs Pages Router. The guidance includes the rationale per recommendation so the team can apply the same logic to future decisions.

Mixing patterns across versions is more common than skipping versions outright. /prism-stack flags places where the codebase uses an older pattern in a project that has otherwise migrated to the newer one, so the team can clean up incrementally.

Tonone's /prism-stack skill detects the framework's major version and applies the matching best practices.

Install

/prism-stack ships with the Prism agent in Tonone for Claude Code.

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Prism

$ claude plugin install prism@tonone-ai

Frequently asked questions

What does /prism-stack do?
It detects the framework's major version and applies the right best practices for that version.
How do I install /prism-stack?
Install Tonone for Claude Code via tonone.ai/get-started.

Pairs well with