@ruyfranca/myskills 1.0.19 → 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/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/README.md

@@ -105,6 +105,12 @@ Integração direta com o Figma através do Model Context Protocol (MCP):
 - **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:
@@ -373,6 +379,7 @@ Você pode acessar as skills diretamente via comandos de barra no chat:
 - `/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.19');
+  .version('1.0.20');
 
 program
   .command('list')

package/package.json

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