skills.rest
SAP
SAPOFFICIAL
Explore all skills by this author →
Website𝕏@SAPOpenSourceGitHub

component-composition

Combine fundamental-styles components with required wrappers and nesting rules.

232|70|Updated May 16, 2019
Search Tags:#web development#UI design#component composition#fundamental-styles#SAP applications
One-click install
npx skills add https://github.com/SAP/fundamental-styles --skill component-composition-sap
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-composition
Source: https://github.com/SAP/fundamental-styles/tree/main/skills/component-composition
Command: npx skills add https://github.com/SAP/fundamental-styles --skill component-composition-sap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the challenge of correctly combining fundamental-styles components to create a cohesive and functional user interface.

Core Features & Use Cases

  • Component Composition: Provides guidelines for combining components like form items, input groups, popovers, and dialogs.
  • Required Wrappers: Explains the importance of using required wrappers for proper component functionality.
  • Common Composition Patterns: Offers examples of common patterns such as form item composition, input group composition, and dialog composition.
  • Quick Start: Learn how to combine components correctly with a simple example.

Quick Start

Use the component-composition skill to understand how to combine the 'fd-form-item' and 'fd-input' components for a basic form field.

Frequently Asked Questions about component-composition

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

FAQPage Schema
How do I combine fundamental-styles components to create a consistent UI?▼

Combine fundamental-styles components by following specific nesting rules and using required wrappers to create a cohesive and professional user interface. This ensures proper functionality across SAP applications.

Why do I need required wrappers when combining UI components?▼

Required wrappers are essential for proper UI component functionality because they enforce correct structural nesting. Wrappers ensure that fundamental-styles components render correctly and maintain visual consistency.

What are common composition patterns for SAP application interfaces?▼

Common composition patterns for SAP applications include form item composition, input group composition, and dialog composition. These patterns provide established structures for combining components into functional interface sections.

How do I create a basic form field using fundamental-styles?▼

Create a basic form field by combining the fd-form-item and fd-input fundamental-styles components. This composition pattern provides a quick start example for correctly structuring form elements.

Can I use fundamental-styles components for both web development and UI design?▼

Yes, fundamental-styles components are applicable to both developers and designers working with SAP applications. They provide guidelines for combining UI elements to create functional and visually consistent web interfaces.

What happens if nesting rules are not followed when combining components?▼

Not following nesting rules when combining components breaks the required structural hierarchy, causing rendering issues and inconsistent UI behavior. Proper composition patterns are required for functional SAP application interfaces.

Related Skills

Explore More Software Engineering Skills→
stagewise-iostagewise-io
6.8k

stage-ui-design-system

Reference Stagewise UI design tokens, React components, and utility functions.

Official
Basic
vecearvecear

state-ux-flow-builder

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

Community
Advanced
ngocnhanvongocnhanvo

forms

Create and validate React forms with react-hook-form and shadcn/ui.

Community
Intermediate
Arbab1308Arbab1308

tailwind-patterns

Standardize Tailwind CSS v4 patterns with CSS-first architecture and design tokens.

Community
Advanced