frontend-tsx

Name: frontend-tsx
Availability: InStock
Author: stancodev

Create and refactor .tsx files following Next.js 16 App Router and Tailwind v4 guidelines.

Updated Mar 24, 2026

Search Tags:#typescript #frontend #react #nextjs #tailwind #design-system #tsx

Ready to run

npx skills add https://github.com/stancodev/obigode --skill frontend-tsx

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-tsx
Source: https://github.com/stancodev/obigode/tree/main/.claude/skills/frontend-tsx
Command: npx skills add https://github.com/stancodev/obigode --skill frontend-tsx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Use SEMPRE que for criar, editar ou refatorar qualquer arquivo .tsx no OBigode. Especialista em Next.js 16 App Router, Tailwind CSS v4, shadcn/ui, Zod e Zustand. Garante componentes mobile-first, responsivos (mobile → tablet → desktop), acessíveis, tipados e coerentes com o design system do projeto.

Core Features & Use Cases

Especialista em Next.js 16 App Router, Tailwind CSS v4, shadcn/ui, Zod e Zustand.
Garante componentes mobile-first, responsivos, acessíveis, tipados e coerentes com o design system.

Quick Start

Refactor the target .tsx page to align with Next.js 16 App Router, Tailwind v4, shadcn/ui components, and the project's type safety.

Frequently Asked Questions about frontend-tsx

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

FAQPage Schema

How do I create Next.js 16 App Router components with strict TypeScript and Tailwind v4?▼

To create Next.js 16 App Router components with strict TypeScript and Tailwind v4, generate or refactor .tsx files using mobile-first, accessible UI patterns aligned with shadcn/ui. This enforces type-safe properties and responsive layouts across pages and components.

What is the best way to enforce design-system alignment when refactoring React tsx files?▼

Enforcing design-system alignment when refactoring React tsx files involves standardizing component reusability and type-safe patterns. Apply strict TypeScript rules alongside shadcn/ui and Tailwind v4 guidelines to maintain visual and functional coherence across mobile-first pages.

Can I use Zod and Zustand for state management in Next.js 16 App Router pages?▼

Yes, you can use Zod and Zustand for state management in Next.js 16 App Router pages. Integrating them within your .tsx files ensures type-safe validation and robust state handling while maintaining mobile-first, accessible component structures.

Does shadcn/ui work with Tailwind v4 for mobile-first responsive components?▼

Yes, shadcn/ui works with Tailwind v4 for mobile-first responsive components. Combining them in .tsx files ensures accessibility, strict TypeScript type safety, and proper design system alignment across mobile, tablet, and desktop breakpoints.

Why does my refactored tsx file break when applying strict TypeScript rules?▼

Your refactored tsx file may break under strict TypeScript rules due to untyped component props or misaligned design system patterns. Enforcing type-safe properties with Zod validation and Next.js 16 App Router conventions resolves these structural and type errors.