skills.rest
innexar-plat
innexar-platCOMMUNITY
Explore all skills by this author →
GitHub

software-frontend

Provide frontend engineering patterns for Next.js 16, Vue, Angular, SvelteKit, Remix, and Vite+React.

Updated Apr 10, 2026
Search Tags:#typescript#performance#accessibility#frontend#react#nextjs#tailwind
One-click install
npx skills add https://github.com/innexar-plat/Master-Coat-Solutions --skill software-frontend-innexar-plat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: software-frontend
Source: https://github.com/innexar-plat/Master-Coat-Solutions/tree/main/.github/skills/software-frontend
Command: npx skills add https://github.com/innexar-plat/Master-Coat-Solutions --skill software-frontend-innexar-plat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Provides a production-grade set of patterns, checklists, and templates to accelerate building and maintaining modern web frontends while reducing common failures such as hydration mismatches, migration regressions, and performance/accessibility regressions.

Core Features & Use Cases

  • Framework decision tree & templates: Choose and start projects for Next.js 16, Vue/Nuxt, Angular 21, SvelteKit, Remix, or Vite+React using the matching templates in assets.
  • Next.js 16 migration & operational playbook: Step-by-step migration guidance (proxy.ts, cache components, React Compiler) plus release gates for performance and a11y.
  • Performance, testing, and security guardrails: Performance budgets, Lighthouse/Labs guidance, Vitest browser-mode testing patterns, RSC security advisories, and deployment checklists.
  • Operational discipline & handoff: Lint/type/build workflow, exact handoff requirements, and shared checklists to ensure repeatable, reviewable releases.
  • References for framework-specific gotchas: Deep dives into hydration safety, state-management recommendations (TanStack Query, Zustand), and framework-specific patterns in references.

Quick Start

Use this skill to scaffold a production Next.js 16 TypeScript app with Turbopack, Tailwind v4 and shadcn/ui from the assets template and run the Next.js 16 migration and performance/a11y checklists.

Frequently Asked Questions about software-frontend

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

FAQPage Schema
How do I migrate my existing React application to Next.js 16?▼

To migrate your React application to Next.js 16, use the operational playbook for proxy.ts, cache components, and the React Compiler, and follow the step-by-step migration checklists to prevent regressions.

What is the best way to resolve React Server Components hydration errors?▼

Resolving React Server Components hydration errors involves applying framework-specific patterns from the reference guides that enforce hydration safety and prevent mismatches during server-side rendering.

Can I use Tailwind v4 and shadcn/ui with Turbopack in a TypeScript project?▼

Yes, you can use Tailwind v4 and shadcn/ui with Turbopack by scaffolding a production Next.js 16 TypeScript app from the provided assets template to ensure strict type compliance.

How do I set up accessibility and performance release gates for modern web frontends?▼

Set up accessibility and performance release gates for modern web frontends by applying the provided checklists, performance budgets, and Lighthouse guidance to enforce operational discipline.

Does this frontend engineering pattern support Vue, Angular, and SvelteKit frameworks?▼

Yes, the frontend engineering patterns support Vue/Nuxt, Angular 21, SvelteKit, and Remix through a framework decision tree and matching templates to initialize projects correctly.

Why do I need TanStack Query and Zustand for state management in web applications?▼

You need TanStack Query and Zustand for state management in web applications to maintain operational discipline and resolve complex data fetching and local state requirements safely.

Related Skills

Explore More Software Engineering Skills→
AndVl1AndVl1
4

react-vite

Scaffold React 18+ and Vite frontends for Telegram Mini Apps.

Community
Intermediate
Thanh-aperoThanh-apero
1

web-testing

Automate web testing with Playwright, Vitest, k6, and Lighthouse.

Community
Advanced
imehrimehr

state-management

Structure React state management across server and client boundaries with modular patterns.

Community
Intermediate
farming-labsfarming-labs
35

meta-frameworks-overview

Compare meta-frameworks like Next.js, Nuxt, SvelteKit, Remix, and Astro.

Official
Basic