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.
-
shankulkarni Skill ComponentUse when building React Native UI components for a library — Fabric-compatible, New Architecture patterns, ref forwarding, Platform.OS, accessibility, compound components, and safe rendering patterns.
-
shankulkarni Skill DirectoryUse when submitting a React Native library to the React Native Community Directory (https://reactnative.directory) — entry format, field guide, CLI submission, and manual PR process.
-
shankulkarni Skill TypescriptUse when configuring TypeScript for a React Native library — strict config, moduleResolution: bundler, exports map, peer dep types, Codegen spec typing.
-
shankulkarni Skill Example AppUse when working on the Expo example app inside a React Native library repo — demo patterns, Expo SDK 52+, dev client vs Expo Go, metro config for local resolution, and testing the library in a real app context.
-
agntdev Skill Telegram Bot API FundamentalsWire up the Telegram Bot API foundation. Covers how the HTTP client works (long polling vs webhook), how grammY wraps it (Bot instance, ctx, command routing, callback queries, middleware), the agntdev inlined toolkit (createBot / makeBot), the hard limits (callback_data 64 BYTES, message 4096 chars), parse_mode (HTML default, MarkdownV2 escape), and message entities. USE FOR: building a Telegram bot, grammY bot, bot entry point, bot token, long polling, webhook, callback_data limit, parse_mode, HTML, MarkdownV2, message entity, createBot, makeBot, Bot API limits — even if the user doesn't say "inline" or "keyboard" explicitly. DO NOT USE FOR: Rich Messages / Checklists / chat types / media (see telegram-bot-api-rich-messages), keyboard wiring (see telegram-bot-ui), UX rules (see telegram-bot-ux-rules). Triggers: build telegram bot, grammY bot, bot entry point, bot token, long polling, webhook, callback_data limit, parse_mode, HTML, MarkdownV2, message entity, createBot, makeBot, Bot API limits.
Audited -
yuchi-chang Skill Clarifying RequirementsUse when starting a new feature, component, or project whose requirements are underspecified or ambiguous — before designing or writing code
-
zekainie Skill Exam Study Guide将已经讲完但尚未完成阶段门禁的一个章节整理成强类型教材清单,并在视觉模式下编译为公式可读、图片可见、知识点与全部对应例题逐项精讲的自包含 HTML/PDF。结构化工作区准备阶段完成证据、用户说 Markdown 公式仍是 raw LaTeX、图片缺失、要含课件/作业/Quiz/模拟考试题及答案的零基础讲义,或要求打印版时使用。
Audited -
zylos-ai Bundle Component ManagementGuidelines for managing zylos components via CLI and C4 channels. Use when installing, upgrading, or uninstalling components, or when user asks about available components.
-
catwillgh Bundle Mainframe FrontendDevelop, debug, review, test, or visually refine client-facing React web applications and established React layers. Use proactively for user journeys, components, browser state, accessibility, responsive behavior, UI and UX, and focused frontend tests. Do not use for React Native, substantial backend work, infrastructure ownership, or standalone design-system development.
-
catwillgh Bundle Mainframe Typescript BackendDevelop, debug, review, or test server-side TypeScript in Node.js services and established Next.js server layers. Use proactively for backend APIs, business rules, persistence, jobs, realtime behavior, server integrations, and focused backend tests. Do not use for substantial client-only UI, Python services, data or ML pipelines, or infrastructure ownership.
-
jagoda11 Skill Protocol BrainsProtocol Brains — 11-expert backend/architecture panel. 2 Database, 2 TypeScript architects, 1 Legacy Migration, 1 React, 1 Test, 1 Monorepo, 2 Multiagent workflow, 1 Orchestration.
-
dominiktobureto Skill Frontend UX EngineerUse for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.
-
dominiktobureto Skill Performance OptimizerUse for slow endpoints, p95/p99 latency, database query issues, frontend bundle/render performance, memory leaks, caching, profiling, or performance regressions.
-
jackxu1978 Skill Tai Chi Sword For BeginnersBeginner-accessibility guide for tai chi sword (tai chi jian / 太极剑) — whether the practice is good for beginners, why it is one of the most beginner-friendly weapon arts (slow tempo, low impact, light dull practice swords, standardized 32-form curriculum), what a complete beginner needs to start, a realistic first-three-months timeline, and honest answers to the common beginner worries about coordination, memory, and soreness. Use when a user asks if tai chi sword is good for beginners, whether anyone can learn tai chi sword, whether tai chi sword is hard for beginners, if they need martial arts experience or prior tai chi for tai chi sword, whether tai chi sword is beginner friendly, what a beginner needs to start tai chi sword, how fit or coordinated you need to be for tai chi sword, whether tai chi sword is safe for beginners, how long before a tai chi sword beginner sees progress, or what the first weeks of tai chi sword look like.
-
leanos-technologies Skill Gap Computing LedgerComputes desired-current state deltas, quantifies component scores, and produces a ranked gap ledger. Use when evaluating hypothesis register state to determine where the largest gaps exist between desired and current conditions.
Audited -
lx050 Bundle Rubbing Research OrchestratorOrchestrate provenance-first research on rubbings, steles, inscriptions, and related historical sources. Use when Codex must initialize a ResearchCase, split an epigraphy question into auditable stages, route work across independent Skills or Agents, react to positive/negative/null/invalid results, enforce research gates, or decide whether to continue, reroute, request human review, stop unresolved, or package a study.
-
mariojames Bundle Awesome Presentation使用 awesome-presentation 脚手架创建或修改 React 演示文稿;内容讨论按需要进行。
-
neeeophytee Skill Brainstorm PrototypesGenerate several genuinely different throwaway variations (designs, approaches, drafts) for the user to react to. Use when the user can only recognize what they want by seeing it — visual design, UX flows, naming, tone — or asks to brainstorm or prototype before building.
-
ahoo-wang Bundle Fetcher StorageAdd typed cross-environment storage with `@ahoo-wang/fetcher-storage`: `KeyStorage`, serializers, defaults, listeners, localStorage with in-memory fallback, custom sessionStorage, and optional cross-tab event buses. Use for persistent values or storage-backed React/CoSec flows.
-
ahoo-wang Bundle Fetcher React HooksBuild React request and state flows with `@ahoo-wang/fetcher-react`: promise state, `useFetcher`, generic and Wow queries, storage/event hooks, CoSec context, debouncing, AbortController, and unmount/race safety. Use when a task mentions these hooks or Fetcher-backed React state.
-
ahoo-wang Bundle Fetcher View EngineBuild React record/table workbenches with @ahoo-wang/fetcher-view-engine and shadcn/Base UI. Use for ViewEngine, ViewPage, RecordView, ViewHost, server-provided view definitions and saved instances, paged/cursor queries, personal/shared view persistence and recovery, global/row/batch actions, filter and cell extensions, or standalone FilterPanel/Select controls and scoped themes. Applies to this independent view engine rather than the Ant Design fetcher-viewer package.
-
ahoo-wang Bundle Fetcher Viewer ComponentsBuild React and Ant Design data-table UIs with `@ahoo-wang/fetcher-viewer`: `FetcherViewer`, `Viewer`, `View`, tables, filters, saved views, actions, cells, and data-entry components. Use for Fetcher Viewer composition or customization.
-
aitit-inc Skill Local E2eLocal LeadAce E2E testing skill. Triggers: 'local E2E', 'ローカル E2E', 'local-e2e', 'E2E テスト', E2E run against the local stack. Encodes the prerequisites: host-side `claude` CLI, real Google OAuth, local Supabase / Workers / Frontend. Concrete scenarios are user-supplied per run.
-
angad-kandhari Skill ArchitectArchitectural thinking. Load when crossing component boundaries, reshaping contracts, introducing a service, or deciding where code belongs. Covers naming boundaries, locating code by ownership and change cadence, changing contracts carefully, measuring coupling and cohesion, and not abstracting until the pattern is real.
-
apache Skill ContributingGuides the contribution workflow for Apache Beam, including creating PRs, issue management, code review process, release cycles, and rigorous evaluation rules for high-risk core component changes. Use when contributing code, creating PRs, or modifying core Beam components.
-
astashov Skill React NativeGuidelines for writing React Native code in Liftosaur. Use when migrating web components to RN primitives, fixing RN performance issues, or building new RN screens.
-
azure-samples Skill Add ComponentAdd a new React component with Material UI
Audited -
azure-samples Skill Service CatalogService catalog and guided onboarding for the azd deployment. USE WHEN the user wants to discover, install, set up, or be walked through the deployable components (Azure OpenAI/AI Foundry, Speech, ACS/telephony, Cosmos DB, Redis, Container Apps, Key Vault, App Config, CardAPI MCP), asks "what gets deployed", "what services does this use", "help me onboard", "set up the deployment", "guide me through azd up", "which components do I need", or wants to enable optional pieces (phone number, EasyAuth, data seeding). Acts as the entry point an agent hooks into to assess current state, present the catalog, and onboard each component. DO NOT USE FOR: deep azd hook/flow internals or model-availability checks (use deployment-guide); runtime failure diagnosis (use troubleshoot); telemetry/log analysis (use observability-insights).
-
dkadts Skill TokensGenerates site/css/tokens.css from DESIGN-LOCK.md and brief/animation.md. Refuses to work until DESIGN-LOCK is frozen. Sole writer of tokens.css in the project.
-
exiao Bundle Architecture DiagramGenerate dark-themed SVG diagrams of software systems and cloud infrastructure as standalone HTML files with inline SVG graphics. Semantic component colors (cyan=frontend, emerald=backend, violet=database, amber=cloud/AWS, rose=security, orange=message bus), JetBrains Mono font, grid background. Best suited for software architecture, cloud/VPC topology, microservice maps, service-mesh diagrams, database + API layer diagrams, security groups, message buses — anything that fits a tech-infra deck with a dark aesthetic. If a more specialized diagramming skill exists for the subject (scientific, educational, hand-drawn, animated, etc.), prefer that — otherwise this skill can also serve as a general-purpose SVG diagram fallback. Based on Cocoon AI's architecture-diagram-generator (MIT).
-
jord0-cmd Skill LocusINVOKE THIS SKILL when: making AI-generated images interactive, mapping clickable zones onto generated artwork, warping HTML content onto perspective surfaces in images, defining freeform polygon hotspots, creating hover/click states for elements in AI art, or performing surgical edits on specific regions of generated images. Contains four original techniques: CSI, IQM, HQW, and ADT.
-
lintendo Bundle Clone Page高精度克隆网页。使用 Playwright 渐进式采集页面数据(DOM 结构、样式、截图、资源), 然后分阶段构建完整的 HTML/CSS 还原。支持快速还原和高精度还原两种模式。 当用户需要克隆、复刻、还原、仿制网页时使用此技能。 当用户提供 URL 并要求"做一个一样的页面"、"把这个页面克隆过来"、 "参考这个网站的设计"、"还原这个页面"时,务必使用此技能。
-
lintendo Bundle Generate Theme从网页中采集设计令牌并生成完整的 DESIGN.md 设计规范文档 + Tailwind CSS 主题文件。 当用户提供 URL 并要求"提取主题"、"生成设计规范"、"导出设计系统"、 "提取这个网站的设计令牌"、"帮我做一个主题"、"分析这个页面的设计风格"时使用。 产出包含 DESIGN.md(getdesign.md / DESIGN.md 9 段式标准)和 globals.css(Tailwind CSS v4), 每个 token 类别均有推荐/允许/禁止三级规范,可直接放入项目根目录供 AI 编码工具使用。
-
lintendo Bundle Extract Page DataExtract structured data from any web page using Playwright — screenshots, design tokens, page text as Markdown, interactive element maps, and full page data packs. Use this skill whenever the user wants to capture a web page screenshot (full page or element), extract CSS design tokens or theme information, convert page content to Markdown, collect links and interactive elements from a page, or export a complete page analysis package. Triggers on any URL that isn't an Axure prototype — for Axure URLs use extract-axure-data instead.
-
lintendo Bundle Extract Axure DataExtract structured data from Axure prototypes using Playwright — screenshots, design tokens, interaction maps, annotations, and page text. Use this skill whenever the user wants to extract data from an Axure prototype, reconstruct or clone an Axure page, analyze Axure design tokens, export Axure content, or work with Axure prototype URLs (even if they don't say "Axure" explicitly — look for AxShare links, /start.html#p= URLs, /start.html?id=...&p=... URLs, or mentions of wireframes/prototypes hosted online).
-
lintendo Bundle Build Design System从网页中采集设计令牌并生成完整的 DESIGN.md 设计规范文档 + Tailwind CSS 主题文件。 当用户提供 URL 并要求"提取主题"、"生成设计规范"、"导出设计系统"、 "提取这个网站的设计令牌"、"帮我做一个主题"、"分析这个页面的设计风格"时使用。 产出包含 DESIGN.md(getdesign.md / DESIGN.md 9 段式标准)和 globals.css(Tailwind CSS v4), 每个 token 类别均有推荐/允许/禁止三级规范,可直接放入项目根目录供 AI 编码工具使用。
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 component, directory, typescript. 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.