광고[ For iPhone / iPad ] 🔥 Nugget의 믿을 수 없는 인터랙티브 월페이퍼. 이런 것은 본 적이 없을 것입니다!

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

0

frontend-responsive

Implement mobile-first responsive layouts using fluid containers, media queries, standard breakpoints, relative units (rem/em), and touch-friendly design patterns. Use this skill when creating layouts that adapt across mobile, tablet, and desktop screens. Use when writing media queries or breakpoint-specific styles, implementing fluid grid systems, designing touch targets for mobile devices, or optimizing images and assets for different screen sizes. Use when working with responsive CSS frameworks (Tailwind responsive utilities, Bootstrap grid, CSS Grid, Flexbox), when testing layouts across multiple viewports, or when ensuring readable typography and content priority on smaller screens. Use when implementing mobile navigation patterns or adaptive UI components.

maksimtereshin

development

frontend

0

frontend-style-guide

Enforce Cookmate frontend style. Use for any UI/UX work to keep brand colors/typography, AppShell patterns, and professional interaction states. Covers desktop + mobile.

RedBoardDev

development

frontend

0

nextjs-16-app-router

Enforces correct Next.js 16 App Router usage. Use when building pages, layouts, routing, data fetching, or deciding between Server vs Client Components in Next.js 16 / React 19.

ItsKumailHere

development

frontend

0

ux

UX patterns for states, forms, accessibility, copy, navigation. Use for UI behavior and a11y.

MP281X

development

frontend

0

design

Enforce Lore design system when building UI components. Use when creating React components, pages, forms, or any user interface elements. Ensures brand consistency with terracotta/coral palette, warm approachable aesthetic, and shadcn/ui patterns.

ApeNIG

development

frontend

0

react-19

React 19 core features - use() hook, useOptimistic, useActionState, Actions, Transitions, Server Components. Use when implementing React 19 patterns.

fusengine

development

frontend

0

nextjs-pathname-id-fetch

Focused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server components to fetch data from APIs. Use when building pages that display individual items (product pages, blog posts, user profiles) based on a URL parameter. Complements nextjs-dynamic-routes-params with a simplified, common-case pattern.

MuhammedSuhaib

development

frontend

0

design-tokens

Manage design tokens for consistent theming across platforms. Use when defining colors, typography, spacing, or other design system values.

astoeffer

development

frontend

0

angular-20-control-flow

Angular 20 built-in control flow syntax (@if, @for, @switch, @defer) for modern template programming. Use when writing templates with conditional rendering, loops, switch statements, or lazy loading components. Replaces *ngIf, *ngFor, *ngSwitch with new block syntax for better performance and type safety.

7Spade

development

frontend

0

typescript-utility-types

Use when typeScript utility types, mapped types, and advanced type manipulation. Use when creating flexible, type-safe TypeScript code.

knopki

development

frontend

0

shadcn

How to work effectively with shadcn/ui components, always use when adding UI components

markhamsquareventures

development

frontend

0

frontend-components

Design and build reusable UI components following single responsibility principle, composability patterns, clear prop interfaces with sensible defaults, encapsulation of implementation details, consistent naming conventions, local state management, and minimal prop requirements. Use this skill when creating new UI components, refactoring components for reusability, designing component APIs with props and events, implementing component composition patterns, managing component state, documenting component usage, or working on component libraries and design systems. This skill applies when working on Vue components, React components, web components, or any modular UI code.

FlorianRiquelme

development

frontend

0

ui-design-implementation

Design and implement user interfaces with Tailwind CSS, shadcn/ui components, and modern design patterns. Use when creating new UI screens, improving visual design, building design consistency, or implementing responsive layouts. Specializes in rapid prototyping and production-ready interfaces.

amo-tech-ai

development

frontend

0

pricing-app-design

Tesla Design System - CSS Modules, design tokens, dark mode, component patterns

sernafernando

development

frontend

0

create-component

Creates React components for SideDish. Use when adding new UI components, modals, forms, or interactive elements. Includes TypeScript interfaces, styling patterns, and security considerations.

jhlee0409

development

frontend

0

enterprise-b2b

Use when designing animations for enterprise software, B2B platforms, admin dashboards, or corporate applications

dylantarre

development

frontend

0

styling-guidelines

Tailwind CSS v4 styling guidelines - use @theme blocks for configuration, hsl(var(--color-x)) for colors, never hardcode values, use responsive utilities

JewelsHovan

development

frontend

0

table-columns

Building table columns with proper types, inline editing components, and pre-built cell renderers

griffnb

development

frontend

0

frontend-accessibility

Build accessible user interfaces following WCAG guidelines with semantic HTML, keyboard navigation, screen reader support, and proper color contrast. Use this skill when creating or modifying UI components, implementing form inputs, adding interactive elements, working with navigation menus, creating modals or dialogs, or handling focus management. Apply when working on React component files (*.tsx, *.jsx), Shadcn/ui components, or any frontend code that users interact with. This skill ensures semantic HTML elements (nav, main, button, etc.) that convey meaning to assistive technologies, keyboard navigation with visible focus indicators (focus:ring-2 focus:ring-offset-2 in Tailwind), sufficient color contrast ratios (4.5:1 for normal text), descriptive alt text for images and meaningful labels for form inputs, screen reader testing and verification, ARIA attributes for complex components when semantic HTML isn't sufficient, logical heading structure (h1-h6 in proper order), and proper focus management in dyna

TheophilusChinomona

development

frontend

0

checking-image-bounds-transform

Checks and clamps mouse coordinates within transformed image bounds in WPF. Use when implementing measurement tools or annotations that should only work inside Pan/Zoom/Rotate transformed images.

christian289

development

frontend

0

using-keys

ReactUMG key 使用规范。在渲染列表、map 循环、拖拽预览、动态组件等场景时激活。key 标识组件身份而非位置，禁止使用坐标/索引等频繁变化的值作为 key，避免性能问题和组件重建。

15195999826

development

frontend

0

event-system

Conventions for custom event naming, dispatching, and handling between components. Use when implementing component communication.

pixu1980

development

frontend

0

web-artifacts-builder

Build and prototype RawDrive UI components with bundling support. Use for creating standalone component demos, prototyping new features, or building shareable HTML previews.

veerababumanyam

development

frontend

0

k-ui-refresh

UI refresh pipeline and ViewModel state management. Covers shared UI state (ViewModel), safe refresh execution (guarding), lazy initialization patterns, Reader/List coordination, and avoiding infinite refresh loops. Use when debugging UI refresh issues, race conditions, or cascading updates. Triggers: RefreshUI, ViewModel, UI state, refresh loop, lazy init, UI coordination.

lluistfc

development

Page 101 / 107