mohitagw15856
036511ab3e
Broadens both reach (more tools) and content types (an MCP server), continuing the multi-platform story. Windsurf + Aider: - build-exports.mjs gains two platforms: exports/windsurf/*.md (workspace rules, trigger: model_decision) and exports/aider/*.md (conventions for `aider --read`). Now 5 platforms (ChatGPT, Gemini, Cursor, Windsurf, Aider). - install.sh + bin/cli.mjs install both (windsurf -> .windsurf/rules, aider -> .aider/skills with a --read hint); generated README index is excluded from copies. - One-line windsurf-install.sh / aider-install.sh wrappers for parity. MCP server (new content type): - mcp/server.mjs — zero-dependency stdio MCP server exposing list_skills, search_skills, get_skill. Published as a second bin (pm-claude-skills-mcp). Logs to stderr; reads bundled skills/ at startup. mcp/README.md documents client config. Also: README hero "See it in action" demo placement (ready to swap in a GIF; recording guide in web/docs-assets/README.md), Works-With table + exports + install docs updated, CHANGELOG Unreleased. package.json files/bin updated. Claude-Session: https://claude.ai/code/session_016JWn5jRD5tcEFKrubjQ6Px Co-authored-by: Claude <noreply@anthropic.com>
73 lines
2.9 KiB
Markdown
73 lines
2.9 KiB
Markdown
---
|
|
trigger: model_decision
|
|
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
|
|
|
|
## Anti-Patterns
|
|
|
|
- [ ] Do not annotate only the happy path — error states, loading states, and empty states must all be documented
|
|
- [ ] Do not use vague spacing descriptions like "some padding" — specify exact pixel values or token names
|
|
- [ ] Do not skip accessibility annotations — focus order, ARIA labels, and colour contrast ratios must be included
|
|
- [ ] Do not leave interaction behaviour undescribed — every interactive element needs a documented response
|
|
- [ ] Do not produce annotations without edge cases — developers need to know what happens at boundaries
|
|
|
|
## 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?"
|