@pedroab0/skills 0.0.0-stage → 1.0.0

package/figma-extractor/demo/style.css

@@ -0,0 +1,360 @@
+/* DT Money - Complete Desktop Home UI */
+:root {
+  /* Colors from Figma */
+  --gray-100: #e1e1e6;
+  --gray-300: #c4c4cc;
+  --gray-500: #7c7c8a;
+  --gray-600: #323238;
+  --gray-700: #29292e;
+  --gray-800: #202024;
+  --gray-900: #121214;
+
+  --green-300: #00b37e;
+  --green-500: #00875f;
+  --green-700: #015f43;
+  --red-500: #f75a68;
+  --white: #ffffff;
+
+  /* Typography */
+  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --radius-sm: 5px;
+  --radius-md: 6px;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--gray-800);
+  color: var(--gray-100);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Page Header (Dark Top Bar) */
+.page-header {
+  background-color: var(--gray-900);
+  padding: 40px 0 128px 0;
+}
+
+.header-container {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  text-decoration: none;
+}
+
+.logo-text {
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--gray-100);
+  letter-spacing: -0.5px;
+}
+
+.btn-new-transaction {
+  background-color: var(--green-500);
+  color: var(--white);
+  border: none;
+  border-radius: var(--radius-md);
+  padding: 12px 20px;
+  font-size: 16px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.1s;
+}
+
+.btn-new-transaction:hover {
+  background-color: var(--green-700);
+}
+
+.btn-new-transaction:active {
+  transform: scale(0.98);
+}
+
+/* Main Content Area */
+.main-content {
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 24px 64px 24px;
+}
+
+/* Summary Cards (Overlapping Header by ~68px) */
+.summary-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 32px;
+  margin-top: -68px;
+}
+
+.card {
+  background-color: var(--gray-600);
+  border-radius: var(--radius-md);
+  padding: 24px 24px 24px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 137px;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
+}
+
+.card.card-highlight {
+  background-color: var(--green-700);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-title {
+  color: var(--gray-300);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+}
+
+.card-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.card-value {
+  color: var(--gray-100);
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 45px;
+}
+
+/* Search Bar */
+.search-form {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 64px;
+}
+
+.search-input {
+  flex: 1;
+  background-color: var(--gray-900);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  padding: 16px;
+  color: var(--gray-100);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 22px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search-input::placeholder {
+  color: var(--gray-500);
+}
+
+.search-input:focus {
+  border-color: var(--green-300);
+}
+
+.btn-search {
+  background-color: transparent;
+  border: 1px solid var(--green-300);
+  border-radius: var(--radius-md);
+  color: var(--green-300);
+  padding: 14px 32px;
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.btn-search:hover {
+  background-color: var(--green-500);
+  border-color: var(--green-500);
+  color: var(--white);
+}
+
+.btn-search svg {
+  transition: fill 0.2s;
+}
+
+.btn-search:hover svg {
+  fill: var(--white);
+}
+
+/* Transactions Table */
+.table-container {
+  margin-top: 24px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.transactions-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0 8px;
+}
+
+.transactions-table tr {
+  background-color: var(--gray-700);
+  transition: transform 0.15s, background-color 0.15s;
+}
+
+.transactions-table tr:hover {
+  background-color: #2e2e34;
+}
+
+.transactions-table td {
+  padding: 20px 32px;
+  font-size: 16px;
+  line-height: 26px;
+  vertical-align: middle;
+}
+
+.transactions-table td:first-child {
+  border-top-left-radius: var(--radius-sm);
+  border-bottom-left-radius: var(--radius-sm);
+  color: var(--gray-300);
+  width: 48%;
+}
+
+.transactions-table td:last-child {
+  border-top-right-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
+  color: var(--gray-500);
+  text-align: right;
+  width: 14%;
+}
+
+.transactions-table .col-category {
+  color: var(--gray-500);
+  width: 20%;
+}
+
+.transactions-table .col-amount {
+  font-weight: 400;
+  width: 18%;
+  white-space: nowrap;
+}
+
+.amount-income {
+  color: var(--green-300);
+}
+
+.amount-outcome {
+  color: var(--red-500);
+}
+
+/* Pagination */
+.pagination {
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.pagination-btn {
+  background: transparent;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 8px;
+}
+
+.pagination-btn.disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+.pagination-pages {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.page-num {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-md);
+  background-color: var(--gray-600);
+  color: var(--gray-300);
+  border: none;
+  font-family: var(--font-sans);
+  font-size: 16px;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.page-num:hover:not(.active) {
+  background-color: var(--gray-700);
+  color: var(--gray-100);
+}
+
+.page-num.active {
+  background-color: var(--green-500);
+  color: var(--white);
+}
+
+/* Responsive Breakpoints */
+@media (max-width: 960px) {
+  .summary-cards {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .transactions-table td {
+    padding: 16px 20px;
+    font-size: 14px;
+  }
+
+  .card-value {
+    font-size: 26px;
+  }
+}
+
+@media (max-width: 640px) {
+  .header-container {
+    flex-direction: column;
+    gap: 20px;
+    align-items: flex-start;
+  }
+
+  .search-form {
+    flex-direction: column;
+  }
+
+  .btn-search {
+    width: 100%;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,70 @@
+# Figma Node JSON Extractor
+
+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.
+
+---
+
+## Key Features
+
+* **Design-System Aware**: Resolves layout flexbox rules (`layoutMode`, `padding`, `gap`), dimensions, hex colors, corner radii, and component variants into clean props.
+* **Token-Optimized AST**: Strips vector paths, render masks, and matrix transforms, reducing payload size by up to 85% compared to raw Figma document trees.
+* **Companion Preview**: Automatically renders high-resolution PNG reference images alongside the JSON contract.
+* **Fast Local Handoff**: Runs locally inside your Figma client using the official Figma Plugin API (`figma.currentPage.selection`) with zero API credentials required.
+
+---
+
+## 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.
+
+### Option B: Manual Installation (Local / Offline Backup)
+To install the plugin directly from your local skills folder or repository:
+1. Open the **Figma Desktop app**.
+2. In the top-left menu, navigate to:
+   $$\text{Plugins} \longrightarrow \text{Development} \longrightarrow \text{Import plugin from manifest...}$$
+3. Select `manifest.json` from your machine based on your setup:
+   * **Installed via `npx @pedroab0/skills` (Global)**:
+     * **Claude Code**: `~/.claude/skills/figma-extractor/figma-plugin/manifest.json`
+     * **Google Antigravity**: `~/.gemini/config/skills/figma-extractor/figma-plugin/manifest.json`
+     * **OpenCode**: `~/.config/opencode/skills/figma-extractor/figma-plugin/manifest.json`
+   * **Installed in local workspace (`--local`)**:
+     * `.claude/skills/figma-extractor/figma-plugin/manifest.json`
+     * `.gemini/skills/figma-extractor/figma-plugin/manifest.json`
+   * **Cloned Git repository**:
+     * `<repo-root>/figma-extractor/figma-plugin/manifest.json`
+4. The plugin is now permanently loaded under **Plugins** $\rightarrow$ **Development**.
+
+---
+
+## How to Extract Node JSON
+
+1. **Select any frame or component** on your canvas (e.g., Transaction Card, Navbar, Modal).
+2. Right-click the element $\rightarrow$ **Plugins** $\rightarrow$ **Figma Node JSON Extractor** (or press `⌥ ⌘ P` to re-run).
+3. In the plugin popup, choose your export format:
+   * **📋 Copy Node JSON**: Copies the clean AST specification directly to your clipboard (ready to paste into chat).
+   * **💾 .json**: Downloads `<name>.json` containing layout, dimensions, tokens, and props.
+   * **🖼 .png**: Downloads the high-resolution 2x visual preview image.
+   * **📦 Both (.zip)**: Downloads `<name>.specs.zip` containing both files in a single archive.
+4. Place the downloaded files into your project's `./.specs/` folder:
+   ```text
+   my-app/
+   └── .specs/
+       ├── card.json
+       └── card.png
+   ```
+
+---
+
+## How to Tell Your Agent to Build the UI
+
+Once the specification is in `./.specs/`, simply instruct your agent in Antigravity, Claude Code, or Cursor:
+
+```text
+Build the component from .specs/card.json
+```
+
+The agent will activate **`figma-node-builder`** and synthesize the component directly from the local specification contract without needing access to the Figma REST API.