一键在 Manus 中运行任何 Skill

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 仓库查看创作者相关仓库

下载

在 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.