ds-ui-patterns
CommunityLayout patterns for clean, effective UIs.
Design & Creative#dashboards#navigation#design-system#visual-design#ui-patterns#landing-page#layout-patterns
AuthorConradmaker
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: ds-ui-patterns Download link: https://github.com/Conradmaker/copilot-cockpit/archive/main.zip#ds-ui-patterns Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.