skills.rest
bbbang105
bbbang105COMMUNITY
Explore all skills by this author →
WebsiteGitHub

moai-domain-frontend

Guide React, Next.js, and Vue frontend development with architecture and performance strategies.

Updated Aug 23, 2026
Search Tags:#react#vue#next.js#performance optimization#component architecture#server components#composition API
One-click install
npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-domain-frontend-bbbang105
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-frontend
Source: https://github.com/bbbang105/flowershop-admin/tree/main/.claude/skills/moai-domain-frontend
Command: npx skills add https://github.com/bbbang105/flowershop-admin --skill moai-domain-frontend-bbbang105

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, next, vue, Tailwind CSS, Radix UI, Zod, Vitest, Playwright, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on building modern, scalable frontends with React 19, Next.js 16, and Vue 3.5, facilitating extensive UI architecture, component patterns, and optimization techniques.

Core Features & Use Cases

  • Component Architecture & Design Systems: Guides on creating modular, reusable, and accessible UI components aligned with design tokens and CVA variants.
  • Framework Pattern Integration: Examples for React server components, client interactivity, Next.js server actions, and Vue composition API composables.
  • Performance & Best Practices: Tips for code splitting, lazy loading, memoization, and efficient state management with Zustand, Pinia, and Redux Toolkit.
  • Use Case: Developing a feature-rich admin dashboard with data visualization, form handling, and nested routing, leveraging best practices described.

Quick Start

Command to generate a frontend project using React 19 and Next.js 16 with component library setup and performance optimizations.

Frequently Asked Questions about moai-domain-frontend

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

FAQPage Schema
How do I structure React server components with client interactivity in Next.js 16?▼

Isolate client interactivity into dedicated component boundaries while leveraging Next.js 16 server actions for data mutations. This pattern maintains modular architecture and ensures scalable performance optimization across your React application.

What is the best way to manage state in a Vue 3.5 application using the composition API?▼

Utilize the Vue 3.5 composition API with Pinia for scalable state management. This approach supports modular component architecture and efficient performance optimization when building feature-rich, interactive web interfaces.

Can I use Tailwind CSS and Radix UI to build accessible React 19 design systems?▼

Yes, Tailwind CSS and Radix UI integrate seamlessly to build accessible React 19 design systems. They enable creating modular, reusable UI components aligned with design tokens and CVA variants for scalable applications.

How do I optimize Next.js performance with code splitting and lazy loading?▼

Implement code splitting, lazy loading, and memoization techniques to optimize Next.js performance. These strategies reduce initial bundle size and improve loading efficiency for scalable web applications using React 19.

Does this frontend architecture approach support both React and Vue frameworks?▼

Yes, the architecture approach supports both React and Vue frameworks. It ensures compatibility by providing best practices for React server components, Next.js server actions, and Vue composition API composables.

Related Skills

Explore More Software Engineering Skills→
JoaquinCampoJoaquinCampo
3

web-artifacts-builder

Bundle React frontend artifacts into a single self-contained HTML file.

Community
Advanced
eventua11yeventua11y
1

writing-tests

Automate E2E and unit test setup and execution with Playwright and Vitest.

Official
Intermediate
DrLuggelsDrLuggels
3

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Intermediate
forwardimpactforwardimpact
4

libs-web-presentation

Convert Markdown to HTML and generate static documentation sites.

Official
Intermediate