skills.rest
jungai
jungaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-dev

Bootstrap React frontends with TypeScript, Tailwind, Next.js, and TanStack tooling.

2|Updated Dec 29, 2019
Search Tags:#typescript#react#routing#tanstack#nextjs#tailwind
One-click install
npx skills add https://github.com/jungai/dotfiles --skill frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/jungai/dotfiles/tree/main/.config/opencode/skill/frontend-dev
Command: npx skills add https://github.com/jungai/dotfiles --skill frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps developers bootstrap and maintain modern React applications using TypeScript, Tailwind, Next.js, and TanStack tools.

Core Features & Use Cases

  • Project scaffolding for React + TypeScript + Tailwind in Next.js environments.
  • Routing, data fetching, and state management using TanStack Router, Query, and Start.
  • Component patterns and TypeScript configurations to support scalable frontend architectures.
  • Use Case: rapidly spin up a production-ready frontend with typed components, routing, and UI styling.

Quick Start

  • Create a new Next.js project with TypeScript and Tailwind: npx create-next-app@latest my-app --typescript --tailwind
  • Install TanStack packages: npm i @tanstack/react-router @tanstack/react-query @tanstack/start
  • Start development: npm run dev

Frequently Asked Questions about frontend-dev

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

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

Setting up a Next.js project with TypeScript and Tailwind CSS involves running npx create-next-app@latest my-app --typescript --tailwind. This command scaffolds a typed, styled application ready for development.

How do I add TanStack Router and Query to a React frontend?▼

You add TanStack Router and Query to a React frontend by running npm i @tanstack/react-router @tanstack/react-query @tanstack/start. This installs the necessary packages for routing, data fetching, and state management in your application.

What is the best way to structure a scalable React and TypeScript component architecture?▼

A scalable React and TypeScript component architecture uses typed component patterns and specific TypeScript configurations. This structure supports maintainable frontend architectures across typical development workflows.

Do I need a specific Node.js environment to bootstrap a React frontend with TanStack tools?▼

Yes, you need a Node.js environment with npm or yarn to bootstrap a React frontend with TanStack tools. Standard libraries like @tanstack/*, Next.js, and Tailwind must be installed in the development environment.

Can I use TanStack Start for state management in a Next.js application?▼

Yes, TanStack Start can be used for state management in a Next.js application. Installing @tanstack/start alongside react-router and react-query enables comprehensive routing and data fetching capabilities.

Related Skills

Explore More Software Engineering Skills→
fritzprixfritzprix
8

system-setup

Install and verify MCP runtime dependencies across Windows, Linux, and macOS.

Community
Intermediate
schuettcschuettc
1

setup-frontend

Automate Vite + React frontend setup and deployment to S3 with CloudFront via CDK.

Community
Advanced
timequitytimequity
6

frontend-react

Automate React frontend development with TypeScript, Tailwind CSS, Vite, Zustand, and TanStack Query.

Official
Advanced
Yoriichi-DangYoriichi-Dang

tailwind-patterns

Generate Tailwind CSS UI patterns for dashboards, landing pages, and admin panels.

Community
Basic