Claude MarketplacesSubmit
modu-ai avatar

Moai Domain Frontend

modu-ai/moai-adk

A comprehensive frontend specialist covering React 19 server components, Next.js 16 App Router patterns, and Vue 3.5 Composition API. You get modular deep-dives on component architecture with CVA variants, state management across Zustand and Pinia, and performance optimization including code splitting and memoization. It includes Vercel's 45-rule best practices doc and an AI-assisted patterns module for visual verification with Playwright. The evolvable sections on rationalizations are sharp (calling out "any infects the entire call chain"). Currently marked for refactor into a router pointing to separate React patterns and Nextra library skills, which makes sense given how much ground it covers. Use this when building modern web UIs and you want opinionated guidance across the current framework landscape.

skills.sh installs
140
GitHub stars
1.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add modu-ai/moai-adk --skill moai-domain-frontend --agent claude-code

Installs into .claude/skills of the current project.

Files

Frontend Development Specialist

Quick Reference

Modern Frontend Development - Comprehensive patterns for React 19, Next.js 16, Vue 3.5.

Core Capabilities:

  • React 19: Server components, concurrent features, cache(), Suspense
  • Next.js 16: App Router, Server Actions, ISR, Route handlers
  • Vue 3.5: Composition API, TypeScript, Pinia state management
  • Component Architecture: Design systems, compound components, CVA
  • Performance: Code splitting, dynamic imports, memoization, Framer Motion animations

When to Use:

  • Modern web application development
  • Component library creation
  • Frontend performance optimization
  • UI/UX with accessibility

Patterns

Framework Patterns

React 19 Patterns:

  • Server Components, Concurrent features, cache() API, Form handling

Next.js 16 Patterns:

  • App Router, Server Actions, ISR, Route Handlers, Parallel Routes

Vue 3.5 Patterns:

  • Composition API, Composables, Reactivity, Pinia, Provide/Inject

Architecture Patterns

Component Architecture:

  • Design tokens, CVA variants, Compound components, Accessibility

State Management:

  • Zustand, Redux Toolkit, React Context, Pinia

Performance Optimization:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/modu-ai/moai-adk
Categories
Frontend Development, Code Review & Quality, Debugging, Design & UI/UX
First seen
Jun 3, 2026

More from modu-ai/moai-adk

All 6

Recommended

More Frontend Development
1butterbase-ai avatardeploy-frontendbutterbase-ai/butterbase-skillsWalks you through the seven-step process to get a React, Next.js, or static site live on Butterbase, from setting environment variables...0skills.sh installs
2composiohq avatarsenior-frontendcomposiohq/awesome-claude-pluginsFrontend development skill for React, Next.js, TypeScript, and Tailwind CSS applications. Use when building React components, optimizing Next.js performance, an0skills.sh installs
3daffy0208 avatarFrontend Builderdaffy0208/ai-dev-standardsBuild modern React/Next.js frontends. Use when creating web applications, choosing frontend stack, structuring components, or implementing UI/UX designs. Covers0skills.sh installs
4recomby-ai avatarfrontend-designrecomby-ai/recomby-geoCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 0skills.sh installs
5syahiidkamil avatarfrontend-designsyahiidkamil/software-engineer-ai-agent-atlasCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, 0skills.sh installs
6telagod avatarapplying-ui-design-systemtelagod/code-abyssFrontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when buildin0skills.sh installs