docyrus-app-ui-design

Name: docyrus-app-ui-design
Availability: InStock
Author: Docyrus

Select and apply UI components from shadcn, diceui, animate-ui, docyrus-ui, and reui libraries.

13|Updated Feb 14, 2026

Search Tags:#ui-design #ui-patterns #tanstack-form #docyrus #component-selection #library-catalog #editable-record

Ready to run

npx skills add https://github.com/Docyrus/agent-skills --skill docyrus-app-ui-design

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: docyrus-app-ui-design
Source: https://github.com/Docyrus/agent-skills/tree/main/skills/docyrus-app-ui-design
Command: npx skills add https://github.com/Docyrus/agent-skills --skill docyrus-app-ui-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill helps design and assemble production-grade UI components for Docyrus React applications by providing a centralized catalog, clear design rules, and practical patterns.

Core Features & Use Cases

Maintains a curated catalog of components from shadcn, diceui, animate-ui, docyrus-ui, and reui, with recommended defaults.
Provides patterns for item creation flows, detail views, inline editing, dashboards, navigation, and data presentation.
Includes reference guides for component selection, icon usage, and a comprehensive catalog to accelerate UI development.

Quick Start

Instruct the AI to design a Docyrus UI screen by selecting components from the catalog and applying the documented patterns.

Frequently Asked Questions about docyrus-app-ui-design

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

FAQPage Schema

How do I select the right UI components for a React dashboard?▼

Building React forms with inline editing requires structured patterns for editable records. This skill provides inline-editing patterns and TanStack Form integration guidance, detailing item creation flows and detail views to ensure production-grade form interactions.

Does this UI component strategy work with shadcn and animate-ui libraries?▼

Yes, this UI component strategy integrates with shadcn, diceui, animate-ui, docyrus-ui, and reui libraries. It maintains a curated catalog of components from these libraries, providing reference guides to accelerate UI development within the Docyrus React application environment.

What is the best way to structure an item creation flow in a React application?▼

The best way to structure item creation flows is by applying documented UI patterns for detail views and editable records. This skill provides practical patterns for item creation flows, navigation, and data presentation to assemble production-grade React UI components.

How do I design a React data table using component selection rules?▼

Designing a React data table involves applying component selection rules from a centralized library catalog. This skill details default component selections and data presentation patterns, streamlining the implementation of data tables and dashboards for Docyrus React applications.

When do I need a centralized skill for UI component selection?▼

You need a centralized skill for UI component selection when assembling production-grade React interfaces requires consistent design rules. It solves the problem of fragmented component choices by providing a curated catalog, icon usage guides, and inline-editing patterns for Docyrus applications.