Claude Skills

React and Next.js performance optimization guidelines from Vercel Engineering. Use when writing, reviewing, or refactoring React/Next.js code, improving Web Vitals, or when user mentions React performance, Next.js optimization, bundle size, data fetching.

Use when spec and code diverge - AI analyzes mismatches, recommends update spec vs fix code with reasoning, handles evolution with user control or auto-updates

This skill should be used when the user asks to "create an isolated worktree", "set up worktree for feature", "create a feature branch worktree", or needs workspace isolation with automatic dependency setup and test verification.

Use when starting from rough ideas - refines concepts into executable specifications through collaborative questioning, alternative exploration, and incremental validation, use this skill when called from a command

Use when creating expert agents. Generates agent.md with frontmatter, hooks, required sections, and skill references.

Transform vague inputs into precision-optimized AI prompts for Claude, ChatGPT, Gemini, or other LLMs. Use when user mentions "optimize prompt", "improve prompt", "lyra", "prompt engineering", or needs help crafting effective AI prompts.

Spacing utilities Tailwind CSS v4.1. Margin (m-*, mx-*, my-*, mt-*, mr-*, mb-*, ml-*, -m-* negative, m-auto), Padding (p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*), Space between (space-x-*, space-y-*).

App build, code signing, TestFlight, and App Store distribution for all Apple platforms. Use when preparing releases, configuring signing, uploading to TestFlight, or submitting to App Store.

Transform & Animation utilities Tailwind CSS v4.1. Transform (scale-*, rotate-*, translate-*, skew-*, transform-origin), Transition (transition-*, duration-*, ease-*, delay-*), Animation (animate-*, @keyframes).

Typography utilities Tailwind CSS v4.1. Font (font-sans, font-serif, font-mono, font-size, font-weight), Text (text-color, text-align, text-wrap, text-shadow NEW), Letter/Line spacing, Decoration, Transform.

Tailwind CSS v4.1 core features, @theme, directives, migration guide

Advanced glassmorphism techniques with blur, layering, colored shadows, and depth. Use when creating frosted glass effects, transparent overlays, or modern glass UI.

Layered background effects with gradient orbs, blur layers, noise textures, and depth. Use when creating hero sections, landing pages, or premium visual effects.

Design token architecture with primitives, semantic, and component tokens. Use when creating theme systems, color variables, or design system tokens.

This skill should be used when the user asks about "SOLID principles", "Next.js architecture", "modular structure", "code organization", "file size limits", "interface separation", or "JSDoc documentation". Enforces files < 150 lines with mandatory JSDoc and separated interfaces.

Zustand v5 state management for Next.js 16 App Router. Use when implementing global state, stores, persist, hydration, or client-side state in Client Components.

Library of 18+ ready-to-use prompt templates and executable agents

Expert Next.js 16 with Turbopack, App Router, Cache Components, proxy.ts, React 19. Use when building Next.js apps, routing, caching, server components, or migrating from v15.