skills.rest
raksok
raksokCOMMUNITY
Explore all skills by this author →
GitHub

senior-frontend

Automate React and Next.js frontend workflows with scaffolding, patterns, and performance analysis.

Updated Apr 9, 2026
Search Tags:#typescript#frontend#react#scaffolding#patterns#nextjs#tailwindcss
One-click install
npx skills add https://github.com/raksok/netherica --skill senior-frontend-raksok
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: senior-frontend
Source: https://github.com/raksok/netherica/tree/main/.agents/skills/senior-frontend
Command: npx skills add https://github.com/raksok/netherica --skill senior-frontend-raksok

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams often wrestle with boilerplate, architectural decisions, and maintaining best practices across React, Next.js, TypeScript, and Tailwind projects. This skill codifies patterns, scaffolding templates, and automated checks to accelerate delivery while preserving quality.

Core Features & Use Cases

  • Scaffold new React/Next.js projects with TypeScript and Tailwind CSS setup.
  • Generate reusable components, hooks, and utilities following established patterns.
  • Analyze bundle sizes, optimize performance, and validate accessibility and testing strategies.

Quick Start

Create a new Next.js project with TypeScript and Tailwind, then scaffold a Button component and run a basic accessibility audit.

Frequently Asked Questions about senior-frontend

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

FAQPage Schema
How do I scaffold a new Next.js project with TypeScript and Tailwind CSS?▼

Scaffolding a new Next.js project with TypeScript and Tailwind CSS involves generating base templates and configuring the environment to enforce established patterns. This skill automates that setup to accelerate project delivery.

What is the best way to generate reusable React components following established patterns?▼

Generating reusable React components is best handled by applying codified patterns and templates. This approach enforces best practices across TypeScript and React projects, ensuring consistency and reducing manual boilerplate.

Can I use this to analyze bundle size and validate accessibility in a React app?▼

Yes, you can analyze bundle sizes and validate accessibility strategies within your React app. The skill performs automated checks to optimize performance and verify that testing strategies meet required standards.

Does this skill work for existing React apps or only scaffolding new ones?▼

This skill works for both new and existing React apps. Beyond scaffolding new applications, it applies reusable patterns, generates hooks and utilities, and runs performance analysis on your current codebase.

How do I enforce frontend best practices across a React and Next.js codebase?▼

Enforcing frontend best practices across a React and Next.js codebase is done by codifying architectural decisions into reusable templates. This ensures consistent TypeScript and Tailwind CSS patterns without manual review.

Related Skills

Explore More Software Engineering Skills→
GemachDAOGemachDAO
4

gdex-ui-install-setup

Scaffold a React or Next.js project with a GDEX SDK provider.

Official
Intermediate
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
patricio0312revpatricio0312rev
5

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
novskidevnovskidev
2

artifacts-builder

Create interactive HTML artifacts with React, TypeScript, and Tailwind CSS.

Community
Intermediate