web-frontend

Use for any browser-rendered UI work. Triggers on React components, hooks, state, props, JSX, Next.js pages, App Router, SSR, RSC, server actions, Tailwind CSS classes, responsive layout, dark mode, styling, CSS, accessibility, ARIA, keyboard navigation, focus management, UI design systems, color palettes, typography, component architecture, compound components, frontend performance, LCP, Lighthouse, re-renders, bundle size, Playwright browser tests, Testing Library, Remotion video compositions, captions, animations. Covers design patterns, hover states, forms, modals, navigation, grids, and any .tsx/.jsx file editing.

설치로 이동 파일 검토

저장소: george11642/george-plugins
최근 소스 활동: 2026년 3월 11일 22:42
감지된 SKILL.md 언어: 영어
스타: 2
포크: 0

설치 방법

기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.

AI 어시스턴트로 설치

이 프롬프트를 복사해 사용 중인 AI 어시스턴트에 입력하세요.

Follow https://skillsmp.com/skill-install/prompt.md to install only the Agent Skill at https://github.com/george11642/george-plugins/tree/main/plugins/george-setup/skills/web-frontend.

직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.

npx skills add https://github.com/george11642/george-plugins --skill web-frontend

명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.

로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.

소스 파일 검토

설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.

파일 탐색기

14 개 파일

SKILL.md

소스 지침 · 읽기 전용 미리보기

name: web-frontend
description: Use for any browser-rendered UI work. Triggers on React components, hooks, state, props, JSX, Next.js pages, App Router, SSR, RSC, server actions, Tailwind CSS classes, responsive layout, dark mode, styling, CSS, accessibility, ARIA, keyboard navigation, focus management, UI design systems, color palettes, typography, component architecture, compound components, frontend performance, LCP, Lighthouse, re-renders, bundle size, Playwright browser tests, Testing Library, Remotion video compositions, captions, animations. Covers design patterns, hover states, forms, modals, navigation, grids, and any .tsx/.jsx file editing.

# Web Frontend Layer 2 domain skill for all browser-side UI development. Routes to reference files and Layer 3 atomic skills by task type. ## Task Router | Task Pattern | Reference | Layer 3 Skills | |---|---|---| | React component, hooks, state, props | `references/react-nextjs.md` | — | | Next.js pages, App Router, SSR, RSC | `references/react-nextjs.md` | deploy-vercel | | Styling, Tailwind, CSS, dark mode | `references/tailwind-patterns.md` | — | | Accessibility, ARIA, keyboard nav, focus | `references/accessibility.md` | — | | UI design system, UX guidelines, checklist | `references/ui-design-system.md` | — | | UI style selection, glassmorphism, brutalism, etc. | `references/ui-design-styles.md` | — | | Color palettes by product type | `references/ui-color-palettes.md` | — | | Font pairings, Google Fonts, typography | `references/ui-font-pairings.md` | — | | Chart types, data visualization | `references/ui-chart-types.md` | — | | Landing pages, layout patterns, product-type mapping | `references/ui-layout-patterns.md` | — | | Component architecture, composition, compound components | `references/component-architecture.md` | — | | React/Next.js performance, re-renders, bundles, waterfalls | `references/vercel-patterns.md` | — | | Frontend testing, Testing Library, Playwright, MSW | `references/frontend-testing.md` | testing-quality | | Remotion video, animation, captions, sequencing | `references/remotion.md` | — | ## When to Use Activate for any task involving: - React/Next.js components, pages, or layouts - Tailwind CSS, styling, responsive design - UI/UX design decisions, color palettes, typography - Accessibility audits or improvements - Frontend performance optimization - Component testing with Testing Library or Playwright - Remotion video composition ## Layer 3 Skills (Atomic) These tool-wrapper skills provide external integrations: - **deploy-vercel** — Vercel deployment configuration and management - **testing-quality** — Playwright browser automation, Testing Library, test methodology - **auth-clerk** — Clerk authentication setup and protected routes ## Quick Decision Trees ### Styling Approach ``` Need design system from scratch? → references/ui-design-system.md Existing design, need implementation? → references/tailwind-patterns.md Performance issue with CSS? → references/vercel-patterns.md (rendering section) ``` ### Testing Strategy ``` Unit test a component? → references/frontend-testing.md (Testing Library) E2E browser test? → references/frontend-testing.md (Playwright) Mock API calls? → references/frontend-testing.md (MSW) Visual regression? → testing-quality skill ```

GitHub에서 보기

검색으로 돌아가기 설치로 돌아가기

fpga

Master FPGA skill covering Vivado, SystemVerilog/Verilog/VHDL, RTL design, timing closure, CDC, AXI interfaces, FSMs, pipelines, memory interfaces, HLS, verification, and hardware optimization. Uses Context7 MCP for up-to-date library docs. Use when FPGA, Verilog, VHDL, HDL, RTL, synthesis, or hardware design mentioned.

2026-03-24

analytics-posthog

Use when setting up PostHog analytics, feature flags, experiments, or querying PostHog data. Triggers on PostHog, PostHog event, PostHog feature flag, PostHog experiment, A/B test PostHog, HogQL, PostHog funnel, PostHog dashboard, PostHog LLM cost, posthog.capture, isFeatureEnabled, PostHog MCP, PostHog survey, PostHog error tracking.

2026-03-11

auth-clerk

Use when setting up Clerk authentication, configuring auth middleware, protecting routes, or handling Clerk webhooks. Triggers on Clerk, Clerk auth, ClerkProvider, auth middleware, protected routes, Clerk webhook, Svix, sign-in, sign-up, Clerk token, getToken, Clerk secret key, publishable key, Clerk setup, CAPTCHA signup, Clerk Next.js, Clerk React, Clerk Expo, user.created event, session management, Clerk identity.

2026-03-11

이 저장소의 모든 Skills 보기

web-frontend

소스 정보

설치 방법

AI 어시스턴트로 설치

소스 파일 검토

이 저장소의 다른 Skills

AI 어시스턴트로 설치

이 저장소의 다른 Skills