mirror of
https://github.com/nodnarbnitram/claude-code-extensions.git
synced 2026-09-14 18:36:21 +08:00
Brandon Martin
2232aae10c
## Summary - remove explicit `agents`, `skills`, and `commands` fields from generated plugin manifests - rely on Claude Code's standard auto-discovery for plugin-root `agents/`, `skills/`, and `commands/` directories - flatten packaged agents to `agents/*.md` so discovery does not depend on nested-path recursion - keep the fix minimal by only retaining the explicit `hooks` entry for `cce-core` ## Why A local plugin install failed with: ```text Plugin has an invalid manifest file ... Validation errors: agents: Invalid input ``` Our packaged plugins already follow the standard directory structure, so the extra manifest path fields were unnecessary and were the most likely validator mismatch. Greptile also flagged that many generated plugin agents were nested under paths like `agents/specialized/...`, which could silently fail if discovery is non-recursive. This change aligns the packages with the default plugin structure instead of relying on special manifest fields or recursive discovery. ## Changes - update `scripts/sync_plugin_packages.py` to stop emitting manifest path overrides - flatten generated packaged agents to plugin-root `agents/*.md` - regenerate all packaged plugin manifests with minimal metadata-only manifests - regenerate all packaged plugin agent files into the flat standard layout ## Verification - `python3 scripts/sync_plugin_packages.py` - `python3 -m py_compile scripts/sync_plugin_packages.py install_extensions.py` - validated all 19 generated plugin manifests as JSON - confirmed no generated manifest still contains `agents`, `skills`, or `commands` - confirmed packaged agents are flat: `flat_agents=78 nested_agents=0`
CCE Web React Plugin
React, Next.js, and TanStack Start development for modern web applications.
Overview
The cce-web-react plugin provides expert React development capabilities across the entire React ecosystem, from component architecture to full-stack applications with Next.js and TanStack Start.
Features
- Modern React: React 18+ with Hooks, Suspense, Server Components (Next.js)
- Component Architecture: Composition patterns, custom hooks, context management
- Next.js: SSR, SSG, ISR, App Router, API routes, Middleware
- TanStack Start: Full-stack React with TanStack Router and Server Functions
- State Management: Context, useState, useReducer, external libraries
- Performance: Code splitting, lazy loading, memoization
- Type Safety: TypeScript integration patterns
Plugin Components
Agents (3)
-
react-component-architect: React component design and modern patterns
- Composition API and hooks
- Component architecture
- State management patterns
- Performance optimization
-
react-nextjs-expert: Next.js framework specialist
- SSR, SSG, ISR strategies
- App Router and Pages Router
- Server Components and Actions
- API routes and middleware
- Image optimization
-
tanstack-start-expert: TanStack Start full-stack development
- TanStack Router integration
- Server functions
- Type-safe development
- File-based routing
Installation
From Marketplace (Recommended)
# Add the CCE marketplace
/plugin marketplace add github:nodnarbnitram/claude-code-extensions
# Install React plugin
/plugin install cce-web-react@cce-marketplace
From Local Source
git clone https://github.com/nodnarbnitram/claude-code-extensions.git
/plugin marketplace add /path/to/claude-code-extensions
/plugin install cce-web-react@cce-marketplace
Usage
Agents (Automatic Activation)
> Create a reusable Button component with TypeScript
# Uses react-component-architect
> Build a Next.js page with SSR for product listings
# Uses react-nextjs-expert
> Implement a TanStack Start route with server functions
# Uses tanstack-start-expert
> Add custom hook for data fetching with loading states
# Uses react-component-architect
> Set up Next.js middleware for authentication
# Uses react-nextjs-expert
Example Workflows
Component Development:
> Create a Card component with hover effects and TypeScript props
# Generates reusable component with proper typing
Next.js Application:
> Set up Next.js App Router with dynamic routes for blog posts
# Implements file-based routing with [slug] pattern
TanStack Start App:
> Create a TanStack Start app with type-safe server functions
# Sets up full-stack React with TanStack Router
Performance Optimization:
> Optimize this component to prevent unnecessary re-renders
# Uses React.memo, useMemo, useCallback patterns
Requirements
- Claude Code: Latest version
- Node.js: 18+ (for Next.js 14+)
- React: 18+
- TypeScript: 5+ (recommended)
- Framework: Next.js 14+ or TanStack Start
Key Capabilities
Component Patterns:
- Functional components with hooks
- Compound components
- Render props and HOCs
- Custom hook composition
Next.js Features:
- Server and Client Components
- Streaming and Suspense
- Parallel and Intercepting Routes
- Server Actions
- Image and Font optimization
- Metadata API
TanStack Start:
- Type-safe routing
- Server functions
- Data loading strategies
- Code splitting
State Management:
- Context API patterns
- useReducer for complex state
- External libraries (Zustand, Jotai, Redux)
Styling:
- CSS Modules
- Tailwind CSS (use with cce-core:tailwind-frontend-expert)
- CSS-in-JS (styled-components, Emotion)
- Sass/SCSS
Best Practices
- Server vs Client: Use Server Components by default in Next.js
- Data Fetching: Fetch on server when possible (SSR/SSG)
- Performance: Lazy load non-critical components
- Type Safety: Use TypeScript for props and state
- Testing: Component testing with React Testing Library
License
MIT License - see LICENSE for details.
Support
- Issues: GitHub Issues
- Documentation: Repository README
- React Docs: react.dev
- Next.js Docs: nextjs.org