Skip to main content
affpapa.org
RU EN
skill CX Codex

nextjs-typescript-tailwindcss-supabase — Claude Code skill

A skill that steers your agent toward Next.js 14, TypeScript, TailwindCSS and Supabase: server components, error handling, readable code.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code
Open on GitHub

What nextjs-typescript-tailwindcss-supabase does

This skill turns the assistant into a developer working in Next.js 14 with TypeScript, TailwindCSS and Supabase. It carries a set of technical preferences: kebab-case component names, a bias toward React Server Components and SSR, and 'use client' kept to small isolated spots. For components that fetch data, the agent adds loading and error states plus error logging.

General rules come with it. The agent follows your specs, names specific files in its implementations, leaves no todos or placeholders, and says when it is unsure instead of guessing. Readability outranks performance optimization here, so don't expect it to chase milliseconds. Semantic HTML elements are used throughout.

Install is one command through npx skills add, and the skill runs in Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Copilot takes a different route: gh skill install. The skill file lands at a path like ~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md, which you can edit to fit your project.

What it helps with

  • write Next.js 14 components in TypeScript without stray 'use client'
  • add loading and error states to data-fetching components
  • keep kebab-case across component filenames
  • build an SSR page with Supabase as the backend
  • strip placeholders and unfinished todos before shipping

Example prompts for the agent

  • Build an orders list page from Supabase as a server component, with loading and error handling
  • Refactor this component and drop 'use client' if it isn't needed
  • Write a TailwindCSS form and wire it to a Supabase table

How to install nextjs-typescript-tailwindcss-supabase

1Skills CLI (Vercel)

npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code

2Manually: put the files in place

~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nextjs-typescript-tailwindcss-supabase/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nextjs-typescript-tailwindcss-supabase

How do I install nextjs-typescript-tailwindcss-supabase in Claude?

Run npx skills add Mindrally/skills --skill nextjs-typescript-tailwindcss-supabase -a claude-code. The skill ends up at ~/.claude/skills/nextjs-typescript-tailwindcss-supabase/SKILL.md.

What does this skill do?

It sets rules for a full stack on Next.js 14: TypeScript, TailwindCSS and Supabase, leaning on server components, SSR and readable code.

Which platforms does it support?

Claude, Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. Copilot installs with gh skill install Mindrally/skills nextjs-typescript-tailwindcss-supabase.

Source text

SKILL.md · Apache-2.0 
---
name: nextjs-typescript-tailwindcss-supabase
description: Full-stack Next.js 14 development with TypeScript, TailwindCSS, and Supabase for building production-ready web applications.
metadata:
  maintainer: Mindrally
  source: https://github.com/Mindrally/skills
---

# Next.js TypeScript TailwindCSS Supabase

You are an expert full-stack web developer focused on producing clear, readable Next.js code. You always use the latest stable versions of Next.js 14, Supabase, TailwindCSS, and TypeScript, and you are familiar with the latest features and best practices. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

## Technical Preferences

- Employ kebab-case naming convention for components (example: my-component.tsx)
- Prioritize React Server Components and Next.js SSR capabilities
- Restrict client components ('use client') to minimal, isolated implementations
- Incorporate loading and error handling states for data-fetching components
- Establish error handling and error logging mechanisms
- Leverage semantic HTML elements throughout

## General Preferences

- Adhere precisely to user specifications
- Produce correct, current, bug-free, fully functional, secure, and efficient code
- Emphasize readability over performance optimization
- Implement all requested functionality completely
- Eliminate todos, placeholders, or incomplete code sections
- Reference specific file names in implementations
- Maintain conciseness with minimal extraneous content
- Acknowledge uncertainty rather than speculating on unfamiliar topics

© Mindrally · Apache-2.0 · Mindrally/skills

Similar skills

Everything for Frontend and UI →
typescript-nextjs-supabase-cursorrules-prompt-file PatrickJS A Cursor rule that keeps TypeScript work on Next.js App Router and Supabase consistent: server components first, Shadcn UI, Tailwind. ★ 41,011repo stars nextjs-tailwind-typescript-apps-cursorrules-prompt PatrickJS A Cursor rule that points the assistant at Next.js, Tailwind CSS and TypeScript. It sets the working order: plan in pseudocode first, code after. ★ 41,011repo stars nextjs-supabase-auth sickn33 This skill wires Supabase Auth into the Next.js App Router with clients, middleware, OAuth callbacks, and Server Actions. Use it when you need protected routes and session handling. CX Codex +1 6,600installs bencium-code-conventions bencium Sets Bence's conventions for React and Next.js projects, covering the stack, code style, tests and workflow. Use it when building or setting up work under those rules. CX Codex +1 3,300installs material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. CX Codex +1 727installs supabase-server supabase Tells the agent how to write Edge Functions, Hono apps and webhook handlers on @supabase/server: auth modes, clients, inbound request checks. CX Codex +1 9,700installs

From the same set214

redux-toolkit Redux Toolkit best practices for React and Next.js applications using TypeScript. Helps structure feature slices, typed hooks, and RTK Query endpoints. CX Codex +1 1,300installs front-end-developer Turns your agent into a senior front-end developer: React, Next.js, TypeScript, Tailwind, accessibility. Useful when you want components written, not discussed. CX Codex +1 1,300installs lua Gives the agent a rulebook for Lua: tables, metatables, error handling, game loops and memory. Useful when your project is Lua or Love2D. CX Codex +1 1,300installs tauri-development The skill provides guidelines for building desktop applications with Tauri. It sets coding standards across Rust and TypeScript. CX Codex +1 1,300installs electron-development A skill that gives the agent rules for building Electron desktop apps: process separation, IPC, window security. CX Codex +1 1,300installs alpine-js Guidelines for building reactive Alpine.js interfaces with minimal JavaScript. Helps generate UI components paired with Tailwind CSS, Livewire, and Ghost CMS. CX Codex +1 1,300installs zod-schema-validation Guides agents on writing Zod schemas, inferring TypeScript types, and validating boundaries in APIs and UI forms. Keeps validation consistent across the codebase. CX Codex +1 1,200installs kafka-development A skill that hands your agent Kafka best practices: topics, partitions, producer and consumer settings, Schema Registry. Useful when you build event-driven code. CX Codex +1 1,200installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor