skills.rest
josoroma
josoromaCOMMUNITY
Explore all skills by this author →
GitHub

visual-selector

Locate and edit preview elements by selector within bounded visual scopes.

6|Updated Jul 12, 2026
Search Tags:#next.js#preview#multi-select#visual selection#css selectors#inspect mode#boundary editing
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill visual-selector-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-selector
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/visual-selector
Command: npx skills add https://github.com/josoroma/AppLoop --skill visual-selector-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? When a user points at a specific element in a live preview and asks for a change, AI agents often edit the wrong component or rewrite unrelated code. This Skill constrains source search and edits to the exact selected visual boundary, resolving selector ambiguity and reporting every affected file. ## Core Features & Use Cases - Selector-Based Source Location: Searches the workspace for exact selectors, stable identifiers, or component hints, narrowing matches by route and visible text when multiple files match. - Boundary-Limited Editing: Restricts changes to the selected element and its required descendants, preserving sibling structure, semantic classnames, and template body classnames. - Multi-Select and Repeated Elements: Handles multiple selected cards or list items via combined scoped CSS selectors and unique per-instance classnames, avoiding edits that leak across all instances. - Use Case: A user selects the third metric card in a dashboard preview and asks to change its gradient. The Skill resolves .metric-revenue to one file, patches only that card's CSS rule, and reports the single affected file. ## Quick Start Ask the agent to change the styling of the selected preview element identified by its selector, limiting edits to that visual boundary.

Frequently Asked Questions about visual-selector

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

FAQPage Schema
How do I edit a specific element selected in a preview?▼

Provide the element's selector, such as a class or data-apploop-id attribute, along with the preview route. The Skill searches the workspace for that selector, narrows matches by route and visible text, and limits edits to that boundary and its descendants.

How do I target one repeated card without changing all instances?▼

Use the unique per-instance classname, such as .metric-revenue, rather than the shared base class like .summary-card. For multiple selected cards, combine shared bases with each unique last classname in a single scoped CSS rule.

What happens when a selector matches multiple elements?▼

The Skill narrows matches using the preview route, component hints, and visible text samples. If ambiguity remains, it asks for clarification or picks the nearest route-owned match for low-risk prompts, never applying broad edits to all matches.

Why does inspect mode need unique classnames on repeated elements?▼

The inspector uses the last classname as the preferredSelector toggle key for multi-select. If two elements share the same last classname, selecting the second toggles the first off, so duplicates are treated as a bug.

When should I not use selector-based targeted editing?▼

Avoid it for full-page redesigns without a selected target, since the Skill is designed for boundary-scoped changes. Broad redesigns should be handled with unconstrained generation workflows instead.

Related Skills

Explore More Software Engineering Skills→
estebandrgestebandrg

tailwind-4

Standardize Tailwind CSS usage in React/Next.js projects with className and cn() guidelines.

Community
Basic
nyldnnyldn
4.0k

skill-rollback

Rollback to a previous git checkpoint tag while preserving LESSONS.md and updating STATE.md.

Community
Advanced
FlorianBruniauxFlorianBruniaux
5.9k

eval-hooks

Audit Claude Code hooks in settings.json files for validity, timeouts, and exit-code correctness.

Community
Advanced
ChoshimWyChoshimWy
8

swiftui-ui-patterns

Organize SwiftUI page design and pattern selection for new screens.

Community
Intermediate