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.
-
heyeddi-com Bundle Design System Generalizer 3Scans token and component usage patterns from a golden reference page and diffs violations on other routes. Use when spreading a well-built page's patterns across the app in PR-sized chunks.
-
rahmanef63 Bundle Sc 2Main SI-Coder entry point for non-technical users. Turn a plain-language idea or existing web app into a working product, improve frontend quality across UI/UX/DX/AX, and publish it. Route automatically while keeping technical details optional.
-
rahmanef63 Skill Sc Ax 2SI-Coder Agent Experience (AX) skill. Make projects, tools, workflows, and frontend actions easy for coding agents to discover, understand, invoke correctly, observe, recover, resume, and verify with low context/token waste.
-
rahmanef63 Skill Sc Dx 2SI-Coder developer experience skill for frontend codebases: fast orientation, predictable project structure, coherent component APIs, design-token reuse, actionable build/test errors, safe local changes, debugging ergonomics, documentation, and low-friction verification.
-
rahmanef63 Bundle Sc Fe 2SI-Coder frontend quality orchestrator. Audit, design, implement, and verify frontend work across UI, UX, DX, and Agent Experience (AX), with reusable design presets/profiles such as --apple or --workbench and automatic preservation of existing design DNA by default.
-
rahmanef63 Skill Sc All 2Turn a plain-language web-app goal into a working live app. Designed for non-technical users: choose architecture and hosting automatically, connect accounts safely, create/publish code, data, domain and verification end-to-end, delegate user-facing frontend quality to sc-fe, and expose technical details only when needed or requested.
-
rahmanef63 Skill Sc Help 2Quick reference for SI-Coder route selection, frontend quality presets/profiles, secret-safe provider control, portable installation, and provider-specific skills. Use for 'sc help', 'what should I run', 'which frontend preset', 'which deploy route', or 'list si-coder commands'.
-
rahmanef63 Bundle Sc Vercel 2Vercel deploy as online frontend host. Create project bound to a GitHub repo, set CONVEX_DEPLOY_KEY, set build command to couple Convex Cloud deploy + Next.js build (injects NEXT_PUBLIC_CONVEX_URL), add a custom domain or subdomain, configure Hostinger DNS (CNAME for subdomain / A for apex) from Vercel's required config, trigger + poll deploy. Pairs with /sc-convex-cloud for the Convex Cloud backend.
-
wrm3 Bundle Hanx Knowledge Base 2Document ingestion and semantic search with RAG capabilities. Supports PDF, DOCX, MD, TXT, CSV, HTML, and JSON. Combines intelligent chunking, vector embeddings, and persistent storage for building searchable knowledge bases.
-
xberg-io Bundle Xberg 2Extract text, tables, metadata, and images from 98+ document formats (PDF, Office, images, HTML, email, archives, academic) using Xberg. Use when writing code that calls Xberg APIs in Python, Node.js/TypeScript, Rust, or CLI. Covers installation, extraction (sync/async), configuration (OCR, chunking, output format), batch processing, error handling, and plugins.
-
xberg-io Skill Picking A Format 2Use when choosing an output format for extracted documents — text, markdown, djot, html, or JSON. Maps consumer (LLM, parser, archive) to the right `--format` / `--content-format` pair.
-
xberg-io Skill Extracting Tables 3Use when extracting tabular data from PDFs, spreadsheets, or images. Covers layout-aware table detection, table model selection, output formats (markdown / JSON cells), and known limits.
-
xberg-io Skill Using The MCP Server 3Use when calling LLM APIs through the liter-llm MCP server's 22 tools, and to decide when MCP beats the CLI or SDK. Covers the tool surface, the auto-installing launcher, and authentication.
-
xberg-io Skill Converting HTML 3Use when converting HTML to Markdown, Djot, or plain text. Covers output formats, heading and code-block styles, lists, escaping, wrapping, and HTML preprocessing.
-
xberg-io Bundle HTML To Markdown 3Convert HTML to Markdown, Djot, or plain text with structured extraction. Use when writing code that calls html-to-markdown APIs in Rust, Python, TypeScript, Go, Ruby, PHP, Java, C#, Elixir, R, C, or WASM. Covers installation, conversion, configuration, metadata extraction, tables, document structure, inline images, URL fetching, and CLI usage.
-
xberg-io Skill Extracting Tables 4Use when extracting tabular data from HTML. Covers GFM Markdown tables, the structured tables array (grid cells plus pre-rendered markdown), and HTML line breaks in table cells.
-
xberg-io Skill Scraping HTML To Markdown 3Use when the user wants a single page rendered as clean Markdown plus structured metadata. Covers `crawlberg scrape URL`, JSON vs Markdown output, what metadata is returned, and how to handle JS-heavy pages.
-
xberg-io Skill Extracting Metadata 3Use when extracting metadata from HTML — title, description, language, Open Graph, JSON-LD / Microdata / RDFa, headers, links, and images. Covers the --json output shape and the --extract-metadata flag.
-
l-gevity Skill Architecture As Code 2Stack-agnostic pattern for declaring and enforcing component boundaries via per-module architecture configs merged into import-graph linter rules. TRIGGER when designing/auditing dependency-rule enforcement, deciding what a per-module file should say, placing a rule, debugging a forbidden edge, or extending the assembler. Consume explicit `Enforcement` handoffs from `architecture-guidelines` or `morphogenetic-architecture` by turning enforceable dependency constraints into architecture config rules. SKIP routine edits inside a governed module. For stack implementations see `architecture-as-code-javascript` or `architecture-as-code-python`.
-
l-gevity Skill Architecture Guidelines 2First-principles architectural rules for module/service/abstraction design: minimalism, modularity, functional core, resilience, layer self-sufficiency, integration, naming, and concurrency. TRIGGER when introducing a module/service/abstraction, refactoring across module boundaries, applying SOLID, deciding whether a control may rely on the layer beneath it, designing an integration edge between applications or services, or reviewing architectural concerns (purity, idempotency, naming, fail-fast). SKIP for bug fixes within an existing module, content/copy edits, CSS-only changes, dependency bumps, and trivial renames. Emits an `Enforcement` handoff to `architecture-as-code` when a design decision yields an enforceable dependency constraint.
-
l-gevity Bundle Morphogenetic Architecture 2Design and audit evolving, evidence-weighted software topology. Start with a rapid declared-topology scan; escalate to full analysis for restructuring, multi-field evidence, broad scope, ambiguity, or a deep audit. Place components by domain, abstraction tier, and layer; preserve directed interfaces; compare imports, runtime flow, co-change, shared data, and failure propagation; then place, keep, move, split, merge, or introduce a boundary. TRIGGER when placing a module/service/layer, refactoring dependency topology, discovering bounded contexts, diagnosing cycles, god-components, cross-domain tangles, or hidden runtime coupling, or comparing observed behavior with declared architecture, or revisiting a closed prediction window. SKIP for routine in-boundary logic, isolated bug fixes, content/CSS edits, dependency bumps, and trivial renames. Use `architecture-guidelines` for component internals, `structural-simplification` for complexity deltas, and `architecture-as-code` for enforceable dependency rules.
-
l-gevity Skill Evolutionary Database Design 2Designs and audits compatible, staged, reversible changes to persisted or serialized data shape: database schemas, event and message schemas, API payloads, and file formats. Use when a change adds, renames, moves, narrows, reinterprets, or removes a stored or serialized element, changes a key or identity, transfers write ownership, or needs a backfill; when deciding whether old and new code versions can coexist against one schema during rollout and rollback; when planning an expand/contract transition, its reversal steps, and the evidence that permits the contract step; or when auditing never-contracted expansions, semantic drift, unowned data, and migrations without a reversal path. Do not use for component placement, requirement meaning, test technique, pipeline stage placement, gating, or evidence state; hand those to morphogenetic-architecture, requirements-grounding, test-strategy, defect-shift-left, ci-cd-reliability-architecture, and requirements-traceability.
-
mediar-ai Bundle Astro 2Skill for using Astro projects. Includes CLI commands, project structure, core config options, and adapters. Use this skill when the user needs to work with Astro or when the user mentions Astro.
-
dqtx760 Bundle Web Scraper 2Fetch and extract content from web pages, converting HTML to clean markdown. Use when users want to read web articles, extract information from URLs, scrape web content, or when the built-in WebFetch tool fails due to network restrictions. Trigger when user provides URLs to read, asks to fetch web content, or needs to extract text from websites.
-
dqtx760 Bundle Huashu Design 2花叔Design(Huashu-Design)——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介,根据任务embody不同专家(UX设计师/动画师/幻灯片设计师/原型师),避免web design tropes。触发词:做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design。**主干能力**:Junior Designer工作流(先给假设+reasoning+placeholder再迭代)、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components(幻灯片外壳/变体画布/动画引擎/设备边框)、App原型专属守则(默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试)、Playwright验证、HTML动画→MP4/GIF视频导出(25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade)。**需求模糊时的Fallback**:设计方向顾问模式——从5流派×20种设计哲学(Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等)推荐3个差异化方向,展示24个预制showcase(8场景×3风格),并行生成3个视觉Demo让用户选。**交付后可选**:专家级5维度评审(哲学一致性/视觉层级/细节执行/功能性/创新性各打10分+修复清单)。
-
fanthus Skill Lark Apps 2妙搭(Spark/Miaoda)应用开发与托管:应用创建、本地全栈开发、云端生成迭代、创意设计(UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索)、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用角色与成员管理、自动化触发器(定时/记录变更/Webhook/飞书审批)。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站·部署到妙搭,或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索,或提到妙搭/Spark/Miaoda(应用运行时域名形如 *.aiforce.cloud)、应用数据库、应用文件存储、开放 API Key、可见范围、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。
-
fanthus Bundle React Native App 2Build cross-platform mobile applications using React Native. Use when the user wants to create, develop, or work with React Native apps for iOS and Android. Triggers include requests to build mobile apps, create React Native components, set up navigation, integrate native modules, handle app state management, implement animations, or work with React Native specific features like FlatList, StyleSheet, or platform-specific code.
-
fanthus Skill Call Uikit 2This is the parent skill for Tencent Call TUICallKit integration across all platforms. It should be used when users want to build audio/video CALL features (1-to-1 or small group calls). This skill guides platform selection and provides common knowledge shared across all Call implementations. For platform-specific guidance, use the corresponding sub-skills (call/vue, call/react, etc.).
-
fanthus Skill Chat Uikit 2This is the parent skill for Tencent Chat TUIKit integration across all platforms. It should be used when users want to build instant messaging (IM) features but have not specified a particular platform/framework. This skill guides platform selection and provides common knowledge shared across all Chat TUIKit implementations. For platform-specific guidance, use the corresponding sub-skills (chat/vue, chat/react, etc.).
-
fanthus Skill Live Uikit 2This is the parent skill for Tencent Live TUILiveKit integration across all platforms. It should be used when users want to build LIVE STREAMING features (host broadcasting, audience viewing). This skill guides platform selection and provides common knowledge shared across all Live implementations. For platform-specific guidance, use the corresponding sub-skills (live/vue, live/android, etc.).
-
fanthus Skill Room Uikit 2This is the parent skill for Tencent Room TUIRoomKit integration across all platforms. It should be used when users want to build VIDEO CONFERENCE or MEETING features. This skill guides platform selection and provides common knowledge shared across all Room implementations. For platform-specific guidance, use the corresponding sub-skills (room/vue, room/react, etc.).
-
fanthus Bundle Chat Uikit Vue3 2This skill orchestrates the integration of Tencent Chat TUIKit for Vue3 Web applications. It should be used when users want to build instant messaging (IM) features in Vue3 projects, including conversation lists, chat windows, group management, and contact management. The skill provides strict workflow instructions for AI agents to generate correct, runnable code by leveraging MCP tools for real-time documentation and credentials.
-
fanthus Bundle Chat Uikit React 2This skill orchestrates the integration of Tencent Chat TUIKit for React Web applications. It should be used when users want to build instant messaging (IM) features in React projects, including conversation lists, chat windows, group management, and contact management. The skill provides strict workflow instructions for AI agents to generate correct, runnable code by leveraging MCP tools for real-time documentation and credentials.
-
goldziher Skill Basemind Documents 3Semantic + full-text search over documents and the web via basemind's RAG store — PDFs, Office, HTML, email, images (OCR), plus scraped/crawled web pages, with cross-encoder reranking, keyword and named-entity (NER) filters, and per-document summaries. Reach for it whenever the user asks to "search the docs / PDFs", "find where a topic is discussed", "pull this URL into context", or "what does the documentation say about X".
-
goldziher Skill Basemind Documents 4Semantic + full-text search over documents and the web via basemind's RAG store — PDFs, Office, HTML, email, images (OCR), plus scraped/crawled web pages, with cross-encoder reranking, keyword and named-entity (NER) filters, and per-document summaries. Reach for it whenever the user asks to "search the docs / PDFs", "find where a topic is discussed", "pull this URL into context", or "what does the documentation say about X".
-
ivklgn Skill Can I Use 2Check browser support for web platform features (CSS, JS APIs, HTML) against the project's actual browser targets. Resolves the project's browserslist config, queries caniuse/MDN compatibility data, reports Baseline status, and recommends fallbacks or progressive enhancement. Use when asking "can I use X", choosing between modern and legacy approaches, reviewing code for unsupported features, or auditing browser compatibility.
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 design-system-generalizer, sc, sc-ax. 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.