@ruyfranca/myskills 1.0.18 → 1.0.19

package/.agent/skills/figma-dev-mode/SKILL.md

@@ -0,0 +1,76 @@
+---
+name: figma-dev-mode
+description: Setup and utilization of the Figma Dev Mode MCP to inspect components, layouts, and styles directly from Figma design files.
+allowed-tools: Read, Write, Edit, Glob, run_command
+---
+
+# Figma Dev Mode MCP
+
+> Integrate UI design precisely measuring and extracting information directly from Figma directly through the Dev Mode MCP.
+
+## 🎯 Selective Reading Rule
+
+**Read ONLY files relevant to the request!** If you just need to query nodes, you don't need to read setup.
+
+---
+
+## 📑 Content Map
+
+| Context | Action |
+|---------|--------|
+| Project has no `.mcp.json` | Create `.mcp.json` with Figma MCP config |
+| Analyzing UI/UX | Use MCP to inspect Figma Node IDs |
+| Translating to Code | Extract CSS/Tailwind properties from Figma |
+
+---
+
+## 🔌 Setup Config
+
+To enable the Figma MCP into the project, the following `.mcp.json` block must be present in the user's project root:
+
+```json
+{
+  "mcpServers": {
+    "Figma Dev Mode MCP": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}
+```
+
+> **Requirements:** The user MUST have the Figma Desktop App running locally with Dev Mode enabled for the MCP to work.
+
+---
+
+## 🔗 Related Skills
+
+| Need | Skill |
+|------|-------|
+| Frontend implementation | `@[skills/senior-frontend]` |
+| Design Systems | `@[skills/ui-design-system]` |
+| UI/UX Best practices | `@[skills/ui-ux-pro-max]` |
+
+---
+
+## ✅ Integration Checklist
+
+Before implementing a design from Figma:
+
+- [ ] **Figma Desktop is running?** (Remind the user if MCP connection fails)
+- [ ] **Figma Node URL/ID provided?** (Ask the user for the specific Figma frame link)
+- [ ] **Selected the correct framework?** (Tailwind, Vanilla CSS, React Native)
+- [ ] **Extracted exact tokens?** (Colors, border-radii, spacing)
+
+---
+
+## ❌ Anti-Patterns
+
+**DON'T:**
+- Guess dimensions and colors when the Figma link is provided.
+- Fail silently if the MCP connection drops (tell the user to open Figma).
+- Extract hardcoded colors without checking if they belong to a Design System's token.
+
+**DO:**
+- Use the MCP to precisely query the layout properties.
+- Map Figma styles to tailwind config variables when possible.
+- Remind the user to open the specific project in Figma Desktop.

package/.agent/workflows/figma.md

@@ -0,0 +1,10 @@
+---
+description: Start Figma Dev Mode MCP integration and UI design translation
+---
+
+# Figma Workflow
+
+1. Configure the `.mcp.json` in the user's project to point to the Figma MCP at `http://127.0.0.1:3845/mcp`.
+2. Instruct the user to open the Figma Desktop app and ensure the design file is active.
+3. Ask the user for the specific Figma URL or Node ID they want to implement.
+4. Call `@[skills/figma-dev-mode]` and `@[skills/senior-frontend]` to begin extraction and implementation.

package/.mcp.json

@@ -0,0 +1,7 @@
+{
+  "mcpServers": {
+    "Figma Dev Mode MCP": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}

package/README.md

@@ -99,6 +99,12 @@ Especialista em otimização para mecanismos de busca:
 Inteligência avançada de design e experiência do usuário:
 - **Design System**: Gerador de sistemas de design com base em indústria e estilo.
 
+### [Figma Dev Mode](file:///Users/ruy/Code/mySkills/.agent/skills/figma-dev-mode/SKILL.md)
+Integração direta com o Figma através do Model Context Protocol (MCP):
+- **Extração**: Inspeção de nós visuais, tokens de cor, tipografia e espaçamento.
+- **Integração**: Configuração de `.mcp.json` para conectar o Claude/Cursor ao Figma Desktop.
+- **Workflow**: Tradução perfeita do design para código.
+
 ---
 ## 📚 Mais de 70 Skills Especializadas!
 A biblioteca foi expandida massivamente com recursos do Antigravity Kit. Algumas novas categorias incluem:
@@ -366,6 +372,7 @@ Você pode acessar as skills diretamente via comandos de barra no chat:
 - `/marketing-campaigns`: Ativa o gestor de campanhas para planejamento e execução estratégica.
 - `/web-perf`: Ativa o engenheiro de performance para otimização de Core Web Vitals.
 - `/invoice-organizer`: Ativa o assistente de organização financeira e contábil.
+- `/figma`: Ativa a integração MCP com o Figma Dev Mode para extração visual.
 
 ## 📁 Estrutura do Projeto
 

package/index.js

@@ -16,7 +16,7 @@ const AGENTS_DIR = path.join(__dirname, '.agent', 'agents');
 program
   .name('myskills')
   .description('CLI para gerenciar e instalar skills e agents do Antigravity')
-  .version('1.0.14');
+  .version('1.0.19');
 
 program
   .command('list')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ruyfranca/myskills",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Biblioteca de skills customizadas para Antigravity / Claude Code",
   "main": "index.js",
   "bin": {