> anima-reference-architecture
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".
curl "https://skillshub.wtf/jeremylongshore/claude-code-plugins-plus-skills/anima-reference-architecture?format=md"Anima Reference Architecture
System Architecture
┌────────────────┐ ┌──────────────┐ ┌─────────────────┐
│ Figma Design │────▶│ Figma API │────▶│ Anima SDK │
│ (Components) │ │ (Webhooks) │ │ (Code Gen) │
└────────────────┘ └──────────────┘ └────────┬────────┘
│
┌─────────▼────────┐
│ Post-Processing │
│ - Token mapping │
│ - Normalization │
│ - Lint/format │
└─────────┬────────┘
│
┌─────────▼────────┐
│ Output │
│ - React/Vue/HTML │
│ - PR creation │
│ - Storybook sync │
└──────────────────┘
Project Structure
design-to-code/
├── src/
│ ├── anima/
│ │ ├── client.ts # Singleton SDK client
│ │ ├── cache.ts # Generation cache
│ │ ├── retry.ts # Error recovery
│ │ └── presets.ts # Framework/styling presets
│ ├── pipeline/
│ │ ├── scanner.ts # Figma component discovery
│ │ ├── generator.ts # Batch code generation
│ │ ├── change-detector.ts # Figma version tracking
│ │ └── runner.ts # Pipeline orchestrator
│ ├── post-process/
│ │ ├── normalizer.ts # Output normalization
│ │ ├── token-mapper.ts # Design token mapping
│ │ └── organizer.ts # File organization + barrel exports
│ ├── webhooks/
│ │ └── figma-handler.ts # Figma webhook receiver
│ └── server.ts # Express API (optional)
├── scripts/
│ ├── generate-components.ts # CLI generation script
│ └── compare-presets.ts # Side-by-side preset comparison
├── fixtures/
│ └── component-map.json # Figma node ID → component name mapping
├── generated/ # Output directory (gitignored or committed)
├── .anima-cache/ # Generation cache (gitignored)
└── package.json
Key Design Decisions
| Decision | Choice | Rationale |
|---|---|---|
| SDK | @animaapp/anima-sdk | Official, server-side, typed |
| Change detection | Figma Webhooks v2 | Event-driven, no polling waste |
| Caching | File-based with MD5 keys | Simple, no external dependencies |
| Post-processing | Custom normalizer | Match project conventions |
| CI integration | GitHub Actions scheduled | Avoid real-time generation costs |
| Output framework | React + Tailwind + shadcn | Most production-ready output |
Output
- Complete design-to-code pipeline architecture
- Project structure with all components
- Design decision rationale documented
Resources
Next Steps
Start with anima-install-auth, then follow skills through production deployment.
> related_skills --same-repo
> fathom-cost-tuning
Optimize Fathom API usage and plan selection. Trigger with phrases like "fathom cost", "fathom pricing", "fathom plan".
> fathom-core-workflow-b
Sync Fathom meeting data to CRM and build automated follow-up workflows. Use when integrating Fathom with Salesforce, HubSpot, or custom CRMs, or creating automated post-meeting email summaries. Trigger with phrases like "fathom crm sync", "fathom salesforce", "fathom follow-up", "fathom post-meeting workflow".
> fathom-core-workflow-a
Build a meeting analytics pipeline with Fathom transcripts and summaries. Use when extracting insights from meetings, building CRM sync, or creating automated meeting follow-up workflows. Trigger with phrases like "fathom analytics", "fathom meeting pipeline", "fathom transcript analysis", "fathom action items sync".
> fathom-common-errors
Diagnose and fix Fathom API errors including auth failures and missing data. Use when API calls fail, transcripts are empty, or webhooks are not firing. Trigger with phrases like "fathom error", "fathom not working", "fathom api failure", "fix fathom".