agentleFS
Sign inStart free
blixvipblixvip/skills/ui-intergrity/SKILL.md

ui-intergrity

Skill4 starsChanged 3 months agoMITView on GitHub

Prevent and fix visual integration bugs when building, modifying, or reviewing user interfaces, especially browser extensions or UI injected into third-party websites. Use for overlap, stacking, clipping, positioning, layout-shift, scrolling, animation, responsiveness, duplicate mount, click-blocking, and host-site interference issues.

The file

We split this skill into the rules it gives an agent

8 rules. About 0 are common, 8 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈8

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Test default, hover, expanded, animated, scrolled, and resized states.

    line 16
  2. Distinctive:

    Check bounding boxes, overflow, stacking contexts, and pointer events when something looks wrong.

    line 17
  3. Distinctive:

    When injecting UI into another website:

    line 23
  4. Distinctive:

    Treat the host DOM and CSS as untrusted and changeable.

    line 25
  5. Distinctive:

    Avoid fragile selectors and assumptions about host layout.

    line 27
  6. Distinctive:

    Do not break, cover, move, or intercept native site controls.

    line 28
  7. Distinctive:

    Prefer positioning relative to the component the UI visually belongs to.

    line 31
  8. Distinctive:

    Before considering UI complete, actively check for overlaps, clipping, off-screen content, incorrect stacking, scroll or animation …

    line 35

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

UI Integrity

Prevent visual integration bugs, including unintended overlap; z-index or stacking-context conflicts; clipping and overflow; broken absolute, fixed, or sticky positioning; layout shifts; scroll and animation collisions; extension UI interfering with native website UI; invisible elements blocking clicks; duplicate injected components; and responsive-layout breakage.

Approach

When changing UI:

  1. Identify the component's intended spatial owner and positioning context.
  2. Inspect nearby native and custom UI for possible collisions.
  3. Test default, hover, expanded, animated, scrolled, and resized states.
  4. Check bounding boxes, overflow, stacking contexts, and pointer events when something looks wrong.
  5. Fix the underlying layout relationship instead of masking it with arbitrary offsets or huge z-index values.
  6. Re-test the changed component and surrounding UI.

Browser extension rules

When injecting UI into another website:

  • Treat the host DOM and CSS as untrusted and changeable.
  • Scope or isolate extension styles.
  • Avoid fragile selectors and assumptions about host layout.
  • Do not break, cover, move, or intercept native site controls.
  • Account for SPA navigation and dynamic DOM updates.
  • Prevent duplicate mounts.
  • Prefer positioning relative to the component the UI visually belongs to.

Pressure-test

Before considering UI complete, actively check for overlaps, clipping, off-screen content, incorrect stacking, scroll or animation collisions, blocked click targets, long-text breakage, viewport-width breakage, and host-site interference. Do not declare the UI finished just because the default screenshot looks correct.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free