repeated-component-alignment

Name: repeated-component-alignment
Author: dembrandt

bydembrandt· 40 skills

Installs

111

Stars

Forks

Category

UX UI & Design

View on GitHub

TL;DR

Any component rendered many times — cards, list rows, table cells, nav items, tiles, KPI widgets, feed entries — is a fixed slot model, not a free-form box. The same slots appear in the same place in every instance and stay aligned across siblings even when text and values vary in length. Reserve space for optional slots, pin anchor elements (CTA, price, value), clamp overflowing text, and give the full value back via title/tooltip. Use when building or reviewing any repeated component whose content length differs between instances.

How to install repeated-component-alignment?

dembrandt/dembrandt-skills/repeated-component-alignment

$npx -y skills add dembrandt/dembrandt-skills --skill repeated-component-alignment

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/dembrandt/dembrandt-skills" --skill "dembrandt/dembrandt-skills/repeated-component-alignment"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/dembrandt/dembrandt-skills" that are relevant to the current task. Run `npx skills add "https://github.com/dembrandt/dembrandt-skills"` and select the relevant skills, then follow their instructions.

6 picks

Type

repeated-component-alignment

bydembrandt· 40 skills

Installs

111

Stars

Forks

How to install repeated-component-alignment?

dembrandt/dembrandt-skills/repeated-component-alignment

$npx -y skills add dembrandt/dembrandt-skills --skill repeated-component-alignment

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/dembrandt/dembrandt-skills" --skill "dembrandt/dembrandt-skills/repeated-component-alignment"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/dembrandt/dembrandt-skills" that are relevant to the current task. Run `npx skills add "https://github.com/dembrandt/dembrandt-skills"` and select the relevant skills, then follow their instructions.

6 picks

Type

repeated-component-alignment

How to install repeated-component-alignment?

Related

repeated-component-alignment

How to install repeated-component-alignment?

Related