frontend-patterns-typescriptlisted
Install: claude install-skill Rx-K8/my-claude-code
# フロントエンド開発パターン
React、Next.js、パフォーマンスの高いユーザーインターフェースのための現代的なフロントエンドパターン。
## コンポーネントパターン
### 継承よりコンポジション
```typescript
// ✅ 良い例: コンポーネントコンポジション
interface CardProps {
children: React.ReactNode
variant?: 'default' | 'outlined'
}
export function Card({ children, variant = 'default' }: CardProps) {
return <div className={`card card-${variant}`}>{children}</div>
}
export function CardHeader({ children }: { children: React.ReactNode }) {
return <div className="card-header">{children}</div>
}
export function CardBody({ children }: { children: React.ReactNode }) {
return <div className="card-body">{children}</div>
}
// 使用例
<Card>
<CardHeader>タイトル</CardHeader>
<CardBody>コンテンツ</CardBody>
</Card>
```
### 複合コンポーネント
```typescript
interface TabsContextValue {
activeTab: string
setActiveTab: (tab: string) => void
}
const TabsContext = createContext<TabsContextValue | undefined>(undefined)
export function Tabs({ children, defaultTab }: {
children: React.ReactNode
defaultTab: string
}) {
const [activeTab, setActiveTab] = useState(defaultTab)
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
{children}
</TabsContext.Provider>
)
}
export function TabList({ children }: { children: React.ReactNode }) {
return <div className="tab-list">{children}</div>
}
export function Tab({ id, children }: { id: string, children: React.ReactNode }) {
const context = useContext(TabsContext)
if (!context) throw new Error('Tab must be u