Run any Skill in Manus with one click

web-frontend

Stars2

Forks0

UpdatedMarch 11, 2026 at 22:42

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.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

george11642

george11642/george-plugins

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

14 files

SKILL.md

readonly

More from this repository

same repository

fpga

george11642/george-plugins

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

analytics-posthog

george11642/george-plugins

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

auth-clerk

george11642/george-plugins

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

backend-data

george11642/george-plugins

Use for any server-side API or data persistence work. Triggers on REST endpoints, GraphQL resolvers, DataLoader, Node.js, Express, Fastify, API design, pagination, filtering, sorting, databases, SQL, PostgreSQL, indexes, EXPLAIN ANALYZE, query optimization, Prisma, Drizzle, TypeORM, SQLAlchemy, ORM, N+1 queries, migrations, Alembic, schema design, data modeling, normalization, JWT, OAuth, authentication, authorization, rate limiting, Redis, caching, message queues, BullMQ, Kafka, RabbitMQ, webhooks, idempotency, signatures, microservices, multi-tenant, row-level security.

2026-03-112

browser-agent

george11642/george-plugins

Use when automating Chrome browser interactions, taking screenshots, filling forms, or verifying UI visually. Triggers on browser automation, take screenshot, screenshot page, fill form, click button, navigate to URL, Chrome DevTools, use_browser, visual verification, desktop and mobile screenshot, OAuth flow in browser, email verification flow, extract page content, DOM inspection, multi-tab browsing, form submit, CSS selector, headless Chrome, browser profile, login flow, signup flow.

2026-03-112

cloud-infra

george11642/george-plugins

Use when working with Docker, Kubernetes, Terraform, CI/CD, cloud providers (AWS/GCP/Azure), serverless, observability, bash/shell scripts (getopts, strict mode, traps), systemd, or infrastructure tooling. Also covers Helm, GitHub Actions, GitLab CI, Lambda, Cloud Run, ECS, EKS, GKE, nginx, DNS, SSL, Prometheus, Grafana, OpenTelemetry, FinOps, GitOps, ArgoCD, service mesh, Istio, BATS testing, ShellCheck, cron, awk, sed, curl, parallel execution, signal handling, process management.

2026-03-112

name

web-frontend

description

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