skills.rest
kingdoubleglazing
kingdoubleglazingCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Standardize React/Next.js frontend development with TypeScript, Tailwind, and Vitest.

1|Updated Apr 7, 2026
Search Tags:#typescript#testing#frontend#react#nextjs#tailwind#ui-patterns
One-click install
npx skills add https://github.com/kingdoubleglazing/kingdoubleglazing --skill frontend-dev-kingdoubleglazing
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/kingdoubleglazing/kingdoubleglazing/tree/main/.claude/skills/frontend-dev
Command: npx skills add https://github.com/kingdoubleglazing/kingdoubleglazing --skill frontend-dev-kingdoubleglazing

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamline and standardize frontend development for React, Next.js, Tailwind, and TypeScript, reducing setup time and architectural drift.

Core Features & Use Cases

  • Best-practice scaffolding for Next.js 14+ apps
  • Typing strategies and component patterns with TypeScript
  • Tailwind-based styling conventions and UI patterns
  • Use Case: rapidly spin up a new UI module with consistent structure and tests

Quick Start

Create a new Next.js 14 project, add a sample page and a styled component to see the recommended structure in action.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I structure a Next.js 14 App Router project with TypeScript and Tailwind?▼

Structure a Next.js 14 App Router project by applying TypeScript strict mode, Tailwind CSS integration conventions, and standardized UI component patterns to reduce setup time and architectural drift.

What is the best way to enforce type safety in React components?▼

Enforce type safety in React components by applying TypeScript strict mode strategies and standardized component patterns, ensuring consistent typing across your Next.js application.

Does this approach work with Vitest and Playwright for frontend testing?▼

Yes, this frontend development approach works with Vitest and Playwright, enforcing integrated testing and CI patterns to rapidly spin up new UI modules with consistent tests.

Can I use this to standardize UI patterns and styling conventions?▼

Yes, you can use this to standardize UI patterns by applying Tailwind-based styling conventions and component structures, ensuring consistent design implementation across your web frontend.

How do I scaffold a new UI module with consistent structure and tests?▼

Scaffold a new UI module by creating a new Next.js 14 project, adding a sample page, and implementing a styled component to see the recommended structure and testing strategies in action.

Why should I standardize my React and Next.js frontend architecture?▼

Standardize your React and Next.js frontend architecture to streamline development, reduce setup time, and prevent architectural drift across your team's web applications.

Related Skills

Explore More Software Engineering Skills→
wesleyegbertowesleyegberto
3

nextjs-expert

Automate Next.js 14+ app architecture and deployment planning.

Community
Advanced
traylinxtraylinx
2

testing-expert

Guide Vitest and Playwright test creation for JavaScript/TypeScript projects.

Official
Advanced
f-elixf-elix

coding-conventions

Codify TypeScript, TailwindCSS, formatting, and testing standards for projects.

Community
Intermediate
ggombeeggombee
13

react-spa

Create React Single Page Applications with Vite or Create React App.

Community
Intermediate