skills.rest
Conradmaker
ConradmakerCOMMUNITY
Explore all skills by this author →
GitHub

ds-ui-patterns

Standardize web UI layout decisions for page structure and surface composition.

Updated Apr 27, 2026
Search Tags:#dashboards#navigation#design-system#visual-design#ui-patterns#landing-page#layout-patterns
One-click install
npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ds-ui-patterns
Source: https://github.com/Conradmaker/copilot-cockpit/tree/main/.github/skills/ds-ui-patterns
Command: npx skills add https://github.com/Conradmaker/copilot-cockpit --skill ds-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill standardizes web UI layout decisions to reduce ambiguity in page structure and surface composition across products.

Core Features & Use Cases

  • Provides a library of proven layout patterns (hero, Bento grid, straight grid, line dividers, asymmetrical layouts, etc.) and guidance on when to apply them.
  • Serves as a discovery surface to locate relevant references (e.g., layout-pattern references, dashboard design, component patterns) and align design decisions across teams.
  • Supports design reviews and onboarding by giving a clear framework for evaluating surface rhythm, visual hierarchy, spacing, and component usage.

Quick Start

Consult ds-ui-patterns when planning a new page layout to apply patterns such as hero sections, Bento grids, and straight line dividers.

Frequently Asked Questions about ds-ui-patterns

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

FAQPage Schema
What layout patterns should I use for dashboard and landing page design?▼

For dashboard and landing page design, apply proven UI layout patterns like hero sections, Bento grids, and straight line dividers to standardize page structure. These patterns reduce ambiguity in surface composition and align visual hierarchy across product screens.

How do I standardize UI layout decisions across multiple product surfaces?▼

You standardize UI layout decisions by applying a consistent framework of layout patterns to hero sections, grids, sidebars, cards, and tab bars. This establishes clear criteria for evaluating surface rhythm, spacing, and component usage during design reviews.

When should I use a Bento grid versus a straight grid for my UI layout?▼

Use a Bento grid for asymmetrical dashboard showcases requiring flexible content blocks, and a straight grid for uniform landing page structures. Selecting the correct layout pattern depends on the specific visual hierarchy and surface rhythm your page requires.

Can I use these UI layout patterns for AI product surfaces and navigation bars?▼

Yes, these UI layout patterns directly support AI product surfaces and navigation bars. The guidelines prescribe practical criteria for composing sidebars, tab bars, overlays, and cards specifically suited for these interactive screen-level UI structures.

How do I evaluate visual hierarchy and spacing during a UI layout design review?▼

Evaluate visual hierarchy and spacing during a UI layout design review by checking the page against the prescribed layout pattern criteria. This framework helps assess surface rhythm, component usage, and structural consistency to reduce ambiguity across web products.

Why does my landing page structure feel inconsistent despite using standard components?▼

Your landing page structure feels inconsistent when standard components lack unified layout pattern guidance. Applying systematic rules for hero sections, grids, and line dividers reduces ambiguity in page composition and aligns the overall visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
gvkhoslagvkhosla
8

ux-flow-designer

Map user journeys and output a user-flows.md with screens to build.

Community
Intermediate
ambush0421ambush0421

frontend-ui-ux-engineer

Redesign React components with improved visual hierarchy and interaction design.

Community
Intermediate
lucabattistinilucabattistini

design-structure

Design information hierarchy, layout logic, and interaction patterns for user interfaces.

Community
Intermediate
shinnytechshinnytech

using-shadcn-ui

Create React UI components with shadcn/ui and Tailwind CSS.

Official
Intermediate