docs(skills): pine-figma authoring skill — ground AI-authored Figma on Pine

[QuintonJason]

Description

Companion to the pine code skill (#789). That skill grounds AI code
generation on Pine; this one grounds AI Figma generation on Pine.

Motivation / context: when designers use AI to make Figmas
(generate_figma_design, Figma Make/First Draft), the default output is
detached rectangles with hardcoded px and off-library text — it looks like
Pine but has no relationship to the system (layers show raw frames, Dev Mode
hands off CSS instead of pds-*). We already have the read direction (Code
Connect in libs/figma/, the Pine variables, the pine code skill); the missing
piece was a guardrail on the author direction. This is that guardrail.

It follows the same shape as the code skill — resolve → compose → bind →
audit:

1. Orient — search_design_system / get_libraries; never invent a component.
2. Compose from instances — insert ❖ Pine components, never draw shapes.
3. Bind every value — text uses a ✳ Pine styles typography/* style; spacing/color/radius bind to Pine variables. No hardcoded px.
4. Audit (gate) — get_variable_defs + get_design_context flag detached instances, unbound values, and ⛔ DO NOT USE (Sage/Mercury) assets; loop until clean.

Notable decision — pds-text and pds-box live here, not as Code Connect
files: Code Connect attaches to a component node, and neither exists as one in
the Pine Figma file (text = text styles; layout = auto-layout + variables). That's
exactly why AI-drawn Figmas leak into px — the two primitives every screen is
mostly made of have no component to drag in. Their code relationship is carried as
a style/variable→code map in reference/primitives.md. (See the companion PR #794
which reclassifies them in CODE_CONNECT_COVERAGE.md.)

No new dependencies.

Fixes #(no issue)

Type of change

• New feature (non-breaking change which adds functionality) — a new agent skill
• This change requires a documentation update — the skill is documentation

How Has This Been Tested?

• other: content grounded against the live Pine Figma file via the Figma MCP (search_design_system confirmed text = ✳ Pine styles and no Box/Text component; the ⛔ DO NOT USE Sage/Mercury library names are the real ones returned) and against the pds-text/pds-box component APIs in libs/core.

Test Configuration:

• Pine versions: n/a (docs/skill only)
• OS: n/a
• Browsers: n/a

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally with my changes
• Design has QA'ed and approved this PR

Follow-up

Generalize the /.well-known/skills/ manifest generator in
libs/core/.storybook/main.js (added with #789) from the hardcoded skills/pine
to enumerate all skills/*, so this skill installs via npx skills add too.
Left out here to avoid touching #789's unmerged generator.

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	bca6648
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/6a7e5539f49dbb00087dc58e
😎 Deploy Preview	https://deploy-preview-793--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.