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 助手安装

复制这段 Prompt，发给你正在使用的 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