Claude Skills by diegosouzapw

Build and integrate scroll-driven Manim animations with pre-rendered assets, manifest generation, and the web runtime. Use when users ask about Manim scroll playback, render pipelines, native text animation, or integrating the runtime.

Guide for creating and working with marimo notebooks, the reactive Python notebook that stores as pure .py files. This skill should be used when creating, editing, running, or deploying marimo notebooks.

Create high-quality pitch decks using Marp and Tailwind CSS

Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.

TypeScript 5.9+ development specialist covering React 19, Next.js 16 App Router, type-safe APIs with tRPC, Zod validation, and modern TypeScript patterns. Use when developing TypeScript applications, React components, Next.js pages, or type-safe APIs.

React Native patterns, NativeWind styling, React Native Reusables components, mobile-specific patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Serve...

Next.js App Router principles. Server Components, data fetching, routing patterns.

Next.js framework best practices including App Router, data fetching, and performance optimization.

Apply for nextjs15-react19-vercelai-tailwind-cursorrules-prompt-file. --- description: Best practices for using Tailwind CSS in Next.js 15 and React 19 applications, including responsive design, custom configurations, and performance optimization. globs: app/**/*

A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.

Build OpenAI Apps SDK applications - interactive ChatGPT apps with MCP servers, React widgets, and rich UI components for conversational experiences

Code components for canvas apps implementation, security, and configuration Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Understanding code components structure and implementation Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Get Microsoft Power Platform CLI tooling for Power Apps Component Framework Triggers on: **/*.{ts,tsx,js,json,xml,pcfproj,csproj}

Structured task planning with clear breakdowns, dependencies, and verification criteria. Use when implementing features, refactoring, or any multi-step work.

Comprehensive Power BI custom visuals development guide covering React, D3.js integration, TypeScript patterns, testing frameworks, and advanced visualization techniques. Triggers on: **/*.{ts,tsx,js,jsx,json,less,css}

React frontend patterns for Pricing App - Zustand, CSS Modules, Tesla Design System, permissions

Interactive project setup for new repos using this template. Detects placeholder text in project.mdc, asks about tech stack, recommends skills, and configures the project. Trigger automatically when project.mdc contains "[Project Name]".

Component development rules specific to Red Cliff Record. Use when working with React components, Tailwind CSS styling, Radix/Shadcn primitives, icons, buttons, forms, or frontend code in this project. Triggers on component files, styling questions, design tokens, Tailwind v4, Shadcn, Radix, TanStack Forms, Lucide icons, or UI primitive usage patterns (sizing, spacing, layout).

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 pat...

Expert React - Hooks, composants, state management, data fetching, testing, styling et patterns modernes

Expert ReactFlow architect for building interactive graph applications with hierarchical node-edge systems, performance optimization, and auto-layout integration. Use when Claude needs to create or...

Create React Flow node components with TypeScript types, handles, and Zustand integration. Use when building custom nodes for React Flow canvas, creating visual workflow editors, or implementing no...

Skill for React TypeScript frontend development with Fluent UI Copilot components. Use when creating UI components, handling SSE streams, working with chat interfaces, or implementing theme support.

React development patterns and best practices including hooks, state management, and performance optimization.

Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to...

React and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.

Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.

React/Next.jsのプロジェクトで、UI=計算モデル（コンポーネント/状態/レンダリング）を軸に、設計・実装・レビュー・性能改善の判断を整理する。doc/input/rdd.md に「技術スタック React」または「技術スタック Next.js」があるリポジトリ、あるいはReactの状態管理/レンダリング/Server Components/SSR/Streaming/バンドル/パフォーマンス相談で使う。

Use when building frontend Web apps that talk to CloudBase Relational Database via @cloudbase/js-sdk – provides the canonical init pattern so you can then use Supabase-style queries from the browser.

Best practices for Remotion - Video creation in React

Mobile-first responsive design patterns with breakpoints, fluid layouts, and adaptive components

Analyzes frontend codebase against Ring standards and generates refactoring tasks for ring:dev-cycle-frontend. Dispatches frontend-specific agents in ANALYSIS mode.

Analyze a specific directory (e.g. frontend/, backend/, e2e/) and generate .claude/rules/ markdown files for it. Use when asked to create rules, analyze a folder for Claude Code, or set up domain memory for a specific part of the codebase.

Embodies a senior frontend developer with 15+ years of experience building web applications. Provides expert guidance on UI architecture, component design, state management, CSS/styling, performance optimization, accessibility, debugging browser issues, and modern frontend tooling. Use when building UIs, debugging frontend issues, choosing frontend frameworks, or needing senior-level code review and mentorship.

Sets the mindset for a senior frontend developer concerning code quality, maintainability, and testing. This encourages developers to focus on creating clean, efficient, and well-tested code.

Comprehensive frontend development skill for building modern, performant web applications using React, Next.js, TypeScript, Tailwind CSS. Includes component scaffolding, performance optimization, bundle analysis, and UI best practices. Use when developing frontend features, optimizing performance, implementing UI/UX designs, managing state, or reviewing frontend code.

Optimize portfolio websites for search engines with Next.js Metadata API, structured data, Open Graph, and performance SEO.

React component library skill for shadcn/ui + Tailwind CSS. Use for React/Next.js/Vite projects needing accessible UI components (dialogs, forms, tables, navigation), Radix UI primitives, Tailwind utility styling, theming, and dark mode. NOT for Angular projects - see frontend-angular-* skills. Triggers on "shadcn", "radix ui", "react components", "tailwind components". For design decisions (styles, palettes, fonts), use ui-ux-pro-max instead.

Applies Shadowrun cyberpunk aesthetic to UI components. Use when building character sheets, creation cards, gear panels, modal dialogs, or any SR-themed interface elements. Combines systematic craft principles with the distinctive visual language of the Sixth World.

Sixty's production design system for enterprise SaaS applications. Use when building UI components, creating React/Next.js interfaces, styling dashboards, implementing light/dark themes, or applying Sixty's glassmorphic dark mode aesthetic. Triggers on frontend development, UI styling, component creation, theme implementation, and any Sixty product interface work.

Lee los metadatos de todas las skills y actualiza el índice en AGENTS.md.

<div > <ul class="posts"> {% for post in site.posts %} {% if post.categories contains 'softskill' %} <small>{{ post.date | date: "%b %d, %Y"}}</small> <br> <a href="{{ post.url }}"> {{ post.title }}</a> <br> {{ post.abstract }} <br> {% endif %} {% endfor %} </ul> </div>

SolidJS rendering: render for client apps, hydrate for SSR, renderToString for server rendering, renderToStream for streaming, isServer checks.

Solid Router preloading: preload function for routes, usePreloadRoute hook, hover/focus intent detection, lazy component preloading, performance optimization.

Solid Router queries: query() for data fetching with caching/deduplication, createAsync() for reactive signals, createAsyncStore() for fine-grained reactivity, query keys for revalidation.

SolidStart entrypoints: app.tsx for isomorphic root, entry-client.tsx for browser initialization, entry-server.tsx for SSR setup, app.config.ts for build configuration.

SolidStart hydration guard: keep SSR/CSR output identical, gate browser-only APIs, use stable IDs, align Suspense/resource fallbacks, and use clientOnly/onMount for client-only UI.