/prism-ui

PrismFrontend & 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.

Install

This skill

Install Prism UI

1. Add to marketplace

$ claude plugin marketplace add tonone-ai/tonone

2. Install this skill

$ claude plugin install prism-ui@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-ui

When to use

When building a new page or web application from scratch where a complete, production-quality implementation is needed rather than a prototype. When the brief calls for a user-facing page with data, multiple states, and all edge cases handled correctly.

Deep dive

AI UI Screen Implementation from a Design Spec

Most AI tools build UIs as prototypes that fall apart under real data. /prism-ui builds production pages with loading, errors, empty states, responsive, and accessibility.

Read the article

More from Prism

All Prism skills

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…

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 UI?

Get Started Back to Marketplace