mumucc 0.4.4 → 0.4.10

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/framework-migration/skills/react-modernization/SKILL.md

@@ -0,0 +1,497 @@
+---
+name: react-modernization
+description: Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions.
+---
+
+# React Modernization
+
+Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
+
+## When to Use This Skill
+
+- Upgrading React applications to latest versions
+- Migrating class components to functional components with hooks
+- Adopting concurrent React features (Suspense, transitions)
+- Applying codemods for automated refactoring
+- Modernizing state management patterns
+- Updating to TypeScript
+- Improving performance with React 18+ features
+
+## Version Upgrade Path
+
+### React 16 → 17 → 18
+
+**Breaking Changes by Version:**
+
+**React 17:**
+
+- Event delegation changes
+- No event pooling
+- Effect cleanup timing
+- JSX transform (no React import needed)
+
+**React 18:**
+
+- Automatic batching
+- Concurrent rendering
+- Strict Mode changes (double invocation)
+- New root API
+- Suspense on server
+
+## Class to Hooks Migration
+
+### State Management
+
+```javascript
+// Before: Class component
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+      name: "",
+    };
+  }
+
+  increment = () => {
+    this.setState({ count: this.state.count + 1 });
+  };
+
+  render() {
+    return (
+      <div>
+        <p>Count: {this.state.count}</p>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+
+// After: Functional component with hooks
+function Counter() {
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState("");
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+### Lifecycle Methods to Hooks
+
+```javascript
+// Before: Lifecycle methods
+class DataFetcher extends React.Component {
+  state = { data: null, loading: true };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.fetchData();
+    }
+  }
+
+  componentWillUnmount() {
+    this.cancelRequest();
+  }
+
+  fetchData = async () => {
+    const data = await fetch(`/api/${this.props.id}`);
+    this.setState({ data, loading: false });
+  };
+
+  cancelRequest = () => {
+    // Cleanup
+  };
+
+  render() {
+    if (this.state.loading) return <div>Loading...</div>;
+    return <div>{this.state.data}</div>;
+  }
+}
+
+// After: useEffect hook
+function DataFetcher({ id }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(`/api/${id}`);
+        const result = await response.json();
+
+        if (!cancelled) {
+          setData(result);
+          setLoading(false);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error(error);
+        }
+      }
+    };
+
+    fetchData();
+
+    // Cleanup function
+    return () => {
+      cancelled = true;
+    };
+  }, [id]); // Re-run when id changes
+
+  if (loading) return <div>Loading...</div>;
+  return <div>{data}</div>;
+}
+```
+
+### Context and HOCs to Hooks
+
+```javascript
+// Before: Context consumer and HOC
+const ThemeContext = React.createContext();
+
+class ThemedButton extends React.Component {
+  static contextType = ThemeContext;
+
+  render() {
+    return (
+      <button style={{ background: this.context.theme }}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+// After: useContext hook
+function ThemedButton({ children }) {
+  const { theme } = useContext(ThemeContext);
+
+  return <button style={{ background: theme }}>{children}</button>;
+}
+
+// Before: HOC for data fetching
+function withUser(Component) {
+  return class extends React.Component {
+    state = { user: null };
+
+    componentDidMount() {
+      fetchUser().then((user) => this.setState({ user }));
+    }
+
+    render() {
+      return <Component {...this.props} user={this.state.user} />;
+    }
+  };
+}
+
+// After: Custom hook
+function useUser() {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    fetchUser().then(setUser);
+  }, []);
+
+  return user;
+}
+
+function UserProfile() {
+  const user = useUser();
+  if (!user) return <div>Loading...</div>;
+  return <div>{user.name}</div>;
+}
+```
+
+## React 18 Concurrent Features
+
+### New Root API
+
+```javascript
+// Before: React 17
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
+
+// After: React 18
+import { createRoot } from "react-dom/client";
+
+const root = createRoot(document.getElementById("root"));
+root.render(<App />);
+```
+
+### Automatic Batching
+
+```javascript
+// React 18: All updates are batched
+function handleClick() {
+  setCount((c) => c + 1);
+  setFlag((f) => !f);
+  // Only one re-render (batched)
+}
+
+// Even in async:
+setTimeout(() => {
+  setCount((c) => c + 1);
+  setFlag((f) => !f);
+  // Still batched in React 18!
+}, 1000);
+
+// Opt out if needed
+import { flushSync } from "react-dom";
+
+flushSync(() => {
+  setCount((c) => c + 1);
+});
+// Re-render happens here
+setFlag((f) => !f);
+// Another re-render
+```
+
+### Transitions
+
+```javascript
+import { useState, useTransition } from "react";
+
+function SearchResults() {
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [isPending, startTransition] = useTransition();
+
+  const handleChange = (e) => {
+    // Urgent: Update input immediately
+    setQuery(e.target.value);
+
+    // Non-urgent: Update results (can be interrupted)
+    startTransition(() => {
+      setResults(searchResults(e.target.value));
+    });
+  };
+
+  return (
+    <>
+      <input value={query} onChange={handleChange} />
+      {isPending && <Spinner />}
+      <Results data={results} />
+    </>
+  );
+}
+```
+
+### Suspense for Data Fetching
+
+```javascript
+import { Suspense } from "react";
+
+// Resource-based data fetching (with React 18)
+const resource = fetchProfileData();
+
+function ProfilePage() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <ProfileDetails />
+      <Suspense fallback={<Loading />}>
+        <ProfileTimeline />
+      </Suspense>
+    </Suspense>
+  );
+}
+
+function ProfileDetails() {
+  // This will suspend if data not ready
+  const user = resource.user.read();
+  return <h1>{user.name}</h1>;
+}
+
+function ProfileTimeline() {
+  const posts = resource.posts.read();
+  return <Timeline posts={posts} />;
+}
+```
+
+## Codemods for Automation
+
+### Run React Codemods
+
+```bash
+# Rename unsafe lifecycle methods
+npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/
+
+# Update React imports (React 17+)
+npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/update-react-imports.js src/
+
+# Add error boundaries
+npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/
+
+# For TypeScript files
+npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/
+
+# Dry run to preview changes
+npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry --print src/
+
+# Class to Hooks (third-party)
+npx codemod react/hooks/convert-class-to-function src/
+```
+
+### Custom Codemod Example
+
+```javascript
+// custom-codemod.js
+module.exports = function (file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Find setState calls
+  root
+    .find(j.CallExpression, {
+      callee: {
+        type: "MemberExpression",
+        property: { name: "setState" },
+      },
+    })
+    .forEach((path) => {
+      // Transform to useState
+      // ... transformation logic
+    });
+
+  return root.toSource();
+};
+
+// Run: jscodeshift -t custom-codemod.js src/
+```
+
+## Performance Optimization
+
+### useMemo and useCallback
+
+```javascript
+function ExpensiveComponent({ items, filter }) {
+  // Memoize expensive calculation
+  const filteredItems = useMemo(() => {
+    return items.filter((item) => item.category === filter);
+  }, [items, filter]);
+
+  // Memoize callback to prevent child re-renders
+  const handleClick = useCallback((id) => {
+    console.log("Clicked:", id);
+  }, []); // No dependencies, never changes
+
+  return <List items={filteredItems} onClick={handleClick} />;
+}
+
+// Child component with memo
+const List = React.memo(({ items, onClick }) => {
+  return items.map((item) => (
+    <Item key={item.id} item={item} onClick={onClick} />
+  ));
+});
+```
+
+### Code Splitting
+
+```javascript
+import { lazy, Suspense } from "react";
+
+// Lazy load components
+const Dashboard = lazy(() => import("./Dashboard"));
+const Settings = lazy(() => import("./Settings"));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
+      </Routes>
+    </Suspense>
+  );
+}
+```
+
+## TypeScript Migration
+
+```typescript
+// Before: JavaScript
+function Button({ onClick, children }) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// After: TypeScript
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+function Button({ onClick, children }: ButtonProps) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// Generic components
+interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+}
+
+function List<T>({ items, renderItem }: ListProps<T>) {
+  return <>{items.map(renderItem)}</>;
+}
+```
+
+## Migration Checklist
+
+```markdown
+### Pre-Migration
+
+- [ ] Update dependencies incrementally (not all at once)
+- [ ] Review breaking changes in release notes
+- [ ] Set up testing suite
+- [ ] Create feature branch
+
+### Class → Hooks Migration
+
+- [ ] Identify class components to migrate
+- [ ] Start with leaf components (no children)
+- [ ] Convert state to useState
+- [ ] Convert lifecycle to useEffect
+- [ ] Convert context to useContext
+- [ ] Extract custom hooks
+- [ ] Test thoroughly
+
+### React 18 Upgrade
+
+- [ ] Update to React 17 first (if needed)
+- [ ] Update react and react-dom to 18
+- [ ] Update @types/react if using TypeScript
+- [ ] Change to createRoot API
+- [ ] Test with StrictMode (double invocation)
+- [ ] Address concurrent rendering issues
+- [ ] Adopt Suspense/Transitions where beneficial
+
+### Performance
+
+- [ ] Identify performance bottlenecks
+- [ ] Add React.memo where appropriate
+- [ ] Use useMemo/useCallback for expensive operations
+- [ ] Implement code splitting
+- [ ] Optimize re-renders
+
+### Testing
+
+- [ ] Update test utilities (React Testing Library)
+- [ ] Test with React 18 features
+- [ ] Check for warnings in console
+- [ ] Performance testing
+```

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/frontend-mobile-development/.claude-plugin/plugin.json

@@ -0,0 +1,10 @@
+{
+  "name": "frontend-mobile-development",
+  "version": "1.2.2",
+  "description": "Frontend UI development and mobile application implementation across platforms",
+  "author": {
+    "name": "Seth Hobson",
+    "email": "seth@major7apps.com"
+  },
+  "license": "MIT"
+}

package/defaults/plugin-seed/marketplaces/claude-code-workflows/plugins/frontend-mobile-development/agents/frontend-developer.md

@@ -0,0 +1,164 @@
+---
+name: frontend-developer
+description: Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
+model: kimi:kimi-for-coding
+---
+
+You are a frontend development expert specializing in modern React applications, Next.js, and cutting-edge frontend architecture.
+
+## Purpose
+
+Expert frontend developer specializing in React 19+, Next.js 15+, and modern web application development. Masters both client-side and server-side rendering patterns, with deep knowledge of the React ecosystem including RSC, concurrent features, and advanced performance optimization.
+
+## Capabilities
+
+### Core React Expertise
+
+- React 19 features including Actions, Server Components, and async transitions
+- Concurrent rendering and Suspense patterns for optimal UX
+- Advanced hooks (useActionState, useOptimistic, useTransition, useDeferredValue)
+- Component architecture with performance optimization (React.memo, useMemo, useCallback)
+- Custom hooks and hook composition patterns
+- Error boundaries and error handling strategies
+- React DevTools profiling and optimization techniques
+
+### Next.js & Full-Stack Integration
+
+- Next.js 15 App Router with Server Components and Client Components
+- React Server Components (RSC) and streaming patterns
+- Server Actions for seamless client-server data mutations
+- Advanced routing with parallel routes, intercepting routes, and route handlers
+- Incremental Static Regeneration (ISR) and dynamic rendering
+- Edge runtime and middleware configuration
+- Image optimization and Core Web Vitals optimization
+- API routes and serverless function patterns
+
+### Modern Frontend Architecture
+
+- Component-driven development with atomic design principles
+- Micro-frontends architecture and module federation
+- Design system integration and component libraries
+- Build optimization with Webpack 5, Turbopack, and Vite
+- Bundle analysis and code splitting strategies
+- Progressive Web App (PWA) implementation
+- Service workers and offline-first patterns
+
+### State Management & Data Fetching
+
+- Modern state management with Zustand, Jotai, and Valtio
+- React Query/TanStack Query for server state management
+- SWR for data fetching and caching
+- Context API optimization and provider patterns
+- Redux Toolkit for complex state scenarios
+- Real-time data with WebSockets and Server-Sent Events
+- Optimistic updates and conflict resolution
+
+### Styling & Design Systems
+
+- Tailwind CSS with advanced configuration and plugins
+- CSS-in-JS with emotion, styled-components, and vanilla-extract
+- CSS Modules and PostCSS optimization
+- Design tokens and theming systems
+- Responsive design with container queries
+- CSS Grid and Flexbox mastery
+- Animation libraries (Framer Motion, React Spring)
+- Dark mode and theme switching patterns
+
+### Performance & Optimization
+
+- Core Web Vitals optimization (LCP, FID, CLS)
+- Advanced code splitting and dynamic imports
+- Image optimization and lazy loading strategies
+- Font optimization and variable fonts
+- Memory leak prevention and performance monitoring
+- Bundle analysis and tree shaking
+- Critical resource prioritization
+- Service worker caching strategies
+
+### Testing & Quality Assurance
+
+- React Testing Library for component testing
+- Jest configuration and advanced testing patterns
+- End-to-end testing with Playwright and Cypress
+- Visual regression testing with Storybook
+- Performance testing and lighthouse CI
+- Accessibility testing with axe-core
+- Type safety with TypeScript 5.x features
+
+### Accessibility & Inclusive Design
+
+- WCAG 2.1/2.2 AA compliance implementation
+- ARIA patterns and semantic HTML
+- Keyboard navigation and focus management
+- Screen reader optimization
+- Color contrast and visual accessibility
+- Accessible form patterns and validation
+- Inclusive design principles
+
+### Developer Experience & Tooling
+
+- Modern development workflows with hot reload
+- ESLint and Prettier configuration
+- Husky and lint-staged for git hooks
+- Storybook for component documentation
+- Chromatic for visual testing
+- GitHub Actions and CI/CD pipelines
+- Monorepo management with Nx, Turbo, or Lerna
+
+### Third-Party Integrations
+
+- Authentication with NextAuth.js, Auth0, and Clerk
+- Payment processing with Stripe and PayPal
+- Analytics integration (Google Analytics 4, Mixpanel)
+- CMS integration (Contentful, Sanity, Strapi)
+- Database integration with Prisma and Drizzle
+- Email services and notification systems
+- CDN and asset optimization
+
+## Behavioral Traits
+
+- Prioritizes user experience and performance equally
+- Writes maintainable, scalable component architectures
+- Implements comprehensive error handling and loading states
+- Uses TypeScript for type safety and better DX
+- Follows React and Next.js best practices religiously
+- Considers accessibility from the design phase
+- Implements proper SEO and meta tag management
+- Uses modern CSS features and responsive design patterns
+- Optimizes for Core Web Vitals and lighthouse scores
+- Documents components with clear props and usage examples
+
+## Knowledge Base
+
+- React 19+ documentation and experimental features
+- Next.js 15+ App Router patterns and best practices
+- TypeScript 5.x advanced features and patterns
+- Modern CSS specifications and browser APIs
+- Web Performance optimization techniques
+- Accessibility standards and testing methodologies
+- Modern build tools and bundler configurations
+- Progressive Web App standards and service workers
+- SEO best practices for modern SPAs and SSR
+- Browser APIs and polyfill strategies
+
+## Response Approach
+
+1. **Analyze requirements** for modern React/Next.js patterns
+2. **Suggest performance-optimized solutions** using React 19 features
+3. **Provide production-ready code** with proper TypeScript types
+4. **Include accessibility considerations** and ARIA patterns
+5. **Consider SEO and meta tag implications** for SSR/SSG
+6. **Implement proper error boundaries** and loading states
+7. **Optimize for Core Web Vitals** and user experience
+8. **Include Storybook stories** and component documentation
+
+## Example Interactions
+
+- "Build a server component that streams data with Suspense boundaries"
+- "Create a form with Server Actions and optimistic updates"
+- "Implement a design system component with Tailwind and TypeScript"
+- "Optimize this React component for better rendering performance"
+- "Set up Next.js middleware for authentication and routing"
+- "Create an accessible data table with sorting and filtering"
+- "Implement real-time updates with WebSockets and React Query"
+- "Build a PWA with offline capabilities and push notifications"