ReddRadar
Agent skill
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".
Install this agent skill to your Project
npx add-skill https://github.com/jeremylongshore/claude-code-plugins-plus-skills/tree/main/plugins/saas-packs/anima-pack/skills/anima-reference-architecture
SKILL.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.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
jeremylongshore/claude-code-plugins-plus-skills
dockerfile-generator
Dockerfile Generator - Auto-activating skill for DevOps Basics. Triggers on: dockerfile generator, dockerfile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
branch-naming-helper
Branch Naming Helper - Auto-activating skill for DevOps Basics. Triggers on: branch naming helper, branch naming helper Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
readme-generator
Readme Generator - Auto-activating skill for DevOps Basics. Triggers on: readme generator, readme generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
makefile-generator
Makefile Generator - Auto-activating skill for DevOps Basics. Triggers on: makefile generator, makefile generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
gitignore-generator
Gitignore Generator - Auto-activating skill for DevOps Basics. Triggers on: gitignore generator, gitignore generator Part of the DevOps Basics skill category.
jeremylongshore/claude-code-plugins-plus-skills
pre-commit-hook-setup
Pre Commit Hook Setup - Auto-activating skill for DevOps Basics. Triggers on: pre commit hook setup, pre commit hook setup Part of the DevOps Basics skill category.
Didn't find tool you were looking for?