skills.rest
reliant-labs
reliant-labsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/reliant-labs/forge --skill frontend-reliant-labs
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
saddam-eng-techsaddam-eng-tech

go-proto-wiring

Generate Go gRPC handler, service interface, and mapper files from protobuf definitions.

Community
Intermediate
idealjsidealjs
5

create-component-nextjs-page

Create Next.js MDX/TSX component demo pages with variants and visual regression tests.

Official
Intermediate
TimberbainTimberbain

react-expert

Generate React 19 and Next.js 16+ code with Tailwind CSS v4.

Community
Advanced
117503445117503445
2

init-project

Initialize Go and React projects with predefined architecture patterns.

Community
Advanced