원클릭으로 Manus에서 모든 스킬 실행

frontend-ui-patterns

스타341

포크31

업데이트2026년 6월 13일 15:14

Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions. Use when editing frontend files, shadcn/ui composition, react-hook-form + Zod flows, Server Action consumption from client components, or client/server component boundaries.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

biersoeckli

biersoeckli/QuickStack

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Frontend UI Patterns

Quick Start

For QuickStack frontend work:

Use kebab-case filenames.
Put shadcn/ui primitives in src/components/ui/.
Put composed UI in src/components/custom/.
Put frontend hooks, helpers, sockets, and Zustand usage in src/frontend/.
Co-locate page-specific Server Actions in actions.ts beside the consuming page.

Core Workflow

When creating or updating frontend UI:

Decide the boundary first: server pages fetch data and check auth; client components handle interaction.
Build forms with react-hook-form, Zod, shadcn Form, and shared field wrappers.
Consume Server Actions through Toast.fromAction() or Actions.run(), not direct awaits.
Prefer Zustand-backed shared dialogs and stores over one-off local global state.
Use SimpleDataTable for standard tables before building custom table behavior.
Style with shadcn/ui plus Tailwind utilities and cn().

Boundary Rules

Use 'use server' for pages and layouts that fetch data or gate authorization.
Use 'use client' for dialogs, forms, tables, event handlers, and streaming UI.
Use auth helpers from action-wrapper.utils.ts in server components.

Forms And Actions

Add route-safe validation with shared or local Zod schemas.
Map server validation errors back with FormUtils.mapValidationErrorsToForm(...).
Use SubmitButton for form submits when possible.

State, Dialogs, And Streaming

Reuse stores in src/frontend/states/zustand.states.ts before adding new ones.
Use useDialog, useConfirmDialog, and useInputDialog for modal flows.
Clean up SSE and socket work with AbortController or equivalent effect cleanup.

Reference

See REFERENCE.md for concrete examples covering server/client boundaries, auth helpers, forms, Server Actions, Zustand stores, SimpleDataTable, dialogs, styling, and real-time UI.

이 저장소의 다른 Skills

같은 저장소

backend-services

biersoeckli/QuickStack

Create and update QuickStack backend services, adapters, standalone services, and server actions using the project's established singleton, adapter, caching, and error-handling patterns. Use when editing files under src/server/services, src/server/adapter, src/server/utils, src/server.ts, or related server-side actions and backend utilities.

2026-06-13341

backend-testing

biersoeckli/QuickStack

Create and review QuickStack backend unit and integration tests using the project's Vitest, Prisma, SQLite, and k3s conventions. Use when editing backend test files under `src/server/`, `src/shared/`, or `src/__tests__/integration/`, or when the user asks for backend test coverage, mocks, Prisma test DB setup, or Kubernetes integration tests.

2026-06-13341

elysia-api-routes

biersoeckli/QuickStack

Create and update QuickStack Elysia REST API routes using the project's established /api/v1 route conventions. Use when adding or editing files under src/server/api/v1, defining Elysia query/params/body/response schemas, or handling REST API authorization and errors.

2026-06-13341

name	frontend-ui-patterns
description	Create and update QuickStack frontend pages, React components, forms, dialogs, tables, streaming UI, and Zustand-backed state using the project's established UI conventions. Use when editing frontend files, shadcn/ui composition, react-hook-form + Zod flows, Server Action consumption from client components, or client/server component boundaries.

Frontend UI Patterns

Quick Start

For QuickStack frontend work:

Use kebab-case filenames.
Put shadcn/ui primitives in src/components/ui/.
Put composed UI in src/components/custom/.
Put frontend hooks, helpers, sockets, and Zustand usage in src/frontend/.
Co-locate page-specific Server Actions in actions.ts beside the consuming page.

Core Workflow

When creating or updating frontend UI:

Decide the boundary first: server pages fetch data and check auth; client components handle interaction.
Build forms with react-hook-form, Zod, shadcn Form, and shared field wrappers.
Consume Server Actions through Toast.fromAction() or Actions.run(), not direct awaits.
Prefer Zustand-backed shared dialogs and stores over one-off local global state.
Use SimpleDataTable for standard tables before building custom table behavior.
Style with shadcn/ui plus Tailwind utilities and cn().

Boundary Rules

Use 'use server' for pages and layouts that fetch data or gate authorization.
Use 'use client' for dialogs, forms, tables, event handlers, and streaming UI.
Use auth helpers from action-wrapper.utils.ts in server components.

Forms And Actions

Add route-safe validation with shared or local Zod schemas.
Map server validation errors back with FormUtils.mapValidationErrorsToForm(...).
Use SubmitButton for form submits when possible.

State, Dialogs, And Streaming

Reuse stores in src/frontend/states/zustand.states.ts before adding new ones.
Use useDialog, useConfirmDialog, and useInputDialog for modal flows.
Clean up SSE and socket work with AbortController or equivalent effect cleanup.

Reference

See REFERENCE.md for concrete examples covering server/client boundaries, auth helpers, forms, Server Actions, Zustand stores, SimpleDataTable, dialogs, styling, and real-time UI.