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.

Ir para a instalação Revisar arquivos

Repositório: george11642/george-plugins
Última atividade na origem: 11 de março de 2026 às 22:42
Idioma detectado do SKILL.md: inglês
Estrelas: 2
Forks: 0

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Instalar com um assistente de IA

Copie este prompt para o assistente de IA que você usa.

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.

Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.

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

O comando permanece em uma só linha. Role horizontalmente para revisá-lo antes de copiar.

Prefere uma cópia local? Baixe os arquivos disponíveis atualmente no SkillsMP.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Explorador de arquivos

14 arquivos

SKILL.md

Instruções da origem · Visualização somente leitura

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

Ver no GitHub

Voltar à pesquisa Voltar à instalação

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

Ver todas deste repositório

web-frontend

Informações da origem

Opções de instalação

Instalar com um assistente de IA

Revise os arquivos de origem

Mais deste repositório

Instalar com um assistente de IA

Mais deste repositório