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.
-
rajivmanivannan Bundle Rn New Arch MigrationUse this skill for any React Native New Architecture task — always, without exception. Triggers: "new architecture", "new arch", "TurboModules", "Fabric renderer", "JSI migration", "migrate native modules", "RCTBridgeModule", "enable newArchEnabled", "bridge migration", "is my RN app ready", "check native module compatibility", "React Native migration plan", "audit my RN project", "NativeModules to TurboModules", "ReactContextBaseJavaModule", "react native bridge to JSI", "ViewManager to Fabric", "scan for new arch issues". Also trigger on partial requests like "check just my iOS modules", "is react-native-X compatible with new arch", or "what do I need to fix before enabling new arch". What it does: scans the full project (dependencies, JS/TS source, iOS native, Android native), classifies findings into true blockers vs interop-compatible (works under interop layer), separates effort into "enable New Arch" vs "full modernization", and writes a date-stamped MIGRATION_AUDIT_YYYYMMDD.md with a prioritized actio
-
rheinmir Bundle ArchifyCreate polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, optional trace motion, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements or pasted Mermaid flowchart, sequenceDiagram, and stateDiagram input; inspect repository evidence when the diagram must reflect real code. Use when the user asks to visualize system architecture, infrastructure, cloud/security/network topology, technical workflows, API call sequences, request lifecycles, data pipelines, ETL/ELT, data lineage, state machines, or to convert/beautify Mermaid.
-
remorses Bundle TermcastBuild TUIs with a Raycast-like React API using termcast. Implements @raycast/api components (List, Detail, Form, Action) rendered to the terminal via opentui.
-
raymondhou0917 Bundle AI Level Check「AI 幾級了」:讀本機真實的 AI 對話紀錄,產出一份有證據、可追溯的 AI 使用能力報告。 掃 Claude Code、Codex、Antigravity 等 agent 留在硬碟上的紀錄,看這個人怎麼下指令、呼叫了什麼工具、 怎麼修正、做出什麼成果, 定出 LV0–LV5 使用等級、工作系統與組織強度、AI 對事業背景的掌握、應用成熟度、 四項系統驗證狀態與一個 AI 使用人物志分型,最後輸出單檔 HTML 報告書。 觸發時機:用戶說「幫我做 AI 能力檢核」「分析我怎麼用 AI」「跑這個月的 AI 使用報告」 「我是哪一型的 AI 使用者」「幫團隊做雙週 AI 使用盤點」。 不要觸發:純粹要教學怎麼寫 prompt、要優化單一份 prompt、要做績效考核決定、 要比較兩個人誰比較強(本 skill 明文禁止排名與百分位)。
-
rhnfzl Bundle Slide SageCreate or enhance a data-rich, single-file HTML slide deck or pitch deck. Use when the user asks for a new presentation, to convert a PowerPoint (.pptx) or PDF into an HTML deck, or to improve an existing HTML presentation. Not for native PowerPoint editing or high-fidelity PPTX export.
-
rileyvibecodes Bundle Meta Pixel CapiFail-closed Meta Pixel + Conversions API orchestration for Next.js, React, Shopify, WordPress, GoHighLevel, ClickFunnels, Webflow, and static HTML with strict source and security validation.
-
richardcarls Bundle Solid JS Best PracticesSolid.js best practices for AI-assisted code generation, code review, refactoring, and debugging reactivity issues. Use when working in any SolidJS project or codebase — writing components, auditing code, migrating from React, fixing signals and fine-grained reactivity bugs, or integrating web component libraries. 67 rules across 9 categories (reactivity, components, control flow, state management, refs/DOM, performance, accessibility, testing, web component integration) ranked by priority.
-
rimagination Bundle H3liteUse when configuring, repairing, planning, or running MiniMax H3 locally on a Windows NVIDIA computer, especially when installation compatibility, component sets, resolution, generation-time budget, path, low-VRAM risk, or H3 prompt mode must be chosen from hardware and user requirements.
148 -
rounak Bundle PhoneagentControl a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge. Use when users ask to automate mobile UI actions, inspect accessibility trees, toggle Settings switches, navigate apps, or capture screenshots by sending RPC methods like get_tree, get_screen_image, get_context, tap_element, enter_text, scroll, swipe, and open_app.
-
round Skill AnewEncode self-contained HTML pages into anew.page URLs, and read the HTML back out of one. Use when a user wants to publish a one-page site or a redirect, or to edit a page they already have a URL for.
-
rowankid Bundle Architectural Diagram PromptsUse when turning an article, system description, product idea, codebase, repository, architecture notes, workflow, or technical explanation into a prompt for generating a Chinese reference architecture diagram, layered system map, component diagram, agent architecture, or technical infographic.
-
rish2jain Bundle Presentation SkillUse this skill whenever the user wants to create, generate, build, or export a presentation, slide deck, pitch deck, PowerPoint file, or .pptx file. Also trigger for consulting decks, strategy decks, client decks, steering-committee or board decks, exec readouts, and consulting visuals (waterfall/bridge charts, 2x2 matrix, harvey balls, mekko, gantt roadmaps). Also trigger when the user says "make slides", "build a deck", "create a presentation", "generate a PowerPoint", or uploads images and asks to use them in slides, or provides a .pptx template to match. Do NOT trigger for: HTML slide decks only (handled by slides skill), simple one-off diagram generation, or image editing without a slide output.
-
risingwavelabs Skill WaveletSet up and configure Wavelet projects. Use when the user wants to add events, queries, or subscriptions to a wavelet.config.ts, integrate the Wavelet SDK or React hooks, or set up MCP for agent integration.
81 -
rit3zh Bundle Using ReacticxUse when adding Reacticx components to a React Native or Expo project, when asked about "reacticx" or "reactctx" components, when wiring up the Reacticx CLI or its MCP server, or when integrating animated UI primitives from the Reacticx registry.
-
royashbrook Bundle TrustmebroInsert verified links into a markdown or html post so a reader can READ and VERIFY it (hand them the source to check a claim, don't ask them to take your word; not a proof of truth). Three kinds: EXPLAIN a term a non-specialist would not know, SUBSTANTIATE a claim about an external thing, or (rarely) SHOW code via a sha-pinned permalink. Every link must resolve AND actually mean the thing in context (a live-but-wrong link is the worst output). NOT a fact-check of the document. Triggers: "cite this post", "add citations", "explain the jargon", "back up the claims", "make this post easier to follow". Sweeps jargon aggressively for a technical-generalist reader, auto-inserts verified links, then lists what it linked and invites you to add / remove / go more aggressive in one pass. Review the diff.
-
rithprohos Bundle Telegram Mini App SkillComprehensive guide for developing Telegram Mini Apps with any web framework (React, Vue, Svelte, vanilla JS, etc.). Covers the Telegram Web App SDK, theming, UI components, navigation, data validation, and platform best practices.
-
rpamis Skill Rpamis SecurityMyBatis-based enterprise data security component for data masking and encryption/decryption. Invoke when implementing data masking, database encryption, SM4 encryption, or working with @Masked/@SecurityField annotations.
-
rstackjs Skill React Router Upstream TestsAudit upstream React Router framework test changes and manually select tests to adapt into this repository without overwriting the checked-in Rsbuild corpus.
-
rodrigonask Bundle Clone WebsiteReverse-engineer and clone one or more websites in one shot. Extracts assets, CSS, content and behaviors section by section using Playwriter (the user's own Chrome browser) and dispatches parallel builder agents as it goes. Use whenever the user wants to clone, replicate, rebuild, reverse-engineer or copy any website. Also triggers on "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments. Windows / PowerShell environment.
-
roeea2 Bundle Scroll Film StudioBuild a genuinely beautiful animated scroll-film website - the whole page is one continuous cinematic shot that plays as the visitor scrolls. Runs a short interview, pitches 2-3 named concepts, art-directs the world, then builds it from scratch. Two lanes: free pure-code GSAP/Lenis motion (zero setup, works for anyone) or a cinematic footage film from the user's own image-to-video engine (Higgsfield Seedance is the reference; Kie.ai, fal, Replicate or any start-image-capable model works). Trigger on "scroll-film", "cinematic scroll site", "scrollytelling website", "build me an animated/scroll website", "film-scroll site", "one continuous shot website", or any request for a premium scroll-scrubbed animated site. NOT for slide decks / HTML explainers or static brochure sites.
-
rstudio Bundle Shiny For RBuilding, styling, testing, debugging, or observing a Shiny for R app - library(shiny), shinyApp(), runApp(). Index skill: read this, then open the linked reference for the task. Covers reactivity (reactive/observe/req/isolate/bindEvent); modules; async promises and ExtendedTask; bslib layouts, navigation, cards, value boxes, and theming (incl. thematic and brand.yml); dynamic UI; plots with click/brush interaction; tables, file upload/download; notifications, modals, progress, validation; bookmarking; custom JS components; testServer testing; debugging; OpenTelemetry; and when to reach for DT, plotly, leaflet, shinychat, or shinytest2. Use when writing or changing any Shiny for R app, especially a dashboard, or when tempted to hand-roll what the framework provides - custom HTML tables, fake tabs, polling loops, blocking reactive work, or print-debugging server state.
-
rsuite Bundle RsuiteBuild web interfaces with React Suite — a suite of React components, sensible UI design, and a friendly development experience.
-
roeibh Bundle Create Marp DeckCreate, edit, and iterate on presentation slide decks using Marp (Markdown Presentation Ecosystem). Use this skill whenever the user wants to create a presentation, slide deck, or talk using Marp or Markdown-based slides. Also triggers for: editing or restyling existing Marp decks, converting notes/docs into slide format, adding/removing/reordering slides in a .md presentation, exporting presentations to HTML/PDF/PPTX, or any mention of 'marp', 'slide deck', 'presentation markdown', or 'deck from markdown'. If the user has an existing Marp .md file and wants changes, use this skill - don't start from scratch.
-
rohunvora Skill Frontend DesignCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, applications, or redesign existing UIs. Generates creative, polished code that avoids generic AI aesthetics. Triggers on frontend design, UI design, redesign, build component, create page, web interface, React UI.
-
ruiwarn Bundle Daily Topic SelectorDaily topic fetcher that collects articles from multiple sources (RSS, API, HTML), scores and ranks them by relevance, and generates enhanced Chinese reports.
-
robonuggets Bundle HTML ItProduce HTML output instead of markdown for any agent task. Four levels — Static Doc, Visual Artifact, Two-Way Interactive, Throwaway Tool. Based on Thariq Shihipar's "Unreasonable Effectiveness of HTML" framework. Triggers on "/html-it", "html-it", "html this", "render as html", "build me an html", "make an html artifact".
-
robonuggets Bundle Hyperframes HelperBuild agent-friendly motion-graphics videos with Hyperframes (HTML-to-MP4). Three levels of effort — Level 1 website-to-video for quick conversions, Level 2 storyboards for guided design iteration, Level 3 fully custom guided-video productions with cut/storyboard/motion-graphics workflow. Triggers on "hyperframes", "html to mp4", "render with hyperframes", "motion graphics for [recording]", "storyboard a video", "/hyperframes-helper".
-
ryanthedev Bundle Distributed Systems DesignGuides distributed system design using a structured 4-step framework: scope, high-level design, deep dive, wrap-up. Two modes: CHECKER audits existing designs for missing components, wrong tradeoffs, and anti-patterns. APPLIER walks through designing systems step-by-step with clarifying questions, component selection, and scaling strategies. Covers 15 system designs (rate limiter, consistent hashing, key-value store, unique ID generator, URL shortener, web crawler, notification system, news feed, chat system, search autocomplete, YouTube, Google Drive, scaling foundations, estimation, interview framework) plus cross-cutting techniques and review checklists. Triggers on: system design, distributed system design, design a system, design a distributed, scale system, architecture review, high-level architecture, back of envelope, capacity planning, design with load balancer, database sharding strategy, caching strategy for scale, CDN architecture, message queue design, microservices system design, API system desi
-
s2dongman Bundle Knowledge Asset Health Check对本地企业知识库资料目录执行不使用大模型的知识资产盘点与体检,生成离线 HTML 报告、文档整改清单和完整文档台账。用户要求体检、盘点或诊断本地知识库文档文件夹,或要求生成这三项成果时使用;不用于评价单篇文档的业务正确性。
-
sage Bundle Carbon ReactCarbon component catalog with typed props, Storybook usage examples, and curated docs references. Use when answering questions about Carbon components, props, and usage guidance.
-
sahanaramesh09 Bundle Teach MeExplain any technical topic from first principles, in a textbook style built for interview preparation and for genuinely understanding something. Optionally reads a CV, a job description and an interviewer profile to tie the topic to the reader's own experience and to what they will actually be asked. Use whenever someone asks to understand, learn or brush up a technical subject — "explain Kafka", "I don't understand React hooks", "teach me time-series databases", "brush up Kubernetes for an interview", or when they paste a passage and say they did not follow it. Delivers the explanation in chat, as a PDF, or both.
-
saithink Bundle Saiadmin6Guide for developing SaiAdmin6.x plugins, encompassing both the Webman backend and Vue/Nuxt frontend. Use this skill when the user wants to create a new plugin, understand the plugin structure, or add features to an existing SaiAdmin6.x plugin.
-
sajeetharan Bundle Angular Best PracticesAngular performance optimization and best practices guidelines for signals/reactivity, change detection, bundle optimization, templates, RxJS, component architecture, dependency injection, routing, forms, accessibility, testing, and tooling. Use when writing, reviewing, or refactoring Angular code, designing component hierarchies, optimizing performance, implementing reactive patterns, or scaffolding new projects.
-
sakimyto Bundle Roast My CodeComprehensive code review in roast style. Analyzes security, architecture, complexity, TDD compliance, type safety, error handling, naming, dead code, performance, dependencies, API design, frontend quality, and git hygiene. Delivers findings as entertaining roasts with actionable fixes. Use /roast to review your codebase. Supports --level (gentle/spicy/savage/sensei).
-
salawi45 Bundle Wcag AccessibilityApply and audit WCAG 2.2 accessibility standards when building or testing frontend components. ALWAYS use this skill when: building any UI component, page, or layout (even if the user doesn't mention accessibility); running accessibility audits or tests; asked to "check a11y", "test accessibility", "audit WCAG compliance", "make this accessible", or "fix accessibility issues". Also trigger when the user mentions screen readers, keyboard navigation, color contrast, ARIA, focus management, inclusive design, Section 508, ADA, AODA, EAA, EN 301 549, or any legal accessibility compliance context. This skill should activate alongside frontend-design whenever UI code is being produced.
-
sambernhardt Bundle Component To RouteFind Next.js routes where a React component is rendered. Use when the user asks which routes to QA or test after changing a component, wants to trace component usage up to route entrypoints, or mentions component-to-route.
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 rn-new-arch-migration, archify, termcast. 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.