Add workflow tooling: claude2figma skills, Storybook addons, Figma permissions

Install @storybook/addon-designs for embedding Figma frames in stories
and claude2figma skills (preflight, component-rules, style-binding,
reference-interpreter) for enforcing design token compliance when
writing to Figma. Add PostToolUse hook for use_figma QA reminders and
pre-allow Figma MCP + Code Connect tools in settings.json.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

ARCHITECTURE.md

@@ -107,6 +107,20 @@ src/
 - Key tools: `get_design_context`, `get_variable_defs`, `get_screenshot`, `search_design_system`, `use_figma`
 - Design tokens extracted via `get_variable_defs` → mapped to `@theme` values in `tokens.css`
 
+### Code Connect
+- Links Figma components to their React implementations
+- Once linked, `get_design_context` returns actual component code instead of generic markup
+- Mapped as we build each component via `add_code_connect_map` (label: "React")
+
 ### Storybook MCP
 - Available at `localhost:6006/mcp` when Storybook dev server is running
 - Provides: component listing, documentation retrieval, story generation, a11y testing
+- `@storybook/addon-designs` embeds Figma frames in the story panel for side-by-side comparison
+- `@storybook/addon-mcp` serves the MCP endpoint
+
+### claude2figma Skills
+- 4 skills in `.claude/skills/` that enforce design system compliance when writing to Figma
+- **figma-preflight**: Validates MCP connection, audits libraries, builds a Token Map of all styles/variables
+- **component-rules**: Library-first lookup, Auto Layout conventions, semantic node naming
+- **figma-style-binding**: All visual values must bind to Figma Styles or Variables, never hardcoded; includes post-write QA
+- **reference-interpreter**: Converts screenshots/references into structured Design Briefs mapped to design tokens