skills.rest
tonone-ai
tonone-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

prism-component

Create reusable UI components with typed props and accessibility states.

69|8|Updated Mar 16, 2026
Search Tags:#ui#accessibility#frontend#component#design-system#typing
One-click install
npx skills add https://github.com/tonone-ai/tonone --skill prism-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prism-component
Source: https://github.com/tonone-ai/tonone/tree/main/team/prism/skills/prism-component
Command: npx skills add https://github.com/tonone-ai/tonone --skill prism-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building consistent, accessible UI components across a codebase with strong typing.

Core Features & Use Cases

  • Typed props API with discriminated unions for variants
  • Accessibility-first states (default, loading, error, empty, focus, hover)
  • Composition-friendly API using slots/children and exportability
  • Design-system alignment and easy theming; testable in isolation

Quick Start

Define a component API with typed props, implement all states, and export it in your UI library.

Frequently Asked Questions about prism-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build accessible UI components with a strong typed API?▼

To build accessible UI components with a typed API, define props using discriminated unions for variants, implement accessibility-first states like default and loading, and export the component for composition.

Why does my frontend design system need components with comprehensive state coverage?▼

Frontend components need comprehensive state coverage to standardize behavior across default, loading, error, empty, focus, hover, and disabled conditions, ensuring consistent user experiences and isolated testing.

What is the best way to standardize component composition in a frontend design system?▼

The best way to standardize component composition is using a composition-friendly API with slots and children, allowing components to be exported, themed, and tested in isolation across your codebase.

Can I use typed props and discriminated unions for component variants in my UI library?▼

Yes, you can use typed props and discriminated unions for component variants to create a strong, typed API that standardizes component behavior and ensures documentation-friendly usage patterns.

Does building accessible UI components require handling specific states like empty or error?▼

Building accessible UI components requires handling default, loading, error, empty, focus, hover, and disabled states to ensure comprehensive state coverage and robust accessibility-first behavior.

When should I not use slots and children for component composition?▼

You should avoid using slots and children for component composition when a component requires strict prop-only inputs without nested structures, though this approach generally limits flexible design-system alignment and exportability.

Related Skills

Explore More Software Engineering Skills→
yonatangrossyonatangross
3

design-system-starter

Generate design tokens, atomic components, and documentation templates for UI systems.

Community
Advanced
chrysaliscatchrysaliscat
1

Web Test Case Generator

Generate unit and Playwright E2E test specifications for Vue.js and React components.

Community
Intermediate
luyi985luyi985

tagged-unions

Model complex state logic using discriminated unions with literal tags.

Community
Advanced
mgd34msumgd34msu
4

chakra-ui

Provides reusable, themeable, accessible React UI components for Chakra UI v3 projects.

Community
Intermediate