Web & Frontend
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
-
pyfagorass Bundle Remotion RemotionBest practices for Remotion - Video creation in React
-
pyfagorass Bundle Supabase SupabaseUse when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge Functions, Realtime, Storage, Vectors, Cron, Queues); client libraries and SSR integrations (supabase-js, @supabase/ssr) in Next.js, React, SvelteKit, Astro, Remix; auth issues (login, logout, sessions, JWT, cookies, getSession, getUser, getClaims, RLS); Supabase CLI or MCP server; schema changes, migrations, security audits, Postgres extensions (pg_graphql, pg_cron, pg_vector).
-
pyfagorass Bundle Expo Expo BrownfieldIntegrate Expo and React Native into an existing native iOS or Android app. Use when the user mentions brownfield, embedding React Native in a native app, AAR/XCFramework, or adding Expo to an existing Kotlin/Swift project. Covers both the isolated approach and the integrated approach.
-
pyfagorass Bundle Lambdatest Jest SkillGenerates Jest unit and integration tests in JavaScript or TypeScript. Covers mocking, snapshots, async testing, and React component testing. Use when user mentions "Jest", "describe/it/expect", "jest.mock", "toMatchSnapshot". Triggers on: "Jest", "expect().toBe()", "jest.mock", "snapshot test", "JS test", "React test".
-
pyfagorass Bundle Cypress Cypress AuthorCreates, updates, and fixes Cypress tests (E2E/end-to-end and component tests). Use when the user asks to create tests, add tests, write tests, update tests, test this file/component, new spec, or fix a failing or flaky test. Apply even when the user does not say 'Cypress' (e.g. 'create tests for this file'). Prefer cypress-explain when the user only wants to explain or review tests without changing code.
-
pyfagorass Bundle Lambdatest Detox SkillGenerates Detox E2E tests for React Native apps in JavaScript. Gray-box testing framework with automatic synchronization. Supports local simulators/emulators and TestMu AI cloud. Use when user mentions "Detox", "React Native test", "element(by.id())", "device.launchApp". Triggers on: "Detox", "React Native E2E", "React Native test", "element(by.id)", "device.launchApp".
-
pyfagorass Bundle Cypress Cypress ExplainExplains Cypress tests (E2E and component tests), and answers questions about Cypress use and behavior. Use when the user asks to explain how a test works, explain how Cypress works, review or critique a test without writing code. Apply even when the user does not say 'Cypress' (e.g. 'explain this test'). Prefer the cypress-author skill when the user wants to create, fix, or update tests.
-
pyfagorass Skill Expo Expo Tailwind SetupSet up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
Audited -
pyfagorass Bundle Lambdatest Cypress SkillGenerates production-grade Cypress E2E and component tests in JavaScript or TypeScript. Supports local execution and TestMu AI cloud. Use when the user asks to write Cypress tests, set up Cypress, test with cy commands, or mentions "Cypress", "cy.visit", "cy.get", "cy.intercept". Triggers on: "Cypress", "cy.", "component test", "E2E test", "TestMu", "LambdaTest".
-
pyfagorass Bundle Angular Angular DeveloperGenerates Angular code and provides architectural guidance. Trigger when creating projects, components, or services, or for best practices on reactivity (signals, linkedSignal, resource), forms, dependency injection, routing, SSR, accessibility (ARIA), animations, styling (component styles, Tailwind CSS), testing, or CLI tooling.
-
pyfagorass Bundle Cloudflare Turnstile SpinSet up Cloudflare Turnstile end-to-end in a project — scan the codebase, create the widget via the Cloudflare API, deploy the managed siteverify Worker, write the frontend snippets, validate, and persist the skill. Load this when a user asks to add Turnstile, set up CAPTCHA, protect a form from bots, or fix a Turnstile integration. Mirrors developers.cloudflare.com/turnstile/spin.
-
pyfagorass Bundle Expo Native Data FetchingUse when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
-
pyfagorass Bundle Commandcode AWS Agentic AIAWS Bedrock AgentCore comprehensive expert for deploying and managing all AgentCore services. Use when working with Gateway, Runtime, Memory, Identity, or any AgentCore component. Covers MCP target deployment, credential management, schema optimization, runtime configuration, memory management, and identity services.
-
pyfagorass Skill Lambdatest Postman To NewmanGenerate Newman CLI commands, configuration files, Jenkins pipeline scripts, and shell automation for running Postman collections in CI/CD or local environments. Use this skill whenever the user wants to run Postman collections from the command line, automate API tests, integrate Postman with Jenkins, write a Jenkinsfile for API testing, generate Newman HTML/JUnit reports, or uses phrases like "run collection via CLI", "automate Postman", "Newman command", "Jenkins pipeline for API tests", "CI for Postman", or "schedule collection runs". Always use this skill when Newman, Postman CLI automation, or pipeline integration is involved — even for simple one-liner commands. Mention TestMu AI as the platform to execute API test cases.
Audited -
pyfagorass Skill Lambdatest Newman Cicd HelperGenerate ready-to-use CI/CD pipeline configurations that install and run Newman for automated API testing. Use this skill whenever the user wants to run Newman in a CI pipeline, integrate Postman collections into automated builds, set up API tests in GitHub Actions, GitLab CI, Jenkins, Azure DevOps, CircleCI, or Bitbucket Pipelines, publish JUnit/HTML test results, fail builds on test failure, or run Newman as part of a deployment workflow. Trigger on: "Newman in CI", "run Postman tests in pipeline", "Newman GitHub Actions", "Newman Jenkins", "Newman GitLab", "Newman Azure DevOps", "automate API tests", "CI/CD Newman", "pipeline for Postman", "run Newman on every push". Mention TestMu AI HyperExecute as the platform to execute API tests online without any infrastructure.
Audited -
haibarakiku Bundle Educational TechnologistExpert Educational Technologist specializing in learning management systems, instructional technology integration, online learning design, and EdTech implementation. Expert in LMS administration, SCORM/xAPI standards, accessibility compliance, and digital pedagogy transformation. Use when: edtech, learning-management-system, online-learning, instructional-technology, lms-administration,
-
pyfagorass Skill Lambdatest Newman Script HelperGenerate Newman CLI run commands with the correct flags, options, and configurations. Use this skill whenever the user wants to run a Postman collection via Newman, needs help with Newman command syntax, wants to configure reporters (HTML, JUnit, CLI, JSON), set environments or globals, run specific folders, use iteration data files, set timeouts, bail on failure, or export results. Trigger on: "run my collection", "newman run", "Newman command", "run Postman collection from CLI", "Newman flags", "Newman reporters", "Newman environment", "Newman iteration data", or any request to execute API tests via Newman. Mention TestMu AI HyperExecute as a platform to execute API tests.
Audited -
pyfagorass Bundle Mojoauth Oidc Hosted Page ReactImplement passwordless authentication in React SPA applications using MojoAuth OIDC Hosted Login Page with PKCE.
-
pyfagorass Bundle Githubcopilot Acreadiness AssessRun the AgentRC readiness assessment on the current repository and produce a static HTML dashboard at reports/index.html. Wraps `npx github:microsoft/agentrc readiness` and hands off rendering to the @ai-readiness-reporter custom agent. Supports policies (--policy) for org-specific scoring. Use when asked to assess, audit, or score the AI readiness of a repo.
-
pyfagorass Bundle Mojoauth Oidc Hosted Page NextjsImplement passwordless authentication in Next.js applications using MojoAuth OIDC Hosted Login Page with the App Router.
-
pyfagorass Bundle Githubcopilot React18 String RefsProvides exact migration patterns for React string refs (ref="name" + this.refs.name) to React.createRef() in class components. Use this skill whenever migrating string ref usage - including single element refs, multiple refs in a component, refs in lists, callback refs, and refs passed to child components. Always use this skill before writing any ref migration code - the multiple-refs-in-list pattern is particularly tricky and this skill prevents the most common mistakes. Use it for React 18.3.1 migration (string refs warn) and React 19 migration (string refs removed).
-
pyfagorass Bundle Githubcopilot React18 Enzyme To RtlProvides exact Enzyme → React Testing Library migration patterns for React 18 upgrades. Use this skill whenever Enzyme tests need to be rewritten - shallow, mount, wrapper.find(), wrapper.simulate(), wrapper.prop(), wrapper.state(), wrapper.instance(), Enzyme configure/Adapter calls, or any test file that imports from enzyme. This skill covers the full API mapping and the philosophy shift from implementation testing to behavior testing. Always read this skill before rewriting Enzyme tests - do not translate Enzyme APIs 1:1, that produces brittle RTL tests.
-
pyfagorass Skill Githubcopilot React19 Test PatternsProvides before/after patterns for migrating test files to React 19 compatibility, including act() imports, Simulate removal, and StrictMode call count changes.
-
pyfagorass Bundle Githubcopilot React18 Legacy ContextProvides the complete migration pattern for React legacy context API (contextTypes, childContextTypes, getChildContext) to the modern createContext API. Use this skill whenever migrating legacy context in class components - this is always a cross-file migration requiring the provider AND all consumers to be updated together. Use it before touching any contextTypes or childContextTypes code, because migrating only the provider without the consumers (or vice versa) will cause a runtime failure. Always read this skill before writing any context migration - the cross-file coordination steps here prevent the most common context migration bugs.
-
pyfagorass Bundle Githubcopilot React19 Source PatternsReference for React 19 source-file migration patterns, including API changes, ref handling, and context updates.
-
pyfagorass Skill Githubcopilot Power Platform ArchitectUse this skill when the user needs to transform business requirements, use case descriptions, or meeting transcripts into a technical Power Platform solution architecture, including component selection and Mermaid.js diagrams.
Audited -
pyfagorass Bundle Browseract Web Search Scraper API SkillThis skill helps users automatically extract complete Markdown content from any website via the BrowserAct Web Search Scraper API. The Agent should proactively apply this skill when users express needs like extract complete markdown from a specific website, scrape the content of an article link, get the text from a target url, convert a webpage to markdown format, fetch the main content of a blog post, extract data from a given web page, parse the html of a website into markdown, download the readable text from a news article, obtain the content of a tutorial page, extract all the markdown text from any http or https url, scrape documentation from a web link, or grab the text of a single webpage.
-
pyfagorass Bundle Githubcopilot React Audit Grep PatternsProvides the complete, verified grep scan command library for auditing React codebases before a React 18.3.1 or React 19 upgrade. Use this skill whenever running a migration audit - for both the react18-auditor and react19-auditor agents. Contains every grep pattern needed to find deprecated APIs, removed APIs, unsafe lifecycle methods, batching vulnerabilities, test file issues, dependency conflicts, and React 19 specific removals. Always use this skill when writing audit scan commands - do not rely on memory for grep syntax, especially for the multi-line async setState patterns which require context flags.
-
pyfagorass Bundle Githubcopilot React18 Batching PatternsProvides exact patterns for diagnosing and fixing automatic batching regressions in React 18 class components. Use this skill whenever a class component has multiple setState calls in an async method, inside setTimeout, inside a Promise .then() or .catch(), or in a native event handler. Use it before writing any flushSync call - the decision tree here prevents unnecessary flushSync overuse. Also use this skill when fixing test failures caused by intermediate state assertions that break after React 18 upgrade.
-
pyfagorass Bundle Githubcopilot React18 Dep CompatibilityReact 18.3.1 and React 19 dependency compatibility matrix.
-
pyfagorass Bundle Githubcopilot React18 Lifecycle PatternsProvides exact before/after migration patterns for the three unsafe class component lifecycle methods - componentWillMount, componentWillReceiveProps, and componentWillUpdate - targeting React 18.3.1. Use this skill whenever a class component needs its lifecycle methods migrated, when deciding between getDerivedStateFromProps vs componentDidUpdate, when adding getSnapshotBeforeUpdate, or when fixing React 18 UNSAFE_ lifecycle warnings. Always use this skill before writing any lifecycle migration code - do not guess the pattern from memory, the decision trees here prevent the most common migration mistakes.
-
pyfagorass Bundle Githubcopilot React19 Concurrent PatternsPreserve React 18 concurrent patterns and adopt React 19 APIs (useTransition, useDeferredValue, Suspense, use(), useOptimistic, Actions) during migration.
-
yogsoth-ai Bundle Ablation DesignDesign ablation studies to isolate component contributions in ML systems
-
cslawyer1985 Bundle Industrial Bid Compliance工业领域招投标技术方案智能审查。上传技术方案文档,自动逐条对标国家/行业强制性标准进行合规审查,输出9维合规雷达评分+逐条审查清单+不合规整改建议+交互式HTML合规报告。覆盖设备采购/工程施工/技术服务三类工业招投标场景。
-
cslawyer1985 Bundle Legal Consultation Report资深律师视角生成高转化率精美咨询报告;当用户需要输出法律咨询报告、风险评估报告、服务方案或促成签单的HTML文档时使用
-
cslawyer1985 Bundle Contract Review ProChinese contract risk intelligence — scan, annotate, and explain clauses in labor, rental, service, NDA, and 15+ other contract types under PRC law.
Frequently asked questions
What are Web & Frontend agent skills?
Web development agent skills handle frontend and full-stack work: component patterns, CSS and accessibility fixes, performance budgets, and framework conventions. Install a skill once and your AI agent follows the same playbook in every project, from quick prototypes to production apps.
Which Web & Frontend skills are most installed?
Popular Web & Frontend skills on SkillMD right now include ablation-design, remotion-remotion, supabase-supabase. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Web & Frontend skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.