skills.rest
webdevcody
webdevcodyCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevcodyGitHub

tweak-ui

Clarify and execute minimal UI changes with location, current behavior, and desired behavior.

22|3|Updated Jul 28, 2024
Search Tags:#accessibility#front-end#styling#copy#layout alignment#ui tweak#change scoping
One-click install
npx skills add https://github.com/webdevcody/go-mailing-list --skill tweak-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tweak-ui
Source: https://github.com/webdevcody/go-mailing-list/tree/main/.claude/skills/tweak-ui
Command: npx skills add https://github.com/webdevcody/go-mailing-list --skill tweak-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents agents from making the wrong edit when a UI request is missing key context (where the change should happen, what the current state is, and what the desired state should be).

Core Features & Use Cases

  • Three-slot clarification: Collects location, current behavior, and desired behavior before editing to ensure the change lands on the correct element.
  • Smallest-change enforcement: Updates only the minimal lines needed to achieve the visible tweak, avoiding refactors or unrelated improvements.
  • Scope guardrails: Rejects or redirects requests that are actually new features, multi-component changes, or bug investigations where behavior is broken.
  • Example use case: A user says a button “looks off” and wants it “moved and aligned”; the skill first asks for the exact element and what it currently looks/does, then applies only the necessary styling or layout adjustment.

Quick Start

Ask: “Tweak this UI—here’s the element location, what it looks/does right now, and what it should look/do instead.”

Frequently Asked Questions about tweak-ui

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

FAQPage Schema
How do I make small UI changes without breaking the existing layout?▼

To make small UI changes without breaking the layout, you need strict scope discipline. Clarify the exact element location, current behavior, and desired behavior, then apply only the minimal styling or layout diff needed.

Why do my front-end styling tweaks keep causing unintended UI refactors?▼

Front-end styling tweaks cause unintended refactors when change scope is not enforced. You can prevent this by collecting explicit location and behavior context first, ensuring the agent edits the smallest possible diff for the visible result.

What's the best way to scope layout alignment adjustments for a single component?▼

The best way to scope layout alignment adjustments is requiring a three-slot clarification: exact element location, current behavior, and desired behavior. This ensures the update targets only the specified component without unrelated improvements.

Can I use this approach to fix broken UI behavior or add new front-end features?▼

You cannot use this approach to fix broken UI behavior or add new features. It includes scope guardrails that reject multi-component changes and bug investigations, redirecting requests that fall outside single-element styling or copy adjustments.

How do I handle underspecified UI tweak requests for copy and styling?▼

To handle underspecified UI tweak requests for copy and styling, ask only for the missing context slots. Collect the precise location, current state, and desired state before executing the minimal edit to produce the intended visible result.

Related Skills

Explore More Design & Creative Skills→
machenjiemachenjie
4

requirement-structuring

Structure confirmed change requirements into implementation-neutral briefs with test traceability.

Community
Advanced
oduffy-delphioduffy-delphi
5

test-driven-development

Enforce a failing test before production code in software projects.

Community
Intermediate
citypaulcitypaul
710

front-end-testing

Automate UI behavior tests with framework-agnostic DOM Testing Library patterns.

Community
Intermediate
HsienWHsienW
63

incremental-implementation

Break complex feature implementations into small, testable increments.

Community
Intermediate