canicode: Skill for Claude Code

.claude/skills/canicode-gotchas/SKILL.md

canicode-gotchas is a skill for Claude Code from let-sunny/canicode. It costs 226 tokens per session (4,663 once invoked), scanned B, original, MIT.

A question-and-answer survey for Figma designs that records implementation details in a local memo. The memo can be read later when generating code from the design.

In plain words
What is it for?
Use it to answer design questions and save the resulting gotchas in .claude/skills/canicode-gotchas/SKILL.md for downstream code generation.
Why use it?
It captures decisions that a visual design cannot express, such as intended interactions or states, before implementation starts.

Skill for Claude Code

Written for Claude Code: installed under .claude/. Also seen: reads .claude/ paths; mentions CLAUDE.md; mentions Claude Code.

This is let-sunny/canicode's own configuration. It tells Claude Code how to work on canicode 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 canicode configures →

Part of the canicode plugin — 3 skills, 3 commands, 3 hooks, 2 MCP servers shipped together

Reuse

Borrowing it

Nothing to install: this file belongs to let-sunny/canicode. 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/let-sunny/canicode/main/.claude/skills/canicode-gotchas/SKILL.md
Clone the repo
git clone --depth 1 https://github.com/let-sunny/canicode

Made for: Claude Code.

Or install canicode, the plugin that ships this one along with the rest of its 3 skills, 3 commands, 3 hooks, 2 MCP servers.

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 canicode-gotchas

README.md
[![agentmods](https://agentmods.dev/badge/skills/let-sunny/canicode/canicode-gotchas/github.svg)](https://agentmods.dev/skills/let-sunny/canicode/canicode-gotchas)
Your own site
<a href="https://agentmods.dev/skills/let-sunny/canicode/canicode-gotchas"><img src="https://agentmods.dev/badge/skills/let-sunny/canicode/canicode-gotchas/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 canicode-gotchas

Your own site · 80×15
<a href="https://agentmods.dev/skills/let-sunny/canicode/canicode-gotchas"><img src="https://agentmods.dev/badge/skills/let-sunny/canicode/canicode-gotchas.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 226 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,663 The whole file, excluding the scripts and references it only reads on demand.
Security scan B 1 finding. 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.00226 $0.04663
Opus 5 $0.00113 $0.02331
Sonnet 5 $0.00045 $0.00933
Haiku 4.5 $0.00023 $0.00466

Measured 10d ago against content hash 968f5c493465, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade B, and why

canicode-gotchas scanned grade B with 1 finding 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 10d 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.

Reads MCP configurationmediumAgent snooping

mcp.json carries server URLs and auth tokens; reading it lets a mod discover and abuse other integrations.

- **canicode MCP** (recommended): Register the server with your host — **Claude Code:** `claude mcp add canicode -- npx --yes --package=canicode canicode-mcp` — long-form flags only; the short-form `-y -p` collides with
.claude/skills/canicode-gotchas/SKILL.md · 258 lines

How it starts

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

CanICode Gotchas — Design Gotcha Survey

Channel contrast: canicode-gotchas (this skill) persists answers only in local .claude/skills/canicode-gotchas/SKILL.mdmemo-only, no Plugin write to Figma. canicode-roundtrip writes to the canvas. Use gotchas when you want Q&A captured for code-gen context without mutating the file.

Run a gotcha survey on a Figma design to collect implementation context that Figma cannot encode natively, capture developer/designer answers, and upsert them into .claude/skills/canicode-gotchas/SKILL.md so downstream figma-implement-design runs have annotation-ready context. In this model, rules do rule-based best-practice detection, and gotcha is the annotation output from that detection. Some gotchas come from violation rules (what is wrong and how to resolve it); others come from info-collection rules (neutral context Figma cannot represent, like interaction intent/state).

Install location: The workflow prose may live under .claude/skills/canicode-gotchas/SKILL.md (default canicode init) or be copied to .cursor/skills/canicode-gotchas/SKILL.md (canicode init --cursor-skills). The authoritative gotcha store is always .claude/skills/canicode-gotchas/SKILL.md — the CLI upsert-gotcha-section writes there only. In the .claude copy, this file has two regions: the Workflow below (installed by canicode init, never overwritten manually) and the Collected Gotchas region at the bottom (one numbered section per design, replaced in place on re-runs).

Prerequisites

  • canicode MCP (recommended): Register the server with your host — Claude Code: claude mcp add canicode -- npx --yes --package=canicode canicode-mcp — long-form flags only; the short-form -y -p collides with claude mcp add's parser (#366); do not pass -e FIGMA_TOKEN=… here (#364). Cursor / other hosts: add canicode-mcp to your MCP config — see Customization guide (~/.cursor/mcp.json or project .cursor/mcp.json). The MCP server reads FIGMA_TOKEN from ~/.canicode/config.json or the environment.
  • Without canicode MCP (fallback): npx canicode gotcha-survey "<input>" --json — same JSON shape as the MCP tool.
  • FIGMA_TOKEN configured for live Figma URLs.
  • Gotcha destination on disk: .claude/skills/canicode-gotchas/SKILL.md must exist before upsert — run npx canicode init --token … (add --cursor-skills if you also want the workflow file under .cursor/skills/).

Read the full file on GitHub · 258 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. 10d ago First seen · 258 lines · 226 tokens per session scan B 968f5c493465

Subscribe to this mod's changes

canicode-gotchas is a skill published in the GitHub repository let-sunny/canicode (10 stars, last pushed 2mo ago), licensed MIT. It adds 226 tokens to every session and 4,663 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it B with 1 finding (reads mcp configuration). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

figma-codegen

Generate framework-aware code from a Figma design. Reads the project's stack profile and emits code matching the existing framework (React/Vue/Svelte/Next/etc.) and styling (Tailwind/CSS/CSS-in-JS), reusing existing components and design tokens instead of regenerating from scratch. Triggers whenever the user wants a…

awdr74100/figwright · 145 tokens

refero-design

Primary/default skill for UI design, product design, web design, landing pages, dashboards, product screens, redesigns, visual polish, frontend/CSS styling, design systems, components, responsive design, typography, color, spacing, motion, icons, accessibility, copywriting, conversion, and anti-AI-slop work. Use this…

referodesign/refero_skill · 191 tokens

figma-build

Build a Figma design from code or a description — the reverse of figma-codegen. Reuses the connected file's existing design system (components, variables, styles) instead of drawing primitives with hardcoded values. Triggers whenever the user wants something created or updated IN Figma from code or a spec — e.g.…

awdr74100/figwright · 180 tokens

generating-figma-design

Use when the user requests to design, create, build, generate, or make a new Figma component or screen — including phrases like "make a button", "design a settings page", "build a new card", "generate X". Produces a CSpec, compiles it to a scene graph, executes it in Figma via MCP, and verifies the output.

noemuch/bridge · 82 tokens

learning-from-corrections

Use when the user says they adjusted the design in Figma, mentions "fix", "correct", "learn from", "I changed", "diff", "what changed", or wants the system to incorporate manual Figma edits back into the spec. Diffs the current Figma state against the last snapshot, classifies each change as a DS learning or a…

noemuch/bridge · 92 tokens

generate-figma-screen

Kod veya açıklamadan Figma'da tam ekran/sayfa oluşturur. Yayınlanmış design system bileşenlerini arayıp instance olarak yerleştirir; hardcode değer yerine DS token'larını kullanır. "Figma'da ekran oluştur", "kodu Figma'ya çevir", "landing page çiz", "ekran tasarla", "generate screen", "UI'ı Figma'ya aktar"…

atezer/FMCP · 118 tokens