Frontend

Browse agent skills for React, Vue, Angular, and modern frontend development

Categories, GitHub stars, and source recency help organize and order the catalog. These signals are not an endorsement, quality certification, safety review, or guarantee of fit. Open a skill detail and inspect its source before use.

Export Skill metadata

Sort by

69,169 results

reverse-engineer-anything

Sourcemorluto/rea/.agents/skills/reverse-engineer-anything/SKILL.md

Updated2026-11-02

Reverse engineer native, managed, Electron/JavaScript, packaged, firmware, and browser targets with REA, and build agent environments (AgentEnv bundles) of web applications from a live instance or a capture. Use shipped-artifact or requested runtime evidence to explain features, compare versions, decompile code, or guide a reconstruction. Skip REA for ordinary source-repository architecture analysis.

documentation-lookup

Sourceaffaan-m/ECC/.agents/skills/documentation-lookup/SKILL.md

Updated2026-09-18

Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).

frontend-patterns

Sourceaffaan-m/ECC/.agents/skills/frontend-patterns/SKILL.md

Updated2026-09-18

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

documentation-lookup

Sourceaffaan-m/ECC/.cursor/skills/documentation-lookup/SKILL.md

Updated2026-03-16

Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).

angular-developer

Sourceaffaan-m/ECC/docs/ja-JP/skills/angular-developer/SKILL.md

Updated2026-10-29

Angular コードを生成し、アーキテクチャガイダンスを提供します。プロジェクトの作成、コンポーネント、またはサービスを作成するとき、または反応性（シグナル、linkedSignal、リソース）、フォーム、依存性注入、ルーティング、SSR、アクセシビリティ（ARIA）、アニメーション、スタイリング（コンポーネントスタイル、Tailwind CSS）、テスト、または CLI ツール作成のベストプラクティスについてトリガーされます。

Skill content language: Japanese

crosspost

Sourceaffaan-m/ECC/docs/ja-JP/skills/crosspost/SKILL.md

Updated2026-05-17

X、LinkedIn、Threads、Bluesky間のマルチプラットフォームコンテンツ配布。content-engineパターンを使用してプラットフォームごとにコンテンツを適応します。同一コンテンツをクロスプラットフォームで投稿することはありません。コンテンツをソーシャルプラットフォーム間で配布したい場合に使用します。

Skill content language: Japanese

dart-flutter-patterns

Sourceaffaan-m/ECC/docs/ja-JP/skills/dart-flutter-patterns/SKILL.md

Updated2026-05-17

本番環境対応のDartおよびFlutterパターンは、null安全性、不変状態、非同期構成、ウィジェットアーキテクチャ、人気のある状態管理フレームワーク（BLoC、Riverpod、Provider）、GoRouterナビゲーション、Dioネットワーキング、Freezedコード生成、クリーンアーキテクチャをカバー。

Skill content language: Japanese

frontend-patterns

Sourceaffaan-m/ECC/docs/ja-JP/skills/frontend-patterns/SKILL.md

Updated2026-06-07

React、Next.js、状態管理、パフォーマンス最適化、UIベストプラクティスのためのフロントエンド開発パターン。

Skill content language: Japanese

remotion-video-creation

Sourceaffaan-m/ECC/docs/ja-JP/skills/remotion-video-creation/SKILL.md

Updated2026-10-29

Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。

Skill content language: Japanese

vite-patterns

Sourceaffaan-m/ECC/docs/ja-JP/skills/vite-patterns/SKILL.md

Updated2026-05-17

Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.

Skill content language: Japanese

coding-standards

Sourceaffaan-m/ECC/docs/ko-KR/skills/coding-standards/SKILL.md

Updated2026-03-30

TypeScript, JavaScript, React, Node.js 개발을 위한 범용 코딩 표준, 모범 사례 및 패턴.

Skill content language: Korean

coding-standards

Sourceaffaan-m/ECC/docs/zh-CN/skills/coding-standards/SKILL.md

Updated2026-06-07

适用于TypeScript、JavaScript、React和Node.js开发的通用编码标准、最佳实践和模式。

Skill content language: Chinese

dart-flutter-patterns

Sourceaffaan-m/ECC/docs/zh-CN/skills/dart-flutter-patterns/SKILL.md

Updated2026-05-11

生产就绪的 Dart 和 Flutter 模式，涵盖空安全、不可变状态、异步组合、Widget 架构、流行的状态管理框架（BLoC、Riverpod、Provider）、GoRouter 导航、Dio 网络请求、Freezed 代码生成和整洁架构。

Skill content language: Chinese

frontend-patterns

Sourceaffaan-m/ECC/docs/zh-CN/skills/frontend-patterns/SKILL.md

Updated2026-06-07

React、Next.js、状态管理、性能优化和UI最佳实践的前端开发模式。

Skill content language: Chinese

remotion-video-creation

Sourceaffaan-m/ECC/docs/zh-CN/skills/remotion-video-creation/SKILL.md

Updated2026-10-29

Remotion 最佳实践 - 在 React 中创建视频。29 条领域特定规则，涵盖 3D、动画、音频、字幕、图表、过渡等。

Skill content language: Chinese

coding-standards

Sourceaffaan-m/ECC/docs/zh-TW/skills/coding-standards/SKILL.md

Updated2026-03-30

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

Skill content language: Chinese

frontend-patterns

Sourceaffaan-m/ECC/docs/zh-TW/skills/frontend-patterns/SKILL.md

Updated2026-06-07

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

Skill content language: Chinese

coding-standards

Sourceaffaan-m/ECC/.kiro/skills/coding-standards/SKILL.md

Updated2026-06-07

Universal coding standards, best practices, and patterns for TypeScript, JavaScript, React, and Node.js development.

frontend-patterns

Sourceaffaan-m/ECC/.kiro/skills/frontend-patterns/SKILL.md

Updated2026-06-07

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices.

react-patterns

Sourceaffaan-m/ECC/.kiro/skills/react-patterns/SKILL.md

Updated2026-06-07

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

angular-developer

Sourceaffaan-m/ECC/pi/core/skills/angular-developer/SKILL.md

Updated2026-09-30

Generates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.

frontend-a11y

Sourceaffaan-m/ECC/pi/core/skills/frontend-a11y/SKILL.md

Updated2026-09-30

Accessibility patterns for React and Next.js — semantic HTML, ARIA attributes, form labeling, keyboard navigation, focus management, and screen reader support. Use when building or reviewing forms, modals, dropdowns, tooltips, or tabs, fixing a11y lint or code-review findings, or wiring up keyboard navigation and focus management.

frontend-patterns

Sourceaffaan-m/ECC/pi/core/skills/frontend-patterns/SKILL.md

Updated2026-09-30

Frontend development patterns for React, Next.js, state management, performance optimization, and UI best practices. Use when building or reviewing React or Next.js components, state, or render performance.

motion-advanced

Sourceaffaan-m/ECC/pi/core/skills/motion-advanced/SKILL.md

Updated2026-09-30

Advanced motion patterns for React / Next.js — drag & drop, gestures, text animations, SVG path drawing, custom hooks, imperative sequences (useAnimate), loaders, and the full API decision tree. Requires motion-foundations. Use when building drag and drop, gestures, text or SVG animation, or imperative animation sequences in React or Next.js.

motion-foundations

Sourceaffaan-m/ECC/pi/core/skills/motion-foundations/SKILL.md

Updated2026-09-30

Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or Next.js.

motion-patterns

Sourceaffaan-m/ECC/pi/core/skills/motion-patterns/SKILL.md

Updated2026-09-30

Production-ready animation patterns for React / Next.js — button, modal, toast, stagger, page transitions, exit animations, scroll, and layout — built on motion-foundations tokens and springs. Use when animating a specific UI element in React or Next.js — button, modal, toast, stagger, page transition, or scroll.

react-native-patterns

Sourceaffaan-m/ECC/pi/core/skills/react-native-patterns/SKILL.md

Updated2026-09-30

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

react-patterns

Sourceaffaan-m/ECC/pi/core/skills/react-patterns/SKILL.md

Updated2026-09-30

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

react-performance

Sourceaffaan-m/ECC/pi/core/skills/react-performance/SKILL.md

Updated2026-09-30

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

vite-patterns

Sourceaffaan-m/ECC/pi/core/skills/vite-patterns/SKILL.md

Updated2026-09-30

Vite build tool patterns including config, plugins, HMR, env variables, proxy setup, SSR, library mode, dependency pre-bundling, and build optimization. Activate when working with vite.config.ts, Vite plugins, or Vite-based projects.

documentation-lookup

Sourceaffaan-m/ECC/skills/documentation-lookup/SKILL.md

Updated2026-06-11

Use up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).

remotion-video-creation

Sourceaffaan-m/ECC/skills/remotion-video-creation/SKILL.md

Updated2026-10-20

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more. Use when building video in React with Remotion — animations, audio, captions, charts, or transitions.

taste

Sourceaffaan-m/ECC/skills/taste/SKILL.md

Updated2026-09-27

Creative-direction layer for music videos and short-form edits in the angelcore / cloud-trance / hyperpop family — a named-genre aesthetic vocabulary, mood + color + light system, beat-synced editing grammar, and a pipeline chaining ECC's video skills from b-roll generation to distribution. Use when a video must feel intentional rather than merely functional — music videos, fancams, moodboard-driven reels, or giving AI-generated b-roll a coherent visual direction.

ui-to-vue

Sourceaffaan-m/ECC/skills/ui-to-vue/SKILL.md

Updated2026-06-11

Use when the user has UI screenshots or design exports that need batch conversion into Vue 3 components, especially with Vant, Element Plus, or Ant Design Vue.

tldraw-offline

SourceNousResearch/hermes-agent/optional-skills/creative/tldraw-offline/SKILL.md

Updated2026-08-12

Drive and script tldraw offline canvases with an agent.

gif-search

SourceNousResearch/hermes-agent/optional-skills/media/gif-search/SKILL.md

Updated2026-10-29

Search/download GIFs from Tenor via curl + jq.

extract-errors

Sourcereact/react/.claude/skills/extract-errors/SKILL.md

Updated2026-01-24

Use when adding new error messages to React, or seeing "unknown error code" warnings.

flow

Sourcereact/react/.claude/skills/flow/SKILL.md

Updated2026-01-24

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

test

Sourcereact/react/.claude/skills/test/SKILL.md

Updated2026-01-24

Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.

n8n-agent-design-language

Sourcen8n-io/n8n/.agents/skills/agent-design-language/SKILL.md

Updated2026-09-28

Design or review Agent Builder interfaces. Use for Agent configuration patterns, modal flows, responsive behavior, status treatments, and other Agent-only UI work.

instance-awareness

Sourcen8n-io/n8n/packages/@n8n/instance-ai/skills/instance-awareness/SKILL.md

Updated2026-09-28

Load when the request depends on what is already on this instance rather than on what the user just typed: a short or ambiguous opener ("fix it", "carry on", "what should I look at"), a reference to earlier work in a new conversation, or any question about what has recently run or broken.

web-artifacts-builder

Sourceanthropics/skills/skills/web-artifacts-builder/SKILL.md

Updated2026-04-20

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

bootstrap-component-js

Sourcetwbs/bootstrap/skills/bootstrap-component-js/SKILL.md

Updated2026-07-28

Add JavaScript behavior to a Bootstrap 6 component. Use when writing a component's TypeScript source, extending BaseComponent, wiring the data API, adding events or config options, or integrating Floating UI or a third-party library.

bootstrap-vite

Sourcetwbs/bootstrap/skills/bootstrap-vite/SKILL.md

Updated2026-10-08

Include and bundle Bootstrap 6's CSS and JavaScript in a project using Vite. Use when setting up Bootstrap with Vite, bundling Bootstrap's Sass and JS through Vite, or creating a Vite-based Bootstrap project.

how-to-write-component

Sourcelanggenius/dify/.agents/skills/how-to-write-component/SKILL.md

Updated2026-10-23

Use when implementing or refactoring React/TypeScript components and the task requires decisions about component ownership, feature boundaries, state, data flow, effects, or interaction ownership. Do not use for review-only requests, test-only work, copy-only edits, or styling-only changes.

frontend-query-mutation

Sourcelangflow-ai/langflow/.agents/skills/frontend-query-mutation/SKILL.md

Updated2026-03-19

Guide for implementing Langflow frontend query and mutation patterns with Axios and TanStack React Query v5. Trigger when creating or updating API hooks in controllers/API/queries, consuming UseRequestProcessor in components, deciding whether to use useQuery or useMutation, handling conditional queries, cache invalidation, mutation error handling, or migrating legacy API calls to the query hook pattern.

ui-styling

Sourcenextlevelbuilder/ui-ux-pro-max-skill/.claude/skills/ui-styling/SKILL.md

Updated2026-09-19

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.

ui-styling

Sourcenextlevelbuilder/ui-ux-pro-max-skill/cli/assets/skills/ui-styling/SKILL.md

Updated2026-09-19

Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.