frontend-magic-ui
Magic UI
150+ animated components for SaaS landing pages. Professional polish, production-ready.
When to Use
- Number/stat animations (tickers, counters)
- Logo walls (marquee)
- Bento grid layouts
- Device mockups (iPhone, Safari)
- Text animations (typing, word rotate)
- Shimmer/rainbow buttons
When NOT to Use
- Basic UI → shadcn/ui
- Dramatic hero effects → Aceternity
- State-driven animations → Rive
More from petbrains/mvp-builder
frontend-google-fonts
Typography setup with Google Fonts for Next.js + Tailwind projects. Use when choosing fonts, need font pairing recommendations (SaaS, editorial, corporate presets), or setting up optimized font loading. Includes ready-to-use configurations and performance best practices.
13figma-design-extraction
Extract design tokens, screen structure, and visual references from Figma files. Use whenever a figma.com URL appears in the conversation, when someone mentions Figma tokens, variables, design system extraction, or screen captures. Also use when calling get_variable_defs, get_design_context, get_metadata, or get_screenshot — this skill defines how to use them effectively. Trigger for phrases like "get from Figma", "extract design", "Figma variables", "design tokens from Figma", "capture screens", or any figma.com/design link. Even if the user just pastes a Figma link without instructions, use this skill to parse it and decide what to extract.
13code-analyzer
Comprehensive codebase analysis for building mental model of project structure, dependencies, and implementation context. Use when needing to: (1) Understand project architecture before review or documentation, (2) Find dependencies and shared modules, (3) Trace execution paths and abstraction layers for similar features, (4) Locate implementation markers (AICODE-*), (5) Prepare context for review, memory generation, or agent creation. Triggers on: analyze code, load code context, scan codebase, understand project structure, trace feature.
12sequential-thinking
Structured reasoning framework for complex multi-step analysis using MCP sequential thinking tool. Provides state-based reasoning, branch/revise decision thresholds, quality scoring, and convergence rules for problems requiring 3+ logical steps, debugging unclear root causes, or handling multiple valid approaches.
12figma-design-generate
>
12context7
Up-to-date library documentation retrieval using Context7 MCP tools. Process THINK → RESOLVE → FETCH → APPLY. Use when fetching library docs, resolving package names to IDs, getting implementation guides, exploring API references. Provides package resolution strategy, trust score evaluation, token scaling (3K-20K), topic selection patterns.
11