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.
-
xiao0916 Bundle Animation Flow为网页生成可预览的动画组件,目标框架由 AI 探测项目决定。当用户需要把预置的网页动画效果落地到 React/Vue/Svelte/原生项目时使用此技能——即使没明说"动画"也要触发。覆盖五类效果:① 数字滚动/计数(数字从0跳到目标值、统计数字递增、数据成就展示);② Hover光效(卡片扫光、鼠标跟随光晕、产品卡片悬停光线扫过);③ 手风琴(横向折叠面板、悬停展开变大、类别展示);④ 定屏滚动/粘性滚动(左固右滚、sticky 标题随滚动叙事、苹果官网式滚动布局);⑤ 打字机/逐字动画(文字一个个蹦出、光标闪烁、终端式输出、标语轮播)。技能提供可预览 HTML 模板,按 component-spec.md 转换为符合规范的组件代码。不适用于:动画/动效调试(Framer Motion 卡顿、CSS 动画 bug)、路由切换过渡动画、loading spinner、数据图表、轮播图、SVG 描边、Three.js/3D 粒子,或纯后端/无前端任务。
-
xiongweilin Bundle System Reliability ReviewUse only when a persistent or long-lived system, workflow, standard, or infrastructure dependency needs review for common-mode failure, recovery independence, lock-in, reauthorization, or loss of future maneuverability. Do not trigger for one-off changes, routine debugging, ordinary observability, or single-component resilience checks.
-
xmm Bundle Bmad UX DesignerUX design skill for BMAD. Use for bmad:ux-design and bmad:user-flow to define interaction design and accessibility-ready UX artifacts.
-
ymd38 Skill Yds Progress DashboardGenerate an interactive HTML dashboard that visualizes improvement progress from yds-software-evaluation and yds-vulnerability-scan reports over time. Reads JSON summary files from docs/evaluation/ and docs/security-audit/, then produces a single self-contained HTML file with charts and trend analysis. Triggers on requests like "generate dashboard", "show progress", "visualize improvements", "/yds-progress-dashboard", or when asked to see quality or security trends.
-
ymd38 Skill Yds Vulnerability ScanRun an offensive security audit (OWASP-based) using Semgrep and produce a read-only vulnerability report. Use before committing code to detect Broken Access Control, Injection (SQL/NoSQL/OS/Template), Frontend Security issues (XSS/CSP/HSTS), SSRF, and hardcoded secrets or PII exposure. Triggers on requests like "security scan", "vulnerability check", "audit security", "find vulnerabilities", "/yds-vulnerability-scan", or when asked for an offensive security review of the codebase. Does NOT modify any code — read-only inspection only.
-
ptsilivis Bundle MisraMISRA C:2025 expert that operates in two modes: (1) Review — scan existing C code for violations across all ~223 guidelines (22 directives + ~201 rules), report findings with rule IDs, corrected code, and deviation justification templates; (2) Develop — generate new C functions, modules, or data structures that are MISRA-compliant from the first line, applying the essential type model, safe control flow, and banned-construct avoidance from the start. Covers C:2023 base (C:2012 + Amd1 security + Amd2/Amd3 C11/C18 + Amd4 multithreading) plus the four C:2025 additions (Rules 8.18, 8.19, 11.11, 19.3), Rule 15.5 disapplication, and 69 refined guidelines. Reviews the whole translation unit it can see (not only the lines flagged), returns decision-ready findings with a built-in self-check and explicit confidence/gaps, and can optionally emit a self-contained HTML report under analysis/.
-
ptsilivis Bundle Autosar SwcAUTOSAR SWC expert. Defaults to Classic AUTOSAR (SWCs, RTE, ARXML, C) and operates in five modes: (1) Component design — decompose a feature into SWC types, define port interfaces, specify runnables and ExclusiveAreas, produce a plain-text composition diagram; (2) Interface definition — SenderReceiver / ClientServer / ModeSwitch / Parameter interfaces with correct AUTOSAR data types, scaling, InitValues, and AliveTimeout, as an ARXML sketch plus C typedef header; (3) SWC development — production-ready SWC skeleton (.c + .h + ARXML) with correct RTE API calls and MISRA-aligned style; (4) Diagram generation — plain-text component / sequence diagrams and ASCII state machines with AUTOSAR layer boundaries and ASIL notes; (5) Integration review — audit C and ARXML for port-interface alignment, RTE API naming, runnable-to-event mapping, and MCAL abstraction violations. Targets EB Tresos and Vector DaVinci. Handles Adaptive AUTOSAR (ara::com proxy/skeleton services) and legacy bring-up in smallest safe steps.
-
ptsilivis Bundle Code ReviewSenior embedded-engineer code review. Defaults to Classic AUTOSAR embedded C and covers two concerns: (1) Correctness review — integer overflow, volatile correctness, ISR/task race conditions, stack usage, dynamic memory, control flow, AUTOSAR/ISO 26262 readiness, with findings rated Critical/Major/Minor; (2) Naming review — AUTOSAR Classic conventions for modules, SWC types, port names, runnables, C identifiers, typedefs, macros, and enumerations, aligned with MISRA Rule 5.x identifier uniqueness. Audits existing code and generates correctly-named identifiers for new work. Handles Adaptive AUTOSAR C++14+ when the input is C++ or names ara::, reviewing RAII, exceptions vs ara::core::Result, smart pointers, and AUTOSAR C++14 / MISRA C++:2023 naming. A third focus, legacy modernization assessment, proposes the smallest safe steps toward a MISRA-conformant, MCAL-abstracted, unit-tested state. Returns decision-ready findings with a built-in self-check and can emit a self-contained HTML report under analysis/.
-
ptsilivis Bundle Codebase AnalysisFirst-run skill that walks the entire repository, auto-detects Classic vs Adaptive AUTOSAR, and maps it accordingly. For Classic (default): identifies features and SWCs and documents referenced requirement IDs (SW-REQ-*, REQ-*, FSR-*, SYS-REQ-*), port interfaces (S/R, C/S, Mode Switch, Parameter), dependencies on other SWCs and BSW modules (Com, NvM, Dem, Dcm, IoHwAb, Os), and concrete RTE API calls (Rte_Read_*, Rte_Write_*, Rte_Call_*, Rte_IRead_*, Rte_IWrite_*). For Adaptive (C++14, POSIX, ara::): identifies Adaptive Applications, ara::com service interfaces, ara:: functional-cluster usage, and manifests. Also captures repository structure, ASIL zones, signal/service flow, and architectural concerns. Writes findings to .autonomousguy/CODEBASE_MAP.md so every subsequent skill can reference it without re-reading the codebase; can emit a self-contained HTML companion report under analysis/.
-
ptsilivis Bundle Embedded DebuggingSenior embedded debugging expert. Defaults to Classic AUTOSAR on ARM Cortex-M/R targets and operates in two modes: (1) Problem-report triage — take a field PR / bug ticket and produce symptom classification, affected-element mapping, ranked hypotheses, data-collection plan, and step-by-step investigation; (2) Targeted fault debugging — accept a specific fault signature (watchdog reset, HardFault, wrong output value, Dem event, stack overflow, AUTOSAR OS error, linker hang) and give concrete debugging steps with GDB/TRACE32 commands, code patterns to inspect, ranked root-cause candidates, and a minimal reproduction strategy. Covers AUTOSAR OS (EB Tresos, Vector) and common BSW/RTE failure modes. Handles Adaptive AUTOSAR when the input names POSIX/Linux/QNX, ara::, C++, segfault, core dump, or Execution Management. Returns decision-ready ranked hypotheses with a built-in self-check and can emit a self-contained HTML report under analysis/.
-
ptsilivis Bundle Change And ImpactChange-management expert that operates in two modes: (1) CR analysis — take a change request / ECN / feature brief and produce affected-element list, ASIL impact, implementation plan with owner hints and complexity, test plan delta, and integration risks; (2) Impact analysis — trace a specific change through every layer (SWCs, BSW modules, ARXML interfaces, requirements, tests, safety artefacts), distinguishing direct impacts (must change) from indirect impacts (must review or retest), and recommend a regression scope (Minimal / Targeted / Full). Applies ASPICE SWE.6 and ISO 26262-6 §7.4 / -8 §8.4 change practices. Traces the full ripple in a single pass, returns a decision-ready plan/scope with a built-in self-check and explicit confidence/gaps, and can optionally emit a self-contained HTML report under analysis/.
-
pytorch Skill Osdc HarborHarbor pull-through cache configuration, Helm chart gotchas (inconsistent value paths, per-component image overrides, taint tolerations), and image mirroring strategy. Applies to ~/meta/ci-infra/osdc. Load when working on Harbor, image mirroring, or container registry configuration.
-
pytorch Skill Osdc NodelocaldnsOSDC NodeLocal DNSCache (NLD) base component — per-node CoreDNS DaemonSet under base/kubernetes/nodelocaldns/. Covers iptables-mode rationale (vs IPVS-mode), dynamic kube-dns ClusterIP substitution via deploy.sh (validates the kube-dns ClusterIP is IPv6 and fails fast on IPv4 — OSDC EKS is IPv6-only by design and NLD is single-family by deploy-script enforcement; the IPv6-only cluster recreate has already shipped in commit a6b4c8c), Service-before-DaemonSet apply ordering (KUBE_DNS_UPSTREAM env-var injection), kube-dns-upstream auxiliary Service, two metrics ports (9253 CoreDNS plugin / 9353 binary setup_errors_total), the coredns_nodecache_* vs nodelocaldns_* metric-name confusion, no preStop / no memory limit / no startup taint design decisions, Harbor proxy-cache image pull (no pre-mirror), IPv6 ULA bind address (fd00::10), and the ≥3-day soak gate (applies to any FUTURE cluster-wide NLD cutover). Applies to ~/meta/ci-infra/osdc. Load when developing, debugging, or maintaining the nodelocaldns base compone
-
quantskills Bundle ReportUse when tasks need complete HTML research reports, HTML dashboards, PNG chart helpers, or files under the research reports directory.
-
quasarframework Bundle Quasar DevelopmentBuild, debug, test, and maintain Quasar Framework applications using Vue 3 and Quasar CLI with Vite. Use for Quasar components, composables, plugins, boot files, routing, state management, layouts, forms, theming, configuration, TypeScript, accessibility, testing, builds, dependency updates, and general Quasar application architecture. Pair with a mode-specific Quasar skill for SPA, SSR, SSG, PWA, Capacitor, Cordova, Electron, or BEX work.
-
radius-project Bundle Radius Architecture DocumenterDocument the Radius Canvas architecture with Mermaid diagrams. Use for: generating architecture overviews, component diagrams, sequence diagrams from code, explaining how the canvas adapter and shared core work, answering architecture questions, producing entity-relationship diagrams, and distilling TypeScript/ESM code into human-readable descriptions. Writes living architecture docs to docs/architecture/. For proposing new changes with options and trade-offs, use radius-design-doc instead.
-
rakaadi Bundle Writing PlanUse when you have a spec or requirements for a multi-step task, before touching code. Supports either Markdown plans or review-oriented HTML plan artifacts.
-
rakaadi Bundle Fix Repository DiagnosticsClose repository diagnostic findings from TypeScript, ESLint, and React Doctor. Use when asked to verify or fix project-wide tsc errors, ESLint violations, React Doctor findings, or a scoped batch from any of those tools.
-
research-ag Skill Motoko Doc StringsAdd `///` doc strings to public objects in Motoko modules so that `mo-doc` produces useful HTML/Markdown documentation. Covers placement rules, formatting, code examples, common pitfalls, and a verification workflow.
-
tanishqkancharla Skill Glimpse ChangesCreate a visual explanation of the current session diff as a single HTML page and show it in a native Glimpse window. Use when the user wants a visual walkthrough of local code changes instead of a plain text diff.
-
xiarongwen Bundle Frontend SquadFrontend Development Squad for AEGIS. Use when implementing user-facing code in the L3 development stage.
-
fixmyberlin Skill Nuqsnuqs (type-safe URL query state) for Next.js and legacy/shared components. Prefer TanStack Router validateSearch on TanStack Router/Start apps. Use when writing nuqs hooks, parsers, NuqsAdapter setup, or Next.js URL state — not for greenfield TanStack route search params.
-
fixmyberlin Bundle Unslop CodeOrchestrated cleanup of LLM leftovers in an FMC app: TypeScript inference (no extra return types or `as`), Zod 4 at runtime boundaries with GeoJSON types and helpers, delete pass-through re-exports, drop unneeded legacy/migration shims, squash undeployed WIP migrations, skill-aligned code-review passes (react-dev, react-map-gl, tanstack-router-conventions, tech-stack, zustand), component location, decision lift, semantic HTML, leftover process artifacts on a merge-ready PR, then unslop-text on comments and docs in the branch. Use when the user asks to cleanup LLM changes, post-agent cleanup, unslop code, or to tidy a branch after agent/refactor work. Formerly cleanup-llm-changes.
-
fixmyberlin Bundle Keystatic AstroKeystatic + Astro Content Layer: config locations, dual-file CMS schemas, content collection structure, glob loaders, MDX blocks, and remote/fetched collections. Use when scaffolding or changing Keystatic collections, Astro content.config.ts, keystatic.config, MDX blocks, or build-time API-backed content.
-
fixmyberlin Bundle Accessibility ReviewOrchestrates accessibility reviews of React/Tailwind/TanStack Form/React Map GL apps used in German administrative procedures (Verwaltungsvorgänge) against WCAG 2.2 AA plus selected AAA on critical flows, with BITV 2.0 and EN 301 549 framing. Use for a11y audits, WCAG/BITV/barrierefreiheit reviews, procurement accessibility assessments, or remediation planning on FMC geo/admin apps.
-
fixmyberlin Bundle Tanstack Start MigrationDEPRECATED — FMC Next.js → TanStack Start migrations are complete. Use tanstack-start-conventions and react-dev instead. Archived reference only; not installable via skills CLI.
-
samhvw8 Bundle Pug UIGenerate single-file HTML UIs, reports, dashboards, and landing pages using Pug syntax compiled client-side. Four CSS framework presets (Pico CSS classless default, Bulma, daisyUI, Simple.css minimal) — all pre-themed with Claude Code's warm cream + terra cotta light palette. Reduces LLM output tokens by 70-85% vs raw HTML + Tailwind. ALWAYS invoke when the user asks to create an HTML page, report, dashboard, UI mockup, or single-file web deliverable. Also invoke when user says "make a page", "create a report", "build a dashboard", "html output", "web UI", "single-file HTML", or "pug". Do NOT use for React/Vue/Svelte component development or server-rendered templates.
-
samhvw8 Bundle Prompt ArchitectCreate and enhance prompts, system instructions, SKILL.md content, and principle files. Capabilities: transform verbose prompts, add patterns/heuristics, optimize token usage, write skill body content (soul, tensions, mental models, anti-patterns), structure CLAUDE.md principles, improve agent/persona definitions, apply prompt engineering techniques (CoT, few-shot, ReAct), context engineering. Actions: create, enhance, optimize, refactor, compress prompts and skill instructions. Keywords: prompt engineering, system prompt, CLAUDE.md, SKILL.md, skill content, principle files, agent prompt, persona prompt, soul, tensions, dialectic, mental models, anti-patterns, context engineering, progressive disclosure. Use when: creating prompts, writing SKILL.md body content, enhancing principle files, defining agent behaviors, engineering context strategies.
-
samhvw8 Bundle Guizang Ppt SkillGenerate single-file HTML horizontal-swipe presentation decks with WebGL backgrounds and Motion entrance animations. Two styles — "Digital Magazine × E-Ink" (serif + fluid shader + warm tones) and "Swiss International Style" (sans-serif + dot grid + IKB/yellow/green/orange accent). ALWAYS invoke when the user wants a web-based presentation, slide deck, or PPT as HTML. Triggers — "make me a deck", "create slides", "presentation", "PPT", "web slides", "horizontal swipe", "magazine-style", "Swiss Style", "Helvetica deck", "single-file slides", "launch deck", "demo day slides", "keynote as HTML", or any request for browser-based slides. NOT for PowerPoint/Keynote/Google Slides editing or Slidev/Marp.
-
apexbusiness-systems Bundle Omnidev Apex Pro NativeThe single canonical dev and debug skill for APEX-OmniHub. Use for developing, debugging, restoring, repairing, scaling, optimizing, or enhancing any OmniHub component. Corrected path registry (live tree is apps/omnihub-site, not src/), two-surface integration ownership, and an all-viewport responsive mandate. Does not cover non-OmniHub products.
-
apexbusiness-systems Bundle Apex BoostAPEX-BOOST v1.0 | Claude Edition: Omnipotent AI performance amplifier. 20x speed·quality·efficiency·reasoning. Token-ruthless. Research-grounded (SPR·CoT·ToT·ReAct·Constitutional AI·Google Antigravity 2.0). Triggers: /apex-boost · task start · session init · slow output · token waste · drift · loop · hallucination · optimize · amplify · boost · accelerate · performance · enhance · intelligence · efficiency · apex boost · god mode
-
apexbusiness-systems Bundle Apexomni TestAPEX-OMNI-TEST v1.0: 20x omnipotent software testing intelligence. 48 test types: unit, integration, E2E (Playwright), API contract, performance, stress, SAST/DAST, fuzz, snapshot, a11y (WCAG 2.2), visual regression, mutation, chaos, data integrity, AI/LLM behavioral, prompt injection (garak/PyRIT), agent loop, mobile, CLI, smart contract, compliance, observability, synthetic monitoring, GraphQL, WebSocket, gRPC, SBOM (syft/grype), container (Trivy), IaC (checkov), idempotency, ML drift, OAuth/OIDC, RBAC, PII detection, PWA/offline, temporal, i18n. 10 execution modes. 20-item quality rubric. First-pass perfection. Triggers: test QA quality verify validate assert spec coverage regression playwright cypress vitest jest pytest selenium appium k6 broken failing flaky e2e unit integration performance security load stress smoke fuzz audit a11y visual mutation mock stub fixture CI pipeline WCAG OWASP SLO contract chaos graphql grpc websocket sbom trivy checkov garak deepeval promptfoo pii rbac idempotency.
-
apexbusiness-systems Bundle Apex FrontendPortable UI/UX + frontend engineering + debugging operating system. Use when designing screens/flows, auditing usability, implementing frontend UI, creating design systems, fixing UI/state/layout bugs, improving accessibility, or optimizing frontend performance across web/mobile/desktop stacks.
-
sugatoray Bundle Diagram DesignCreate technical and product diagrams — architecture, flowchart, sequence, state machine, ER / data model, timeline, swimlane, quadrant, nested, tree, org chart, layer stack, venn, pyramid — as standalone HTML files with inline SVG. Ships with a neutral editorial skin and a first-run gate that prompts users to customize the style guide (colors, fonts) from their own website before generating. Includes annotation-callout primitive and optional sketchy variant.
-
sugatoray Bundle Newsletter AIGenerates the weekly executive AI intelligence newsletter: researches the last 7 days of AI developments (with 30-90 day context where needed) and writes them up as a 15-part executive brief — the Top 20 developments, model intelligence, open-vs-closed, talent, funding/M&A, production deployment, agents, chips/compute, data centers/energy, the global AI race, a company watchlist, key numbers, under-the-radar signals, what changed this week, and a closing synthesis. Defaults to markdown chat output; pass -o/--output yaml (or --yaml) to instead produce a sourced YAML document, and add -r/--report path/to/folder-or-report.html to render it straight into an interactive, light/dark, multi-tab HTML report (with per-tab References accordions, its source YAML fused in for single-file distribution, and a Download-data button) written next to a copy of the YAML. Use when the user runs /newsletter-ai (aliased as the shorthand /nltr-ai — treat both identically), or asks to draft, write, or update this week's AI newslette
-
flashfoxer Bundle Huashu Design花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审,需求模糊时给设计方向。触发词:做原型、PPT、幻灯片、动画、设计风格、评审、做个HTML页面、UI mockup、导出MP4/GIF、做个好看的。生产级Web App/需后端的系统不适用。
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 animation-flow, system-reliability-review, bmad-ux-designer. 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.