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.

Zur Installation springen Dateien prüfen

Repository: george11642/george-plugins
Letzte Quellaktivität: 11. März 2026 um 22:42
Erkannte Sprache von SKILL.md: Englisch
Sterne: 2
Forks: 0

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit einem KI-Assistenten installieren

Diesen Prompt kopieren und in den verwendeten KI-Assistenten einfügen.

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.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

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

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

Datei-Explorer

14 Dateien

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

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

Auf GitHub ansehen

Zurück zur Suche Zurück zur 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

Alle aus diesem Repository ansehen

web-frontend

Quellinformationen

Installationsoptionen

Mit einem KI-Assistenten installieren

Quelldateien prüfen

Mehr aus diesem Repository

Mit einem KI-Assistenten installieren

Mehr aus diesem Repository