ganju: Command for Claude Code

Create a new web component following the established project conventions.

Input

$ARGUMENTS

Project Architecture

This is a monorepo (npm workspaces + Turbo) with three key packages:

• packages/ui/ — Reusable UI components wrapping Material UI with Emotion styling
• packages/utils/ — Shared utilities (Zod schemas, fetcher, constants)
• apps/web/ — Next.js app consuming both packages

Styling System

Emotion CSS-in-JS (NOT Tailwind). Every styled component uses @emotion/styled + @emotion/react.

Theme tokens available via ({ theme }) => css:

• Colors: theme.colors.transparent, .black, .bastille (#1C1825), .white, .red, .alto, .fernGreen, .saltBox
• Fonts: theme.fonts.xs (12px) through theme.fonts['9xl'] (100px)
• Shadows: theme['custom-shadows'].smallest, .small
• Breakpoints: theme.screens.sm (640px), .md (768px), .lg (1024px), .xl (1280px), .['2xl'] (1536px)
• Font family: Fustat (set globally)

Responsive design is mobile-first: base styles for mobile, @media (min-width: ${theme.screens.md}) for larger screens.

File Structure Conventions

For packages/ui components (reusable across apps):

packages/ui/src/components/<component-name>/
  index.tsx    — Component logic, wraps Material UI, uses Wrapper from styles
  styles.tsx   — Emotion styled components with theme access

styles.tsx pattern:

import { css } from '@emotion/react';
import styled from '@emotion/styled';

interface IProps {
  // Component-specific style props
}

export const Wrapper = styled.div<IProps>`
  ${({ theme }) => css`
    // Styles using theme tokens
  `}
`;

index.tsx pattern:

import { ReactNode } from 'react';
import { Wrapper } from './styles';

export interface IProps {
  children: ReactNode;
}

export const ComponentName = (props: IProps) => {
  const { children, ...rest } = props;
  return <Wrapper>{children}</Wrapper>;
};

After creating, register in packages/ui/src/components/index.tsx: