skills.rest
aptxaptx
aptxaptxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

bencium-code-conventions

Enforce ReactJS, Next.js, TypeScript, and TailwindCSS code conventions.

Updated Aug 27, 2026
Search Tags:#typescript#react#coding style#next.js#tailwind#shadcn ui#code conventions
One-click install
npx skills add https://github.com/aptxaptx/scamai-landing --skill bencium-code-conventions-aptxaptx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bencium-code-conventions
Source: https://github.com/aptxaptx/scamai-landing/tree/main/.agents/skills/bencium-code-conventions
Command: npx skills add https://github.com/aptxaptx/scamai-landing --skill bencium-code-conventions-aptxaptx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures code adheres to Bence's specific coding style, technology stack, and workflow conventions, promoting consistency and maintainability across projects.

Core Features & Use Cases

  • Technology Stack Guidance: Defines preferred frontend (ReactJS, Next.js, TypeScript), styling (TailwindCSS, Shadcn UI), and backend (Convex, Supabase) tools.
  • Code Structure & Style: Enforces ES modules, destructuring, async/await, const/let, descriptive naming, and specific directory naming conventions.
  • Framework Best Practices: Outlines conventions for Next.js App Router, React functional components, Zustand/TanStack for state management, and Zod for validation.
  • Component Library & Styling: Prioritizes Shadcn UI components and Tailwind utility classes, with specific icon and toast library recommendations.
  • Quality Assurance: Emphasizes TDD, avoiding mocks, writing SQL in chunks, type-checking, and running tests before committing.
  • Error Handling: Mandates proper error handling, user-friendly messages, and early returns.
  • Performance: Focuses on minimizing client-side rendering, favoring RSC/SSR, dynamic imports, and image optimization.
  • Development Workflow: Guides users through an "Explore → Plan → Code → Commit" process, discouraging local backends and Docker.
  • Environment & Deployment: Provides instructions for .env files and deployment to Netlify/Vercel.

Quick Start

Follow Bence's code conventions when writing new React components using TypeScript and TailwindCSS.

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 coding conventions for React and Next.js projects using TypeScript?▼

Next.js App Router conventions prioritize React functional components, Zustand for state management, and Zod for validation. This Skill provides a structured workflow to enforce these framework best practices in your TypeScript projects.

How do I standardize TailwindCSS and Shadcn UI component styling across my codebase?▼

Standardize TailwindCSS and Shadcn UI styling by prioritizing Shadcn UI components and Tailwind utility classes, alongside specific icon and toast library recommendations. This Skill enforces those library preferences to maintain visual and structural consistency.

Does this coding style guide support backend conventions for Convex and Supabase?▼

Yes, this coding style guide supports backend conventions for Convex and Supabase. It covers backend development guidelines, SQL written in chunks, error handling, and environment setup to ensure full-stack consistency.

What is the recommended development workflow for TypeScript and React applications?▼

The recommended development workflow follows an "Explore → Plan → Code → Commit" process, discouraging local backends and Docker. This Skill guides you through this workflow while emphasizing type-checking and running tests before committing.

How do I optimize performance and handle errors in a Next.js application?▼

Optimize Next.js performance by minimizing client-side rendering, favoring RSC/SSR, using dynamic imports, and optimizing images. Error handling mandates proper management, user-friendly messages, and early returns.

Related Skills

Explore More Software Engineering Skills→
tambo-aitambo-ai
11.2k

start-from-scratch

Recommend stacks and setup steps for starting a new Tambo project.

Official
Advanced
boomNDSboomNDS

vercel-deployment

Deploy Next.js apps to Vercel with production and preview workflows.

Community
Intermediate
softsparksoftspark
161

typescript-patterns

Enforce type safety and best-practice patterns in TypeScript codebases.

Community
Basic
RyoOsakaRyoOsaka

component

Generate a scaffolded React component with CSS module and tests.

Community
Intermediate