repeated-component-alignment

Name: repeated-component-alignment
Availability: InStock
Author: Dembrandt

Align repeated UI components with fixed slots and pinned anchors.

33|6|Updated Apr 19, 2026

Search Tags:#responsive design #design systems #ui alignment #repeated components #card layouts #slot model #text truncation

Ready to run

npx skills add https://github.com/dembrandt/dembrandt-skills --skill repeated-component-alignment

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: repeated-component-alignment
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/repeated-component-alignment
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill repeated-component-alignment

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents repeated UI components from becoming visually inconsistent when their content varies in length, keeping titles, values, badges, and actions in predictable positions.

Core Features & Use Cases

Fixed Slot Models: Structure cards, list rows, table cells, navigation items, tiles, and dashboard widgets with consistent slots and spacing.
Stable Alignment: Pin CTAs, prices, statuses, and other anchor elements while allowing one flexible slot to absorb content variance.
Safe Truncation: Reserve optional slots, clamp or ellipsise overflowing text, and make the full value recoverable through tooltips or in-place expansion.
Use Case: Apply the Skill when product cards have different description lengths, badges shift titles, or prices and read-more links fail to align across a grid.

Quick Start

Use the repeated-component-alignment skill to review these cards and align their slots, anchors, optional badges, and overflowing text across all instances.

Frequently Asked Questions about repeated-component-alignment

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

FAQPage Schema

How do I align repeated UI components like cards when content length varies?▼

To prevent misaligned card layouts, establish a fixed slot model that pins anchor elements like CTAs and prices, reserves optional slots for badges, and allows one flexible slot to absorb content variance while clamping overflowing text.

What is the best way to handle text truncation in responsive design without losing data?▼

The best way to handle text truncation is to clamp or ellipsise overflowing text while making the full value recoverable through tooltips or in-place expansion. This ensures responsive design integrity without permanently hiding content from users.

Why do badges shift titles and prices in my dashboard widgets and list rows?▼

Badges shift titles and prices because optional slots are not reserved, allowing variable-length data to push anchor elements out of position. Fix this by reserving optional slots and pinning anchors within a consistent layout structure.

Does this UI alignment approach work for tables and navigation items in internationalized interfaces?▼

Yes, this UI alignment approach works for tables, navigation items, tiles, and search results in internationalized interfaces. It requires min-width safeguards and controlled text clamping to handle variable character lengths across different languages.

How do I keep media ratios consistent across a grid of product cards?▼

To keep media ratios consistent across a grid of product cards, apply fixed media ratios within a stretched grid or flex track layout. This ensures images and media maintain their proportions while surrounding slots adapt to content variance.