contentlisted

# Content Page Design Skill 콘텐츠 및 에디토리얼 페이지 디자인을 위한 종합 스킬입니다. ## Triggers - "콘텐츠", "블로그", "아티클", "content", "article", "editorial" --- ## Input | 항목 | 필수 | 설명 | |------|------|------| | `contentType` | ✅ | 콘텐츠 유형 (blog, documentation, magazine, portfolio) | | `brand` | ✅ | 브랜드 정보 (colors, fonts) | | `features` | ❌ | 필요한 기능 목록 | --- ## Article Typography ### Prose 스타일 시스템 ```tsx // components/content/prose.tsx import { cn } from "@/lib/utils"; interface ProseProps { children: React.ReactNode; className?: string; size?: "sm" | "base" | "lg"; } export function Prose({ children, className, size = "base" }: ProseProps) { return ( <div className={cn( "prose prose-neutral dark:prose-invert", // Size variants size === "sm" && "prose-sm", size === "lg" && "prose-lg", // Base typography "prose-headings:scroll-mt-24", "prose-headings:font-bold", "prose-h1:text-4xl prose-h1:tracking-tight", "prose-h2:text-3xl prose-h2:tracking-tight prose-h2:border-b prose-h2:pb-2 prose-h2:border-border", "prose-h3:text-2xl", "prose-h4:text-xl", // Body text "prose-p:leading-7", "prose-p:text-muted-foreground", // Links "prose-a:text-primary prose-a:no-underline hover:prose-a:underline", "prose-a:font-medium", // Lists "prose-li:text-muted-foreground", "prose-li:marker:text-muted-foreground/60", // Code