All authors
Claude Skills by thedixitjain
github.com/thedixitjain12,707 skills283 installs48,721 views
- Raster Logo SvgWrap raster logos (webp, png, jpg) in self-contained SVG files via base64 embedding for pixel-perfect matches. Use when creating logo SVGs, converting webp/png to svg, fixing hand-drawn logos that do not match the source, or preparing plugin/README logo assets without a vector source file.Votes: 0GitHub stars: 3
- Rayden CodeGenerate React code with Rayden UI components using correct props, tokens, and premium layout patternsVotes: 0GitHub stars: 3
- Rayden UseBuild and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcementVotes: 0GitHub stars: 3
- React Audit Grep PatternsProvides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do ...Votes: 0GitHub stars: 3
- React Best PracticesComprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Use when writing new React components or Next.js pages, implementing data fetching (client or server-side), or reviewing code for performance issues.Votes: 0GitHub stars: 3
- React Component Generator'Generate react component generator operations. Auto-activating skill for Frontend Development. Triggers on: react component generator, react component generator Part of the Frontend Development skill category. Use when working with react component generator functionality. Trigger with phrases like \"react component generator\", \"react generator\", \"react\". 'Votes: 0GitHub stars: 3
- React Component Performance DimillianAnalyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.Votes: 0GitHub stars: 3
- React Component PerformanceDiagnose slow React components and suggest targeted performance fixes.Votes: 0GitHub stars: 3
- React Container Presentation ComponentCreate a React component using the Container/Presentation pattern in src/components by asking for the component name and type (ui or features), then scaffold files that follow this repository's TypeScript, Storybook, and SCSS conventions. Use when the user explicitly asks for a Container/Presentation-based component or runs /react-container-presentation-component.Votes: 0GitHub stars: 3
- React Context Setup'Configure react context setup operations. Auto-activating skill for Frontend Development. Triggers on: react context setup, react context setup Part of the Frontend Development skill category. Use when working with react context setup functionality. Trigger with phrases like \"react context setup\", \"react setup\", \"react\". 'Votes: 0GitHub stars: 3
- React Flow ArchitectBuild production-ready ReactFlow applications with hierarchical navigation, performance optimization, and advanced state management.Votes: 0GitHub stars: 3
- React Flow Node Ts Sickn33Create React Flow node components following established patterns with proper TypeScript types and store integration.Votes: 0GitHub stars: 3
- React Flow Node TsCreate 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 node-based UI components.Votes: 0GitHub stars: 3
- React Hook Creator'Create react hook creator operations. Auto-activating skill for Frontend Development. Triggers on: react hook creator, react hook creator Part of the Frontend Development skill category. Use when working with react hook creator functionality. Trigger with phrases like \"react hook creator\", \"react creator\", \"react\". 'Votes: 0GitHub stars: 3
- React Modernization WshobsonUpgrade 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 latest React versions.Votes: 0GitHub stars: 3
- React ModernizationMaster React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.Votes: 0GitHub stars: 3
- React Native Architecture WshobsonBuild production React Native apps with Expo, navigation, native modules, offline sync, and cross-platform patterns. Use when developing mobile apps, implementing native integrations, or architecting React Native projects.Votes: 0GitHub stars: 3
- React Native ArchitectureProduction-ready patterns for React Native development with Expo, including navigation, state management, native modules, and offline-first architecture.Votes: 0GitHub stars: 3
- React Native DesignMaster React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.Votes: 0GitHub stars: 3
- React Native Dev| React Native and Expo development guide covering components, styling, animations, navigation, state management, forms, networking, performance optimization, testing, native capabilities, and engineering (project structure, deployment, SDK upgrades, CI/CD). Use when: building React Native or Expo apps, implementing animations or native UI, managing state, fetching data, writing tests, optimizing performance, deploying to App Store/Play Store, setting up CI/CD, upgrading Expo SDK, or configur...Votes: 0GitHub stars: 3
- React Native PatternsReact Native and Expo app patterns — Expo Router navigation, state separation (server/client/route/form), TanStack Query data fetching with Zod, performant lists, NativeWind/StyleSheet styling, native APIs, and secure storage. Use when building or editing React Native / Expo screens, components, navigation, or data layers.Votes: 0GitHub stars: 3
- React Native SkillsUse when working with react-native-skills tasks or workflowsVotes: 0GitHub stars: 3
- React Nextjs DevelopmentReact and Next.js 14+ application development with App Router, Server Components, TypeScript, Tailwind CSS, and modern frontend patterns.Votes: 0GitHub stars: 3
- React Patterns Affaan MReact 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.Votes: 0GitHub stars: 3
- React Patterns Rohitg00React 19 patterns including Server Components, Actions, Suspense, hooks, and component compositionVotes: 0GitHub stars: 3
- React Patterns Sickn33Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.Votes: 0GitHub stars: 3
- React PatternsReact 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.Votes: 0GitHub stars: 3
- React PerformanceReact and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.Votes: 0GitHub stars: 3
- React State Management WshobsonMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.Votes: 0GitHub stars: 3
- React State ManagementMaster modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.Votes: 0GitHub stars: 3
- React Ui PatternsModern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.Votes: 0GitHub stars: 3
- React UiUse when building any val with a user interface — dashboards, web apps, landing pages, forms, admin tools, anything users see in a browser. Covers JSX/React conventions, Twind/Tailwind styling, React version pinning, the view-source link requirement, and what to avoid (template-string HTML, external assets).Votes: 0GitHub stars: 3
- React18 Dep CompatibilityReact 18.3.1 and React 19 dependency compatibility matrix.Votes: 0GitHub stars: 3
- Reciprocity Offer DesignUse when designing or auditing free samples, lead magnets, trial offers, concessions, referral gifts, favor exchanges, freemium onboarding, consultation offers, or give-first sales strategies where reciprocity, obligation, uninvited gifts, or concession tactics may affect decisions.Votes: 0GitHub stars: 3
- Recognition Pickers And PalettesUse this skill when designing pickers, dropdowns, comboboxes, autocompletes, command palettes, or any UI that lets the user select from a known set. Trigger when picking between a free-text field and a select; when designing a command palette; when reviewing why users keep typing wrong values into autocomplete inputs. Sub-aspect of `recognition-over-recall`; read that first.Votes: 0GitHub stars: 3
- Recognition Recents And SuggestionsUse this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions. Trigger when designing pickers used repeatedly, command palettes, navigation that should adapt to user behavior, or any surface where a returning user shouldn''t have to retype their frequent destinations. Sub-aspect of `recognition-over-recall`; read that first.Votes: 0GitHub stars: 3
- Redesign Existing Projects Sickn33Use when upgrading existing websites or apps by auditing generic UI patterns and applying premium design fixes without rewrites.Votes: 0GitHub stars: 3
- Redesign Existing ProjectsUpgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.Votes: 0GitHub stars: 3
- Redux Slice Generator'Generate redux slice generator operations. Auto-activating skill for Frontend Development. Triggers on: redux slice generator, redux slice generator Part of the Frontend Development skill category. Use when working with redux slice generator functionality. Trigger with phrases like \"redux slice generator\", \"redux generator\", \"redux\". 'Votes: 0GitHub stars: 3
- Refactoring UiAudit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions \"my UI looks off\" (or amateur/unprofessional), \"fix the design\", \"Tailwind styling\", \"color palette\", \"visual hierarchy\", \"design system\", \"spacing scale\", or \"component styling\". Also trigger when building consistent design tokens, creating dark mode themes, improving data-visualization clarity, or polishing UI details before launch. Covers grayscale-first workflow, constrained de...Votes: 0GitHub stars: 3
- RefinedCarefully curated, modern minimal style with elegant serif typography and understated, sophisticated palettes.Votes: 0GitHub stars: 3
- Remember Design SystemUse when an agent is about to build or refactor interface code and needs a compact, repository-specific brief covering existing tokens, components, routes, conventions, and verification commands.Votes: 0GitHub stars: 3
- Remotion Best PracticesBest practices for Remotion - Video creation in ReactVotes: 0GitHub stars: 3
- Responsive Breakpoint Analyzer'Analyze responsive breakpoint analyzer operations. Auto-activating skill for Frontend Development. Triggers on: responsive breakpoint analyzer, responsive breakpoint analyzer Part of the Frontend Development skill category. Use when analyzing or auditing responsive breakpoint analyzer. Trigger with phrases like \"responsive breakpoint analyzer\", \"responsive analyzer\", \"analyze responsive breakpoint r\". 'Votes: 0GitHub stars: 3
- Responsive DesignImplement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.Votes: 0GitHub stars: 3
- Responsive Layout MathDerive, review, and debug responsive web layout math for fluid widths, media query ranges, viewport units, percentages, and CSS clamp() formulas. Use when building responsive layouts, converting fixed designs to fluid CSS, calculating breakpoints, choosing vw/svw/lvw/dvw units, or deciding whether CSS math or JavaScript measurement should own a layout behavior.Votes: 0GitHub stars: 3
- Retro DesignWeb and App implementation guide for Retro Design (60s-80s). Trigger when user wants vintage aesthetics, warm muted colors, and nostalgic layouts.Votes: 0GitHub stars: 3
- Retro FuturismWeb and App implementation guide for Retro Futurism. Trigger when user wants vintage future concepts, 1950s space age aesthetics, or atompunk vibes.Votes: 0GitHub stars: 3
- RetroThrowback design with vintage-inspired typography, high-contrast retro palettes, and nostalgic visual elements.Votes: 0GitHub stars: 3
- Review Animations EmilkowalskiReviews animation and motion code against a high craft bar derived from Emil Kowalski's design engineering philosophy. Default to flagging; approval is earned.Votes: 0GitHub stars: 3