layout-patterns
Layout Patterns Skill
This skill provides common UI layout patterns using fundamental-styles components. Use this to build complete, production-ready interfaces by combining multiple components correctly.
When to Use This Skill
Use this skill when:
- The user asks "How do I build a [pattern name]?"
- The user needs to combine multiple components
- The user wants a complete working example
- The user asks about common UI patterns (login, dashboard, master-detail, etc.)
Pattern 1: Login Form
A complete login form with email/password fields, validation, and action buttons.
More from sap/fundamental-styles
bem-naming
BEM (Block Element Modifier) methodology and naming conventions used in fundamental-styles with real examples
2content-density
Guide to cozy, compact, and condensed modes - when to use each density, how to apply them, and device-specific recommendations
2component-composition
How to combine fundamental-styles components correctly - required wrappers, nesting rules, and common composition patterns
2component-guidance-data
Fiori guidelines for data display components such as Table, List, Tree, Avatar, Calendar, Icons, etc
2component-guidance-forms
Fiori guidelines for form controls and input components such as Checkbox, Input, Select, Textarea, Date Picker, etc
2component-guidance-navigation
Fiori guidelines for navigation components such as Breadcrumb, Menu, Link, Shellbar, Vertical Navigation, etc
2