@pedroab0/skills 1.0.0 → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Pedro Barbosa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,5 +1,12 @@
 # Skills
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/@pedroab0/skills"><img src="https://img.shields.io/npm/dm/@pedroab0/skills.svg" alt="npm downloads" /></a>
+  <a href="https://www.npmjs.com/package/@pedroab0/skills"><img src="https://img.shields.io/npm/v/@pedroab0/skills.svg" alt="npm version" /></a>
+  <a href="https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor"><img src="https://img.shields.io/badge/Figma_Community-Plugin-000000?style=flat&logo=figma&logoColor=white" alt="Figma Community Plugin" /></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
+</p>
+
 A curated collection of modular, production-ready skills developed for AI coding agents (such as Claude Code, OpenCode, Codex, Google Antigravity, and Cursor).
 
 Each skill in this repository is designed to give AI assistants specialized, autonomous capabilities while maintaining:
@@ -14,7 +21,7 @@ Each skill in this repository is designed to give AI assistants specialized, aut
 | Skill | Role / Workflow | Description | Links |
 | :--- | :--- | :--- | :--- |
 | **[`figma-to-code`](./figma-to-code)** | **One-Shot / Fast Prototyping** | Direct, single-turn conversion of Figma designs into clean, production-ready UI components. Best for rapid prototyping and standalone components. | [Guide](./figma-to-code/README.md) · [`SKILL.md`](./figma-to-code/SKILL.md) |
-| **[`figma-extractor`](./figma-extractor)** | **SDD Step 1 (Ingest)** | Pure specification scraper (CLI / REST API) and companion Figma Desktop plugin that pull compact layout trees, design tokens, and preview images into `./.specs/`. Never touches application code. | [Guide](./figma-extractor/README.md) · [Plugin](./figma-extractor/figma-plugin/README.md) · [`SKILL.md`](./figma-extractor/SKILL.md) |
+| **[`figma-extractor`](./figma-extractor)** | **SDD Step 1 (Ingest)** | Pure specification scraper (CLI / REST API) and companion Figma Desktop plugin that pull compact layout trees, design tokens, and preview images into `./.specs/`. Never touches application code. | [Guide](./figma-extractor/README.md) · [Plugin](./figma-extractor/figma-plugin/README.md) · [Community](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor) · [`SKILL.md`](./figma-extractor/SKILL.md) |
 | **[`figma-node-builder`](./figma-node-builder)** | **SDD Step 2 (Implement)** | Grounded UI builder that reads extracted Figma Node specifications (`.specs/*.json`) and preview images (`*.png`) to build components without CSS hallucinations. | [Guide](./figma-node-builder/README.md) · [`SKILL.md`](./figma-node-builder/SKILL.md) |
 
 ---
@@ -40,10 +47,17 @@ flowchart TD
 * **Use `figma-to-code`** when you want fast execution: you provide a Figma URL, and the agent extracts and writes the component in one turn.
 * **Use `figma-extractor` + `figma-node-builder`** in formal Spec-Driven Development (SDD): the design specification is extracted to disk first (via CLI or the companion Figma Desktop plugin), reviewed/approved, and then systematically implemented into your design system without premature code edits.
 
-> [!TIP]
-> **Zero-API Figma Desktop Plugin**: To extract specifications directly inside Figma Desktop without API tokens or rate limits, use the companion **Figma Node JSON Extractor** plugin:
-> * **Figma Community (Recommended)**: Search for **Figma Node JSON Extractor** in Plugins.
-> * **Manual Manifest Import (Local Backup)**: In Figma Desktop, go to **Plugins** $\rightarrow$ **Development** $\rightarrow$ **Import plugin from manifest...** and select `manifest.json` from your installed skills folder (e.g. `~/.claude/skills/figma-extractor/figma-plugin/manifest.json` or `~/.gemini/config/skills/figma-extractor/figma-plugin/manifest.json`).
+---
+
+### Zero-API Companion: Figma Desktop Plugin
+
+<p align="center">
+  <img src="./figma-extractor/figma-plugin/assets/cover.png" alt="Figma Node JSON Extractor" width="100%" />
+</p>
+
+To extract specifications directly inside Figma Desktop without API tokens or rate limits, use the companion [**Figma Node JSON Extractor**](./figma-extractor/figma-plugin/README.md) plugin:
+* **Figma Community (Recommended)**: Install [**Figma Node JSON Extractor** on Figma Community](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor) directly, or search for it under Figma Plugins.
+* **Manual Manifest Import (Local Backup)**: In Figma Desktop, go to **Plugins** $\rightarrow$ **Development** $\rightarrow$ **Import plugin from manifest...** and select `manifest.json` from your installed skills folder (e.g. `~/.claude/skills/figma-extractor/figma-plugin/manifest.json` or `~/.gemini/config/skills/figma-extractor/figma-plugin/manifest.json`).
 
 ---
 
@@ -172,3 +186,10 @@ When adding new skills to this curation:
 3. Provide a `README.md` with detailed skill-specific documentation and manual execution flags.
 4. Keep scripts self-contained with minimal external dependencies.
 5. Update this root `README.md` catalog to list the new skill.
+
+---
+
+## License
+
+This project is licensed under the [MIT License](LICENSE).
+

package/figma-extractor/README.md

@@ -1,5 +1,11 @@
 # Figma Extractor
 
+<p align="center">
+  <a href="https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor"><img src="https://img.shields.io/badge/Figma_Community-Plugin-000000?style=flat&logo=figma&logoColor=white" alt="Figma Community Plugin" /></a>
+  <a href="https://www.npmjs.com/package/@pedroab0/skills"><img src="https://img.shields.io/npm/v/@pedroab0/skills.svg?label=@pedroab0/skills" alt="npm package" /></a>
+  <a href="../LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
+</p>
+
 A lightweight, zero-dependency Node.js CLI tool and agent skill that extracts design node metadata, component hierarchies, design tokens, and rendered preview images from Figma via the Figma REST API into `./.specs/`.
 
 This skill serves as the **Specification Ingestion Layer** in a **Spec-Driven Development (SDD)** workflow.
@@ -133,9 +139,13 @@ node figma-extractor/scripts/fetch_figma.js "<FigmaURL>" --tokens > ./.specs/tok
 
 ## Zero-API Companion: Figma Node JSON Extractor (Figma Plugin)
 
+<p align="center">
+  <img src="./figma-plugin/assets/icon.png" alt="Figma Node JSON Extractor" width="200" />
+</p>
+
 For developers who prefer exporting specifications directly from Figma Desktop without configuring API access tokens or consuming REST API quotas:
 
-* **Published Figma Plugin (Recommended)**: Search for **Figma Node JSON Extractor** in Figma Community / Plugins and click **Open in...** or **Save**.
+* **Published Figma Plugin (Recommended)**: Install [**Figma Node JSON Extractor** on Figma Community](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor) directly, or search for it under Figma Plugins.
 * **Manual Local Installation (Local / Offline Backup)**: In Figma Desktop, go to **Plugins** $\rightarrow$ **Development** $\rightarrow$ **Import plugin from manifest...** and select `manifest.json` from your installed skills directory:
   * **Claude Code**: `~/.claude/skills/figma-extractor/figma-plugin/manifest.json`
   * **Google Antigravity**: `~/.gemini/config/skills/figma-extractor/figma-plugin/manifest.json`

package/figma-extractor/SKILL.md

@@ -196,4 +196,4 @@ When an `INSTANCE` node is present, internal property hashes are converted into
 - **Node Not Found**:
   - Alert the user that the node ID could not be found in the specified file.
 - **Rate Limited (`FIGMA_RATE_LIMIT_EXCEEDED` / `FIGMA_CIRCUIT_BREAKER_ACTIVE`)**:
-  - Figma REST API has per-minute and monthly rate limits on Starter plans. If quota is exhausted or circuit breaker trips, inform the user they can export the specification directly via the companion **Figma Node JSON Extractor** desktop plugin into `./.specs/<name>.json`.
+  - Figma REST API has per-minute and monthly rate limits on Starter plans. If quota is exhausted or circuit breaker trips, inform the user they can export the specification directly via the companion **Figma Node JSON Extractor** desktop plugin (available on [Figma Community](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor)) into `./.specs/<name>.json`.

package/figma-extractor/figma-plugin/README.md

@@ -1,5 +1,15 @@
+<p align="center">
+  <img src="./assets/icon.png" alt="Figma Node JSON Extractor Icon" width="256" />
+</p>
+
 # Figma Node JSON Extractor
 
+<p align="center">
+  <a href="https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor"><img src="https://img.shields.io/badge/Figma_Community-Figma_Node_JSON_Extractor-000000?style=flat&logo=figma&logoColor=white" alt="Figma Community Plugin" /></a>
+  <a href="https://www.npmjs.com/package/@pedroab0/skills"><img src="https://img.shields.io/npm/v/@pedroab0/skills.svg?label=@pedroab0/skills" alt="npm package" /></a>
+  <a href="../../LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT" /></a>
+</p>
+
 Inspect, copy, and export compact, design-system-aware Node JSON and high-resolution companion preview images directly from **Figma Desktop** for AI coding assistants (Claude Code, Antigravity, Cursor) and frontend engineering.
 
 ---
@@ -16,10 +26,11 @@ Inspect, copy, and export compact, design-system-aware Node JSON and high-resolu
 ## Installation in Figma
 
 ### Option A: Install from Figma Community (Recommended)
-1. Open Figma (Desktop app or Web browser).
-2. Go to **Plugins** or the **Figma Community**.
-3. Search for **Figma Node JSON Extractor**.
-4. Click **Open in...** or **Save** to add it to your plugin library.
+Install directly from the Figma Community:
+👉 [**Install Figma Node JSON Extractor on Figma Community**](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor)
+
+1. Open the [plugin page on Figma Community](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor) or search for **Figma Node JSON Extractor** in Figma Plugins.
+2. Click **Open in...** or **Save** to add it to your Figma account.
 
 ### Option B: Manual Installation (Local / Offline Backup)
 To install the plugin directly from your local skills folder or repository:

package/figma-extractor/figma-plugin/manifest.json

@@ -1,10 +1,16 @@
 {
   "name": "Figma Node JSON Extractor",
-  "id": "figma-node-json-extractor",
+  "id": "1691244420692136789",
   "api": "1.0.0",
   "main": "code.js",
   "ui": "ui.html",
   "capabilities": [],
   "enableProposedApi": false,
-  "editorType": ["figma", "dev"]
+  "editorType": ["figma", "dev"],
+  "documentAccess": "dynamic-page",
+  "networkAccess": {
+    "allowedDomains": [
+      "none"
+    ]
+  }
 }

package/figma-node-builder/README.md

@@ -31,7 +31,7 @@ flowchart LR
     C -->|2. figma-node-builder| D["Production Component<br/>(React, Vue, Tailwind)"]
 ```
 
-1. **Step 1 (Ingest)**: Design specifications are extracted into `./.specs/card.json` (and optional companion `./.specs/card.png`) using either [`figma-extractor`](../figma-extractor) (CLI / API) or the **Figma Node JSON Extractor** (Figma Desktop plugin).
+1. **Step 1 (Ingest)**: Design specifications are extracted into `./.specs/card.json` (and optional companion `./.specs/card.png`) using either [`figma-extractor`](../figma-extractor) (CLI / API) or the [Figma Node JSON Extractor](https://www.figma.com/community/plugin/1691244420692136789/figma-node-json-extractor) Figma plugin.
 2. **Review**: The human developer or architect reviews the tokens, components, and layout bounds.
 3. **Step 2 (Build)**: **`figma-node-builder`** is invoked to build the component in your project.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pedroab0/skills",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Curated collection of modular, production-ready skills for AI coding agents (Claude Code, Cursor, OpenCode, Antigravity)",
   "bin": {
     "skills": "bin/cli.js",
@@ -36,6 +36,7 @@
     "figma-to-code",
     "figma-extractor",
     "figma-node-builder",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ]
 }