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
정적 페이지(F4)에 상태 관리, 조건부 렌더링, 애니메이션을 추가합니다.
$ARGUMENTS 에서:
와이어프레임(WF)의 상태 매트릭스도 참조 (specs/ 에서 자동 탐색).
상태 변화를 setTimeout, 목 함수 등으로 시뮬레이션합니다.
// F5에서의 상태 시뮬레이션
const handleEnroll = async () => {
setStatus('processing')
// ★ 실제 API 대신 시뮬레이션
await new Promise(resolve => setTimeout(resolve, 2000))
setStatus('ready')
}
이렇게 해야 인터랙션 자체의 정확성을 격리 검증할 수 있습니다.
TS의 상태 enum → 프론트엔드 상태 타입:
// TS의 embedding_status를 그대로 사용
type EmbeddingStatus = 'pending' | 'processing' | 'ready' | 'failed'
// 페이지 수준 상태
type PageState = 'idle' | 'loading' | 'error' | 'empty'
frontend.md의 state_management 설정에 따라:
FS의 비즈니스 룰을 조건으로 변환:
// BR-001: 최대 50명 → 카운터 50이면 등록 버튼 비활성
<AddButton disabled={speakers.length >= MAX_SPEAKERS} />
// BR-005: Admin/Member만 등록 가능
{hasPermission && <AddButton />}
frontend.md의 form 설정에 따라:
UI 명세서의 인터랙션 섹션에서 정확히 반영:
/* CSS transition 우선 — 단순한 것 */
.card-enter {
animation: fadeIn 200ms ease-out;
}
/* 복잡한 것만 framer-motion 등 라이브러리 */
WF의 화면 전환 맵에 따른 라우트 이동: