skills.rest
hiyenwong
hiyenwongCOMMUNITY
Explore all skills by this author →
𝕏@khonsu_51GitHub

frontend-best-practices

Standardize React/Next.js components, accessibility, and performance with structured guidelines.

2|Updated Feb 12, 2026
Search Tags:#typescript#ui#frontend#react#nextjs#guidelines#tailwindcss
One-click install
npx skills add https://github.com/hiyenwong/ai_collection --skill frontend-best-practices-hiyenwong
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-best-practices
Source: https://github.com/hiyenwong/ai_collection/tree/main/collection/skills/frontend-best-practices
Command: npx skills add https://github.com/hiyenwong/ai_collection --skill frontend-best-practices-hiyenwong

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Senior front-end developers often struggle to maintain consistent coding standards, ensure accessibility, and scale UI components across React/Next.js projects. This Skill provides a centralized, opinionated set of guidelines to reduce friction and improve code quality.

Core Features & Use Cases

  • Coding Standards: enforce naming conventions, file structure, and component design across teams.
  • Accessibility & UX: promote accessible markup, keyboard navigation, and inclusive UI practices.
  • Code Review & Onboarding: serve as a reference during reviews and new-hire onboarding to accelerate ramp-up.

Quick Start

Apply these frontend best practices to your React/Next.js project to improve code quality and UI consistency.

Frequently Asked Questions about frontend-best-practices

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

FAQPage Schema
How do I enforce coding standards for React and Next.js projects?▼

To enforce coding standards for React and Next.js projects, apply structured guidelines covering naming conventions, file structure, and component design to standardize UI architecture and reduce friction across teams.

What are the best practices for accessibility in modern web apps?▼

Best practices for accessibility in modern web apps involve promoting accessible markup, keyboard navigation, and inclusive UI practices to ensure compliance and improve user experience across your application.

How do I scale UI components using TypeScript and TailwindCSS?▼

To scale UI components using TypeScript and TailwindCSS, follow opinionated guidelines that standardize component design and architecture, ensuring maintainable and consistent front-end code quality.

Can I use these guidelines for code review and onboarding?▼

Yes, you can use these guidelines as a central reference during code reviews and new-hire onboarding to accelerate ramp-up, standardize practices, and ensure accessibility in React and Next.js applications.

What is the best way to structure a Next.js project for senior developers?▼

The best way to structure a Next.js project for senior developers is to apply centralized, opinionated guidelines that standardize file structure, component design, and UI architecture to improve overall code quality.

Does this guide cover both HTML and CSS alongside JavaScript?▼

Yes, this guide covers HTML, CSS, and JavaScript alongside TypeScript, providing a comprehensive set of front-end best practices for modern UI development in React and Next.js environments.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

ui-frontend

Define standardized React UI patterns for Tauri desktop apps.

Community
Intermediate
elophantoelophanto
116

web-design-guidelines

Fetch web interface guidelines and report UI code compliance in file:line format.

Community
Intermediate
try-workstry-works
95

ui-design-system

Develop UI components and design systems with TailwindCSS, Radix UI, and shadcn/ui.

Community
Advanced
Adelie-SquadAdelie-Squad
17

creative-frontend

Develop reusable UI components with design-system tokens across React, Vue, and Angular.

Official
Advanced