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.
npx agentmods add skills/tiltely/lens/designnpx skills add Tiltely/lens --skill designgit clone --depth 1 https://github.com/Tiltely/lensWhat 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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00090 | $0.01251 |
| Opus 5 | $0.00045 | $0.00626 |
| Sonnet 5 | $0.00018 | $0.00250 |
| Haiku 4.5 | $0.00009 | $0.00125 |
Grade A, and why
design 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.
How it starts
The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.
The Lens of Interface Design
Read first: ${CLAUDE_PLUGIN_ROOT}/core/protocol.md and ${CLAUDE_PLUGIN_ROOT}/core/dossier.md. Dossier rules: read it, skip answered questions WITH skip lines, append your outputs.
This lens is technology-agnostic (protocol.md, "Lens agnosticism"). Component vocabulary adapts to whatever the project uses — the questions do not change.
Detect the design system (before Tier 2)
Inspect the project once and record design-system: in the dossier:
components.json+ aui/components dir → shadcn/ui@mui/material→ MUI ·@chakra-ui/*→ Chakra ·antd→ Ant Design- Tailwind only, no component library → utility-first custom
- none of the above → no design system (candidates come from platform primitives; Tier 3 asks whether adopting one pays off)
Question battery — design mode
Tier 1 — framing (always)
- What is the ONE primary action on this screen? (If the answer lists three, dig: which one does the business need most?)
- Who lands here and from where? (entry point shapes layout: deep link ≠ nav click)
Tier 2 — composition
- Component candidates: for the core interaction, name 2–3 compositions in the project's design system (or platform primitives if none) that could serve it — e.g., modal vs slide-over panel vs dedicated route; tabs vs accordion vs stepper. RANK them against: mobile ergonomics, state preserved on navigation, implementation cost. Recommend one, with the ranking visible.
- Where does this screen's navigation live — and is that consistent with the rest of the app? (nav items, tabs placement, back behavior on mobile web)
- Which states exist beyond happy path — loading, empty, error, partial? Show what each looks like (skeleton? empty-state CTA? toast vs inline error?).
- Does this app ship as a PWA, or will it? → load the depth pack
${CLAUDE_PLUGIN_ROOT}/skills/design/topics/pwa.mdand run its battery.
Tier 3 — deep dives (only when triggered)
- Forms involved → field-level validation timing (on blur? on submit?), error placement, and what happens to user input on failure.
- Data tables/lists → empty, 1 item, 10k items: same component?
- Dark mode shipped → are the chosen components token-driven or hardcoded colors?
- No design system detected → is it time to adopt one? What does consistency cost today vs the migration cost?
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 2d ago First seen · 105 lines · 90 tokens per session scan A d2fe51cda25b
design is a skill published in the GitHub repository Tiltely/lens (5 stars, last pushed 23d ago), licensed MIT. It adds 90 tokens to every session and 1,251 once invoked, about $0.0005 per session on Opus 5. 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-31.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.
chat-pet-sprite-creation
Use when creating or changing VS Code chat pet sprite art, sprite sheets, state animations, eye treatments, Stable/Insiders variants, or pet transitions under src/vs/workbench/contrib/chat/browser/widget/media/chatPet.
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
agent-host-chat-contributions
Build and review cross-cutting agent-host chat behavior through lifecycle contributions. Use when adding turn lifecycle side effects, prompt or context injection, restored-history transformation, protocol-action observation, or when reviewing changes that add code to AgentSideEffects or AgentService.
auto-perf-optimize
Run agent-driven VS Code performance or memory investigations. Use when asked to launch Code OSS, automate a VS Code scenario, run the Chat memory smoke runner, capture renderer heap snapshots, take workflow screenshots, compare run summaries, or drive a repeatable scenario before heap-snapshot analysis.