npx claudepluginhub hbs9312/hbs9312-plugins --plugin frontflowThis skill uses the workspace's default tool permissions.
ultrathink
Guides Next.js Cache Components and Partial Prerendering (PPR): 'use cache' directives, cacheLife(), cacheTag(), revalidateTag() for caching, invalidation, static/dynamic optimization. Auto-activates on cacheComponents: true.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Share bugs, ideas, or general feedback.
ultrathink
원자 컴포넌트(F2)를 조합하여 비즈니스 도메인에 결합된 복합 컴포넌트를 만듭니다.
$ARGUMENTS 의 UI 명세서 → Read. F2에서 생성한 원자 컴포넌트가 프로젝트에 존재하는지 확인.
specflow 기술 명세서(TS)의 API 응답 스키마를 기반으로 Props 타입을 설계합니다.
// TS의 GET /speakers 응답 기반
interface Speaker {
speaker_id: string
name: string
embedding_status: 'pending' | 'processing' | 'ready' | 'failed'
created_at: string
updated_at: string
}
// SpeakerCard의 props는 Speaker 타입에서 파생
interface SpeakerCardProps {
speaker: Speaker
onEdit?: (id: string) => void
onDelete?: (id: string) => void
}
이 단계에서는 타입만 정의합니다. 실제 API 호출은 F6에서.
Figma MCP 데이터가 있으면 Auto Layout 속성을 정확히 반영합니다:
layoutMode → flex-directionitemSpacing → gappaddingTop/Right/Bottom/Left → paddingprimaryAxisAlignItems → justify-contentcounterAxisAlignItems → align-itemslayoutSizingHorizontal/Vertical → width/height (fixed/auto/100%)Figma 데이터가 없으면 UI 명세서의 컴포넌트 구성을 최대한 따릅니다.
목 데이터로 모든 상태 재현:
const mockSpeakerReady: Speaker = {
speaker_id: 'spk_001',
name: '김석',
embedding_status: 'ready',
created_at: '2026-04-01T00:00:00Z',
updated_at: '2026-04-01T00:00:05Z',
}
export const Ready: Story = { args: { speaker: mockSpeakerReady } }
export const Processing: Story = { args: { speaker: { ...mockSpeakerReady, embedding_status: 'processing' } } }
export const Failed: Story = { args: { speaker: { ...mockSpeakerReady, embedding_status: 'failed' } } }
// 리스트 컴포넌트면 경계 케이스도
export const EmptyList: Story = { args: { speakers: [] } }
export const SingleItem: Story = { args: { speakers: [mockSpeakerReady] } }
export const FullList: Story = { args: { speakers: Array(50).fill(mockSpeakerReady) } }