skills.rest
Docyrus
DocyrusOFFICIAL
Explore all skills by this author →
WebsiteGitHub

docyrus-app-ui-design

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
One-click install
npx skills add https://github.com/Docyrus/agent-skills --skill docyrus-app-ui-design
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
agusmdevagusmdev
5

tanstack-shadcn-setup

Configure Tailwind CSS v4 and shadcn/ui for TanStack Start and Router projects.

Community
Advanced
huidgehuidge
2

popular-web-designs

Render HTML/CSS from 54 web design templates.

Community
Advanced
marktantongcomarktantongco

Animation Hybrid Architect

Design unified animation systems integrating Motion and GSAP with TypeScript.

Community
Advanced
hasnahasna

shadcn

Integrates reusable UI components into your Tailwind and React projects via the managed screen reader.

Official
Intermediate