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.
-
kadajett Skill BitecsComprehensive guide for using bitECS v0.4.0, a flexible, minimal, data-oriented ECS library for TypeScript. Use when building games or simulations with Entity Component System architecture, creating entity hierarchies, defining components, querying entities, or working with serialization.
-
kalilfagundes Bundle Design System ExtractorSpecialized skill for reverse-engineering Design Systems from websites. Uses Python pre-processing to extract design tokens without hitting token limits, and generates complete HTML documentation using real fragments and images from the original site.
-
kappaemme-git Bundle App Store Review GuardianAudit iOS, iPadOS, and visionOS apps before App Store submission by checking the repository, built-app evidence, App Store metadata, privacy disclosures, permission usage, reviewer access, external dependencies, payments, authentication, account deletion, and common App Review risks. Use for Swift, SwiftUI, UIKit, React Native, or Expo projects when Codex needs to prepare for Apple review, investigate likely rejection causes, review metadata or notes, create a reviewer walkthrough, or generate an evidence-linked APP-STORE-REVIEW-REPORT.md and pre-submission checklist directly in Codex.
-
kappaemme-git Bundle Design AuditEvaluate website, web app, landing page, or frontend implementation quality with a structured design audit and scoring grid. Use when Codex is asked to review UI design, visual hierarchy, UX, responsiveness, accessibility, performance perception, copy clarity, frontend polish, or to produce a design/frontend evaluation rubric for a URL, localhost app, screenshot, repository, or live page. Also use for re-audits that compare before vs after changes, track score deltas, and verify whether prior design/frontend issues were fixed.
-
kappaemme-git Bundle Codex Phone LabBuild and iterate mobile apps that run on a real phone through Expo/React Native live preview. Use when Codex is asked to create a phone app, prototype an iPhone or Android app, run an app on a physical phone, show a QR code for Expo Go, set up a mobile dev workflow, or turn a prompt into a live mobile app without starting from Xcode/TestFlight/App Store distribution.
-
karanb192 Bundle Pvr Inox RadarFind and map PVR INOX movie showtimes anywhere in India. Use when the user wants movie showtimes, PVR or INOX shows, IMAX near me, movie tickets on a map, seats together for a group, recliners near me, cheapest recliner seats, what to watch tonight, or asks things like "Dune in IMAX Saturday night, 4 seats together, under 30 minutes from Sector 56 Gurgaon" or "what recliners are available near me tonight, 2 seats together, cheapest first". Renders one self-contained HTML map: cinemas as pins, showtime chips colored by availability, exact seats-together counts, travel-time labels, and every chip deep-linking into PVR's own seat-selection page. Read-only and personal-use: it never books; the user buys on pvrcinemas.com. Covers about 116 Indian cities (Gurgaon, Delhi, Noida, Mumbai, Bengaluru, and more) and formats like IMAX, 4DX, ATMOS, LASER, PLAYHOUSE, DIRECTOR'S CUT, INSIGNIA.
-
karanb192 Bundle Slack Message FormatterFormat messages for Slack with pixel-perfect accuracy. Converts Markdown to rich HTML (for copy-paste into Slack) or Slack mrkdwn (for API/webhook). Use when the user asks to write a Slack message, announcement, or notification, format something "for Slack", preview how content looks in Slack, or send a message via Slack webhook. Also trigger when user mentions Slack formatting, mrkdwn, or wants to share Markdown content in Slack channels.
-
karlomikus Skill Vue3 ArchitectureGenerate Vue 3 Composition API code following this project's functional-core/imperative-shell architecture. Use for new features, components, composables, or API endpoints.
-
karolkozer Bundle PlanbyBuild and edit schedule / timeline / agenda / planner / booking-grid / program-guide UIs with planby (open source) in React — any "rows x time" layout: conference and event agendas, festival line-ups, class and shift schedules, room and resource booking grids, project timelines, streaming line-ups, and TV guides / EPGs. Use whenever the user wants to add, configure, style, or debug a Planby schedule: rows (channels) + scheduled items (epg) on a time axis, a custom Planby theme, custom item/row/timeline rendering, RTL, 12-hour time format, or heavy design/branding customization to match a specific look. Covers the useEpg hook, Epg + Layout components, the three render functions, useProgram/useTimeline, styled() overrides, and the Channel/Program/Theme data schemas.
-
kash-123 Bundle Cinematic Scroll LandingBuild dark, cinematic, awwwards-style landing pages with seamless scroll choreography — endless/infinite scroll loops, pinned image-morph galleries, book page-flip feature sections, full-page book sites, cross-dissolve scene transitions, unified AI-generated imagery, film-slate section markers. Use when the user asks for an "endless scroll", "infinite scroll", "seamless scroll", "cinematic", "movie-like", "page-flip", "flipbook", "book landing page", "book-style scroll", "morphing images" landing page, or references sites like activetheory.net, or complains that an existing scroll experience feels disjointed ("sections don't flow", "images feel unrelated"). Stack: React 19 + Vite + Tailwind + GSAP ScrollTrigger + Lenis.
-
kcchien Bundle Crisp ReadingCRISP Reading — AI 深度閱讀夥伴。Comprehend · Review · Internalize · Synthesize · Practice。 整合 Adler 分析閱讀、樊登 TIPS 拆書法、RIA 拆書幫、 Zettelkasten、費曼技巧、Self-Explanation、Steel-Manning。 分析書籍並產出互動式 HTML 閱讀報告。 Use when: (1) 使用者提到「讀這本書」「分析這本書」「幫我讀」「這本書值不值得讀」 "analyze this book" "book review" "book summary" "reading notes" "what's this book about" "deep reading", (2) 要求書籍評估、讀書筆記、閱讀報告, (3) 提到 CRISP、CRISP Reading、深度閱讀。 Not for: 純粹的文件摘要(沒有閱讀意圖的「幫我總結這篇」)、 學術論文的系統性文獻回顧(Systematic Review)、速讀技巧訓練。
-
kcy4334-lgtm Bundle Translate BookTranslate books (PDF/DOCX/EPUB) into any language using parallel sub-agents. Converts input -> Markdown chunks -> translated chunks -> HTML/DOCX/EPUB/PDF.
-
keejkrej Bundle SolidjsUse when writing, reviewing, debugging, or testing Solid applications and libraries that use `solid-js`, `@solidjs/router`, `@solidjs/start`, or `@solidjs/meta`; covers fine-grained reactivity, components and props, stores, resources, routing, server functions, SSR and hydration, metadata, and Solid component tests.
-
keluojun Bundle Market Debrief CnA股收盘后深度日报自动生成工具。自动采集当日行情数据(AkShare)和新闻事件(Tavily), 通过多 Agent 并行分析架构(宏观+情绪 / 板块+资金 / 技术+估值+预判), 生成一份带量化锚点和独立判断的交互式 HTML 日报。 固定 Financial Times 三文鱼粉风格,6个分析模块 + 顶部仪表盘横条。 当用户提到以下内容时触发:「A股日报」「市场复盘」「盘脉日报」「A股复盘」「今日市场分析」 「跑一期日报」「生成日报」「做今天的复盘」,或指定日期如「帮我做2026年3月11日的日报」。
-
keluojun Skill Code Review DebugThis skill should be used when the user encounters "API response truncated", "JSON parse error", "network fetch failed", "ECONNRESET", "port already in use", "UI content overflow/hidden", "LLM output incomplete", or needs guidance on debugging web applications, fixing common JavaScript/CSS issues, or reviewing code quality.
-
kemezz Bundle Spec To Readable HTMLTransform Markdown or text specifications into human-readable HTML documents with summaries, reordered structure, visual explanations, diagrams, charts, and traceability to the source. Use when asked to convert a spec, requirements document, API spec, product spec, design doc, or technical document into readable HTML, especially when the user wants summarization, restructuring, diagrams, graphs, images, or visual aids rather than a literal Markdown-to-HTML conversion.
-
keplergl Bundle Kepler GlCreate interactive map visualizations and export to standalone HTML using the keplergl Python package. Use when the user wants to create maps, visualize geospatial data, plot locations on a map, or generate HTML map files from DataFrames, GeoDataFrames, GeoJSON, or CSV data with coordinates.
-
kernelshreyak Bundle Data Analysis WorkflowUse this skill when the task is open-ended analysis of local files or mixed data sources in this repository, especially CSV, XLSX, PDF, DOCX, PPTX, JSON, text, HTML, XML, or folders of related evidence. It provides the default workflow, helper scripts, and output conventions for reproducible data exploration in Codex.
-
kesslerio Bundle Frontend Design ProWrapper skill that composes design guardrail skills with the frontend-design-ultimate generation workflow. Supports four composition modes for new UI, soft/luxury, minimalist/editorial, and redesign scenarios.
-
levynir Bundle RtlDisplay Hebrew, Arabic, and Persian/Farsi responses as an inline HTML artifact with RTL layout. Trigger whenever the user writes in or asks for Hebrew, Arabic, or Persian/Farsi.
-
lewes2 Bundle ArchpresentTurn a codebase into interactive architecture diagram as a single HTML file: four levels of drill-down, hover a port to see what the interface actually carries, hover an inventory row to see the real source snippet, and play back representative end-to-end scenarios. File/class/function inventories are extracted from source by machine and re-checked against the source line by line, so they cannot drift. Use when the user asks to analyze a codebase in depth, explain or summarize a project's architecture, draw an architecture diagram, map modules and call relationships, or visualize system structure. Example triggers: "analyze all the code in this project", "explain this project's architecture", "summarize this software architecture", "visualize this repository's architecture", "draw the C4 diagram". The only deliverable is one HTML file.
-
leynier Bundle ClitgOperate a Telegram user account through the structured clitg CLI. Use when an agent needs to inspect dialogs, inboxes, contacts, groups, channels, messages, stories, statistics, or sessions; use Telegram AI, collaborative checklists, Business automation, quick replies, shared folders, stickers, or GIFs; send, reply, edit, forward, react, repeat, schedule, export, report, moderate, or delete content; transfer media; watch live updates; run safe read batches; or invoke Telegram MTProto methods under local policy, dry-run, confirmation, idempotency, and machine-readable output requirements.
-
lhfer Bundle Xiaohongshu Analyzer「小红书追求策略顾问」—— 当用户想追一个人时,给出目标对象的小红书主页链接, 通过 Claude in Chrome 深度浏览并分析其公开内容,生成一份包含社会画像分析和 个性化追求策略路线图的交互式 HTML 报告。 当用户提到「分析这个人的小红书」「我想追这个人」「帮我看看这个博主」 「分析一下TA的账号」「给我出个追求方案」「想认识这个人怎么搭话」 「小红书用户分析」「怎么接近这个人」「社交策略」时,使用此 Skill。 也适用于纯画像分析场景(不带追求目的),此时跳过策略部分只输出画像报告。 需要 Claude in Chrome 浏览器工具。
-
lian-yang Bundle Gotcha SummarizerAutomatically summarizes technical lessons learned from conversations into docs/gotchas/. Supports 18+ programming languages with confidence scoring. Use at the end of conversations to capture: (1) Frontend/Backend bugs and root causes, (2) Framework issues (React/Vue/Next.js/Nuxt/Databases/APIs), (3) Code quality improvements (precision, caching, concurrency, etc.), (4) Performance optimization insights, (5) Testing/CI/CD/Git issues, (6) Any technical lessons worth documenting. Features: three-layer classification (Domain → Category → File), fuzzy duplicate detection, i18n support (zh/en), multi-code block grouping, error tracking statistics.
-
liliane0310 Bundle Resume Optimizer简历优化与HTML生成助手。用户提供简历文件(PDF/Word/TXT)+ 目标岗位JD(文字或截图), Skill自动分析JD核心要求、按STAR法重写简历内容、输出专业商务风HTML简历文件。 支持上传证件照,自动嵌入简历右上角。 触发词:简历优化、简历改写、简历生成、Resume、CV、求职简历、简历美化、 岗位匹配简历、帮我改简历、帮我写简历、根据JD改简历。
-
lilimozi Bundle University Info全国大学生活质量数据库 + 大学生人格测试。两大功能:(1) 查询 3461 所高校的真实生活条件——宿舍、食堂、空调、校园网、断电断网、独立卫浴、跑步打卡、假期长度、外卖、门禁等 25 个维度的多届学生真实回答。支持按学校名查询、按省份浏览、按生活条件反向筛选。(2) UNTI 大学生活人格测试(16 型人格,12 道题),当用户想做大学相关测试、人格测试、或问「我上大学会变成什么样」时,将 assets/UNTI-测试.html 交付给用户。Trigger: 大学生活, 宿舍怎么样, 上床下桌, 空调, 校园网, 断电断网, 独立卫浴, 食堂, 洗衣机, 早八, 跑步打卡, 寒暑假, 小学期, 外卖, 门禁, 大学条件, 学校条件, 大学人格测试, UNTI, 大学生人格, 大学测试, university life, dorm, campus.
-
limingfa Skill Prototype GeneratorGenerates admin/list prototypes from requirements. Supports mountListPage-style frameworks (e.g. kfk-mock-ui), standalone HTML, or project-specific setups. Use when user wants to create a prototype, generate prototype from requirements, add list pages, or says "根据需求生成原型" / "自动生成一套原型" / "创建原型".
-
limouren2000 Bundle Paper Read Brief将论文整理成中文速读精要。用于用户给出 arXiv、PDF、论文网页、HTML、截图或论文文本,希望得到比摘要更可靠、比 paper-read 完整精读更短的版本:沿原论文每个章节和小节提取最核心、最重要的观点、方法机制、图表公式要点和关键结论;实验部分只压缩提炼实验目的、关键结果和作者想证明的结论,不逐表逐数字细讲,只有实现步骤或设置细节影响理解时才提炼。
-
lingyichen-ai Bundle Multi Chart Draw支持多种图表类型的绘制工具,包括思维导图、流程图、数据可视化图表、数学函数图等;可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表,并导出为 PNG、SVG、HTML 等格式
-
lionad-morotar Bundle Tool UI VueHelp developers use the tool-ui-vue (VTU) Vue 3 component library. TRIGGER this skill whenever the user asks about: - tool-ui-vue, VTU, or Vue Agent UI components - how to build tool-call widgets, chat cards, or interactive AI outputs - copying or integrating components from the monorepo - i18n, theming, or schema usage inside tool-ui-vue - which component to use for a specific scenario (maps, charts, social posts, code blocks, etc.) - styling issues with VTU components - headless states, JSON-driven rendering, or the renderer package
-
lirantal Bundle Nodejs CLI Best PracticesGuide and audit Node.js CLI application development against 41 established best practices covering UX, distribution, interoperability, accessibility, testing, error handling, development setup, analytics, versioning, and security. Use this skill when building, extending, reviewing, or scaffolding a Node.js CLI — including when someone says "audit my CLI", "review my CLI code", "I'm building a CLI tool", or asks about adding argument parsing, help output, shell completion/autocomplete, error handling, color output, STDIN, --json flags, exit codes, --version flags, or npm publishing. Applies even when best practices are not explicitly mentioned. Also trigger for "how should I implement X in my CLI" or "what's the right way to do Y in a Node.js CLI". Do NOT use for Node.js backend or API development with no CLI entry point.
-
lisniuse Bundle Taoguba CrawlerThis skill should be used when the user asks to "crawl taoguba", "crawl tgb", "scrape taoguba articles", "run the crawler", "crawl bbs", "crawl home page", "generate article HTML", or needs to run the Taoguba (tgb.cn) web crawlers.
-
litiumab Bundle Litium DeveloperHelp Litium partner developers build, configure, and deploy e-commerce sites and backoffice UI extensions. Use for React Accelerator (Next.js, GraphQL, blocks, cart, checkout, wishlist), MVC Accelerator (.NET Razor views, controllers, view models, client builds), local setup, Litium Cloud deployment, data modelling and product fields, Litium Admin, Storefront GraphQL, Connect, and Extension Management APIs, or forum.litium.com solutions. Covers @litiumab/platform-extension-sdk extensions in React, Vue, Angular, or Vanilla: scaffolding, extension.manifest.json, window.litiumExtension, sub-path routing, IIFE/Vite builds, testing, installation, and deployment. Triggers: build Litium site, create Litium project, product field, block, accelerator, Litium API, wishlist, cart, placeOrder, custom field, backoffice extension, platform-extension-sdk, UI extension, panel, or settings page extension.
-
liuguanyi2125 Bundle PPTX生成真正可编辑的 PowerPoint / PPTX,把 AI 生成的 PNG 格式 PPT 页面重建为可编辑 slide, 以及把 chart page / figure plate 先走 HTML→PNG 再嵌入 PPTX 的可编辑交付流程。 当用户要求可编辑 PPT、可编辑 PPTX、PNG 转可编辑 PPT、图片 PPT 转可编辑、 原生对象分层、分图层 PPT,或希望把主题、大纲、笔记、文章、粗略想法、PNG 幻灯片截图 转成文字、形状、图表、表格、图标和图片都能分别选中的分层 `.pptx` 时使用。
-
liumengxuan04 Bundle Shushu Internship ToolUse when an AI assistant helps computer-industry internship candidates with 鼠鼠实习妙妙工具 quickly turn a target job description into a resume-ready and interview-ready project across backend, frontend, full-stack, mobile, testing, data engineering, cloud/DevOps, security, systems, or AI/ML roles: finding GitHub projects, auditing codebases, choosing a fast run path, planning local or remote environments, designing practical modifications, writing STAR resume bullets, drilling interview Q&A, explaining core code, and generating presentation prompts.
-
liumengxuan04 Skill Vibe Resume EditorUse when editing VibeResume templates, converting resume facts and target roles into polished one-page or two-page HTML resumes, and validating the generated PDF.
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 bitecs, design-system-extractor, app-store-review-guardian. 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.