mirror of
https://github.com/nodnarbnitram/claude-code-extensions.git
synced 2026-09-14 18:36:21 +08:00
Brandon Martin
1ac816cc29
## Summary - convert the marketplace packages into self-contained plugin installs with local `agents/`, `skills/`, `commands/`, and `hooks/` content - replace the old `triage-workflow` path with the new `linear` skill and ship a dedicated `cce-linear` plugin for Linear-backed ticket and PR workflows - remove the unfinished `cce-auto-blog` plugin so this PR stays focused on the plugin infrastructure redo ## What Changed - added `scripts/sync_plugin_packages.py` to generate package manifests and sync plugin-local assets from the shared `.claude/` source tree - updated `.claude-plugin/marketplace.json` and per-plugin manifests for 19 packages, including new `cce-linear` and `cce-tauri` entries - materialized packaged plugin assets under `plugins/*` so marketplace installs no longer depend on repo-root `.claude` paths - rewired Linear commands to use the `linear` skill wrapper scripts and removed hardcoded workspace-specific Linear URLs - refreshed root and plugin README files to match the packaged layout and current plugin inventory ## Verification - `python3 -m py_compile scripts/sync_plugin_packages.py install_extensions.py .claude/skills/linear/scripts/*.py` - `python3 scripts/sync_plugin_packages.py` - validated plugin JSON/manifests and `cce-linear` package wiring - confirmed no `axios-hq` or `triage-workflow` references remain in the `.claude` Linear sources --------- Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
168 lines
4.4 KiB
Markdown
168 lines
4.4 KiB
Markdown
# 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)
|
|
|
|
```bash
|
|
# 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
|
|
|
|
```bash
|
|
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)
|
|
|
|
```bash
|
|
> 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:**
|
|
```bash
|
|
> Create a Card component with hover effects and TypeScript props
|
|
# Generates reusable component with proper typing
|
|
```
|
|
|
|
**Next.js Application:**
|
|
```bash
|
|
> Set up Next.js App Router with dynamic routes for blog posts
|
|
# Implements file-based routing with [slug] pattern
|
|
```
|
|
|
|
**TanStack Start App:**
|
|
```bash
|
|
> Create a TanStack Start app with type-safe server functions
|
|
# Sets up full-stack React with TanStack Router
|
|
```
|
|
|
|
**Performance Optimization:**
|
|
```bash
|
|
> 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](../../../LICENSE) for details.
|
|
|
|
## Support
|
|
|
|
- **Issues**: [GitHub Issues](https://github.com/nodnarbnitram/claude-code-extensions/issues)
|
|
- **Documentation**: [Repository README](../../../README.md)
|
|
- **React Docs**: [react.dev](https://react.dev)
|
|
- **Next.js Docs**: [nextjs.org](https://nextjs.org)
|