skills.rest
Hey-Diga
Hey-DigaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ui-patterns

Apply dashboard UI templates for page layouts, loading states, and sheet scroll patterns.

16|1|Updated Sep 24, 2025
Search Tags:#ui#templates#frontend#dashboard#loading-state#error-state#sheet-scroll
One-click install
npx skills add https://github.com/Hey-Diga/dotclaude --skill ui-patterns-hey-diga
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/Hey-Diga/dotclaude/tree/main/skills/ui-patterns
Command: npx skills add https://github.com/Hey-Diga/dotclaude --skill ui-patterns-hey-diga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Dashboard implementations often drift in layout, loading behavior, error handling, and sheet/side-panel scrolling, causing inconsistent user experiences and extra implementation time. This Skill provides a compact set of templates and conventions to standardize page height handling, loading and error states, and sheet scroll behavior so teams can deliver uniform interfaces faster.

Core Features & Use Cases

  • Page height constants: Defines PAGE_HEIGHT_CLASS variants for pages with and without footers and for scrollable containers to ensure consistent full-viewport layouts.
  • Loading and error state templates: Prescriptive patterns for page-level loaders and centered error panels with predictable button layout and actions.
  • Sheet / sidebar scroll pattern: A flex-based recipe that ensures fixed headers/footers and a single scrollable content area for right-side sheets or sidebars.
  • Workflow guidance: Instructions to locate real examples in the codebase using Glob and Grep and a constraint to prefer Phosphor icons over lucide-react.
  • Use case: When adding or refactoring an admin dashboard page, apply these patterns to match existing pages and avoid regressions in layout or scrolling behavior.

Quick Start

Create a new dashboard page and apply the ui-patterns guidance to use PAGE_HEIGHT_CLASS constants, standard loading and error templates, and the sheet scroll layout for side panels.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
How do I build consistent dashboard pages with proper full-viewport layout?▼

To build consistent dashboard pages, apply predefined PAGE_HEIGHT_CLASS variants for layouts with or without footers and scrollable containers to ensure uniform full-viewport height across admin interfaces.

What is the best way to implement loading and error states for an admin dashboard?▼

The best way to implement loading and error states is using prescriptive templates that provide page-level loaders and centered error panels with predictable button layouts and actions.

How do I create a flex-based sheet scroll pattern for a fixed header and footer sidebar?▼

To create a sheet scroll pattern, use a flex-based recipe that fixes the header and footer while isolating a single scrollable content area for right-side sheets or sidebars.

Does the dashboard UI template require specific icon libraries?▼

Yes, the dashboard UI template imposes a constraint to prefer Phosphor icons over lucide-react to maintain visual consistency across all admin dashboard pages.

How do I locate existing dashboard layout examples in my codebase?▼

To locate existing dashboard layout examples, search your codebase using Glob and Grep tools to find real implementations of page height constants, loading states, and sheet scroll patterns.

Related Skills

Explore More Software Engineering Skills→
christianearle01christianearle01

component-finder

Locate frontend components and related files across React, Vue, and Angular projects.

Community
Basic
lisbeth718lisbeth718
53

pseo-templates

Generates intent-matched page templates for programmatic SEO with dynamic routing and structured content blocks.

Community
Advanced
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
79yuuki79yuuki

component-gallery

Select reusable component patterns from design systems for frontend UI tasks.

Community
Intermediate