Run any Skill in Manus with one click

frontend-feature

Stars4

Forks1

UpdatedJune 20, 2026 at 08:13

Playbook for UI work in apps/web and apps/admin (Next.js App Router + next-intl). Use when adding pages, components, hooks, forms, or data fetching. Enforces Server Components by default, TanStack Query, react-hook-form + Zod, the typed API clients, @open-meet/ui primitives, and locale-aware routing.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

suraj-kashyap-dev

suraj-kashyap-dev/open-meet

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	frontend-feature
description	Playbook for UI work in apps/web and apps/admin (Next.js App Router + next-intl). Use when adding pages, components, hooks, forms, or data fetching. Enforces Server Components by default, TanStack Query, react-hook-form + Zod, the typed API clients, @open-meet/ui primitives, and locale-aware routing.

Frontend feature playbook (apps/web · apps/admin)

Rules

Default to Server Components. Add 'use client' only for state, effects, browser APIs, or client hooks.
Data: TanStack Query — useQuery for reads, useMutation for writes; declare query keys near the hook; invalidate only the affected keys; optimistic updates where realtime UX benefits.
HTTP: always go through the per-app typed client lib/api/client.ts (keep credentials: 'include' and the x-locale header). No ad-hoc fetch.
Forms: react-hook-form + Zod via zodResolver; submit through a Query mutation; surface success/error with the existing sonner toasts; reset/close only after success. Keep frontend limits aligned with the backend DTO.
UI: reuse @open-meet/ui primitives before adding app-level base components; use existing Tailwind tokens + cn / class-variance-authority. Preserve branding/accent behavior — no one-off hardcoded colors (don't recolor the theme).
Routing / i18n: preserve locale-prefixed routing; all user-facing copy via next-intl — see the i18n-copy skill.
Check both apps: a shared change often needs parallel edits in apps/web and apps/admin. Every new page ships a Playwright E2E test.

Validate

pnpm --filter @open-meet/web lint && pnpm --filter @open-meet/web typecheck && pnpm --filter @open-meet/web test

Add ... test:e2e for new flows. Mirror with @open-meet/admin when admin changed.

Detailed rules: .claude/docs/coding-rules.md.

More from this repository

same repository

backend-feature

suraj-kashyap-dev/open-meet

Playbook for adding or changing API behavior in apps/server (NestJS + Fastify). Use when implementing endpoints, services, repositories, DTOs, guards, or gateways. Enforces controller→service→repository layering, the shared response/error envelope, DTO validation, and the separate user/admin auth systems.

2026-06-204

i18n-copy

suraj-kashyap-dev/open-meet

Use whenever adding or changing user-facing UI or API copy. open-meet ships 15 locales; this skill keeps every locale in lockstep and registers new namespaces so useTranslations doesn't throw at runtime.

2026-06-204

prisma-schema

suraj-kashyap-dev/open-meet

Use for database/schema work in apps/server — adding models, fields, relations, indexes, or migrations. The Prisma schema is split into multiple files by domain; this skill keeps edits and migrations in the right place.

2026-06-204

realtime-contracts

suraj-kashyap-dev/open-meet

Use when changing websocket / Socket.IO behavior — events, payloads, or gateways. open-meet has two namespaces (/meeting and /chat); this skill keeps the shared socket contract and both ends in sync.

2026-06-204

repo-map

suraj-kashyap-dev/open-meet

Orientation map for the open-meet monorepo. Use at the start of a task to find which app, module, and shared package own a feature (auth, meetings, meeting-scoped chat, persistent team chat, recording, RBAC, branding, uploads) before editing. Answers "where does this change go?".

2026-06-204

validate-changes

suraj-kashyap-dev/open-meet

Use before finishing a task to pick and run the narrowest relevant checks for what you changed, and to self-review the change checklist. Maps the changed area to the exact lint/typecheck/test commands.

2026-06-204

name	frontend-feature
description	Playbook for UI work in apps/web and apps/admin (Next.js App Router + next-intl). Use when adding pages, components, hooks, forms, or data fetching. Enforces Server Components by default, TanStack Query, react-hook-form + Zod, the typed API clients, @open-meet/ui primitives, and locale-aware routing.

Frontend feature playbook (apps/web · apps/admin)

Rules

Default to Server Components. Add 'use client' only for state, effects, browser APIs, or client hooks.
Data: TanStack Query — useQuery for reads, useMutation for writes; declare query keys near the hook; invalidate only the affected keys; optimistic updates where realtime UX benefits.
HTTP: always go through the per-app typed client lib/api/client.ts (keep credentials: 'include' and the x-locale header). No ad-hoc fetch.
Forms: react-hook-form + Zod via zodResolver; submit through a Query mutation; surface success/error with the existing sonner toasts; reset/close only after success. Keep frontend limits aligned with the backend DTO.
UI: reuse @open-meet/ui primitives before adding app-level base components; use existing Tailwind tokens + cn / class-variance-authority. Preserve branding/accent behavior — no one-off hardcoded colors (don't recolor the theme).
Routing / i18n: preserve locale-prefixed routing; all user-facing copy via next-intl — see the i18n-copy skill.
Check both apps: a shared change often needs parallel edits in apps/web and apps/admin. Every new page ships a Playwright E2E test.

Validate

pnpm --filter @open-meet/web lint && pnpm --filter @open-meet/web typecheck && pnpm --filter @open-meet/web test

Add ... test:e2e for new flows. Mirror with @open-meet/admin when admin changed.

Detailed rules: .claude/docs/coding-rules.md.