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.
-
mkarots Bundle Cursor DigestSummarizes saved Cursor sessions for a natural-language date range (today, yesterday, last week) and the matching GitHub pull requests, issues, documents, and tasks, then writes a standalone HTML digest. Use when the user runs /cursor-digest or asks for a Cursor session digest, daily recap, or yesterday's work summary.
-
puffergo Bundle Wordpress Page BuilderBuild or edit pages, blog posts, case studies and other content on the user's own WordPress site (PufferGo plugin): body text as Markdown (native WordPress blocks the customer can edit), page layout as Tailwind HTML sections. Use when the user says things like "做一个页面 / 写一篇博客 / 加一个案例 / 改一下首页这一块 / 这段文字换一下 / make a landing page / add a case study / edit this section". Not for products (use wordpress-bulk-product-upload). All WordPress operations go through the bundled `puffergo` script; the site password never enters the chat.
-
kesslernity Bundle Project Status Tracker 4Maintains four living project files (overview and progress log, decision log, RAID log, links) from the mail, channel posts, documents and meeting notes the user attaches or the agent can reach, returns each touched file complete in the chat for the user to save, and builds a weekly DRAFT status report from those files. Use when the user asks to "set up tracking for project X", "catch the project files up", "log this decision against the project", "add this risk to the RAID log", "save this link to the project" or "write this week's status report". Do not use for reviewing an existing RAID log for stale or ownerless entries, use raid-log-review instead; for an HTML status page, use project-dashboard-builder; for minutes of one meeting, use meeting-minutes-writer. Drafts for human review; never approves, authorises or signs off.
-
kesslernity Bundle Project Dashboard Builder 4Builds a self-contained single-file HTML project dashboard (status banner, milestones table, risks heat list, decisions log, links) from the project tracker files the user attaches, pastes or holds in configured knowledge sources, and returns the complete HTML source in chat ready to save as dashboard-project-date.html. Use when the user asks to "build a dashboard for this project", "make a status page I can pin in the team channel", "give me an HTML overview of milestones, risks and decisions", "refresh the project dashboard from the tracker" or "turn these tracker files into a one-page visual summary". Do not use for creating or updating the tracker files or for the written weekly status report, use project-status-tracker instead. Drafts for human review; never approves, authorises or signs off.
-
kesslernity Skill Document Accessibility Check 2Reviews the text and structure of a document, slide deck or web page against the accessibility rules the user supplies, or a default set covering heading structure, image alternative text, colour used as the only cue, link text, reading order, tables and language, and returns numbered findings with location, rule, severity and a ready-to-apply fix for the author, plus proposed alt text and a list of checks that need a tool or a person. Use when the user asks to "check this document for accessibility", "review the alt text in this deck", "is this page accessible", "run an accessibility check on these slides", "find accessibility issues before I publish" or "check my headings and link text". Do not use for brand or template compliance of slides, use branded-deck-builder instead. Drafts for human review; never approves, authorises or signs off.
-
xjyloly-prog Bundle 8 Bit Orbit Video TemplateHyperframes-based video template for retro pixel deck motion design. Use when users want a high-fidelity, multi-scene HTML-to-video composition with advanced transitions, interactive preview controls, and ready-to-render default style.
-
xjyloly-prog Bundle Ppt Agent Alt专业 PPT 演示文稿全流程 AI 生成助手。模拟顶级 PPT 设计公司的完整工作流(需求调研 -> 资料搜集 -> 大纲策划 -> 策划稿 -> 设计稿),输出高质量 HTML 格式演示文稿。当用户提到制作 PPT、做演示文稿、做 slides、做幻灯片、做汇报材料、做培训课件、做路演 deck、做产品介绍页面时触发此技能。即使用户只说"帮我做个关于 X 的介绍"或"我要给老板汇报 Y",只要暗示需要结构化的多页演示内容,都应该触发。也适用于用户说"帮我把这篇文档做成 PPT"、"把这个主题做成演示"等需要将内容转化为演示格式的场景。
-
hi-donwi Bundle Web PerfAnalyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (FCP, LCP, TBT, CLS, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Do not use for general UI implementation (frontend-ui-engineering) or backend/API performance (performance-optimization).
-
hi-donwi Bundle Uidl RuntimeAuthor, validate, and render UIDL documents — schema-driven JSON UI for lists, forms, reports, dashboards, and settings — with the uidl-runtime package (React reference, Flutter and Android semantic cores, Java document builder). Use when creating or changing a UIDL document, the document schema, DataAdapter seam, $bind/$query/$expr/mutate behaviour, uidl-validate, or uidl-compile. Do not use for hand-built React/Flutter/Compose screens that are not UIDL documents (frontend-ui-engineering) or for ordinary REST work that does not produce UIDL (quarkus-service, rest-api-contract).
-
alaaldin97 Bundle Pro Website BuilderBuild or improve a professional website when the user asks to create, redesign, or enhance a website, web app, landing page, dashboard, portfolio, store, or other web experience, including planning its pages, features, data, visuals, responsive UI, accessibility, and functionality. Does NOT fire for general programming tasks that do not involve building or improving a website.
-
kirrito-k423 Bundle Pr To HTML将 GitHub、GitCode 或本地 Git 分支的 PR/diff 转换为自包含的宽屏三栏审查 HTML,支持按需展开固定提交中的源码上下文,并在生成前逐项复查每处修改的必要性、正确性、证据与最小化空间。用户表示看不懂 PR、要求解释代码改动、生成可视化 diff、审查大 PR、判断修改是否过多、按“旧代码问题—代码对比—新代码说明”展示、需要展开函数上下文,或强调功能打通阶段应尽量少改代码时使用。
-
alaaldin97 Bundle Frontend Change VisualizerSkill: Frontend Change Visualizer
-
hi-donwi Bundle Frontend UI EngineeringBuilds production-quality UIs and maintainable component architectures. Use when building or modifying user-facing interfaces, components, layouts, or stateful interactions. Do not use for backend-only or non-UI changes, or for schema-driven UIDL documents (uidl-runtime).
-
kirrito-k423 Bundle Timelinetohtml将性能时间线、Profiler或DebugClock色块与源码对齐,生成“执行配置/关键代码耗时/阶段汇总与实测对比”横向三列的自包含交互HTML。用户要求解释不同rank、核、线程或流水阶段为何快慢不同,逐组估算代码耗时、核对颜色块、演示等待转移或按三列走读性能时使用。
-
kirrito-k423 Bundle Global Packet Flow从全卡、多核或分布式日志制作多屏联动数据流网图。控制页只放操作、表格与证据,多个独立动画 HTML 可自由布局并共享时间;必须保留 slot×block 逐位置填充和等待状态。支持双端筛选、512 组合以内原子信包时序、group/rank 完成曲线与 P10/P50/P90/P100、包/tick 吞吐及组成,可配置 B/包和 μs/cycle。区分观测时间与真实发送时间、物理带宽与未校准时钟。
-
kirrito-k423 Bundle Buffer Design To HTML为算子、通信库或运行时的 Buffer、workspace、共享内存和暂存区生成源码支撑的中文 HTML。用户需要理解分配组成、bank 选择、嵌套字段与 padding、基址和偏移换算、图中空间对应哪个代码对象,或交互估算规模变化时使用。以 WinDirStat 式递归树表和真实面积 treemap 为阅读中心,联动右侧公式、地址推导及精确变量高亮,交付经过验证的离线 HTML;也适用于分配策略修改前后对比。
-
kirrito-k423 Bundle Design Reasoning Trace从基础目标、资源约束和常规方案出发,溯源复杂技术设计的动机与取舍,并生成从简单场景逐步演化的离线交互 HTML。用户表示看懂实现却不理解为什么这样设计、要求讲设计出发点、比较常规方案、反推设计思路或动态分步可视化时使用。
-
kirrito-k423 Bundle Code To HTML Walkthrough将一个或多个源码文件转换为便于深度阅读的自包含交互式 HTML,以“代码逻辑”和“内存与通信”两个顶层模式分别展示 E2E/函数 DAG 与大块申请、容量预算、内存层级和搬运路径,并和完整源码双向联动。提供输入/输出对象与核心 API 强调、代码反向索引、完整搜索计数和循环导航。用户要求生成代码走读网页、可交互源码解释、源码 DAG、函数关系图、GM/UB/缓存划分或 DataCopy/通信路径可视化时使用;默认由便宜快速的子代理起草普通函数、语义块和逐行解释,由更强模型独立复查,复杂语义升级处理。
-
kirrito-k423 Bundle HTML Preview Page Writer为 hugoMinos 创建或更新参与首页、分类、标签和搜索索引的 HTML 正文文章;维护 Markdown 索引载体、同名 `.preview.html` 与方案 B 详情页接入。用户要求把文章、技术分析、数据报告、交互解释或 AI 生成内容制作成站内 HTML 文章时使用;独立落地页或普通 Markdown 写作不使用。 默认 Dev,写完后必须由独立子代理使用 article-readability-check 审核最终正文;通过不自动转为 Public。
-
sickn33 Bundle Expo Deployment 2Deploy Expo apps with EAS: build and submit iOS and Android releases, configure build and submit profiles, manage versions and store metadata, and deploy web bundles or API routes.
45.1k -
mohitagw15856 Skill Bom Cost Review 2Review a bill of materials for cost, risk, and supply exposure — cost rollup, top-10 cost drivers, single-source and EOL risk, MOQ vs forecast mismatch, cost-down candidates, and tariff/logistics sensitivity. Use when asked to review a BOM, find cost-down opportunities, check component sourcing risk, or sanity-check BOM cost against target. Produces a structured BOM review with a cost driver Pareto, risk flags per line, and a prioritised cost-down list.
-
mohitagw15856 Skill Compounding Record 2Write a compounding worksheet and record that reproduces the preparation exactly and survives inspection — formula, calculations shown, components with lot numbers, in-process checks, and the beyond-use date with its basis. Use when asked to document a compounded preparation, write a master formulation record, create a compounding worksheet, or prepare compounding documentation for inspection. Produces the master formula, the batch record, the component and lot table, in-process checks, labelling, and the beyond-use-date rationale. Documentation only; standards and stability data must come from current official references.
-
mohitagw15856 Skill Counteroffer Decoder 2Decode a counteroffer after you resign — what the raise, promotion promise, or title bump really signals, the statistics-informed risks of staying, and a clear-eyed decision framework. Use when asked my company countered my resignation, should I accept a counteroffer, they offered me more to stay, or decode this retention offer. Produces a component-by-component decode with 🔴🟡🟢 severity, the questions that expose which promises are real, and the stay/go decision sheet.
-
mohitagw15856 Skill Venue Access Check 2Check whether a specific venue — a restaurant, office, event space, Airbnb, clinic — will actually work for your access needs, before you commit, with the exact questions to ask and the red flags in the answers. Use when someone says 'will this place work for my wheelchair', 'check if this venue is accessible', 'questions to ask a venue about access', or 'is this restaurant/office actually accessible'. Produces a tailored question list, how to read the answers, and a go/adapt/avoid verdict. For personal access decisions; not a formal accessibility audit.
-
mohitagw15856 Skill Accessibility Audit 2Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.
-
mohitagw15856 Skill Content Style Guide 2Create a content style guide / voice & tone guide so everyone writes consistently. Use when asked to write a content style guide, a voice and tone guide, editorial guidelines, or UX-writing standards. Produces a usable guide — voice principles with do/don't examples, tone-by-context, mechanics (grammar, capitalisation, formatting), terminology/word list, and accessibility/inclusivity rules — that a team can actually apply.
-
mohitagw15856 Skill Security Threat Model 2Write a STRIDE-based threat model for a service or feature. Use when asked to produce a threat model, document security risks, identify attack vectors, assess a service's security posture, or prepare for a security design review. Produces a structured threat model covering assets, trust boundaries, STRIDE threat enumeration per component, risk scores, mitigation controls, and residual risk sign-off.
-
mohitagw15856 Skill Accessible Travel Planner 2Plan a trip that actually works with a disability or access need — confirm real accessibility (not just 'accessible' labels), book the assistance in advance, plan for equipment and medication, and build in the contingencies for when access breaks down. Use when someone says 'plan an accessible trip', 'travelling with a wheelchair/disability', 'book assistance for my flight', or 'will this hotel actually work for me'. Produces an access-verified itinerary, an assistance-booking checklist, an equipment/medication plan, and contingency scripts. Verify specifics with providers.
-
mohitagw15856 Skill Aging In Place Assessment 2Assess whether and how someone can safely stay in their own home as they age — the home hazards, the support gaps, and the modifications and services that make it work. Use when asked can my parent stay in their home safely, aging in place assessment, is it safe for them to live alone, or what do we need for them to stay home. Produces a room-by-room safety read (fall hazards, accessibility), an honest look at the daily-living and support gaps, the modifications and services that could close them, warning signs that home may no longer be safe, and how to raise it respectfully — helping a family make a clear-eyed, dignity-preserving decision. Not medical advice.
-
mohitagw15856 Skill Context Engineering Review 2Review what an LLM feature or agent actually puts in its context window — and find what's bloating, missing, or fighting itself. Use when asked to review a system prompt and context assembly, cut token usage without losing quality, debug an agent that ignores instructions, or audit how retrieval results, history, and tool definitions are packed into the window. Produces a context inventory with a keep/cut/restructure verdict per component, ordering and caching fixes, and a token budget. For wording-level prompt tuning use prompt-optimizer.
-
imgly Bundle Explain 3Explain CE.SDK Swift concepts, architecture, and workflows for CE.SDK Swift projects targeting iOS, macOS, or Mac Catalyst. Use it for first-party CreativeEditor SDK guidance, module scope, Xcode implementation, or bundled Swift references. It distinguishes cross-platform IMGLYEngine from iOS-only editor, camera, and UI modules. Prefer live Xcode symbols for the installed SDK, then bundled references. Do not use it for Web, Android, Flutter, or React Native. Example: Context: A developer is learning the engine model user: "Explain the CE.SDK block hierarchy in Swift." assistant: "I will explain the model with Swift examples and the correct module scope." Example: Context: A Catalyst developer needs architecture advice user: "How should I build an editor UI for Mac Catalyst?" assistant: "I will explain the engine-backed custom UI architecture and platform limitation."
-
nexu-io Bundle Live Dashboard 2Notion-style team dashboard rendered as a Live Artifact. A single-page, self-contained HTML dashboard with KPIs, a 7-day sparkline, a real-time activity feed and a linked-database task table — wired to Notion via the Composio connector catalog. Refreshes on demand and when the artifact is opened. Falls back to seeded mock data when no connector is bound, so it works offline / in screenshots / in the picker preview.
-
imgly Bundle Docs 2Look up Android guides and Kotlin API signatures for CE.SDK Android projects using Kotlin and Jetpack Compose. Use it for first-party CreativeEditor SDK guidance, Gradle setup, Compose integration, direct engine workflows, and bundled Android references. Prefer the bundled Dokka digests and guides, then resolved project symbols. Do not use it for Web, Swift, Flutter, or React Native. Example: Context: An Android developer needs an engine method signature user: "What does BlockApi.create return in Kotlin?" assistant: "I will check the bundled Android API digest for the exact declaration." Example: Context: A Compose project needs editor setup guidance user: "How do I configure the CE.SDK Editor composable?" assistant: "I will use the Android configuration guide and API digests."
-
superset-sh Bundle Page 2Build and publish a self-contained HTML page to Superset, then answer the comments readers pin to it. Use when the user asks to make or publish a page, turn a report, dashboard, chart, doc, or analysis into a shareable link, update or re-version a page already published, or work through comments left on one, including "make me a page for this", "publish this as a page", "share it as a link", "add a version", "address the comments on that page".
-
qwenlm Bundle Cua Driver 2Drive a native GUI app (macOS, Windows, Linux) via the Qwen Cua Driver CLI (default) or MCP server; snapshot its accessibility tree, act through snapshot-bound element tokens, native menu paths, exact window geometry, or pixel coordinates, and verify from fresh state. Use when the user asks you to operate, drive, automate, or perform a GUI task in a real application on the host.
-
mohitagw15856 Skill Architecture Client Presentation 2Present a design to a client so they can make a decision rather than react to a picture — the brief restated, the moves explained against it, the options with their trade-offs, and a specific decision requested. Use when asked to present a design to a client, prepare a design review meeting, present concept options, or when a client keeps changing their mind after sign-off. Produces the presentation structure, the brief-to-design traceability, the options with honest trade-offs, the cost and programme position, and the decision record that makes sign-off stick.
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 cursor-digest, wordpress-page-builder, project-status-tracker. 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.