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.

Jump to install Review files

Repository: george11642/george-plugins
Last source activity: March 11, 2026 at 22:42
Detected SKILL.md language: English
Stars: 2
Forks: 0

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with an AI assistant

Copy this prompt into the AI assistant you're using.

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.

A direct command skips the review prompt. Inspect the source before running it.

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

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer

14 files

SKILL.md

Source instructions · Read-only preview

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 ```

View on GitHub

Back to search Back to installation

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

View all from this repository

web-frontend

Source facts

Install options

Install with an AI assistant

Review the source files

More from this repository

Install with an AI assistant

More from this repository