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.
-
joellewis Skill New ComponentScaffold a new Svelte or Astro component in the correct category directory with appropriate boilerplate
-
joeseesun Bundle Qiaomu App ReviewUse when a user wants to analyze App Store reviews, mine product opportunities from user comments, compare competitor pain points, generate durable review insight reports, or create local HTML/Markdown evidence pages without relying on a hosted website or a specific LLM provider.
37 -
joeseesun Bundle Qiaomu Chart Report将文本、Markdown、CSV/JSON/表格数据、研究材料或统计结果制作成自包含 HTML 可视化网页、数据故事和统计报告,并渲染为经过检查的桌面端与移动端 PNG 截图。适用于“生成 HTML 报告”“把数据做成网页”“统计报告可视化”“网页化分析”“做一个清晰表达的单页网页”“有趣/高级图表”“桑基图、旭日图、蜂群图、山脊图、弦图、排名变化图”“HTML dashboard/report”“生成网页和截图”等请求。内置离线 Apache ECharts 与 D3、可复用复杂图表 recipes、事实可追溯、结论先行、图表语义选择、编辑式信息层级、响应式降级和真实浏览器截图。不要用于完整网站/应用开发、营销落地页、HTML 封面/信息卡、幻灯片、仅分析数据而不需要网页交付,或只截取现有网页。
37 -
joeseesun Bundle Qiaomu HeavyskillDeep multi-perspective reasoning via parallel isolated subagents + Codex deliberation host, with final Markdown + HTML + PDF report output. Use for complex questions, tech decisions, social topics, architectural choices, hard analysis, or any question worth thinking harder about. Triggers include 深度分析, 多角度推理, 验证答案, heavyskill, think harder, 让我们深入思考, 推敲一下, 讨论一下, 分析利弊. Do not use for simple factual lookups or routine tasks.
37 -
joeseesun Bundle Qiaomu Learning用苏格拉底式逐问学习把教材、截图、PDF、笔记、题目或一个主题变成主动推导对话,也能在学习者明确要求时生成自包含的互动学习网页。Use when the learner明确要求“苏格拉底式学习”“逐问带我学”“一次只问一个问题”“先别告诉我答案”“边问边引导我推出来”、interactive quiz、active recall、question-led tutoring or a self-contained learning page。宽泛主题默认先进入关键词定向:列出 12 个关键词及白话解释,推荐专家和专业书籍,并提供“扩展关键词”的入口,再让学习者选起点。正式学习中每个活跃回合只问一个简短、可回答的问题,并根据学习者上一步的推理调整难度;回答要接住学习者原话,像真人老师一样温和纠错,并在数学、物理、流程或图形内容中用累积黑板逐步画出推理。对视觉密集主题每 1–2 个有效问题做一次视觉检查,但只有视觉收益、问题承载、授权和准确性条件同时满足时才调用 Codex 生图;学习者说“太抽象”“不理解”“想象不出来”“枯燥”或要求图解,且当前台阶可视觉化时,必须立即切换为问题承载型图示并提供文字替代,空间、相对运动、流程和几何关系默认优先视觉搭架。网页模式不依赖另一个 skill、第三方运行时或默认部署;默认输出单文件、响应式、可访问的 HTML 学习容器,并保持一轮一个问题。不用于只要直接解释、摘要、翻译、代做/解题、批量出题、评分、写苏格拉底对话或单独生成图片的请求;用户要求停止提问或直接给答案时立即退出苏格拉底模式。
37 -
joeseesun Bundle Qiaomu Model CLICall local Grok CLI, Kimi Code CLI, and Claude Code CLI with the strongest current default models and native tools. Use this qiaomu skill workflow when the user wants to run Grok 4.5 for X/web search, image/video generation, research, or multi-tool agent work; run Kimi K3 (1M) for frontend UI/CSS/React/Vue work; run Claude Fable 5, Opus 4.8, or Sonnet 5 for coding/review/refactors; run independent multi-model comparisons concurrently with native stream progress, artifact verification, private logs, cancellation, and failed-job retry; choose between the three CLIs; or wrap non-interactive CLI invocations. Trigger on phrases like "用 grok cli", "用 kimi cli", "grok 搜 X", "kimi 写前端", "qiaomu-model-cli", "调用 grok4.5", "调用 k3 1m", "用 claude code", "用 fable 5", "opus 4.8 改代码", "分别调用三个模型", "多模型横评". Not for generic cloud API registry management (use qiaomu-llm) or OpenCLI site adapters.
37 -
joeseesun Bundle Qiaomu Ppt乔木 PPT 技能(qiaomu-ppt skill workflow)。用于中文优先、资料有据的 PPT/PPTX/PowerPoint/slides/slide deck/课件/演示文稿策划、路线判断、内容/文案/标题优化、可编辑 PPTX 生成、演讲备注/教师备注和交付验证;URL/PDF/论文/微信/宽泛主题转 PPT、自动推荐设计风格/模板、HTML deck、NotebookLM 原生 deck 和 Keynote 都是按需路线包。
37 -
joeseesun Bundle Qiaomu Tldraw SkillOfficial-first Qiaomu tldraw creation skill and workflow for building, editing, recreating, scripting, linting, testing, migrating, and packaging tldraw canvases or tldraw SDK apps with the official CLI and official LLM-friendly documentation. Use when the user asks to 画 tldraw、复刻成可编辑画布、制作流程图/信息图/课件、 创建交互或动画画布、写 custom ShapeUtil/document script、检查 .tldraw 文件, or scaffold and migrate a tldraw React application using official sources only.
37 -
joeseesun Bundle Qiaomu Word Card生成复古纸张质感的词语卡片 / 短句卡片 / 词典风海报。 自动识别输入类型(中文词、英文词、成语、双语术语、短句引语),灵活组装内容区块, 生成 HTML 后 Playwright 截图输出 PNG。适合分享到微信、X、小红书。 触发词:"词语卡片"、"单词卡片"、"词卡"、"复古词卡"、"词典风卡片"、"把这个词做成卡片"、 "把这句话做成复古卡片"、"小众词语卡"、"vocabulary card"、"word card"、"retro quote card"、 "词汇海报"、"每日一词卡"、"成语卡片"。
37 -
johnisanerd Bundle Apify Icims Jobs APIPull live job postings from any iCIMS career site with the Apify iCIMS Careers API Actor (johnvc/icims-careers-api). iCIMS ships no public read API for postings, so this is the icims api most teams end up needing. Give it a career-site URL or just a company name and get structured rows back, each with title, the employer's own requisition id, organization, locations, employment type, posted and updated dates, salary when published, description as text or HTML or markdown, and the apply link. It covers both public iCIMS surfaces, the classic careers-tenant.icims.com portals and the modern iCIMS career sites hosted on the employer's own domain, and works out which one a company uses on its own. Use when the user wants iCIMS jobs, an ats api for recruiting or market data, job data for a board or aggregator, or to scrape job postings from a career site. Pay per job returned, MCP-ready for Claude and other AI agents.
-
johnisanerd Bundle Apify Paylocity Jobs APIPull live jobs from any Paylocity recruiting board with the Apify Paylocity Jobs API Actor (johnvc/paylocity-jobs-api). Returns job rows as JSON: title, company, board GUID, department, full street address with city, state and ZIP, remote flag, published date, apply URL, the employer's own published pay as flat salaryMin, salaryMax, salaryCurrency and salaryPeriod columns, and the description as source HTML plus optional Markdown or plain text. Takes Paylocity board GUIDs, recruiting.paylocity.com URLs, or company names; filters by title, department, location, remote and employment type before billing; newerThan turns a daily schedule into a new-postings feed. Use when someone wants paylocity jobs data, a paylocity jobs api, to scrape a Paylocity career site or recruiting board, paylocity salary data, or postings from any employer that hires through Paylocity. No API key, billed per job delivered, and MCP-ready for Claude and other AI agents.
-
khanhhuyenngo985-sys Bundle Animation CraftUse when creating, refining, or reviewing animation videos, animated shorts, storyboards, animatics, AI-video shots, character performance, scene timing, camera motion, action beats, continuity, editing rhythm, sound cues, or image-to-video prompt plans for Seedance/即梦/可灵/海螺 style workflows. Do not use this as a frontend/UI motion skill unless the user explicitly asks for interface animation.
-
khemratechconsulting Bundle Github Actions SetupSets up automated CI/CD with GitHub Actions for any project in one pass. Intelligently auto-detects language (Node.js, Python, Go, Rust, Docker, Java, Ruby) and architecture (Frontend web apps vs Backend APIs/microservices). Generates production-ready workflow files for AWS, Vercel, Cloudflare, Railway, Render, or SSH servers with OIDC security and Dependabot. Can also install itself as a local IDE skill for Claude Code (.claude/), Cursor/Copilot/Gemini (.agents/), Antigravity (.agent/), or Windsurf (.windsurf/). Trigger whenever the user asks to "set up GitHub Actions," "add CI/CD," "configure a github workflow," or asks how to automate testing and deployment.
-
kimberw Bundle WallePersonalized 1-on-1 AI tutor using Bloom's 2-Sigma mastery learning + Gabriel Petersson's top-down methodology + adaptive personalization. Starts with real projects, recursively fills gaps, builds intuition through AI-driven explanation loops, and continuously improves teaching based on student profile. Guides users through any topic with Socratic questioning, adaptive pacing, and rich visual output (HTML dashboards, Excalidraw concept maps, generated images). Use when user wants to learn something, study a topic, understand a concept, requests tutoring, says 'teach me', 'I want to learn', 'explain X to me step by step', 'help me understand', or invokes /walle. Triggers on: learn, study, teach, tutor, understand, master, explain step by step.
-
kingbootoshi Skill Diff ReviewHand a finished session's git diff to Saint's phone for a full-screen, Tinder-style swipe review, then act on his verdict. This is the mobile diff reviewer — it supersedes the old HTML-page diff-review. Fire after you finish an implementation pass in a repo, or when Saint says "diff review", "$diff-review", "review changes", "review the work", "review this on my phone", "mobile review", "send it to review", "let me approve the diff", or "swipe review". Surfaces a URL + scannable QR, blocks until Saint approves or flags each file, then reworks only the flagged files using his per-file note verbatim and leaves approved files untouched.
-
kkur0same Bundle YomitokiTurn a research paper into a faithful, technical, code-augmented HTML reading note.
-
knight6669 Bundle Knight HTML Ppt SkillHTML PPT Studio — author professional static HTML presentations in many styles, layouts, and animations, all driven by templates. Use when the user asks for a presentation, PPT, slides, keynote, deck, slideshow, "幻灯片", "演讲稿", "做一份 PPT", "做一份 slides", a reveal-style HTML deck, a 小红书 图文, or any kind of multi-slide pitch/report/sharing document that should look tasteful and be usable with keyboard navigation. Triggers include keywords like "presentation", "ppt", "slides", "deck", "keynote", "reveal", "slideshow", "幻灯片", "演讲稿", "分享稿", "小红书图文", "talk slides", "pitch deck", "tech sharing", "technical presentation".
-
koisama0411 Bundle Act Combat Design二次元 / 动作游戏(ACT)战斗设计专家方法论 + 行业知识库。用户说"设计 XXX 角色"/"做 XXX 战斗设计"/"配 XXX 角色玩法"/"设计 XXX boss"/"设计 XXX 怪物"/"战斗策划专家"时触发。产出可给策划 / 美术审阅的战斗设计文档(markdown 或 HTML),覆盖玩家角色与怪物 Boss。本方法论**不预设任何具体战斗体系**——招式集 / 分类轴 / 视觉预警 / 受击状态 / 配队 / 养成等由你的项目自己定义(见 conventions/TEMPLATE.md);内置角色原型库、Boss 范式库、46 条元规则、跨游戏借鉴库(70+ 游戏)、打击感 / 数值 / Boss AI 工程基线。Anime/action-game combat design expert: methodology + industry knowledge base, project-agnostic.
-
kong Bundle Theme CreationUse this skill whenever the user wants to create, add, author, or scaffold a new theme for the @kong/design-tokens package — including phrases like "add a new theme", "create a new theme", "make a dark/light theme", "I need a new theme for Kongponents", "a new data-kui-theme", "match this screenshot/mockup", "make our theme look like this site/URL", "here are our brand colors", "port/emulate an existing theme", "make a theme like One Dark Pro", or "match this VS Code/editor/terminal theme". Also use it if the user wants to modify how an existing theme relates to design tokens (semantic vs component tokens, color aliases/palettes) as part of building a new one, or supplies a screenshot, mockup, reference URL, brand guideline, or the name of an existing published theme (editor, terminal, or otherwise) as the basis for a theme's look. Make sure to trigger this even if the user doesn't say "design-tokens", "Style Dictionary", or "theme" explicitly — a request to reskin, rebrand, or restyle the product to match so
-
kong Skill Convert Cypress To Vitest ComponentConvert Cypress component tests (*.cy.ts) to Vitest Browser Mode tests (*.browser.spec.ts) in the Kongponents library. Use this whenever the user asks to convert, migrate, port, or rewrite component tests from Cypress to Vitest, names one or more component folders under src/components to convert ("do KBadge and KAlert next", "convert KTable"), asks to continue or resume the Cypress-to-Vitest migration, or mentions Vitest browser mode for component tests. Use it even when the user never says "Cypress" or "Vitest" — a request to migrate, port, or redo the tests for a named Kongponent is this skill.
-
kong Skill CLI HTML PreviewRender proposed CLI/terminal output (colors, tables, status lines, TUI reports) as a standalone HTML file and open it in the browser, so the user can review a styling/output design before it is implemented. Use whenever the user asks to "show me what the CLI output would look like", "preview the colored output", "mock up the terminal output in a browser", or wants to eyeball a color theme / table layout before code is written.
-
kongyo2 Bundle Aistudio Spec BuilderCreates high-quality specification documents for Google AI Studio's app builder. This skill should be used when users want to create or refine specifications for React + TypeScript web applications that will be built using Google AI Studio's Build feature. The skill guides users through requirements gathering, functional decomposition, UI/UX design, and produces structured specifications without any code, using only natural language instructions.
-
kongyo2 Skill Kongyo TS React DoctorTypeScript React プロジェクトで react-doctor を使うときに使う。React の変更後、レビュー前、バグ修正後、品質確認時に適用する。最初の行動は必ず `npx -y react-doctor@latest . --verbose` をリポジトリルートで実行すること。診断結果は参考情報として扱い、不完全な実行を明示し、修正はローカルのコード文脈に照らして必要なものだけ行う。
-
konippi Bundle Servo FetchFetch and render web pages using the Servo browser engine — a single binary with JS execution, CSS layout, screenshots, and content extraction. Use when a URL returns empty or incomplete content with plain HTTP fetch, when you need a screenshot without GPU, or when you need to run JavaScript in a page context. No browser download required.
-
konradcinkusz Bundle Session ReportAnalyze and visualize a coding-agent session from its own session data: tokens billed and cache behaviour, wall-clock per turn, reasoning-vs-tool- execution time, who-said-what asymmetry, silent tool-call runs, and a self-contained HTML timeline of every prompt, tool call and reply. Use this whenever the user asks what a session cost or consumed, how many tokens something used, how long the work took, what actually happened in this or an earlier session, or wants a session summary, retro, report, stats, timeline or visualization of the conversation — even phrased casually ("how many tokens did this use?", "sum up this session", "show me what you did"). Works under Claude Code from its ~/.claude/projects JSONL transcript, and under other agents from whatever session data they expose. Prefer this skill over hand-parsing transcripts: it already handles the formats' traps.
-
konraddzbik Bundle Architecture DiagramBuild interactive, click-through architecture diagrams for software systems — a self-contained single HTML file with animated step-by-step flows, mode toggles (dev/prod, offline/online, v1/v2), dark/light theme, and a side panel with payload details, plus a companion markdown description. Use when the user wants to visualize or design a system: architecture diagram, service map, data flow, RAG/agentic flow, microservices topology, integration diagram, CI/CD or data/ETL pipeline, multi-agent system, or onboarding diagram — or to design a new service's flows before building. Natural-language triggers: 'I'm building X, what should the flow look like', 'pokaż jak działa system', 'diagram architektury', 'wizualizacja systemu', 'klikany diagram'. Do NOT use for static diagrams that belong inline (Mermaid/PlantUML), slide decks, or printable/PDF handouts — this produces interactive HTML for browser consumption.
-
krzysztofdudek Skill GrainAsk the repository about its own conventions BEFORE writing code. Use whenever you are about to create a source file, add a class/function/handler/command/component/test, are unsure where something belongs, or want to know how a kind of change has been done here before — `grain where <intent>` names the directory, the group and the exemplar to copy; `grain obligation <path>` names what a new file there has historically had to come with; `grain how <intent>` cites the past commits that did something like it; `grain what <words>` reports what a concept already is here; `grain check <file>` shows where your change departs from the local norm; `grain completeness <file>` names co-changing files before you call a change done; `grain propose` mines a whole proposed Yggdrasil architecture graph for a repository that has none. Statistical answers from this repo's code and full git history; tells you which exemplar to open, never blocks.
-
kevintsai1202 Bundle Exam System ProjectProject-specific workflow for the Exam System repository. Use when working in this repo to follow its required order: read docs, update spec/api/todolist first, implement frontend or backend changes on Windows PowerShell, validate with the correct build/test commands, then commit, push, and prepare a release report.
-
keykovar Bundle Fe Code ReviewReview frontend or hybrid app code changes. Use when the user asks to review a current diff, uncommitted or staged changes, a commit, branch range, PR, risky feature, release change, naming, file placement, simplification, regression risk, frontend-specific risk, or fixes made after a previous review. Default to read-only review. Use Quick Review for normal changes, Deep Review for large or risky changes, and Fix Review to verify previous findings and detect regressions introduced by their fixes. Detect React, Vue, TypeScript, JavaScript, and Hybrid/WebView projects and load only the relevant references.
-
keylimesoda Bundle Visual ExplainerGenerate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
-
keymessagesstudio-design Bundle EnloopALWAYS use on EVERY user message, no keyword needed. Rebuild whatever the user typed into a high-performance prompt with an 8-move engine, then run it as a BOUNDED LOOP in the same turn: generate, grade against the spec as an adversarial checker, refine or stop. Declares a success condition AND a separate stopping condition before iterating, because a loop that exits is not a loop that worked. Max 2 refine passes, no-progress streak halts, ships with open items named. Switches to OUT-LOOP mode when the task is recurring, scheduled, autonomous, or multi-session ("ทุกเช้า", "ให้มันทำเอง", "อัตโนมัติ", "จนกว่าจะเสร็จ", automation, agent, cron) and emits a five-component loop spec instead of a one-off answer. -EX mode delivers the prompt only, on explicit signal ("-ex", "ขอ prompt อย่างเดียว", "ยังไม่ต้องรัน"). Never distort intent, always disclose assumptions and pass-to-pass changes, finish in one turn. Block and answer in the user's language, default Thai.
-
kgraph57 Bundle Claude Code DoctorUse when the user asks to audit, diagnose, or health-check their Claude Code setup, wonders where their context/tokens go, or invokes /doctor. Runs a read-only audit across 10 domains (directory structure, dev repos, CLAUDE.md hierarchy, settings & permissions, skills, commands, subagents, MCP & plugins, automations & git, usage & disk) with parallel subagents, triages findings on an impact-x-effort matrix, and renders an HTML dashboard with A-E grades, red flags and a paste-ready action plan. Zero changes until the user approves each fix. Triggers: '/doctor', 'audit my claude code setup', 'setup audit', 'health check my setup', 'claude code doctor', '環境監査', 'セットアップ監査', 'Claude Code健康診断', '設定を診断して'
-
kgraph57 Bundle Medical SlideCreate or refine bilingual Japanese and English medical presentation slides as offline 16:9 HTML. Use for medical conference talks, journal clubs, case conferences, research presentations, teaching lectures, guideline summaries, clinical timelines, scientific charts, and requests such as 学会スライド, 抄読会, 症例カンファレンス, 医学教育スライド, medical slide, or journal club deck.
-
khan-masud Bundle I Hate UIExtract, deconstruct, and transform any reference website UI into clean, rebranded, and customized modern frontend code. Use when the user wants to mirror, clone, or replicate UI/UX design inspirations from a live web URL while systematically rebranding and modernizing it.
-
justinwetch Bundle Apple HigApple Human Interface Guidelines reference (Updated for OS 27 releases). Provides authoritative platform-specific design rules, component specifications, exact measurements, and interaction patterns for iOS, iPadOS, macOS, tvOS, visionOS, and watchOS. Use when designing, reviewing, or auditing any Apple platform UI, or when asked about specific HIG components, sizing, system behaviors, frameworks (HealthKit, SiriKit, ARKit, etc.), or platform conventions. Also use when the user is designing any digital interface and could benefit from established design principles, even without an explicit Apple platform context.
-
jxshow Bundle Sense DeckCreate premium static HTML presentations from short themes or long source material by researching when needed, building a content IR, and assembling reusable themes, full deck templates, single-page layouts, animations, speaker mode, optional gesture navigation, and optional export artifacts. Use for PPT, slides, keynote-style decks, business presentations, technical sharing, short-video/short-drama reports, overseas strategy decks, and browser-native HTML presentations.
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 new-component, qiaomu-app-review, qiaomu-chart-report. 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.