nextjs-typescript-tailwindcss-supabase

Name: nextjs-typescript-tailwindcss-supabase
Author: mindrally

github.com/mindrallyDevelopment2871.3k installsUpdated 3w ago

About nextjs-typescript-tailwindcss-supabase

A full-stack development skill for Next.js, TypeScript, TailwindCSS, and Supabase. It guides implementation choices such as server components, loading and error states, semantic HTML, and readable code.

Key features

01Next.js and TypeScript guidance
02React Server Components and SSR
03Minimal client components
04Loading and error states
05Semantic HTML and readable code

Use cases

01Building a Next.js full-stack feature
02Choosing server or client components
03Adding data-fetching states
04Implementing accessible semantic markup

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/mindrally/skills --skill nextjs-typescript-tailwindcss-supabase

After installing, type/nextjs-typescript-tailwindcss-supabasein Claude Code to confirm it loaded.

Details

From the project README

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

Comments

Markdown supported

Details

Author: mindrally
Repository: mindrally/skills
Category: Development
Installs: 1,334
GitHub stars: 287

Report

More skills

All skills

remotion-render

github.com/inference-sh

1.6M

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

Scan a codebase for architecture improvement opportunities, present them as a visual HTML report, then dive deep into whichever one you pick.

design-mobile-apps

github.com/designed-by-ai

1.1M

Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML

vercel-react-best-practices

github.com/vercel-labs

848.6k

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.