Figma Annotations Strategy

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

10 stars 3 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add saralobo/skill-figma-annotations --skill figma-annotations-strategy
Manual install
git clone --depth 1 https://github.com/saralobo/skill-figma-annotations.git /tmp/skill-figma-annotations
mkdir -p ~/.claude/skills
cp -r /tmp/skill-figma-annotations/. ~/.claude/skills/figma-annotations-strategy

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Figma Annotations Strategy (via Figma Console MCP)

## Context and goal
This skill automates the extraction and structuring of strategic context for screens, flows, or components, and attaches it directly in Figma via the `figma-console` MCP server. The result is the instant injection of native annotations (Figma Annotation tool, shortcut `Y`) onto components.

**MANDATORY:** Cursor/Claude MUST use Figma's **native annotations**. Under no circumstances should it create separate "cards" or "frames" floating on the canvas, or use the comments tool.

## Activation trigger
Whenever the user requests creation of "annotations for Figma", screen documentation, or provides a link/text and asks to extract context.

## Required flow

### 1. Context validation
Before generating annotations, validate that the provided context covers the **5 critical points**:
- **Screen/flow objective:** What is the user trying to accomplish?
- **Critical business rules:** Restrictions, calculations, or essential logic.
- **Important states or exceptions:** Loading, empty states, errors, edge cases.
- **Technical dependencies:** APIs, permissions, hardware.
- **Non-obvious behaviors:** Animations, transitions, conditional interactions.

**If any essential information is missing, ask the user before proceeding!**

### 2. Native category definition
Categories improve annotation scannability (native Figma colored pills).
- Never include the category in the raw text (e.g. `[Behavior]`).
Read the full skill on GitHub

Details

Skill name
figma-annotations-strategy
License
MIT
Repo updated
2 March 2026

FAQ

What does the Figma Annotations Strategy skill do?

Generate strategic Figma annotations via MCP based on PRs, tickets, or user descriptions. Use when the user wants to document a screen, flow, or component for Figma, or mentions "figma annotations", "annotation strategy".

How do I install the Figma Annotations Strategy skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add saralobo/skill-figma-annotations --skill figma-annotations-strategy. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Figma Annotations Strategy popular?

It lives in saralobo/skill-figma-annotations, which has 10 GitHub stars and 3 forks.

Related skills

UI Styles

11

chrzamz/ui-styles-skill

Participate before building or changing product UI: websites, apps, demos, dashboards, forms, visual redesigns, component-library selection, themes and interaction states. Act as a practical designer: understand the product, recommend and preview a direction, preserve a project visual standard, and implement it using the existing stack. 支持风格推荐、界面制作、组件库选型、主题 token、自定义风格。Skip backend-only work and nonvisual fixes.

Frontend & Design

Slizdeck

13

pedroanze/slizdeck

Genera decks de slides HTML animados a partir de un design system propio — enfocado en pitch decks de startup (minimalista, poco texto, mucha imagen/gráfica), pero también sirve para charlas, demos y recaps de evento. Arquitectura deck-stage 1920×1080 con navegación por teclado, pensado para presentar en vivo. Trae cinco style packs listos (terminal oscuro, blanco puro, color dominante, denso en datos, editorial), cada uno con paleta, tipografía y reglas de composición validadas contra contraste WCAG y clichés visuales de IA. El design system se define de forma guiada —elegir un pack, inyectar

Frontend & Design

Designbrief

10

Heiberg-Industries/designbrief

A library of UI design direction files that provide style guardrails for building tasteful, consistent interfaces. Use when building any UI — select a style or let the AI recommend one based on the project context.

Frontend & Design

Taxue Halftone

12

taxueseek/taxue-halftone

半调海报:用限墨+网点把任意主题做成有结构、有质感、可复用的艺术封面。支持多种印刷语言(半调/孔版/双色/木刻/蓝晒/蓝染/复印机、1-bit 剪影、撕纸拼贴),按风格给出一致又有特色的封面。六项不变式出图前先定:纸色、墨色角色、叠印方式、印刷机制、主体走向、字图音量。触发词:半调海报、艺术封面、网点、孔版、双色、Riso、duotone、木刻、蓝晒、蓝染、蓝染海报、物影、蓝晒物影、反俗套蓝染、复印机美学、不完美印刷拼贴、撕纸拼贴、编辑型印刷拼贴、有意不完美、点阵解构、丝网海报、剪纸、窗花、中式剪纸、网点剪纸、经典致敬、风格模仿、致敬、名画、艺术流派、年代美学、视觉风格转译、波普、波点、圆点场、点画、视错觉、扁平矢量图形、艺术展览海报、平台封面(B站/小红书/抖音/公众号/头像/超宽)、主题结构印刷封面、限墨封面。不用于:全彩实拍、UI、图表、模板拼贴。

Frontend & Design

Frontend Design Pro

12

Krishna-Modi12/frontend-design-pro

Production-grade frontend UI/UX skill registry. Auto-routes to the correct skill based on user intent. Use for anything involving what users see and click in a browser — building or fixing React/Next.js components, pages and layouts; visual defects; animation; dashboards; forms; accessibility audits; frontend performance; 3D with Three.js/R3F; design systems and tokens; and tests for any of it. Skip for backend logic, APIs, databases and infrastructure.

Frontend & Design

Ship Page

12

Zooeyii/ship-page-skill

Create stunning, interactive landing pages for products, startups, and side projects — zero dependencies, single HTML file. Use this skill whenever the user wants to build a landing page, product page, launch page, marketing page, or any promotional web page for their app, tool, SaaS, open-source project, or personal brand. Also triggers when users say "I need a website for my product", "help me launch", "make a page for my app", or want to convert a README into a visual landing page. Works great for Product Hunt launches, GitHub project pages, and indie hacker ship days.

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.