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.
From george-setupnpx claudepluginhub george11642/george-plugins --plugin george-setupThis skill uses the workspace's default tool permissions.
references/accessibility.mdreferences/component-architecture.mdreferences/frontend-testing.mdreferences/react-nextjs.mdreferences/remotion.mdreferences/tailwind-patterns.mdreferences/ui-chart-types.mdreferences/ui-color-palettes.mdreferences/ui-design-styles.mdreferences/ui-design-system.mdreferences/ui-font-pairings.mdreferences/ui-layout-patterns.mdreferences/vercel-patterns.mdDesigns and optimizes AI agent action spaces, tool definitions, observation formats, error recovery, and context for higher task completion rates.
Enables AI agents to execute x402 payments with per-task budgets, spending controls, and non-custodial wallets via MCP tools. Use when agents pay for APIs, services, or other agents.
Compares coding agents like Claude Code and Aider on custom YAML-defined codebase tasks using git worktrees, measuring pass rate, cost, time, and consistency.
Layer 2 domain skill for all browser-side UI development. Routes to reference files and Layer 3 atomic skills by task type.
| 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 | — |
Activate for any task involving:
These tool-wrapper skills provide external integrations:
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)
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