skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Result

Render UI result states with variants, custom figures, and action buttons.

Updated Aug 23, 2026
Search Tags:#ui#feedback#design system#component#result
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-result
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Result
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Result
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-result

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized and visually appealing way to display various result states (success, error, empty, info) within an application, including custom icons and action buttons.

Core Features & Use Cases

  • Variant-based States: Automatically provides default icons for success, error, empty, and info states.
  • Customization: Allows for custom figures (icons/images) and action buttons to be embedded.
  • Use Case: Displaying a "No results found" message with a search icon and a "Clear search" button, or confirming a successful submission with a "Go to dashboard" button.

Quick Start

Use the Result component to display a success message with a button to return to the home page.

Frequently Asked Questions about use-design-system/Result

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

FAQPage Schema
How do I display a success or error result state in my UI?▼

To display a result state in your UI, use a component that renders predefined variants for success, error, empty, and informational messages. It automatically provides default icons and supports custom action buttons for user interaction.

What is the best way to show an empty state message with a custom icon?▼

The best way to show an empty state is using a result component that allows custom figures. You can embed custom icons or images alongside predefined variants and add action buttons like a search reset.

Can I add action buttons to an informational message component?▼

Yes, you can add action buttons to an informational message component. The result component supports embedding custom action buttons alongside the displayed message and variant-based default icons.

How do I style a result component to match my design system?▼

You can style a result component to match your design system by utilizing className-based styling overrides. This allows you to apply custom styles while maintaining the predefined variants for success, error, empty, and info states.

Does the result component support custom figures for different states?▼

Yes, the result component supports custom figures for different states. While it provides default icons for success, error, empty, and info variants, you can override these with custom icons or images to fit your UI.

Related Skills

Explore More Design & Creative Skills→
webdevcodywebdevcody
22

tweak-ui

Clarify and execute minimal UI changes with location, current behavior, and desired behavior.

Community
Basic
simple-platformsimple-platform
1

create-view

Define custom dashboards, record views, and action buttons using SCL syntax.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-button

Apply Canopy Button best-practices guidance to Angular lg-button usage.

Official
Intermediate
kriscendobotkriscendobot
3

native-customizable-form-control-styling

Style native HTML select elements with CSS pseudo-elements and pseudo-classes.

Community
Advanced