@ruyfranca/myskills 1.0.18 → 1.0.20

package/.agent/skills/creative-design-figma/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: creative-design-figma
+description: Use the Official Figma MCP server to fetch design context, screenshots, variables, and assets from Figma via OAuth token, and to translate Figma nodes into production code.
+allowed-tools: Read, Write, Edit, Glob, run_command
+---
+
+# 🎨 Creative Design Figma
+
+> Integrate the Official Figma MCP Server to extract pixel-perfect details, colors, and design context directly via the cloud.
+> Note: This relies on the Remote Figma MCP (`https://mcp.figma.com/mcp`), NOT the local Dev Mode server.
+
+## 🎯 Selective Reading Rule
+
+**Read ONLY files relevant to the request!** If you just need prompt patterns, you don't need to read the setup.
+
+---
+
+## 📑 Content Map
+
+| Context | Action |
+|---------|--------|
+| Project has no `.mcp.json` | Create `.mcp.json` with the Figma Cloud MCP |
+| Generating Code | Follow the Required Flow for extracting `get_design_context` |
+| Extracting Tokens | Execute `get_variable_defs` for colors and spacing |
+
+---
+
+## 🔌 Setup Config
+
+To enable the Official Figma MCP, the following `.mcp.json` block must be present in the user's project root (or inside their global Claude config).
+
+**⚠️ REQUIREMENT:** The user MUST provide `FIGMA_OAUTH_TOKEN`.
+
+```json
+{
+  "mcpServers": {
+    "Figma Official MCP": {
+      "command": "npx",
+      "args": ["-y", "@figma/mcp-server"],
+      "env": {
+        "FIGMA_OAUTH_TOKEN": "<USER_MUST_PROVIDE_THIS>"
+      }
+    }
+  }
+}
+```
+
+> **Reminder:** Tell the user to add their Personal Access Token if connection fails. This is a Cloud API.
+
+---
+
+## 🔗 Related Skills
+
+| Need | Skill |
+|------|-------|
+| Frontend implementation | `@[skills/senior-frontend]` |
+| Visual Design tokens | `@[skills/theme-factory]` |
+
+---
+
+## ✅ Integration Workflow (Required)
+
+When transforming a Figma design into code via this skill, perform these steps in order:
+
+1. **`get_design_context`**: Run this first using the Figma Frame/Layer link to get structured design data.
+2. **`get_metadata` (Optional)**: If the node is too large and the context truncates, fetch the metadata outline first, then target specific child nodes.
+3. **`get_screenshot`**: Request a screenshot of the node to have a visual reference of the variant.
+4. **Implement**: Start the design-to-code translation. Ensure you map Figma tokens to the project's Tailwind config or CSS custom properties.
+
+---
+
+## ❌ Anti-Patterns
+
+**DON'T:**
+- Use placeholders for images when the MCP returns an asset download link. Use the provided asset source.
+- Pull new external icon libraries (like Lucide or FontAwesome) if the designer specifically provided custom SVGs in the Figma payload.
+
+**DO:**
+- Prompt the user for the Figma URL (copy link to frame).
+- Request the `FIGMA_OAUTH_TOKEN` if you see authentication errors.
+- Extract styling strictly reproducing the visual screenshot.

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/creative-design-figma.md

@@ -0,0 +1,11 @@
+---
+description: Start Official Figma MCP integration via Creative Design Figma skill
+---
+
+# Official Figma MCP Workflow
+
+1. Ensure the `.mcp.json` includes the Official Figma MCP configuration.
+2. Ensure the user has provided the `FIGMA_OAUTH_TOKEN` environment variable.
+3. Ask the user for the specific Figma URL (Frame/Layer link) they want to implement.
+4. Call `@[skills/creative-design-figma]` to begin extraction mapping (`get_design_context` and `get_screenshot`).
+5. Proceed to implement code directly mapping Figma tokens to the current codebase framework.

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,18 @@ 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.
+
+### [Creative Design Figma](file:///Users/ruy/Code/mySkills/.agent/skills/creative-design-figma/SKILL.md)
+Integração com o Figma Oficial na Nuvem:
+- **Cloud MCP**: Extração de dados da API Oficial do Figma via `FIGMA_OAUTH_TOKEN`.
+- **Flow**: Fluxos estruturados de Contexto Visual (`get_design_context`) e Print de Tela (`get_screenshot`).
+- **Precisão**: Extração limpa de variáveis, componentes e assets (SVGs e imagens).
+
 ---
 ## 📚 Mais de 70 Skills Especializadas!
 A biblioteca foi expandida massivamente com recursos do Antigravity Kit. Algumas novas categorias incluem:
@@ -366,6 +378,8 @@ 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.
+- `/creative-design-figma`: Ativa a integração MCP Oficial usando tokens de Nuvem do Figma.
 
 ## 📁 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.20');
 
 program
   .command('list')

package/package.json

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