bencium-code-conventions

Standardizes React/Next.js coding conventions and project scaffolding for TypeScript teams.

383|53|Updated Oct 18, 2025
One-click install
npx skills add https://github.com/bencium/bencium-marketplace --skill bencium-code-conventions
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: bencium-code-conventions
Source: https://github.com/bencium/bencium-marketplace/tree/main/bencium-code-conventions/skills/bencium-code-conventions
Command: npx skills add https://github.com/bencium/bencium-marketplace --skill bencium-code-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent code styles and workflow across projects create onboarding friction, reduce maintainability, and slow down delivery. This Skill provides a unified set of conventions to align teams on a single tech stack and development process.

Core Features & Use Cases

  • Standardized tech stack guidance (Frontend: React/Next.js with TypeScript, TailwindCSS, and Shadcn UI; Backend: Postgres-backed or cloud DB patterns; Deployment: Netlify/Vercel).
  • Clear coding standards (ES modules, TypeScript, async/await, descriptive naming, directory conventions) to improve readability and reduce defects.
  • Framework and tooling conventions (Next.js App Router, React functional patterns, Zustand/TanStack for state, Zod for validation) along with testing and performance best practices.

Quick Start

Initialize a new React/Next.js project with App Router using TypeScript and ES modules, then refactor existing code to follow the conventions outlined above.

Frequently Asked Questions about bencium-code-conventions

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

FAQPage Schema
What are the best code conventions for a React and Next.js TypeScript project?

Consistent React and Next.js TypeScript code conventions enforce ES modules, App Router architecture, async/await, and descriptive naming. This standardizes project scaffolding, improves readability, and reduces defects across frontend teams.

How do I standardize project scaffolding for a Next.js App Router codebase?

Standardize Next.js App Router scaffolding by enforcing directory conventions, TypeScript with ES modules, and TailwindCSS with Shadcn UI. This aligns teams on a unified tech stack and accelerates project onboarding.

Does this code convention skill work with TailwindCSS and Shadcn UI?

Yes, these code conventions work with TailwindCSS and Shadcn UI. The standardized tech stack explicitly guides frontend teams building React and Next.js apps to integrate TailwindCSS and Shadcn UI components.

What state management and validation libraries should I use in Next.js?

For Next.js state management and validation, use Zustand or TanStack for state management and Zod for validation. These tools align with React functional patterns and established TypeScript workflow conventions.

How do I enforce coding standards during code reviews for TypeScript?

Enforce TypeScript coding standards during code reviews by checking for ES modules usage, async/await patterns, consistent naming, and App Router directory conventions. This reduces onboarding friction and maintains project maintainability.