skills.rest
gooseworks-ai
gooseworks-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

active-row-darken

Adjust list item opacity and font weight relative to a focal point.

6|1|Updated May 29, 2026
Search Tags:#UI focus#list interaction#visual emphasis#opacity adjustment#font weight
One-click install
npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill active-row-darken
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: active-row-darken
Source: https://github.com/gooseworks-ai/gooseworks-ads-skills/tree/main/skills/atoms/motion-graphics/effects/active-row-darken
Command: npx skills add https://github.com/gooseworks-ai/gooseworks-ads-skills --skill active-row-darken

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill provides a visual focus mechanism for vertically-scrolling lists, improving user engagement and clarity.

Core Features & Use Cases

  • Dynamic Opacity: Adjusts the opacity of list items based on their proximity to a focal point.
  • Font Weight Adjustment: Modifies the font weight to further emphasize focused items.
  • Use Case: Ideal for creating interactive elements in web interfaces, such as focusable rows in a table or list.

Quick Start

Apply the active-row-darken skill to the list element with the class 'focusable-row'.

Frequently Asked Questions about active-row-darken

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

FAQPage Schema
How do I add visual focus to scrolling list items in a web UI?▼

You can enhance list item focus by applying dynamic opacity and font weight adjustments to elements based on their vertical position relative to a focal point. This provides a visual focus mechanism for vertically-scrolling lists.

How do I apply opacity adjustment to focusable rows in a list?▼

To apply opacity adjustment, apply the script to the list element using the 'focusable-row' class. It targets interactive list UIs and modifies both opacity and font weight to improve visual emphasis during user interaction.

What is the best way to highlight a focal point in vertically-scrolling lists?▼

The best way to highlight a focal point in vertically-scrolling lists is by combining dynamic opacity and font weight modifications. This approach adjusts visual emphasis based on the item's proximity to the focal point.

Can I use font weight adjustment to improve table row interaction?▼

Yes, font weight adjustment can be used to improve table or list row interaction. The mechanism modifies font weight alongside dynamic opacity to emphasize focused rows, which is ideal for interactive web interfaces.

Do I need any external dependencies to implement dynamic list opacity?▼

No external dependencies are required to implement dynamic list opacity. The mechanism operates solely through scripts to manipulate opacity and font weight, requiring only a list element with the 'focusable-row' class.

When should I not use dynamic opacity for list interaction?▼

You should avoid using dynamic opacity for list interaction if your UI requires uniform text legibility across all rows. The mechanism intentionally reduces opacity and alters font weight for items outside the focal point.

Related Skills

Explore More Design & Creative Skills→
shiqkuangsanshiqkuangsan
17

tooyoung:blobity-cursor

Implement a canvas-based custom cursor with spring physics for web pages.

Community
Intermediate
ThorStarlordThorStarlord
1

ui-storybook-docs

Generates MDX docs, CSF3 stories, and prop tables from ui-component-spec.

Community
Intermediate
yeohj0710yeohj0710

capacitor-keyboard

Manage keyboard visibility, scroll, accessory bar, and focus in Capacitor apps.

Community
Intermediate
djankiesdjankies

creating-custom-utilities

Create custom Tailwind v4 utilities using the @utility directive.

Community
Advanced