css_selectors

A guide for selecting parts of a web page with CSS selectors, which are patterns used to identify HTML elements. It recommends unique component IDs when available.

In plain words
What is it for?
Use it to change the text or styling of headings, classes, attributes, or other targeted elements in a web interface.
Why use it?
It helps updates reach the intended page element and reduces breakage when the page structure changes.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/deeleeramone/pywry/css_selectors
Any agent
npx skills add deeleeramone/PyWry --skill css_selectors
Clone the repo
git clone --depth 1 https://github.com/deeleeramone/PyWry

Made for: Claude Code, Codex.

Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,521 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.01521
Opus 5 $0.00000 $0.00760
Sonnet 5 $0.00000 $0.00304
Haiku 4.5 $0.00000 $0.00152

Measured 2d ago against content hash 880bdef6ee11, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

css_selectors scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

pywry/pywry/mcp/skills/css_selectors/SKILL.md · 188 lines

How it starts

The opening of the file, as written. The whole thing — 188 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CSS Selectors

Target elements for set_content and set_style updates using CSS selectors or component IDs.

Targeting by Component ID (Preferred)

The most reliable way to target elements is by component_id:

# When creating content, always use component_id
content = Div(
    content="Hello",
    component_id="main-content",  # This becomes the element's id
)

# Target by id in set_content/set_style
set_content(widget_id, component_id="main-content", text="Updated!")
set_style(widget_id, component_id="main-content", styles={"color": "red"})

Why component_id is Preferred

Aspect component_id CSS Selector
Reliability Always unique May match multiple elements
Refactoring Survives DOM changes May break on restructure
Performance Direct lookup May scan document
Clarity Self-documenting Requires knowledge of DOM

Targeting by CSS Selector

When you don't have a component_id, use CSS selectors:

# By element type
set_style(widget_id, selector="h1", styles={"fontSize": "24px"})

# By class
set_style(widget_id, selector=".status-indicator", styles={"display": "block"})

# By attribute
set_content(widget_id, selector="[data-ticker='AAPL']", text="$185.00")

# Combined selectors
set_style(widget_id, selector=".toolbar button.primary", styles={"opacity": "0.5"})

# First/last/nth-child
set_style(widget_id, selector="ul li:first-child", styles={"fontWeight": "bold"})

Common Selector Patterns

Basic Selectors

Selector Matches Example
#myid Element with id="myid" #header
.myclass Elements with class="myclass" .card
div All div elements span
* All elements *

Combinators

Selector Matches Example
div.myclass Divs with class="myclass" button.primary
div > p Direct child p of div .card > .title
div p Any descendant p of div .sidebar a
div + p p immediately after div h1 + p
div ~ p All p siblings after div h1 ~ p

Read the full file on GitHub · 188 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 188 lines · 0 tokens per session scan A 880bdef6ee11

Subscribe to this mod's changes

css_selectors is a skill published in the GitHub repository deeleeramone/PyWry (93 stars, last pushed 8d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 1,521 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

dashboard-design

Use this skill first when the user wants to design or plan a dashboard, especially Vizro dashboards. Enforces a 3-step workflow (requirements, layout, visualization) before implementation. Activate when the user asks to create, design, or plan a dashboard. For implementation, use the dashboard-build skill after…

mckinsey/vizro · 71 tokens

industry-chain

产业链下钻与不可替代性判定方法:以龙头为"需求入口"沿供应链逐层下钻(整机 / 龙头 → 部件 → 核心器件 → 材料 → 衬底与设备),用物理 / 材料约束(扩产周期、良率、认证周期、有无替代)当筛子找供给刚性的卡口;给每个标的贴不可替代性标签(techmoat / capacitymoat / both / 待补)并列证据;含"卡口越硬越贵"与预期差四问的校准。当任务涉及产业链位置、上下游、护城河、不可替代性、供给瓶颈、竞争格局时加载;单纯取数、估值计算、财报拆分等不涉及产业链结构的任务不要加载。只产出框架与证据表,不给投资动作建议。.

simonlin1212/Vibe-Research · 212 tokens

live-dashboard

Notion 风团队仪表板, KPI + 7 日 sparkline + activity feed + 任务表.

nexu-io/html-anything · 25 tokens

selecting-vizro-charts

Use this skill when choosing chart types, applying Plotly Express conventions, configuring colors, building KPI cards, or adding tables (AG Grid) to Vizro dashboards. Activate when the user asks which chart fits their data, needs custom chart functions, wants to set colors or palettes, is creating KPI metric cards, or…

mckinsey/vizro · 78 tokens

verify-changes

Verify a code change in this repo before committing or opening a PR. Use after editing collector (backend), web (frontend), shared package, or the Go agent — picks the minimal sufficient check set per touched area.

foru17/neko-master · 47 tokens

openai-docs

Use when the user asks how to build with OpenAI products or APIs and needs up-to-date official documentation with citations (for example: Codex, Responses API, Chat Completions, Apps SDK, Agents SDK, Realtime, model capabilities or limits); prioritize OpenAI docs MCP tools and restrict any fallback browsing to…

Soju06/codex-lb · 74 tokens