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.
-
impertio-studio Bundle Vite Impl MigrationUse when upgrading Vite versions, encountering deprecated APIs, or resolving version-specific breaking changes. Prevents using removed APIs after migration (e.g., rollupOptions in v8, legacy Sass API in v7, esbuild transforms in v8). Covers v5-to-v6 breaking changes (Environment API, json.stringify, PostCSS), v6-to-v7 (Node.js 20+, build.target), and v7-to-v8 (Rolldown, Oxc, Lightning CSS, rolldownOptions, moduleType). Keywords: migration, upgrade, breaking changes, Rolldown, Oxc, Lightning CSS, deprecated API, version compatibility, update Vite, upgrade Vite version, deprecated warning, API changed.
-
impertio-studio Bundle Vite Core ArchitectureUse when creating a new Vite project, understanding Vite internals, or reasoning about dev vs production behavior. Prevents confusing Vite's native ESM dev server with traditional bundler-based dev servers and misunderstanding the two-mode architecture. Covers dev server vs build pipeline, native ESM serving, dependency pre-bundling, module graph, internal tools evolution (esbuild to Oxc, Rollup to Rolldown), index.html as entry point, browser support targets, and Node.js requirements. Keywords: vite, architecture, dev server, build, ESM, Rolldown, Oxc, pre-bundling, module graph, how Vite works, what is Vite, Vite vs webpack, why is Vite fast.
-
impertio-studio Bundle Vite Impl Library ModeUse when building a library, creating an npm package, configuring UMD/ESM/CJS output, or setting up package.json exports. Prevents bundling peer dependencies into the library or misconfiguring output formats. Covers build.lib configuration, external dependencies, output formats (es, cjs, umd, iife), CSS handling, multiple entry points, vite-plugin-dts, and package.json exports. Keywords: build.lib, library mode, npm package, external, UMD, ESM, CJS, vite-plugin-dts, exports, publish to npm, build a library, bundle component, create npm package.
-
impertio-studio Bundle Vite Syntax Env VarsUse when configuring environment variables, using .env files, creating custom modes, or debugging env variable issues. Prevents exposing secrets by omitting the VITE_ prefix and misconfiguring .env file precedence. Covers import.meta.env built-ins, .env file loading order, VITE_ prefix requirement, dotenv-expand, custom modes, NODE_ENV vs mode, ImportMetaEnv TypeScript, HTML %VAR%, and loadEnv(). Keywords: import.meta.env, .env, VITE_ prefix, loadEnv, custom mode, NODE_ENV, ImportMetaEnv, environment variables not working, env undefined, access env variable, .env.local, secret exposed.
-
impertio-studio Bundle Vite Syntax Resolve CSSUse when configuring path aliases, CSS modules, CSS preprocessors, PostCSS, Lightning CSS, or module resolution behavior. Prevents resolve.alias misconfiguration breaking imports and CSS preprocessor options not matching the installed preprocessor version. Covers resolve.alias, resolve.dedupe, resolve.conditions, resolve.extensions, resolve.tsconfigPaths, css.modules, css.postcss, css.preprocessorOptions (Sass/Less/Stylus), css.transformer, css.lightningcss, css.devSourcemap, json.namedExports, json.stringify, and html.cspNonce. Keywords: vite, resolve, alias, CSS modules, PostCSS, Lightning CSS, Sass, preprocessor, path alias not working, @ import alias, CSS not loading, SCSS setup, style preprocessor.
-
impertio-studio Bundle Vite Impl Backend IntegrationUse when integrating Vite with a backend framework, rendering Vite assets from server-side templates, or setting up dev/production HTML serving. Prevents incorrect manifest.json traversal and missing CSS chunk resolution in production. Covers build.manifest configuration, .vite/manifest.json structure, ManifestChunk properties, dev mode HTML setup, production rendering, CSS/JS chunk resolution, and modulepreload polyfill. Keywords: backend integration, manifest.json, ManifestChunk, Django, Laravel, Rails, modulepreload, use Vite with backend, PHP, Python, Ruby, server rendered templates, assets not loading.
-
impertio-studio Bundle Vite Agents Project ScaffolderUse when generating a new Vite project from scratch, adding Vite to an existing app, or scaffolding a production-ready Vite setup. Prevents missing vite-env.d.ts, incorrect plugin selection, and incomplete environment variable configuration. Covers vite.config.ts generation, TypeScript setup (tsconfig.json, vite-env.d.ts), package.json with scripts, index.html entry point, source directory structure, .env setup, and React/Vue/Svelte/vanilla support. Keywords: scaffold, project setup, vite.config.ts, tsconfig, React, Vue, Svelte, TypeScript, package.json, create-vite, new Vite project, start from scratch, generate boilerplate, init project.
-
mishrashardendu22 Skill Github Backup ArchitectureComprehensive guide to the system architecture, service communication, database schema, and deployment targets (Frontend on Vercel, Python Observatory on Vercel, Go Backend on Render).
-
mishrashardendu22 Skill Test Creation And ExecutionRules, patterns, and runbooks for writing and running unit, integration, and AI agent test suites across Go, Python Observatory, and Next.js frontend.
-
mishrashardendu22 Skill Polyglot Microservice ArchitectureArchitectural patterns, service boundaries, communication protocols, database schema guidelines, and deployment targets for polyglot systems (Next.js frontend, Python AI service, Go backend/worker, PostgreSQL).
-
yhy0 Bundle Pentest XssUse when performing penetration testing targeting cross-site scripting vulnerabilities including stored, reflected, and DOM-based XSS. Keywords: XSS, stored XSS, reflected XSS, DOM XSS, content injection, HTML injection, JavaScript injection, CSP bypass
-
yhy0 Bundle Go Vuln InjectionUse when auditing Go code involving OS command execution, SQL queries, template rendering, or child command invocation. Covers CWE-78/89/77/94/88. Keywords: command injection, SQL injection, exec.Command, os/exec, database/sql, text/template, html/template, argument injection, shell injection, Gogs, Grafana, MCP stdio
-
yhy0 Bundle Vuln Patterns XssUse when auditing Python web applications involving HTML rendering, template engines (Jinja2, Mako, Django templates), Markdown parsing, DataFrame-to-HTML conversion, or frontend innerHTML assignments. Covers CWE-79. Keywords: XSS, cross-site scripting, HTML injection, mark_safe, |safe, autoescape, bleach, escape, innerHTML, decode_contents, self.write, to_html, format_html
-
yhy0 Bundle Go Vuln Ssrf RequestforgeryUse when auditing Go code involving HTTP client requests, webhook callbacks, URL handling, HTML template rendering in Go web frameworks, or CSRF protection. Covers CWE-918/352/79. Keywords: SSRF, server-side request forgery, XSS, cross-site scripting, CSRF, http.Get, http.Client, template.HTML, Gin, Echo, Fiber, webhook, Kyverno, DNS rebinding
-
atman-33 Bundle Create Review GuideGenerate a self-contained HTML code-review guide for the current changes — big-picture overview, architecture diagram of affected modules, a file/class responsibility map, and an annotated change walkthrough — so a reviewer can grasp the whole implementation before diving into the diff. Use when the user wants review material for a branch/PR, asks to "explain the changes for review", or wants a visual summary of what was implemented where.
-
atman-33 Bundle Create Onboarding GuideGenerate a self-contained HTML onboarding tour of a repository — architecture diagram, directory map, key flow walkthroughs, and a recommended reading order — for new team members. Use when the user wants onboarding material, asks for a codebase overview/architecture tour, or wants to explain a repo to someone new.
-
atman-33 Bundle Create Manual Test GuideGenerate a self-contained HTML manual-testing guide for an implemented change — environment setup, a visual test-flow diagram, step-by-step scenarios with expected results, and interactive pass/fail checkboxes with a Markdown results export. Use when the user wants to verify an implementation by hand, asks "how do I test this", or wants a verification document for a feature/branch/PR.
-
ceilf6 Skill Deepwiki UsageUse when researching external open-source projects, understanding unfamiliar libraries, or getting high-level architecture overviews of public repos. Examples: 'How does Next.js routing work?', 'Explain the architecture of langchain', 'What does this repo do?'
Audited -
fritzandfriends Skill Bunit TestingWrite bUnit v2 component tests for BlazorWebFormsComponents. Covers BlazorWebFormsTestContext base class, Render() with inline Razor syntax, Shouldly assertions, testing data-bound components, validation components, event callbacks, JS interop mocking, service registration, authentication testing, and xUnit logger integration. Use when writing new component tests, testing complex scenarios, or understanding the BWFC test infrastructure.
-
fritzandfriends Skill DocumentationProvides templates, style guidelines, and a complete workflow for writing MkDocs documentation, sample pages, and navigation updates for BlazorWebFormsComponents. Covers component doc structure with Web Forms vs Blazor syntax comparisons, migration guide templates, sample page creation in AfterBlazorServerSide with demo and source code sections, NavMenu.razor and ComponentList.razor updates, and README linking. Use when documenting a new or existing BWFC component, creating sample pages with escaped code blocks, updating mkdocs.yml navigation, or following the complete documentation workflow from docs to samples to README.
-
fritzandfriends Bundle Component DevelopmentProvides a step-by-step workflow for creating Blazor components that emulate ASP.NET Web Forms controls in the BlazorWebFormsComponents library. Covers base class selection (BaseWebFormsComponent, BaseStyledComponent, DataBoundComponent, BaseValidator), Web Forms property and event naming conventions, Playwright integration testing setup, and the complete checklist from component creation through documentation and navigation updates. Use when implementing a new BWFC component, choosing the correct base class for a control type, adding unit or integration tests, or extending an existing component with new Web Forms property support.
-
memorysaver Bundle Aep Design LensReviews an existing UI against usability and accessibility heuristics, scored 0–4. Use for design or heuristic review; taste capture is /aep-calibrate.
-
nasa Skill Fprime Cpp DesignAuthoritative C/C++ design rules and idioms for F Prime flight software. Use this skill in two directions — as a *developer-side* reference when writing or modifying F Prime C++ code (what idioms to follow, what features to avoid, which F Prime types to prefer), and as a *reviewer-side* reference for finding-class names and severity hints when flagging C/C++ design violations. Trigger on any work that touches F Prime C/C++ source: component implementations, drivers, services, framework types, OSAL code, or unit-test infrastructure. Keywords: F Prime, C++14, FW_ASSERT, Fw::Buffer, Fw::String, JPL coding standard, dynamic memory, RTTI, exceptions.
-
nasa Skill Fprime Unit TestingWrite F Prime component unit tests. Covers scaffold generation via `fprime-util impl --ut`, the Tester / TestMain / GTestBase pattern, rules-based testing with STest, helper-function design, and the CMakeLists.txt registration. Use whenever creating or extending unit tests for an F Prime component.
-
nasa Skill Fprime Component Unit TestUnit testing phase of F Prime component development. Provides lifecycle context, goals, and decision criteria for the unit testing phase. Defers to fprime-unit-testing for implementation details. Trigger when implementation is ready for testing or when following TDD (tests before implementation). Keywords: F Prime, unit test, GTest, TesterBase, GTestBase, Tester, fprime-util check, STest, rule-based testing.
-
nasa Skill Fprime Component Design FppFPP design phase of F Prime component development. Guides the agent through creating the FPP model that codifies the component's interface — ports, commands, events, telemetry, and parameters. Trigger when the requirements are confirmed and the next step is to write the .fpp file. Keywords: F Prime, FPP, design, model, ports, commands, telemetry, events, parameters, component definition.
-
nasa Skill Fprime Ground Input TracingUse when tracing a value in F Prime code back to determine whether it originates from ground input (commands, parameters, uplink, telemetry filters, file uplink, or any uplink-stack component).
-
nasa Skill Fprime Topology DevelopmentDevelop and evolve an F Prime deployment topology: FPP instance definitions, base IDs, queue/stack/priority, connection graphs, rate group scheduling, phased initialization, subtopologies, and wiring a new or changed component into an existing deployment. Use whenever a task touches a `Top/` directory, `instances.fpp`, `topology.fpp`, a `*TopologyDefs.hpp`, or a subtopology. Keywords: F Prime, topology, deployment, instance, base id, connections, rate group, subtopology, phases, ping entries.
-
nasa Skill Write System Functional DocAnalyze an F Prime component, subtopology, or multi-component subsystem and write a high-level system-functional document for docs/reference/system-functional/.
-
nasa Skill Fprime Component DevelopmentTop-level flight development process for F Prime components. Orchestrates the full lifecycle from requirements through integration testing. Trigger on any task involving creating a new F Prime component or adding significant functionality to an existing one. Keywords: F Prime, component, development, lifecycle, flight software, requirements, design, implementation, unit test, integration test.
-
nasa Skill Fprime Component RequirementsRequirements phase of F Prime component development. Guides the agent through eliciting, documenting, and confirming component requirements before any design or code is written. Trigger when starting a new component or when the user says to define requirements. Keywords: F Prime, requirements, SDD, behavior, interface, specification.
-
nasa Skill Fprime Component ImplementationC++ implementation phase of F Prime component development. Guides the agent through implementing handler functions generated from the FPP model. Must follow fprime-cpp-design rules (CPP-1 through CPP-35). Trigger when the FPP model is confirmed and the next step is to write the C++ implementation. Keywords: F Prime, C++, implementation, handler, component, flight software, autocoded.
-
nasa Skill Fprime Component Integration TestIntegration testing phase of F Prime component development. Guides the agent through writing reusable pytest-based integration tests in the component's test/int/ folder using the GDS Integration Test API. These tests ship with the component and can be run against any deployment that includes it. Trigger when unit tests pass and the component is ready for integration testing. Keywords: F Prime, integration test, pytest, GDS, fprime_test_api, reusable test, component test.
-
orakitine Bundle Menu AppConvert a restaurant menu (PDF, image, Word, HTML, Markdown) into a self-contained single-page HTML ordering app. Extracts items, prices, categories, and contact info, then generates a mobile-friendly page with search, filters, cart, and copy-to-clipboard order text. Use when given a menu file to turn into an interactive ordering tool.
-
orakitine Bundle Browser MicroscopeReal-browser DOM and layout microscope. Runs arbitrary JS in a live page, hit-tests why a click won't land (elementFromPoint — what element is covering it), dumps scroll and box geometry (scrollWidth, offsetLeft, overflow, scroll-padding), reads CSS custom-property design tokens via getComputedStyle, and sweeps viewport widths to find container-query / breakpoint thresholds. Use when a button does not respond to clicks, an element is mysteriously overlapped, covered, clipped or off-screen, scroll / snap geometry looks wrong, computed styles or tokens need reading live, z-index / stacking is suspect, or a layout bug only appears at certain widths. Drives the local Playwright npm package (no global CLI required) and supports HTTP basic-auth and self-signed staging certs. The layout-forensics complement to the journey-walking browser and browser-qa skills.
Audited -
phoenixrr2113 Bundle BrainstormingTurn ideas into validated specs through dialogue. Use when starting any new feature, component, project, or significant behavior change — explores intent, surfaces constraints, and produces an approved design BEFORE any implementation.
Audited
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 fprime-unit-testing, vite-impl-migration, vite-core-architecture. 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.