/prism-component

PrismFrontend & UI

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.

Install

This skill

Install Prism Component

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install this skill

$ claude plugin install prism-component@tonone-ai

The agent

Install Prism

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install Prism

$ claude plugin install prism@tonone-ai

See all Prism skills

Want all 31 agents across both teams?

Full installation guide

Invoke this skill

Command|$ /prism-component

When to use

When adding a new reusable component to a design system or application that will appear in multiple places. When an existing component is missing states or accessibility attributes. When Form has produced a component spec and you need it implemented correctly in code.

Deep dive

AI React Component Generator (Accessible by Default)

Most AI-generated components miss states and accessibility. /prism-component builds typed, reusable components with every state, ARIA coverage, and keyboard interactions.

Read the article

More from Prism

All Prism skills

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-dashboard

Builds an internal dashboard with data tables that support sorting, filtering, and pagination; detail drawer or modal views; CRUD forms with validation; and search. Designed for internal tooling use cases where density and function matter more than marketing aesthetics.

When engineers or operations teams need a UI for d…

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…

Ready to use Prism Component?

Get Started Back to Marketplace