skills.rest
whawkinsiv
whawkinsivCOMMUNITY
Explore all skills by this author →
Website𝕏@WillLovesNoCodeGitHub

ui-patterns

Design responsive SaaS interfaces with component and page composition patterns.

232|43|Updated Jan 13, 2026
Search Tags:#responsive design#dashboard#component library#ui design#dark mode#saas#data tables
One-click install
npx skills add https://github.com/whawkinsiv/solo-founder-skills --skill ui-patterns-whawkinsiv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-patterns
Source: https://github.com/whawkinsiv/solo-founder-skills/tree/main/skills/ui-patterns
Command: npx skills add https://github.com/whawkinsiv/solo-founder-skills --skill ui-patterns-whawkinsiv

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps founders design consistent, usable SaaS interfaces without reinventing page structures, component choices, responsive behavior, or data-driven states for every screen.

Core Features & Use Cases

  • Component Guidance: Select and configure practical UI components for buttons, forms, tables, dialogs, navigation, notifications, badges, dropdowns, sheets, and loading states.
  • Page Layouts: Compose dashboards, list pages, detail views, settings, billing, authentication, landing, blog, and empty-state pages using proven structural patterns.
  • Responsive and State Design: Plan mobile-first layouts, sidebar adaptations, dark mode, loading, empty, error, success, and overflow states.
  • Use Case: When building a SaaS dashboard, use this Skill to choose the component library, structure the page around key metrics and activity, transform tables into mobile-friendly cards, and account for every data state.

Quick Start

Use the ui-patterns skill to design a responsive SaaS dashboard with shadcn/ui, including loading, empty, error, success, and overflow states.

Frequently Asked Questions about ui-patterns

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

FAQPage Schema
How do I design a responsive SaaS dashboard that works on mobile?▼

Build consistent SaaS interfaces by applying established page composition patterns for dashboards, detail views, and settings. This approach standardizes component choices and page structures, eliminating the need to reinvent layouts for every new screen in your application.

What UI components do I need for a SaaS interface?▼

Select UI components like buttons, forms, data tables, dialogs, navigation menus, notifications, badges, and dropdowns for SaaS interfaces. Configure these practical components to handle loading states, user authentication flows, and billing screens effectively across your application.

How should I handle loading, empty, and error states in data tables?▼

Handle loading, empty, error, success, and overflow states in data tables by planning dedicated UI patterns for each data state. Designing these states prevents interface dead-ends, ensuring your SaaS application maintains usability when data is missing, processing, or fails to load.

Does this approach support dark mode for SaaS applications?▼

Dark mode is supported for SaaS applications when appropriate. Plan dark mode adaptations alongside mobile-first layouts, sidebar adaptations, and responsive behavior to ensure component libraries render correctly across different visual themes and device contexts.

Can I use shadcn/ui to build responsive SaaS interfaces?▼

You can use shadcn/ui to build responsive SaaS interfaces by applying established component and page composition patterns. Structure dashboards, authentication flows, and billing screens using this component library while defining responsive behavior and handling all data states.

Related Skills

Explore More Design & Creative Skills→
nidhalboumaiza-0nidhalboumaiza-0

frontend-design

Convert UI style requirements into frontend code with a tokens-first design system.

Community
Advanced
abzhawabzhaw

tailwind-css

Applies Tailwind utility classes to build responsive, themed Next.js dashboards.

Community
Intermediate
vecearvecear

state-ux-flow-builder

Standardize loading, error, empty, and success states for data-fetching views.

Community
Advanced
hasnahasna

shadcn-svelte

Provide 36 Tailwind CSS-styled shadcn-svelte components for json-render catalogs.

Official
Intermediate