frontend

Scaffold Forge frontends with Connect RPC React Query hooks and UI primitives.

4|1|Updated Apr 12, 2026

Search Tags:#typescript #next.js #visual regression #ui primitives #tailwind css v4 #react query hooks #connect rpc

Ready to run

npx skills add https://github.com/reliant-labs/forge --skill frontend-reliant-labs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend
Source: https://github.com/reliant-labs/forge/tree/main/internal/templates/project/skills/forge/frontend
Command: npx skills add https://github.com/reliant-labs/forge --skill frontend-reliant-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you scaffold and maintain consistent, production-ready Forge frontends so you can ship UI quickly without hand-editing generated RPC hooks or breaking app conventions.

Core Features & Use Cases

Frontend scaffolding for web and mobile: Create standalone Next.js (App Router) or React Native Expo frontends with shared systems and conventions.
Generated data layer for Connect RPC: Use Forge-generated TypeScript React Query hooks for reading and mutating RPCs, without manual edits.
Consistent UI via component primitives: Start with a standard set of low-level UI primitives and higher-level components, and compose them rather than inlining raw markup.
Correct protobuf-es v2 message construction: Enforces create(Schema, {...}) patterns for safe, correct RPC payload creation.
Visual verification guardrail: Requires both accessibility snapshots and visual screenshots to catch layout/CSS issues before declaring completion.

Quick Start

Use forge to scaffold a new frontend project named acme by running forge add frontend acme.

Frequently Asked Questions about frontend

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I scaffold a Next.js App Router frontend with Connect RPC?▼

Scaffolding a Next.js frontend with Connect RPC generates a project containing TypeScript React Query hooks, a shared client layer, and standard UI primitives for immediate UI development.

How do I create Connect RPC request payloads correctly in TypeScript?▼

Creating Connect RPC request payloads correctly in TypeScript requires using the protobuf-es v2 create(Schema, {...}) pattern to ensure safe and valid RPC message construction without manual errors.

What is the best way to maintain UI consistency across a Next.js codebase?▼

Maintaining UI consistency across a Next.js codebase involves composing pre-defined low-level UI primitives and higher-level components rather than inlining raw markup.

Does this frontend scaffolding tool support React Native Expo?▼

Yes, this frontend scaffolding tool supports React Native Expo, allowing you to create standalone mobile variants with shared systems and conventions alongside Next.js web apps.

How do you catch visual regressions in a generated Next.js frontend?▼

Catching visual regressions in a generated Next.js frontend requires validating output with both accessibility snapshots and visual screenshots to identify layout and CSS issues before completion.

Do I need to regenerate TypeScript React Query hooks after changing proto definitions?▼

Yes, you must regenerate TypeScript React Query hooks after changing proto definitions to ensure the shared client layer accurately reflects the updated Connect RPC schema.