2.3K skills · sorted by relevance
Guides development of ChatGPT apps with interactive widgets using mcp-use and OpenAI Apps SDK, covering server tools, React interfaces, and shared state. This skill is deprecated and directs users to mcp-app-builder.
Build videos in React with Remotion using task-specific rules and code examples. The skill covers animation timing, captions, audio, scene transitions, and media assets, helping guide implementation across common video creation tasks.
Turn Figma designs into React and TypeScript components using coderio. The workflow uses design thumbnails to guide layout, extracts component structure and data, and generates code and assets for integration into an application.
Embed Zoom meetings inside a chosen area of a web application. This guide covers initialization, joining, layout customization, meeting controls, and event handling, with React examples and asynchronous APIs that let code wait for operations to finish.
Helps build React and Next.js interfaces with TypeScript and Tailwind CSS. Provides project and component generators, reviews dependencies for code size reductions, and guides measurable improvements to loading performance, accessibility, and frontend code quality.
Prevent and investigate excessive rendering in Lite React screens. It guides data transformations, context use, and store subscriptions, then checks compiler output and measures rendering time before and after changes to verify their effect.
Build videos in React with Remotion using topic-specific guidance and code examples. Covers animation, captions, audio, scene transitions, asset handling, timing, and text layout, with additional references for charts, maps, and 3D content.
Generate PDF documents from JSON definitions with headings, tables, images, and page numbers. Use file, in-memory, or streaming output, and extend document layouts with custom components and externally managed application state.
Build and improve React interfaces with guidance on component structure, hooks, state management, and Server Components. Review unnecessary rendering, extract reusable logic, and implement accessible forms and loading states using established React patterns.
Build micro-frontends with qiankun 3.x, combining separate web apps inside a host app. The skill covers creating host and child apps, converting existing Vite apps, and connecting loading behavior in React or Vue.
Build and debug mobile apps for iOS and Android with React Native and Expo. Implement navigation, adapt screens to each platform, integrate native modules that access platform features, and improve list rendering, keyboard behavior, and memory use.
Build reusable React components that save settings in browser storage and support keyboard selection. The patterns cover settings dialogs and command palettes, with guidance on TypeScript types, storage keys, and managing keyboard focus.
Retrieve concise summaries from Reactome about biological pathways, events, participating molecules, and diagram-related data. Look up specific identifiers, search for relevant entries, or find pathways associated with an entity, and save the full response when needed.
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React components. Triggers: 'react patterns', 'react review', 'react performance', 'optimise components', 'react best practices', 'composition patterns', 'why is it slow', 'reduce re-renders', 'fix waterfall'.
The English summary is being prepared. Showing the original description.
React conventions. Apply automatically whenever writing or editing React code — JSX/TSX files, components, hooks, props, effects, accessibility (WAI-ARIA), file grouping, React 19 APIs, React Compiler, URL state, and the React ecosystem (TanStack Query, Zustand, React Hook Form, nuqs, Next.js, money and crypto inputs). Builds on the typescript skill, which still applies. Use for any new React code or refactor.
The English summary is being prepared. Showing the original description.
Form patterns for React: react-hook-form (most common), Formik (legacy/stable), TanStack Form (newer). Validation via zod / yup / valibot. Controlled vs uncontrolled inputs, field arrays, multi-step wizards. Use this skill to: - Wire react-hook-form with a validation schema. - Pick between controlled and uncontrolled patterns. - Build multi-step forms with state preservation. - Handle async validation (e.g., username availability). - Integrate forms with TanStack Query mutations. Do NOT use this skill for: - General state management (see react-state-management). - Routing (see react-routing). - Component conventions (see react-conventions). - Testing forms (see react-testing).
The English summary is being prepared. Showing the original description.
Expert-level reaction engineering covering reaction kinetics, reactor design, ideal and non-ideal reactors, catalysis, and reactor scale-up.
The English summary is being prepared. Showing the original description.
JavaScript / React / Vue のフロントエンドコードを実装・レビュー・リファクタリングするときに、 現在のコードベースを調査し、適切な設計・パフォーマンス・レンダリングパターンを エージェントが自律的に選んで適用する。ユーザーが hooks-pattern や dynamic-import などの 個別パターンを指定しなくても、必要な reference を選択する。 Trigger: front-end-design-patterns, frontend design patterns, React設計, Vue設計, JavaScript設計, Reactリファクタリング, Vueリファクタリング, フロントエンドパフォーマンス改善, bundle改善, レンダリング戦略, Reactレビュー, Vueレビュー
The English summary is being prepared. Showing the original description.
Add animations to React and Next.js interfaces, including buttons, modals, notifications, page transitions, and scrolling content. Uses shared motion settings and reusable patterns for elements entering, leaving, moving, or changing size.
Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.
Build web pages and interface components with a clear visual direction and working code. Shape typography, colors, layouts, and animation around the intended audience and purpose, with support for HTML/CSS/JS, React, and Vue implementations.
Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.
Review form validation so users, including people using screen readers, can understand and correct errors. Check field descriptions, required states, and grouped choices in rendered HTML, while accounting for React forms that handle submission in the browser.
Find costly DOM operations, the code that reads or changes page elements, and review scrolling handlers or frequent React updates. Reorganize work to reduce repeated layout calculations and verify the changes in the browser.