skills.rest
modu-ai
modu-aiOFFICIAL
Explore all skills by this author →
Website𝕏@MODU_AIGitHub

moai-domain-frontend

Solve frontend architecture and implementation challenges for React 19, Next.js 16, and Vue 3.5 projects.

1.2k|214|Updated Sep 16, 2025
Search Tags:#performance#accessibility#state management#frontend#react#angular#vue
One-click install
npx skills add https://github.com/modu-ai/moai-adk --skill moai-domain-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: moai-domain-frontend
Source: https://github.com/modu-ai/moai-adk/tree/main/.claude/skills/moai-domain-frontend
Command: npx skills add https://github.com/modu-ai/moai-adk --skill moai-domain-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes examples (resource) and references (resource) components.

What problem does it solve?

Developing cutting-edge frontend applications requires mastering complex frameworks, state management, and performance optimization. This Skill provides expert guidance for modern frontend development with React 19, Vue 3.5, and Angular 19, ensuring your UIs are fast, responsive, and accessible.

Core Features & Use Cases

  • Framework Best Practices: Guides on using the latest features and patterns in React 19, Vue 3.5, and Angular 19.
  • State Management: Recommends and implements optimal state management solutions (e.g., Zustand, Pinia, NgRx).
  • Performance Optimization: Identifies bottlenecks and suggests strategies like lazy loading, code splitting, and image optimization.
  • Accessibility (A11y): Ensures UIs meet accessibility standards, making them usable for everyone.
  • Use Case: When building a new feature in a React application, this Skill can help you design the component structure, integrate state management, and ensure it meets performance and accessibility benchmarks.

Quick Start

Generate a new React 19 project with Vite

npm create vite@latest my-react-app -- --template react-ts cd my-react-app npm install npm run dev

Claude can then assist with component design and state management.

Frequently Asked Questions about moai-domain-frontend

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

FAQPage Schema
How do I optimize React 19 component performance and implement server components?▼

React 19 performance optimization involves leveraging server components to reduce client-side JavaScript, implementing code splitting with lazy loading, and using Next.js 16 app routing patterns. This Skill guides framework best practices, state management integration, and responsive UI patterns to meet performance benchmarks across React, Vue, and Angular projects.

What's the best way to ensure my frontend UI meets accessibility standards?▼

Accessibility requires building with semantic HTML, ARIA attributes, keyboard navigation, and color contrast compliance. This Skill provides A11y guidelines ensuring your React, Vue, or Angular UIs are usable for everyone while maintaining performance and responsive design across modern frameworks.

Can I use state management solutions like Zustand or Pinia with React 19 and Vue 3.5?▼

Yes. This Skill recommends and implements optimal state management solutions tailored to your framework—Zustand for React, Pinia for Vue, NgRx for Angular. It covers integration patterns, server actions, and TypeScript setup to satisfy functional and technical requirements.

How do I design a scalable component library and design system for React or Vue?▼

Component library design requires TypeScript integration, modular architecture, and responsive, accessible UI patterns. This Skill covers building reusable component structures with server components in React 19, app routing in Next.js 16, and equivalent patterns in Vue 3.5.

What performance optimization strategies apply to modern frontend applications?▼

Performance optimization includes lazy loading, code splitting, image optimization, and efficient state management. This Skill identifies bottlenecks in React 19, Vue 3.5, and Angular 19 projects, then recommends framework-specific strategies to maximize responsiveness and accessibility.

Does this cover advanced routing and server actions in Next.js applications?▼

Yes. This Skill solves Next.js 16 routing challenges, server actions implementation, and TypeScript integration for modern full-stack workflows. It addresses responsive, accessible UI patterns and performance optimization across React, Vue, and Angular frameworks.

Related Skills

Explore More Software Engineering Skills→
salverius-techsalverius-tech

web-projects

Identify JavaScript/TypeScript project types and dependencies from configuration files.

Community
Intermediate
sayasaya8039sayasaya8039
2

frontend-patterns

Standardize React and Next.js frontend patterns for components, state, and performance.

Community
Intermediate
eleva-labseleva-labs

test

Set up and run frontend tests with Jest, Vitest, Playwright, or Cypress.

Official
Intermediate
RUSHYOPRUSHYOP

ts-frontend-engineer

Implement type-safe TypeScript frontend codebases across React, Vue, Svelte, and other frameworks.

Community
Advanced