frontend
353
vueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
vueuse
development
sorting
stars
current ordering strategy
query
all entries
refine the visible subset
frontend
349
702-technologies-wiremock
Use when you need framework-agnostic WireMock guidance — stub design, JSON or programmatic mappings, precise request matching, response bodies and faults, classpath fixtures, isolation and reset between tests, verification of calls, dynamic ports and base URLs, and avoiding flaky stubs — without choosing Spring Boot, Quarkus, or Micronaut. Part of the skills-for-java project
jabrena
development
frontend
343
frontend-design
创建独特的、生产级别的高质量前端界面。当用户要求构建网页组件、页面、作品、海报或应用程序时使用此技能（例如网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任何网页 UI 进行样式美化）。生成富有创意、精致的代码和 UI 设计，避免千篇一律的 AI 审美。
LeastBit
development
frontend
337
review-react-best-practices
Review or refactor React / Next.js code for performance and reliability using a prioritized rule library (waterfalls, bundle size, server/client data fetching, re-renders, rendering). Use when writing React components, Next.js pages (App Router), optimizing bundle size, improving performance, or doing a React/Next.js performance review.
Heyvhuang
development
frontend
335
aidd-autodux
Create and transpile Autodux Redux state management dux objects. Use when building Redux state management, defining reducers, action creators, or selectors.
paralleldrive
development
frontend
335
aidd-react
Enforces React component authoring best practices. Use when creating React components, binding components, presentations, useObservableValues, or when the user asks about React UI patterns, reactive binding, or action callbacks.
paralleldrive
development
frontend
333
designing-layouts
Designs layout systems and responsive interfaces including grid systems, flexbox patterns, sidebar layouts, and responsive breakpoints. Use when structuring app layouts, building responsive designs, or creating complex page structures.
ancoleman
development
frontend
333
implementing-drag-drop
Implements drag-and-drop and sortable interfaces with React/TypeScript including kanban boards, sortable lists, file uploads, and reorderable grids. Use when building interactive UIs requiring direct manipulation, spatial organization, or touch-friendly reordering.
ancoleman
development
frontend
333
implementing-navigation
Implements navigation patterns and routing for both frontend (React/TS) and backend (Python) including menus, tabs, breadcrumbs, client-side routing, and server-side route configuration. Use when building navigation systems or setting up routing.
ancoleman
development
frontend
333
implementing-search-filter
Implements search and filter interfaces for both frontend (React/TypeScript) and backend (Python) with debouncing, query management, and database integration. Use when adding search functionality, building filter UIs, implementing faceted search, or optimizing search performance.
ancoleman
development
frontend
333
theming-components
Provides design token system and theming framework for consistent, customizable UI styling across all components. Covers complete token taxonomy (color, typography, spacing, shadows, borders, motion, z-index), theme switching (CSS custom properties, theme providers), RTL/i18n support (CSS logical properties), and accessibility (WCAG contrast, high contrast themes, reduced motion). This is the foundational styling layer referenced by ALL component skills. Use when theming components, implementing light/dark mode, creating brand styles, customizing visual design, ensuring design consistency, or supporting RTL languages.
ancoleman
development
frontend
331
e-tax
This skill should be used when the user wants to file their tax return electronically via the 確定申告書等作成コーナー (NTA Tax Return Preparation Corner) using Claude in Chrome, Antigravity Browser Sub-Agent, or Playwright CLI (fallback). It guides the browser-based input of calculated tax data. Trigger phrases include: "e-Tax提出", "電子申告", "e-Taxで申告", "作成コーナーに入力", "確定申告書等作成コーナー", "作成コーナー", "申告書を提出".
kazukinagata
development
frontend
328
react-animation
ReactBits animations for Remotion - curated for aesthetic excellence in video production
notedit
development
frontend
323
add-template
Add new UI style template to the ui-style-react project. This skill should be used when users want to add a new style template with HTML/CSS code, create a new preview page, or register a template in the system. Triggers include "add template", "create new style", "add new template", or when users provide HTML code for a new UI style.
TonnyWong1052
development
frontend
323
filter-sortby-floating-bar
Build pages with 搜索/筛选/排序 的“floating bar”（姐狗味）交互：筛选按钮 + fake input + sortBy，放在 floatingActionButton 且使用 FloatingActionButtonLocation.centerDocked。参考 SearchMediaResultPage 的结构与视觉实现。
singleton-altman
development
frontend
323
plugin-adapter-generation
Generates MoviePilot mobile plugin form adapters (vue mode). Use when adding a new plugin adapter, creating a controller for a plugin (e.g. P115StrmHelper, ProxmoxVEBackup), or when the user asks to generate or scaffold plugin adapter code.
singleton-altman
development
frontend
323
settings-form-page
Implements settings-style form pages using SettingsFormManager, SettingsFieldConfig, and SettingsFormRowBuilder. Use when adding or refactoring a page backed by env key/value fields, system settings forms, directory-like single-object editors, or when the user asks to use the project’s shared form logic for a form UI.
singleton-altman
development
frontend
323
dynamic-form-page
Guides how to adapt `lib/modules/dynamic_form` so plugin dashboards or configuration forms render correctly. Use when a request involves `/plugin/dynamic-form`, `DynamicFormPage`, new block types, converter tweaks, or controller bindings for a plugin.
singleton-altman
development
frontend
322
state-machine
Document UI component states (current vs expected) with transitions
WellApp-ai
development
frontend
322
design-context
Refresh UI/UX context from design system, Storybook, and codebase
WellApp-ai
development
frontend
322
remotion-render
Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video
inference-sh
development
frontend
322
widgets-ui
Declarative UI widgets from JSON for React/Next.js from ui.inference.sh. Render rich interactive UIs from structured agent responses. Capabilities: forms, buttons, cards, layouts, inputs, selects, checkboxes. Use for: agent-generated UIs, dynamic forms, data display, interactive cards. Triggers: widgets, declarative ui, json ui, widget renderer, agent widgets, dynamic ui, form widgets, card widgets, shadcn widgets, structured output ui
inference-sh
development
