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.

Components used:

• fd-form-item - Form field containers
• fd-form-label - Field labels
• fd-input - Text inputs
• fd-button - Action buttons
• fd-message-strip - Error feedback

When to use:

• Authentication pages
• Sign-in forms
• User credential entry

Complete example:

<div style="max-width: 400px; margin: 2rem auto;">
    <!-- Error message (hidden by default) -->
    <div class="fd-message-strip fd-message-strip--error" role="alert" style="display: none;" id="login-error">
        <p class="fd-message-strip__text">Invalid email or password. Please try again.</p>
    </div>

    <form>
        <!-- Email field -->
        <div class="fd-form-item">
            <label class="fd-form-label fd-form-label--required" for="email"> Email </label>
            <input
                class="fd-input"
                type="email"
                id="email"
                placeholder="[email protected]"
                required
                aria-required="true"
            />
        </div>

        <!-- Password field -->
        <div class="fd-form-item">
            <label class="fd-form-label fd-form-label--required" for="password"> Password </label>
            <input
                class="fd-input"
                type="password"
                id="password"
                placeholder="Enter your password"
                required
                aria-required="true"
            />
        </div>

        <!-- Action buttons -->
        <div class="fd-form-item">
            <button class="fd-button fd-button--emphasized" type="submit" style="width: 100%;">Sign In</button>
        </div>

        <div class="fd-form-item" style="text-align: center;">
            <a href="#" class="fd-link">Forgot password?</a>
        </div>
    </form>
</div>