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>
Self-host Public Sans via @fontsource-variable (weights 100-900, normal
+ italic). Add 6 composed @utility classes in typography.css for styles
that combine multiple properties (body-strong, small-strong, label,
overline, body-link, small-link). Matching text styles created in the
Figma design file via MCP for designer use.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Design system and component library for the Research Synthesiser. Includes:
- Tailwind CSS v4 with @theme-based design tokens from the existing synthesiser
- Storybook 10.4 with MCP, a11y, docs, and vitest addons
- ESLint + Prettier with Tailwind class sorting
- Button component as pipeline validation
- CLAUDE.md with project principles and conventions
- ARCHITECTURE.md as living architecture document
- Penpot and Storybook MCP server configuration
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
