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.
-
bromso Skill Eaa En301549Assess European Accessibility Act / EN 301 549 compliance
-
bromso Skill Define ComponentDefine a component contract with props, variants, states, tokens, and accessibility criteria for design-system-quality components
-
gaelic-ghost Bundle Tvos App Experience WorkflowGuide remote-first tvOS SwiftUI and UIKit decisions: focus navigation, Large Text, Apple TV capability gates, and TVMLKit migration. Use for Apple TV interaction, focus geometry, accessibility, or platform-boundary questions.
-
gaelic-ghost Bundle Macos Privacy Permissions WorkflowDiagnose macOS privacy permissions from the operation and responsible executable. Use for Accessibility, Automation, Developer Tools, recording or input, protected data, Full Disk Access, PPPC, prompts, Settings, resets, and helpers.
-
gaelic-ghost Bundle Sf Symbols WorkflowGuide SF Symbols selection, inspection, customization, rendering modes, variable color, symbol effects, animated symbols, custom symbols, accessibility semantics, availability checks, and Apple app integration. Use when a task mentions SF Symbols, the SF Symbols app, systemImage names, symbolRenderingMode, foregroundStyle palette or hierarchical color, multicolor symbols, variableValue, symbolEffect, custom symbol templates, symbol export, asset-catalog symbol resources, or choosing symbols for SwiftUI, AppKit, UIKit, or watchOS UI.
-
gaelic-ghost Skill Build Kotlin AndroidImplement Kotlin-first Android app or library changes, including activities, fragments, services, receivers, Compose UI, XML/AppCompat UI, AndroidX, lifecycle-aware coroutines, state, persistence touchpoints, resources, accessibility labels, navigation touchpoints, tests, lint, and validation while preserving repo conventions.
Audited -
gaelic-ghost Bundle Xcode Testing WorkflowGuide Swift Testing, XCTest, XCUITest, XCUIAutomation-oriented mechanics, code coverage, xctestplan matrices, accessibility-verification follow-through, test filtering, retries, diagnostics, and test-specific fallback work in existing Xcode-managed projects and workspaces. Use when Xcode-aware execution is needed and the task is primarily about testing rather than build or run work.
Audited -
gaelic-ghost Skill Vapor Server WorkflowPlan, build, run, test, and diagnose Vapor components under Services/ in the canonical product workspace. Hand fresh component creation and guidance alignment to the workspace service adapter.
Audited -
gaelic-ghost Skill Hummingbird Server WorkflowPlan, build, run, test, and diagnose Hummingbird components under Services/ in the canonical product workspace. Hand fresh component creation and guidance alignment to the workspace service adapter.
Audited -
gaelic-ghost Bundle Workspace Service ComponentAdd or align a Hummingbird or Vapor executable under Services/ in an existing canonical Xcode workspace. Use only behind bootstrap-xcode-workspace add-component; local development is native macOS with Homebrew services, while Linux artifacts and deployments run in GitHub Actions.
-
gaelic-ghost Bundle Game Controller Input WorkflowGuide Apple Game Controller framework input work for games. Use when Codex works on GCController, GCDevice, extended gamepad mappings, virtual controllers, keyboard and mouse game input, controller connection lifecycle, controller haptics handoffs, input evidence, accessibility alternatives, or device-aware validation.
-
gaelic-ghost Bundle Swift Package Testing WorkflowGuide Swift Testing, XCTest holdouts, code coverage, xctestplan handoff conditions, async test design, semantic accessibility-test boundaries, test-fixture organization, and package test-diagnosis work in existing Swift Package Manager repositories. Use when Package.swift is the source of truth and the task is primarily about testing rather than package build or run work.
Audited -
gaelic-ghost Bundle Apple UI Accessibility WorkflowGuide Apple UI accessibility implementation and review for SwiftUI-first code, with UIKit and AppKit bridge guidance plus explicit verification expectations and testing handoffs. Use when the user wants help making Apple UI accessible, reviewing accessibility semantics, shaping the accessibility tree, or planning Apple-platform accessibility verification without collapsing the work into generic design review or Xcode test execution.
-
gaelic-ghost Bundle Swiftui Component Audit WorkflowAudit and repair SwiftUI code toward self-contained declarative components, local reactive state, framework-native data flow, and simple reusable view interfaces. Use when an existing SwiftUI feature has external ViewModels, injected collaborators, imperative coordination, duplicated state, environment dumping, or unclear component ownership.
-
gaelic-ghost Bundle Core Haptics Game Feedback WorkflowGuide Core Haptics and game feedback work for Apple games. Use when Codex designs, implements, repairs, or validates CHHapticEngine, CHHapticPattern, audio-haptic feedback, controller haptics, capability checks, fallback behavior, accessibility-sensitive feedback, or physical-device haptic validation.
-
clowlove Bundle Engineering Senior Developer精通 Laravel/Livewire/FluxUI 的高级全栈开发者,擅长高端 CSS 效果、Three.js 集成,专注打造有质感的 Web 体验。
-
clowlove Bundle Testing Accessibility Auditor专注无障碍审核的可访问性专家,按 WCAG 标准审查界面、用辅助技术实测、确保产品人人可用。默认立场是找问题——没用屏幕阅读器测过的,就不算无障碍。
-
clowlove Bundle Engineering Frontend Developer精通现代 Web 技术、React/Vue/Angular 框架、UI 实现和性能优化的前端开发专家
-
melodic-software Bundle ImproveScan an existing codebase for module-level friction and architecture improvement opportunities (shallow modules, seam leaks, locality gaps), present candidates as an HTML report, interview on the selected candidate with a Design-It-Twice branch that designs the interface several radically different ways in parallel, and hand off the agreed shape for planning. Use when: 'improve architecture', 'find deepening opportunities', 'shallow modules', 'Ousterhout deepening', 'design it twice', 'compare alternative interfaces', 'make code more testable', 'make code more AI-navigable', 'find refactoring opportunities', 'codebase friction', 'module seams', 'locality'. Skip when: a cross-dimension or evidence-driven improvement ask (a general 'what should we improve', 'highest-impact improvement', or 'find improvements' across code, product, process, or ops) routes to /improvement:find (this skill is the single-lens architecture-depth pass); also skip for mechanical code-level tidyings, reviewing a diff before merge, enfo
-
melodic-software Bundle InventoryEnumerate the complete Claude Code ECOSYSTEM this machine can invoke. Every built-in CLI command with its aliases and hidden/gated status, every bundled skill, and every component of every installed plugin (skills, agents, commands, hooks, MCP servers, LSP servers, workflows, output styles, themes, monitors, bin) across all marketplaces. Reads the shipped binary because the official docs publish no built-in command list. Reports; never changes anything. Use when: 'what slash commands do I have', 'list all my skills', 'what agents are available', 'show me every plugin component', 'what does Claude Code ship built-in', 'is /foo a real command', 'what changed after the update', 'show me only the plugin ones', 'what does marketplace X give me'. Not for: auditing the install DIRECTORY on disk (use /claude-ops:audit-install-state), updating or converging the plugin fleet (use /claude-ops:plugins), or checking settings and permission drift (use /claude-config:audit).
-
melodic-software Bundle PlaywrightLive E2E browser automation via Microsoft's @playwright/cli: named sessions, accessibility-ref snapshots, click/fill by ref, screenshots, console and network capture, network mocking, tracing, video, and auth state, with artifacts written to disk so only paths enter context (far fewer tokens than Playwright MCP). Use when: 'playwright', 'E2E test', or any task that needs a real browser driven against a running app: testing a UI flow end to end, capturing a screenshot or video as evidence, reading console errors or network traffic, or mocking a response.
-
melodic-software Bundle Pressure TestBuilds a throwaway interactive terminal app to pressure-test business logic, a state machine, a data model, or an API surface before committing to it. Use when the question is whether a state model, reducer, or data shape holds up under real cases: 'does this state machine handle X then Y', 'sanity-check this data model', 'feel out the API'. Any question answered by driving state by hand and watching it change. Produces a portable pure logic module (liftable into production) behind a disposable shell, a terminal app by default, or a self-contained HTML demo a non-developer can drive by clicking buttons when no terminal fits. Captures the validated answer in a durable note. Not for visual or design questions. Use /prototype:explore-directions for those.
-
melodic-software Bundle VisualizeDecide the best visual form and medium for what is in the conversation right now, then render it. Use when asked to visualize, diagram, chart, draw, sketch, or render something, or which visual form fits it best. Infers the target from the conversation, picks a form (a mermaid diagram, a markdown table, a hand-authored SVG/CSS chart, ASCII/Unicode art, code-shape sketches, a rich rendered page, or, where the bundled design skill is available, a hand-editable design canvas) and a medium (inline terminal, a local HTML file, or a published Artifact), renders good defaults, and asks only when the target is genuinely ambiguous and no form was named. It routes chart craft and artifact-design fundamentals to those capabilities when installed. It does not teach them. Not for polishing a specific chart's colors/axes (a chart-craft/dataviz capability owns that) or restating dense text in plainer words (a comprehension/digest concern).
-
melodic-software Bundle Audit PerformanceRead-only slowness-diagnostic capture for a Claude Code installation. Run it AT THE MOMENT the machine or a session feels slow, before restarting or deleting anything. One timed engine pass captures the four suspects: CLI version (regression), retention-sweep health including the silent unparsable-settings pause (accumulated state), a timed stat-walk of the install tree plus session and plugin-fleet counts (component bloat), and the fan-out layer (per spawn): a load-labelled no-op spawn baseline, every hook that will fire bucketed per-tool-call versus per-turn, the statusline, subagent concurrency ceilings, sessions that predate the settings file, and orphan attribution by parent liveness not age. On Windows, a kernel-object census (Token objects against uptime, paged pool) names the host-level leak beneath all four suspects. Plus a process census, Defender guidance, and a bundled known-performance-issues reference. Reports and routes; never mutates, never deletes, never 'fixes', never executes a discovered h
-
melodic-software Bundle Explore DirectionsBuilds throwaway UI variations, several radically different visual layouts on one route, switchable from a floating control bar, to answer 'what should this look like' before committing to a design. Use when the question is what a page, screen, or dashboard should look like, or for design options to compare: 'mock up a UI', 'what should this page look like', 'try a different layout'. Runs on your real stack by default (real header, real data, real density) or as a self-contained HTML mockup (or, where the bundled design skill is available, an editable design-canvas Artifact); you flip between variants, pick one (or steal bits from each), and throw the rest away. Not for logic or state questions. Use /prototype:pressure-test for those. Not for an interactive parameter explorer whose output returns as a prompt: that is the first-party playground skill, routed via /playgrounds:use where the upstream playground plugin is installed from its marketplace.
-
melodic-software Bundle Audit Native OverlapMap native Claude Code surfaces (built-in CLI commands, bundled skills, plugin-backed built-ins, session-provided skills) against the current repo's plugin skills and agents, so a custom component never silently duplicates what Claude Code itself now ships. Bare invocation is a READ-ONLY report: overlap candidates with evidence, detection integrity floors, and a listing-budget exposure section. Verdicts are human-gated and recorded in a committed store rendered into a generated registry; only an explicit `apply` argument edits a component, baking presence-gated native references into descriptions and Boundary sections. Use when: 'does this skill duplicate a built-in', 'what does Claude Code already ship for this', 'audit native overlap', 'is our install-state audit the same as /doctor', 'refresh the native-surfaces registry', 'bake the native reference into this skill', 'which of our skills overlap bundled skills'. Not for: enumerating what this machine can invoke (use /claude-ops:inventory), MCP tool overlap
-
melodic-software Bundle Audit Prompting PosturesAudit locally-owned instruction components (skill bodies, agent definitions, hook instruction text, output styles, CLAUDE.md and rules) for MISSING posture guidance the official prompting guide says their purpose needs: delegation criteria and caps, minimal-scope and anti-test-gaming guardrails, investigate-before-answering and progress-claim grounding, autonomy vs checkpoint posture, destructive-action confirmation, context-budget reassurance, multi-window state guidance, parallel-tool-call steering. The additive complement to audit-instructions (which finds text that is present and wrong; this finds text that is absent and needed). Report-only: proposed additions sourced from a live fetch of the guide, gated to the human, never auto-applied. Use when: 'posture audit', 'audit prompting postures', 'is my skill missing guardrails', 'missing delegation criteria', 'should this component confirm destructive actions', 'align my components with the prompting guide', after authoring a new skill or agent, or as the a
-
melodic-software Bundle Component TypesAuditing a skill
-
golemcloud Skill Migrate TS Decorator SdkMigrating a TypeScript Golem agent from the removed decorator/base API (@agent + BaseAgent) to the current schema-driven defineAgent API. Use when porting an existing decorator-based TS agent, when you see @agent()/extends BaseAgent/@endpoint/@description code that no longer compiles, or when asked to modernize a TS component to the current SDK.
-
golemcloud Skill Modifying Wit InterfacesAdding or modifying WIT (WebAssembly Interface Types) interfaces. Use when changing .wit files, updating WIT dependencies, or working with component interfaces.
-
golemcloud Skill Golem Add Agent TSAdding a new TypeScript agent to a Golem component. Use when the user asks to create, add, or define a new agent type, implement an agent class, or add agent methods in a TypeScript Golem project.
-
golemcloud Skill Rebuild All Test ComponentsRebuilds the complete normal test-component artifact set. Use only when explicitly asked for a full rebuild or when many worker/integration test WASMs are missing.
-
golemcloud Skill Golem Add Env VarsDefining environment variables for Golem agents in `golem.yaml` (`env`, `envDefaults`, `secretDefaults`) or via CLI. Use when adding, setting, or overriding env vars on a component, agent, template, preset, or environment, or when wiring template substitution and merge modes.
-
golemcloud Skill Golem Add Agent RustAdding a new Rust agent to a Golem component. Use when the user asks to create, add, or define a new agent type, implement an agent trait, or add agent methods in a Rust Golem project.
-
golemcloud Skill Golem Add ComponentAdding a new component or agent templates to an existing Golem application. Use when adding a second component, adding agent templates like human-in-the-loop or snapshotting to an existing component, or converting a single-component app to multi-component.
-
bg-szy Bundle Stitch React ComponentsConvert Stitch HTML and screenshots into modular Vite/React/TypeScript components, or sync existing components to updated Stitch designs, with local architecture and validation checks.
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 eaa-en301549, define-component, tvos-app-experience-workflow. 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.