Is it compatible with Next.js 14?

Yes, it follows Next.js 14 App Router conventions, including route groups, server/client component separation, and API directory structures.

How does it handle state management and data fetching?

The skill utilizes custom React hooks and a standardized API client pattern in TypeScript to ensure data consistency and clean state handling.

What UI theme does this skill support?

This skill is specifically designed for the Catppuccin Latte color scheme, providing pre-defined hex codes and design tokens for consistent branding.

Does this skill help with animations?

Absolutely. It provides guidelines for both simple CSS transitions and more complex motion logic using the Framer Motion library.

How do I verify the frontend code generated by this skill?

The skill includes build verification steps, such as running 'npm run build' within the frontend directory to catch TypeScript errors and SSR issues.

Frontend Specialist (TheMoon)

Name: Frontend Specialist (TheMoon)
Author: usermaum

byusermaum

0•

Design Tools

Implements high-quality React components and UI patterns using the Catppuccin Latte theme and Tailwind CSS for coffee roasting management tools.

This skill equips Claude with project-specific knowledge for TheMoon's frontend ecosystem, enabling it to build responsive Next.js 14 applications with precision. It provides standardized React/TypeScript patterns, specific color palettes from the Catppuccin Latte theme, and integrated animations using Framer Motion. It streamlines the development process by ensuring consistency in UI components, API integration, and performance optimization while maintaining strict adherence to the project's directory structure and coding conventions.

Key Features

010 GitHub stars

02Automated build verification and SSR compatibility checks

03Catppuccin Latte theme implementation with standardized color tokens

04Performance-optimized CSS transitions and Framer Motion animations

05Next.js 14 App Router and Shadcn/UI component patterns

06TypeScript-integrated API client and custom hook generation

Use Cases

01Building interactive dashboards for coffee roasting data visualization

02Creating responsive feature cards and data tables for bean inventory management

03Fixing UI inconsistencies and optimizing frontend performance for Next.js applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usermaum/themoon frontend-specialist

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Automated build verification and SSR compatibility checks

03Catppuccin Latte theme implementation with standardized color tokens

04Performance-optimized CSS transitions and Framer Motion animations

05Next.js 14 App Router and Shadcn/UI component patterns

06TypeScript-integrated API client and custom hook generation

Use Cases

01Building interactive dashboards for coffee roasting data visualization

02Creating responsive feature cards and data tables for bean inventory management

03Fixing UI inconsistencies and optimizing frontend performance for Next.js applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usermaum/themoon frontend-specialist

For use in Claude.ai and ChatGPT