Total 50,675 skills, Frontend Development has 4878 skills
Showing 12 of 4878 skills
Use when the user needs project structure organization — monorepo patterns, feature-based architecture, naming conventions, barrel exports, or configuration placement. Trigger conditions: restructure project directories, set up monorepo, define naming conventions, create barrel exports, organize configuration files, plan migration from flat to feature-based structure, establish import ordering rules.
Store 기반 프로덕션 UI를 생성하는 스킬. Vue 3 + TypeScript + NuxtUI v4. "UI 만들어줘", "화면 생성", "CRUD 화면", "목록 화면" 키워드로 트리거. Store가 존재해야 하며 실제 API와 연동된 프로덕션 코드를 생성한다. Mock 데이터 기반 프로토타입이 필요하면 peach-gen-ui-proto를 사용한다.
디자인 시스템 컨설팅 + Vue 3 컴포넌트 코드 생성 스킬. "디자인 상담", "UI 트렌드", "색상 추천", "디자인 시스템" 키워드로 트리거. 도메인 파악 → 제안 → 피드백 → 코드 생성 순으로 진행.
Use when initializing a new Vite + React (CSR) project or when an existing Vite React project needs missing configuration (ESLint, Prettier, TanStack Query, React Router, Zustand, Tailwind CSS, VSCode, Cursor, Antigravity settings, path aliases).
Conserve memory by reusing existing instances when working with large numbers of similar objects.
Expert guide for writing Effect-TS code, including project setup, core principles, data modeling with Schema, error handling, and the Context.Tag service pattern. Use when writing, refactoring, or analyzing TypeScript code using the Effect library.
Guide for implementing, configuring, and debugging React Joyride v3 guided tours. Use this skill whenever the user mentions joyride, guided tour, onboarding tour, walkthrough, tooltip tour, step-by-step guide, product tour, or wants to highlight UI elements sequentially. Also use when debugging tour issues like tooltips not appearing, targets not found, or controlled mode problems. This skill covers the useJoyride hook, Joyride component, step configuration, events, controls, custom components, and styling.
Deep Angular 21 clean code audit with parallel specialist agents and senior team lead. Scans architecture, signals, stores, AI slop, ViewModel patterns, and more. Guarantees craftsman-level output. Use whenever the user says 'clean code', 'audit Angular', 'review frontend', 'check quality', 'anti-patterns', wants Angular code reviewed, or needs senior-level code standards enforced — even if they don't say 'clean code' explicitly.
Step-by-step guides for upgrading Shopify Hydrogen between versions — breaking changes, code diffs, and migration steps for each release.
Twig coding standards and conventions for Craft CMS 5 templates. Covers variable naming, null handling, whitespace control, include isolation, Craft Twig helpers ({% tag %}, tag(), attr(), |attr, svg()), and collect() usage. Triggers on: any Twig template creation or review, .twig files, {% include %}, {% extends %}, {% tag %}, collect(), props.get(), .implode(), attr(), |attr filter, svg(), ?? operator, whitespace control, template coding standards, Twig best practices, naming conventions for Twig, currentSite, siteUrl, craft.entries, .eagerly(), .collect. Not for Twig architecture patterns (use craft-site) or PHP code (use craft-php-guidelines). Always use when writing, editing, or reviewing any Craft CMS Twig template code.
Create Page Designer pages and components in B2C Commerce. Use when building visual merchandising tools, content slots, or experience API integrations. Covers page types, component types, regions, attribute definitions, component type ID and subfolders, enum and custom/color attribute pitfalls, and troubleshooting when a component does not appear in the editor.
Reference skill for Zoom Probe SDK. Use after routing to a preflight workflow when testing browser compatibility, media permissions, audio or video diagnostics, and network readiness before users join.