How do I install /prism-audit?

Install Tonone for Claude Code via tonone.ai/get-started.

AI Frontend Audit (Bundle, Accessibility, Performance)

Frontends accumulate weight. Dependencies are added and never removed. Components are created and never deduplicated. Accessibility falls behind because the team is busy shipping features. Lighthouse scores drift downward because nobody is watching. Each individual change is small; the cumulative effect is the application that loads slowly, fails accessibility checks, and has six button components when it should have one.

The /prism-audit skill audits the frontend across five dimensions: bundle size with breakdown by dependency, unused dependencies that can be removed, WCAG accessibility compliance, Lighthouse performance metrics, and component quality versus design system consistency. The output is a ranked finding list with file-level remediation.

What the audit covers

Bundle: total size, breakdown per chunk, biggest contributors. Unused: dependencies imported but not used, dependencies that could be replaced with smaller alternatives. Accessibility: axe-core scan, WCAG AA findings, focus management issues. Lighthouse: Core Web Vitals, performance, SEO, accessibility, best practices. Components: duplicates that could be merged, components that bypass the design system.

How /prism-audit works

The skill runs the bundle analyzer, dependency scanner, axe-core, and Lighthouse, then cross-references against the design system. Findings are ranked by impact (LCP improvement, accessibility severity, bundle reduction). Each finding has a remediation step and the expected effect.

Tonone's /prism-audit skill audits the frontend for bundle size, unused dependencies, WCAG accessibility, Lighthouse metrics, and design system consistency.

PrismFrontend

/prism-audit

Frontend audit: analyzes bundle size to identify what is driving it, checks for unused dependencies that should be removed, runs an accessibility audit against WCAG standards, measures Lighthouse performance metrics, and reviews component quality for consistency with the design system.

When frontend performance is visibly slow or Light…

PrismFrontend

/prism-ui

Builds a production-ready UI from scratch: pages with real data fetching, skeleton loading states, error boundaries, empty states, responsive layout across breakpoints, and keyboard navigation. Follows accessibility standards and uses the project's existing component patterns rather than introducing new ones.

When building a new page or web application from s…

PrismFrontend

/prism-component

Builds a reusable, accessible, typed UI component with every state handled: default, hover, focus, active, disabled, loading, error, and any domain-specific states. Includes prop documentation, usage examples, keyboard interaction patterns, and ARIA attribute coverage.

When adding a new reusable component to a design s…

Install

/prism-audit 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-audit do?: It audits the frontend across bundle size, unused dependencies, WCAG accessibility, Lighthouse metrics, and component quality with ranked remediation.
How do I install /prism-audit?: Install Tonone for Claude Code via tonone.ai/get-started.