Create and refactor .tsx files following Next.js 16 App Router and Tailwind v4 guidelines.
npx skills add https://github.com/stancodev/obigode --skill frontend-tsx
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
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.
Refactor the target .tsx page to align with Next.js 16 App Router, Tailwind v4, shadcn/ui components, and the project's type safety.
High-intent search queries and answers about installing and using this skill.
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.
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.
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.
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.
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.
sumik5Guide Next.js 16 and React 19 project implementation with App Router and strict TypeScript.
act70255Validate UI components for visual consistency, design system compliance, and accessibility.
softsparkEnforce type safety and best-practice patterns in TypeScript codebases.
MakePrismsStandardize mobile wallet UI theming with Tailwind v4 CSS variables and CVA variants.
