skills.rest
petbrains
petbrainsOFFICIAL
Explore all skills by this author →
GitHub

frontend-master

Select UI components, animations, assets, and tooling for Next.js 14+ projects.

13|2|Updated Aug 9, 2025
Search Tags:#development#frontend#react#nextjs#tailwind#decision-framework#ui-components
One-click install
npx skills add https://github.com/petbrains/mvp-builder --skill frontend-master
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-master
Source: https://github.com/petbrains/mvp-builder/tree/main/.claude/skills/frontend-master
Command: npx skills add https://github.com/petbrains/mvp-builder --skill frontend-master

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates decision paralysis and research time when building frontend applications by providing a unified decision matrix that instantly routes you to the right tools, components, and implementation patterns for any UI task.

Core Features & Use Cases

  • Decision Framework: Quick matrix for choosing between UI components (shadcn vs Magic UI vs Aceternity), animations (Lottie vs Rive), and assets (free vs AI-generated).
  • Complete Setup Guide: Step-by-step project structure, essential dependencies, and best practices for Next.js + React + Tailwind stacks.
  • Use Case: Imagine you need to build a landing page hero section. This Skill tells you to use Aceternity for spotlight effects, Magic UI for number tickers, and provides the exact code patterns for implementation—saving hours of research and trial-and-error.

Quick Start

Use the frontend-master skill to decide what UI library to use for a SaaS dashboard that needs clean components, animated stats, and a polished hero section.

Frequently Asked Questions about frontend-master

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I choose between UI component libraries for Next.js and React projects?▼

Frontend-master provides a decision matrix comparing shadcn, Magic UI, and Aceternity components, helping you select based on your project needs—whether you need clean dashboard components, animated effects, or polished hero sections. The framework eliminates research time by routing you to the right library instantly.

What's the best way to set up a Next.js 14 project with React 18 and Tailwind CSS?▼

Frontend-master includes a complete setup guide with step-by-step project structure, essential dependencies, and best practices for Next.js 14+ with App Router, React 18+, and Tailwind CSS. It provides a project setup checklist to ensure your foundation is production-ready.

How do I decide between animation libraries like Lottie and Rive for frontend projects?▼

Frontend-master's decision framework compares animation options including Lottie and Rive, helping you select based on complexity, performance, and use case. The framework routes you to the right animation tool and provides implementation patterns for your specific UI task.

Can I use this framework to plan a SaaS dashboard with animated components and hero sections?▼

Yes. Frontend-master is designed for exactly this scenario—it routes you through decisions for clean components, animated stats, and polished hero sections. It combines component selection, animation strategy, and implementation patterns into a unified workflow.

How do I approach choosing between free and AI-generated assets for frontend development?▼

Frontend-master includes an assets strategy decision tree that guides you through choosing between free and AI-generated assets. It helps you evaluate trade-offs and integrate asset selection into your overall component and animation decisions.

Does frontend-master help with QA integration for Next.js projects?▼

Yes. Frontend-master implements QA integration into its decision framework, ensuring your component, animation, and asset choices align with testing and quality standards. It provides a unified approach to scalable frontend task execution.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
huidgehuidge
2

frontend-architecture

Codify frontend architecture guidelines for framework selection and rendering strategies.

Community
Advanced
EdgeHuntEdgeHunt

ck:ui-styling

Streamline React UI styling with shadcn/ui and Tailwind CSS design systems.

Official
Advanced
jungaijungai
2

frontend-dev

Bootstrap React frontends with TypeScript, Tailwind, Next.js, and TanStack tooling.

Community
Intermediate