mohitagw15856/figma-annotation-guide
skills/figma-annotation-guide/SKILL.md
Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
$ install --global
skillsauthnpx skillsauth add mohitagw15856/pm-claude-skills figma-annotation-guideInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 12:29 PM20.7s1 file scanned
SKILL.md
- name:
- figma-annotation-guide
- description:
- Generate structured developer handoff annotations for a Figma screen or component. Use when asked to write Figma annotations, create dev handoff notes, document a Figma design for developers, or write specs for a screen. Produces a complete annotation set covering interactions, states, spacing, accessibility, and edge cases.
Figma Annotation Guide Skill
Produces a complete set of developer handoff annotations for a Figma screen or component — the notes that turn a visual design into a buildable spec.
Required Inputs
- Screen or component description (describe or summarise what was designed)
- Platform (iOS / Android / Web / React Native)
- Interaction type (static / interactive / animated / form)
- Developer audience (mobile / frontend / full-stack)
Output Structure
1. Screen/Component Overview
Name, purpose, entry points, exit points.
2. Interaction Annotations
[Element name]
- Default state: [Visual description]
- On tap/click: [Exact action — API call, state change, navigation]
- Loading state: [Description]
- Success state: [What happens after]
- Error state: [What error looks like and user options]
- Disabled condition: [When and why]
3. State Inventory
| Element | States Required | |---|---| | [Element] | Default, Hover, Active, Disabled, Loading, Error, Empty |
Flag missing designs: "Warning: Error state not designed — needed before build"
4. Spacing and Layout Notes
Fixed vs fluid elements, scroll behaviour, breakpoints, safe areas.
5. Content and Copy Rules
Character limits, dynamic vs static content, truncation rules, empty states.
6. Accessibility Annotations
Touch targets, screen reader labels, focus order, colour contrast, motion preferences.
7. Edge Cases and Developer Questions
- [ ] [Unresolved question for developer to flag]
Quality Checks
- [ ] Every interactive element has all states defined
- [ ] State inventory flags missing designs
- [ ] Accessibility covers touch targets and screen reader labels
- [ ] Empty states specified
- [ ] Edge cases listed as actionable questions
Example Trigger Phrases
- "Write dev annotations for this Figma screen"
- "Create developer handoff notes for [screen/component]"
- "Document this design for the engineering team"
- "Write the Figma spec for [feature]"
- "What should I annotate before handing off this design?"
Related Skills
mohitagw15856/competitor-signal-tracker
development
VerifiedTrustedCommunity
Analyse competitor moves and translate them into strategic implications for your product roadmap. Use when a competitor announces a new feature, pricing change, partnership, or strategic shift, or when producing a periodic competitive intelligence report. Produces a categorised signal analysis with reactive-vs-proactive assessment, threat ratings, specific roadmap implications, and recommended responses with owners.
951SKILL.mdUpdated Apr 21, 2026
mohitagw15856/community-management-playbook
development
VerifiedTrustedCommunity
Build a community management playbook for a brand's social media channels. Use when asked to create guidelines for managing comments, DMs, and community interactions, define a moderation policy, or build response frameworks for social media community managers. Produces a complete playbook with response templates, escalation paths, moderation rules, and tone guidelines.
946SKILL.mdUpdated May 28, 2026
mohitagw15856/claude-superpowers
development
VerifiedTrustedCommunity
Activate a 4-stage coding discipline framework that forces Claude to plan before coding, isolate changes on a branch, write tests first, and self-review output twice before presenting it. Use when starting a complex coding task, when past Claude sessions produced broken first drafts, or when you want to prevent rework cycles. Produces a confirmed written plan, isolated feature branch, test-first implementation, and a double-reviewed output with a correctness and code-quality checklist.
946SKILL.mdUpdated May 28, 2026
mohitagw15856/aeo-optimizer
development
VerifiedTrustedCommunity
Optimize an article for Answer Engine Optimization (AEO) — restructuring content so AI engines like ChatGPT, Perplexity, and Claude can extract, quote, and cite it. Rewrites headings as questions, drops 50-80 word answer capsules, audits paragraph length, and flags trust signals. Use when asked to AEO-optimize, make content AI-readable, improve AI citation chances, or adapt an article for answer engines.
946SKILL.mdUpdated May 28, 2026