webkit: Agent for Claude Code

.claude/agents/code-connect-writer.md

code-connect-writer is an agent for Claude Code from aziontech/webkit. It costs 40 tokens per session (394 once invoked), scanned A, original, MIT.

A specialized helper that creates a Figma Code Connect mapping beside a Vue component. Code Connect links component code to matching components and properties in Figma, a design tool.

In plain words
What is it for?
Use it to create a mapping for a specified Vue component, including its supported property values, boolean options, and child elements.
Why use it?
It helps keep the design-system component and its Figma representation connected without manually writing the mapping. It skips the work if the required package is not installed.

Agent for Claude Code

Written for Claude Code: installed under .claude/. Also seen: mentions subagents.

This is aziontech/webkit's own configuration. It tells Claude Code how to work on webkit itself, so it is not a mod to install elsewhere. Copy it as a starting point and replace the rules that are about this project. Everything webkit configures →

Reuse

Borrowing it

Nothing to install: this file belongs to aziontech/webkit. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.

Copy the file
curl -O https://raw.githubusercontent.com/aziontech/webkit/main/.claude/agents/code-connect-writer.md
Clone the repo
git clone --depth 1 https://github.com/aziontech/webkit

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for code-connect-writer

README.md
[![agentmods](https://agentmods.dev/badge/agents/aziontech/webkit/code-connect-writer/github.svg)](https://agentmods.dev/agents/aziontech/webkit/code-connect-writer)
Your own site
<a href="https://agentmods.dev/agents/aziontech/webkit/code-connect-writer"><img src="https://agentmods.dev/badge/agents/aziontech/webkit/code-connect-writer/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for code-connect-writer

Your own site · 80×15
<a href="https://agentmods.dev/agents/aziontech/webkit/code-connect-writer"><img src="https://agentmods.dev/badge/agents/aziontech/webkit/code-connect-writer.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 40 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 394 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
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.1 $0.00040 $0.00394
Opus 5.5 $0.00016 $0.00158
Sonnet 5.5 $0.00008 $0.00079
Haiku 4.5 $0.00004 $0.00039

Measured today against content hash bceb301a9a98, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

code-connect-writer 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 today.

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.

.claude/agents/code-connect-writer.md · 36 lines

What it actually says

Agent: code-connect-writer

Role

You are the code-connect-writer sub-agent. You execute the code-connect-write skill verbatim. You see only what is in this prompt.

What to do

  1. Check whether @figma/code-connect is in packages/webkit/package.json devDependencies. If absent, emit SKIPPED: @figma/code-connect not installed and exit.
  2. Load the figma:figma-code-connect skill (mandatory prerequisite).
  3. Call get_context_for_code_connect on the spec's figma.node_id to read the component's exact property names, types and variant options.
  4. Write packages/webkit/src/components///.figma.ts as the skill's parserless template (leading url/source/component directives, import figma from 'figma', instance.getString/getEnum/getBoolean/getSlot mappings, figma.code example), then run figma:parse.

What you may NOT do

  • Do not use figma.connect(), @figma/code-connect/html, or import the .vue — the html parser rejects all three.
  • Do not invent Figma variants — every getEnum key is a Figma option name verbatim, every value a spec prop value.
  • Do not publish — never call add_code_connect_map or send_code_connect_mappings. Publishing requires FIGMA_ACCESS_TOKEN and is the user's call.
  • Do not edit figma.config.json.

Outputs

JSON shape:

  • files_written: either the .figma.ts path or empty if skipped
  • skipped: true/false
  • skip_reason: string when skipped
  • blocks: array (empty on success)
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. today Changed · +2 lines bceb301a9a98
  2. 2mo ago First seen · 34 lines · 40 tokens per session scan A cca9a23affff

Subscribe to this mod's changes

code-connect-writer is an agent published in the GitHub repository aziontech/webkit (3 stars, last pushed today), licensed MIT. It adds 40 tokens to every session and 394 once invoked, about $0.0002 per session on Opus 5.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.

Related

Other agents, from other repositories

design-critic

Adversarial senior design critic. Renders the work, looks at it, and argues for rejection. Use when a build, screen, or component needs a taste and craft verdict that the automated gates cannot give. Runs after the gates are green, never instead of them.

plugin87/ux-ui-agent-skills · 59 tokens

frontend-developer

An agent for turning Figma designs into closely matching React, Vue, or HTML interfaces. Figma is a design tool used to specify a page’s layout, colors, fonts, spacing, and components.

xuanbingbingo/claude-standard-dev-team · 164 tokens

designer

Design specialist that creates and manages design systems, DESIGN.md files, and provides design guidance using anti-pattern enforcement, accessibility checks, and optional Stitch MCP integration.

first-fluke/fullstack-starter · 33 tokens

vue-converter

Specialized agent for converting designs to Vue 3 components. Uses build-spec.json, locked design tokens, and screenshots to generate pixel-perfect Vue 3 components with TypeScript and Tailwind CSS.

PMDevSolutions/Aurelius · 43 tokens

shadcn-svelte

SvelteKit UI specialist for shadcn-svelte + Bits UI. Use when building, redesigning, or refactoring pages and components, choosing components, theming, picking icons, or writing shadcn-svelte install commands with the MCP.

Michael-Obele/shadcn-svelte-mcp · 57 tokens

swe-reviewer

Audits code, interface component source, and scenario bindings in named projects against the adopted standards, including test-first evidence and regression tests, and returns rated findings without modifying anything.

wahidyankf/ose-public · 40 tokens