skills.homescapability registry खोजें

home/categories/frontend

category focus

Frontend

UI frameworks, state management, and styling.

2566 स्किल्सall categories

sorting

stars

current ordering strategy

query

all entries

refine the visible subset

frontend

157

rsc-data-optimizer

Optimize Next.js App Router data fetching by converting slow client-side fetching to fast server-side fetching using React Server Components (RSC). Use when: - User reports slow initial page load with loading spinners - Page uses useEffect + useState for data fetching - StoreContext/useStore pattern causes waterfall fetching - Need to improve SEO (content not in initial HTML) - Converting "use client" pages to Server Components Triggers: "slow loading", "optimize fetching", "SSR data", "RSC optimization", "remove loading spinner", "server-side fetch", "convert to server component", "data fetch lambat", "loading lama"

Microck

development

frontend

157

manage-scss-variables

Create or update SCSS variables for a Kendo UI component — null declarations in core and concrete overrides in targeted theme packages. Handles SassDoc comments, @forward maps, and theme-specific conventions (Fluent CSS custom properties). Use this skill when the user wants to add, change, or remove a component variable.

telerik

development

frontend

157

motion-polish

Use this skill when the user wants to add animations, make transitions smooth, add micro-interactions, or apply final polish. Also use when the user says 'my app feels static,' 'add some life to this,' 'make it feel smoother,' 'the transitions are janky,' or 'make this feel like Linear/Stripe.' Covers transition patterns, micro-interactions, page transitions, loading animations, scroll interactions, and the restraint principle.

whawkinsiv

development

frontend

157

ui-patterns

Use this skill when the user needs to build a dashboard, settings page, data table, or any page layout. Also use when choosing component libraries, implementing responsive design, dark mode, or handling UI states (loading, empty, error). Covers component selection, page composition, and responsive implementation.

whawkinsiv

development

frontend

155

mirror-development

Implement user impersonation features in Laravel applications using Mirror.

franbarbalopez

development

frontend

155

remotion-video

Create production-grade motion graphics and videos using Remotion (React). Use whenever the user wants branded video content, product demos, data-driven video generation, or motion graphics with audio sync, web fonts, TailwindCSS styling, or media embedding. Covers: marketing videos, product launches, data visualizations, social media content, personalized video at scale, explainer videos with voiceover, animated charts, 3D scenes via Three.js. Requires Node.js and Claude Code environment. Trigger on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "remotion", "video with audio", "TailwindCSS video", "data-driven video generation", "personalized video at scale", "video with voiceover". For mathematical animations, algorithm visualizations, or headless container rendering, use concept-to-video (Manim) instead.

Mathews-Tom

development

frontend

155

yida-custom-page

宜搭自定义页面 JSX 开发规范。React 16 类组件模式，宜搭 JS API 调用，状态管理与编码约束。不适用于：原生表单页面开发（无需 JSX），或发布页面（编写完成后需使用 yida-publish-page 发布）。

openyida

development

frontend

152

react-router-framework-mode

Build full-stack React applications using React Router's framework mode. Use when configuring routes, working with loaders and actions, handling forms, handling navigation, pending/optimistic UI, error boundaries, or working with react-router.config.ts or other react router conventions.

curvenote

development

frontend

152

tanstack-vue-router-skilld

Modern and scalable routing for Vue applications. ALWAYS use when writing code importing "@tanstack/vue-router". Consult for debugging, best practices, or modifying @tanstack/vue-router, tanstack/vue-router, tanstack vue-router, tanstack vue router, router.

harlan-zw

development

frontend

150

signal-forms-migration

Convert Angular Reactive Forms (FormGroup/FormControl/FormArray) or template-driven forms (ngModel/FormsModule) to the new Signal Forms API (form()/FormField). Handles validation, arrays, nested objects, disabled state, and third-party component bindings.

suxrobGM

development

frontend

150

frontend-inferencer

Infers frontend technologies including React, Angular, Vue, jQuery, Bootstrap, etc.

transilienceai

development

frontend

149

uifork

Install and work with uifork, a CLI tool and React component library for managing UI component versions. Use when the user wants to version components, test UI variations, gather stakeholder feedback, or work with uifork commands like init, watch, new, fork, promote.

sambernhardt

development

frontend

148

migrate-formik-to-tanstack

Migrate a React form from Formik to TanStack Form following project conventions. Use this skill when the user wants to migrate a form component from Formik to TanStack Form.

getlago

development

frontend

147

web-artifacts-builder

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.

undsky

development

frontend

145

codingfix-param-use

Fix function call sites to pass positional args by position and assign constants to intermediate variables

causify-ai

development

frontend

145

wednesday-design

Design and UX guidelines for Wednesday Solutions projects. Covers visual design tokens, animation patterns, component standards, accessibility, and user experience best practices for React/Next.js applications. ENFORCES use of approved component libraries only.

wednesday-solutions

development

frontend

143

ct-docs-lookup

This skill should be used when the user asks "how do I configure [library]", "write code using [framework]", "what are the [library] methods", "show me [framework] examples", or mentions libraries like React, Vue, Next.js, Prisma, Supabase, Express, Tailwind, Drizzle, Svelte. Triggers for library setup, configuration, API references, framework code examples, or version-specific docs ("React 19", "Next.js 15").

kryptobaseddev

development

frontend

143

accessibility

Accessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and user preference honoring. Use when implementing screen reader support, keyboard navigation, ARIA patterns, focus traps, accessible component libraries, reduced motion, or cognitive accessibility.

yonatangross

development

frontend

143

animation-motion-design

Animation and motion design patterns using Motion library (formerly Framer Motion) and View Transitions API. Use when implementing component animations, page transitions, micro-interactions, gesture-driven UIs, or ensuring motion accessibility with prefers-reduced-motion.

yonatangross

development

frontend

143

component-search

Search 21st.dev component registry for production-ready React components. Finds components by natural language description, filters by framework and style system, returns ranked results with install instructions. Use when looking for UI components, finding alternatives to existing components, or sourcing design system building blocks.

yonatangross

development

frontend

143

i18n-date-patterns

Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.

yonatangross

development

frontend

143

responsive-patterns

Responsive design with Container Queries, fluid typography, cqi/cqb units, subgrid, intrinsic layouts, foldable devices, and mobile-first patterns for React applications. Use when building responsive layouts or container queries.

yonatangross

development

frontend

143

zustand-patterns

Zustand 5.x state management with slices, middleware, Immer, useShallow, and persistence patterns for React applications. Use when building state management with Zustand.

yonatangross

development

frontend

138

phoenix-thinking

This skill should be used when the user asks to "add a LiveView page", "create a form", "handle real-time updates", "broadcast changes to users", "add a new route", "create an API endpoint", "fix this LiveView bug", "why is mount called twice?", or mentions handle_event, handle_info, handle_params, mount, channels, controllers, components, assigns, sockets, or PubSub. Essential for avoiding duplicate queries in mount.

georgeguimaraes

development

Page 39 / 107