skills.rest
akhmat-s
akhmat-sCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-master

Automate frontend architecture decisions for Next.js, React, and Tailwind projects.

Updated Aug 23, 2026
Search Tags:#frontend#react#next.js#tailwind#component selection
One-click install
npx skills add https://github.com/akhmat-s/Bantadthong-Vibes --skill frontend-master-akhmat-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-master
Source: https://github.com/akhmat-s/Bantadthong-Vibes/tree/main/.claude/skills/frontend-master
Command: npx skills add https://github.com/akhmat-s/Bantadthong-Vibes --skill frontend-master-akhmat-s

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires clsx, tailwind-merge, framer-motion.

What problem does it solve?

This Skill eliminates the decision paralysis and research time when choosing frontend components, animations, and assets.

Core Features & Use Cases

  • Unified Decision Framework: Get instant recommendations for UI components, animations, and tools.
  • Use Case: Imagine you're building a landing page and need dramatic effects. Use this Skill to automatically select between Aceternity for hero sections, Magic UI for SaaS components, or Lottie for simple animations.

Quick Start

I need a hero section with a spotlight effect and animated numbers for my SaaS dashboard.

Frequently Asked Questions about frontend-master

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

FAQPage Schema
How do I choose the right React components for my Next.js project?▼

This Skill automates component selection for Next.js and React projects by analyzing your requirements and recommending UI components, animations, and assets from your design system. It guides decisions across hero sections, SaaS components, and interactive effects based on your functional needs.

Can I use Tailwind with Next.js for consistent theming and component styling?▼

Yes. This Skill integrates Tailwind styling with Next.js and React component decisions, using tools like tailwind-merge and clsx to manage class composition. It ensures consistent theming and design system application across your project.

How do I decide between animation libraries like Lottie and Framer Motion for my SaaS dashboard?▼

This Skill evaluates animation requirements and recommends between options like Framer Motion for component-level animations and Lottie for pre-built sequences. It routes recommendations based on complexity, performance, and your use case—hero effects, transitions, or data visualization.

What's the best way to structure frontend architecture decisions across components, routing, and QA in a Next.js app?▼

This Skill provides a unified decision framework that automates frontend architecture choices for Next.js App Router projects using TypeScript. It covers UI components, animations, assets, theming, and QA workflows, routing to specialized skills for delegation.

Do I need a component library or design system to use this Skill effectively?▼

This Skill works with design systems and modern component libraries in Next.js, React, and Tailwind environments. While not required, having a design system enables more targeted recommendations and structured outputs for tooling integrations.

Can this help eliminate decision paralysis when building landing pages with visual effects?▼

Yes. This Skill eliminates research time by automating component and animation selection for landing pages. It instantly recommends tools like Aceternity for hero spotlight effects or Magic UI for SaaS components, plus animations and assets for your needs.

Related Skills

Explore More Software Engineering Skills→
json-choijson-choi

expo-tailwind-setup

Configure Tailwind CSS v4 in Expo projects with NativeWind and Metro setup.

Community
Intermediate
ttmousettmouse
35

designprompt

Analyze project requirements to recommend design styles and apply design system specifications.

Community
Advanced
DITEKmaxDITEKmax

animated-component-libraries

Provide pre-built animated React components for Tailwind CSS and Framer Motion.

Community
Intermediate
The-Skyy-Rose-Collection-LLCThe-Skyy-Rose-Collection-LLC
3

Interactive Web Development

Build interactive web experiences with JavaScript frameworks and animation libraries.

Official
Advanced