react

Provides standardized coding patterns for React, Next.js, and TypeScript projects.

1|Updated Jan 16, 2026
One-click install
npx skills add https://github.com/enact-on/super-ai-github --skill react-enact-on
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react
Source: https://github.com/enact-on/super-ai-github/tree/main/.opencode/skill/react
Command: npx skills add https://github.com/enact-on/super-ai-github --skill react-enact-on

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill standardizes React, Next.js, and TypeScript development by providing structured, best-practice patterns that teams can follow to reduce ambiguity and rework.

Core Features & Use Cases

  • Structured Patterns: Guidelines for component layout, hooks usage, and TypeScript typing to ensure consistency across projects.
  • Next.js App Router Guidance: Clear examples for server and client components, routing, and data fetching patterns.
  • Team Onboarding & Scalability: Quick-start templates and reference patterns that accelerate project kickoffs and scale with teams.

Quick Start

Install or enable this skill in your OpenCode workspace and begin applying the React/Next.js/TS patterns to your codebase.

Frequently Asked Questions about react

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

FAQPage Schema
What are the best practices for organizing React components and hooks in a Next.js App Router project?

Structured React patterns provide guidelines for component layout, hooks usage, and TypeScript typing to ensure consistent organization across Next.js App Router projects. They reduce ambiguity and rework by enforcing clear design patterns and coding conventions.

How do I structure server and client components for Next.js 13+ data fetching?

Next.js App Router patterns offer clear examples for structuring server and client components, routing, and data fetching. These documented guidelines and reusable code blocks help developers enforce consistent data fetching conventions across their team.

Can I use these React and TypeScript patterns to onboard new developers faster?

Yes, these React and TypeScript patterns include quick-start templates and reference patterns designed for team onboarding. They accelerate project kickoffs and scale with teams by providing standardized component layouts and coding conventions.

How do I enforce consistent TypeScript typing and frontend patterns across a React development team?

You can enforce consistent TypeScript typing and frontend patterns by loading documented guidelines and reusable example code blocks into your workflow. This ensures all team members follow the same structured best-practice patterns during code scaffolding.

Do I need TypeScript to apply these Next.js frontend patterns?

These frontend patterns are designed for React projects using Next.js 13+ App Router and TypeScript. While the guidelines focus on TypeScript typing and component organization, the underlying component layout principles remain applicable to standard React development.