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.
-
thegoat395 Bundle Motion React MicrointeractionsDesign tactile interaction feedback and timing.
-
thegoat395 Bundle Motion React Layout TransitionsAnimate state-driven layout/layoutId changes.
-
thegoat395 Bundle Surface Shadow Material SystemsDesign component surfaces and elevation states.
-
thegoat395 Bundle Accessibility Performance PolishFinish accessibility and performance details.
-
thegoat395 Bundle React Error Loading Empty StatesDesign async loading, empty and recovery states.
-
thegoat395 Bundle React State And Effects DisciplineRepair state ownership, effects and async races.
-
shuwanito Bundle Nexus FrontendFrontend Wizard specializing in modern UIs, accessibility (WCAG), micro-frontends, and rendering performance. Use when you need UI architecture review, accessibility audits, React performance optimization, or frontend best-practice analysis.
-
shuwanito Bundle Nexus Iux AccessAudits and enforces WCAG 3.0 accessibility compliance, ARIA implementation, and inclusive design patterns. Use when evaluating UI components for accessibility barriers, ensuring regulatory compliance with accessibility standards, or designing inclusive user experiences.
-
shuwanito Bundle Nexus Code ReviewerDeep code review agent specialized in Python/FastAPI/React. Identifies bugs, security issues, performance bottlenecks, and architectural anti-patterns. Use when reviewing PRs, auditing codebases, or improving code quality.
-
shuwanito Bundle Nexus Frontend XrXR & WebAssembly Engineer specializing in Extended Reality (WebXR), WebAssembly, and multimodal interfaces. Use when you need XR experience design, WebAssembly performance optimization, immersive learning interfaces, or non-XR fallback strategies.
-
shuwanito Bundle Nexus Content AdapterContent adaptation and accessibility specialist for educational materials. Use when you need to adapt content for accessibility (easy reading, pictograms, accessible formats) or diverse learning needs. Ensures adaptations genuinely improve accessibility rather than merely simplifying content.
-
khanhhuyenngo985-sys Skill Graphifyany input (code, docs, papers, images) → knowledge graph → clustered communities → HTML + JSON + audit report
-
idocohen560 Bundle Uw Unity Editor ToolsGenerate custom editor tooling including Custom Inspectors, PropertyDrawers, EditorWindows, Gizmos, and Handles. Use when building designer-facing tools, spatial visualization, batch operations, or custom component UIs. Triggers on requests like "create a custom inspector", "add gizmos", "build an editor window", "make this component designer-friendly", "add a debug visualization", "create a level editor tool", "add a property drawer", "make a batch rename tool", or any editor tooling work. Always uses SerializedProperty and Undo for safety.
-
zeenie-ai Skill Browser SkillInteractive browser automation - navigate, click, type, fill forms, take screenshots, get accessibility snapshots. Supports system Chrome/Edge via auto-detection.
-
jordangaston Skill Virtual Influencer SlideshowsProduce a full batch of post-ready TikTok slideshow decks for an EXISTING faceless AI virtual influencer, end to end: format/topic planning, scripts in the persona's voice, exclusive per-deck verified backgrounds, AI-generated hero (hook/payoff) slides, deterministic HTML/CSS text rendering, red-team QA, and per-deck documentation with continuity-ledger updates. Use this skill whenever the user wants to generate, batch, or mass-produce slideshows/carousels for a virtual persona that already has an identity kit — 'make 30 slideshows for Dani,' 'produce the next content batch for our persona,' 'generate decks for the account,' or scaling a faceless account's posting calendar. Requires the character to already exist (persona doc, voice pack, world bible, face/outfit/prop sheets, scene library); if it does not, run the create-virtual-influencer skill first. This is the CONTENT-PRODUCTION half.
-
blyatiful1 Bundle I18NInternationalization for the Next.js 16 App Router without an i18n framework — [locale] segment routing, server-only dictionary pattern, Accept-Language negotiation in proxy.ts, hreflang via metadata alternates, Intl date/number formatting, RTL awareness — plus the discipline to skip all of it when the brief targets a single market. Invoke when design/BRIEF.md names two or more languages or markets, or when the user mentions translations, multilingual, locales, hreflang, language switcher, RTL, or "add a German/French/Spanish version". Also covers German/DACH typesetting (guillemets, ß/ẞ, DIN-5008 spacing, comma decimals) and the Leichte-Sprache plain-language register for civic/foundation DACH builds.
-
blyatiful1 Bundle ConsentGDPR/TTDSG §25 cookie and tracking consent as a design problem, not a bolted-on overlay — equal visual weight for Accept and Reject (never Accept-as-primary with Reject a buried gray link), a banner built from the site's own tokens, a consent-state React context that gates third-party script injection (analytics, Maps/YouTube embeds, chat, font CDNs) until granted, and a persistent footer "Cookie-Einstellungen" resurface link. Invoke in Phase 7 whenever a build loads any analytics, embed, chat widget, or third-party script, or when the user mentions cookies, consent, cookie banner, tracking, DSGVO/GDPR, TTDSG/TDDDG, opt-in, or "add a cookie notice".
-
blyatiful1 Bundle HandoffWrite the closing README for a finished ultraweb site — stack map with the real installed versions, run/build commands, a verified file-by-file content-and-copy editing map, the one-file token guide (app/globals.css @theme), one-line explanations of every design/* artifact, gate re-run instructions, deploy record, and maintenance notes on what not to break. Invoke in Phase 12 of the ultraweb pipeline after ship, or whenever the user asks for docs, a README, a handoff, onboarding notes for another developer, or "how do I edit this myself later". Every path and command in the README is verified against the actual repo, never described from memory.
-
blyatiful1 Bundle ImageryArt direction for every visual asset in an ultraweb build — pick ONE photo treatment (duotone, grain, overlay/scrim) implemented as palette-driven CSS/SVG, generate gradient-mesh and feTurbulence noise textures from the OKLCH palette, and produce honest placeholders as on-brand generated SVG/CSS art, never gray boxes, placeholder.com, or stock clichés. Invoke during foundation to define SYSTEM.md §imagery, and during build whenever a section needs an image, texture, or background ("add a hero image", "needs texture", "the images look stock", "placeholder images", "background feels flat", "make the photos match the brand").
-
blyatiful1 Bundle PhysicsSpring-based interaction for ultraweb builds — magnetic hover, drag with constraints, cursor followers, and gesture response using motion/react springs (stiffness/damping recipes included). GATED — only for briefs whose DIRECTION.md names a playful/tactile/interactive motion stance; budget 1–2 physics moments per site. Invoke in the ultraweb motion phase (Phase 9) when DIRECTION.md calls for it, or when the user says "magnetic button", "draggable", "cursor follower", "springy", "make it feel tactile/playful", or "elements should react to the mouse".
-
blyatiful1 Bundle RoutingDesigns the app/ route tree for a Next.js 16 App Router site — route groups for layout scoping, dynamic segments with awaited params (they are Promises in Next 16), parallel routes with their mandatory default.tsx, intercepting routes for URL-addressable modals, per-segment loading.tsx/error.tsx/not-found.tsx plus global-not-found.tsx and global-error.tsx as designed moments, and a root-layout Speculation Rules block that prerenders the likely next document — all designed to the system, not framework defaults. Invoke during the build phase when translating design/SITEMAP.md into app/ directories, when adding a dynamic or catch-all route, when a modal needs a shareable URL, when a 404/error/loading surface still looks default, or when navigation should feel instant. Trigger phrases — "set up the routes", "dynamic route", "route group", "slug page", "modal with a URL", "intercepting route", "custom 404", "500 error page", "loading state for this page", "error page", "prerender the next page".
-
blyatiful1 Bundle StorageFile upload and blob storage for a Next.js 16 site — dropzone UX with drag-drop as enhancement over a real file input, true progress from XHR upload events, instant client validation of type and size, zod v4 re-validation on the server, Vercel Blob as the default store with S3-compatible (S3/R2) as the alternative, server-generated storage keys, and post-upload rendering through next/image with persisted dimensions. Invoke during the backend phase when the brief needs avatars, user images, attachments, or any file upload, when choosing between server-relay and client-direct upload paths, or when uploaded images cause layout shift or bypass the image pipeline. Trigger phrases — "upload a file", "image upload", "avatar", "drag and drop", "file storage", "Vercel Blob", "S3 bucket", "attachments", "the upload shows no progress".
-
blyatiful1 Bundle DatabaseBuild the data layer with Drizzle ORM + Neon Postgres exactly per the locked stack — schema derived from the brief's nouns, drizzle-orm/neon-http client wiring, drizzle.config.ts with dialect postgresql, the generate/migrate/push workflow, the deliberate 0.45-vs-1.0-rc version pin, an on-brand seed script, and direct query patterns inside React Server Components. Invoke during the backend phase whenever the brief needs persistent data (accounts, listings, orders, saved content) or the user says "database", "schema", "Drizzle", "Postgres", "Neon", "migration", or "store this".
-
blyatiful1 Bundle PaymentsStripe payments for a Next.js 16 site — Stripe 22 with a lazy-instantiated client (no apiVersion pin; the SDK ships its own), Checkout Session creation in a server action redirecting to Stripe-hosted checkout, a webhook route handler that reads the raw body via await req.text() before constructEvent (the classic parsed-body signature failure), prices modeled in the Dashboard and allowlisted in code, strict test-mode discipline with the Stripe CLI, and success/cancel pages designed to the system — never bare. Invoke during the backend phase when the brief sells anything — one-time purchases, subscriptions, pricing-page checkout — when webhook signature verification keeps failing, or when fulfillment logic lives on the success page. Trigger phrases — "add Stripe", "checkout", "payments", "subscriptions", "billing", "buy button", "webhook signature error", "payment succeeded but nothing happened", "SEPA Lastschrift / Klarna for DACH", "Widerrufsrecht at checkout".
-
blyatiful1 Bundle RetrofitEntry point for existing Next.js sites that ultraweb did not build — inventory the codebase and routes, sweep for banned-list patterns, boot the site, screenshot every page at 375/768/1440, score it against the taste constitution via the design-judge rubric, and write design/RETROFIT.md — scored gaps each mapped to the one ultraweb skill that fixes it, phased into quick wins → system fixes → direction change, each phase then executed via ultraweb:iterate. Invoke when the user points at an existing site and asks to "improve", "audit the design", "modernize", "redesign", or "bring it up to standard", or asks "how bad is my site". For building from scratch use the root ultraweb skill; for a scoped change to a site that already has design/* artifacts use ultraweb:iterate directly.
-
blyatiful1 Bundle ShowpieceHero-grade set pieces for ultraweb builds — 2D canvas, shader/mesh gradients, particles, R3F/three.js 3D — under taste's hard gate — only when DIRECTION.md demands it, 60fps verified on mid hardware, static fallback and reduced-motion path mandatory, one per site. Covers the cost ladder (CSS → canvas → shader → R3F), next/dynamic ssr:false mounting, and LCP protection. Invoke in the ultraweb motion phase (Phase 9) when DIRECTION.md commissions it, or when the user says "WebGL hero", "3D product view", "shader gradient", "particles", "something jaw-dropping in the hero", "an interactive centerpiece", or "make a 3D view shareable / deep-linkable".
-
blyatiful1 Bundle WireframeSection-by-section blueprint for every page of an ultraweb build — decides section order and narrative arc, which component skill builds each section, layout-variant hint, exact content-density budget, width/rhythm class, mobile order, and the single flagged spot where the signature move lives; appends part 2 to design/SITEMAP.md. Invoke in Phase 4 (Structure) right after ultraweb:sitemap and before any section is coded; also when the user asks "what sections should this page have", "plan the page layout", "where should the wow moment go", or when a Phase 6 build agent needs the blueprint for its page.
-
blyatiful1 Bundle API DesignDesign and build the site's HTTP API surface — Next.js route handlers with typed Response.json, zod v4 validation at every boundary, one consistent error envelope (stable code + human message), strict status-code discipline, and the decision rule for when server actions beat API routes (internal mutations) and when routes win (external consumers, webhooks, non-browser clients). Invoke during the backend phase whenever the brief needs HTTP endpoints or the user says "API", "endpoint", "REST", "route handler", "webhook", or "expose the data". For the site's own forms mutating its own data, use ultraweb:server-actions instead.
-
blyatiful1 Bundle Content CmsThe content layer for a Next.js 16 site — plain @next/mdx for a handful of long-form pages (root mdx-components.tsx is mandatory, pageExtensions must include md/mdx, @next/mdx pinned to the next version), content-collections or velite for typed collections at scale, zod v4 frontmatter schemas, long-form prose styled from SYSTEM.md tokens instead of default gray prose classes, and Shiki code blocks highlighted at build inside RSCs (zero client JS). Contentlayer is dead and never an option. Invoke during the backend phase when the brief calls for a blog, docs, changelog, case studies, or any markdown-driven content, when choosing between MDX-in-repo and a headless CMS, or when article pages render as unstyled or default-gray prose. Trigger phrases — "add a blog", "MDX pages", "docs section", "markdown content", "frontmatter", "content collections", "style the article page", "syntax highlighting", "code blocks", "do we need a CMS".
-
blyatiful1 Bundle Gate ContentCopy and metadata completeness gate for ultraweb builds — reads the served HTML of every route to prove a unique title (≤60 chars) and description (140–160 chars), sweeps dead copy and bare microcopy (buttons, confirm dialogs, tooltips), traces every testimonial to the brief's proof inventory, flags any DACH/EU discount missing its 30-day-lowest-price disclosure (PAngV/Omnibus), extracts each page's heading outline so the H1→H2 sequence can be read as an argument for that page's conversion goal, audits voice consistency across sections, and crawls every internal link and anchor against the production server. Invoke in Phase 11 (Gates) of every ultraweb build, and whenever the user says "check the copy", "the button text", "broken links", "dead links", "duplicate titles", "30-day price", "voice consistency", "is the metadata complete", or "do the headings make sense".
-
idocohen560 Skill Gameobject Component AddAdd Component to GameObject in opened Prefab or in a Scene. Use 'gameobject-find' tool to find the target GameObject first. Use 'gameobject-component-list-all' tool to find the component type names to add.
-
idocohen560 Skill Gameobject Component GetGet detailed information about a specific Component on a GameObject. Returns component type, enabled state, and optionally serialized fields and properties. Use this to inspect component data before modifying it. Use 'gameobject-find' tool to get the list of all components on the GameObject.
-
idocohen560 Skill Gameobject Component ModifyModify a specific Component on a GameObject in opened Prefab or in a Scene. Allows direct modification of component fields and properties without wrapping in GameObject structure. Use 'gameobject-component-get' first to inspect the component structure before modifying.
-
idocohen560 Skill Gameobject Component DestroyDestroy one or many components from target GameObject. Can't destroy missed components. Use 'gameobject-find' tool to find the target GameObject and 'gameobject-component-get' to get component details first.
-
idocohen560 Skill Gameobject Component List AllList C# class names extended from UnityEngine.Component. Use this to find component type names for 'gameobject-component-add' tool. Results are paginated to avoid overwhelming responses.
-
devexpress Bundle Devextreme ChatHelp developers use the DevExtreme Chat component (dxChat) in Angular, React, Vue, and jQuery. Use when someone asks about Chat configuration, rendering messages, managing users, typing indicators, alerts, message editing, Markdown support, suggestion buttons, AI service integration (OpenAI, Azure, Dialogflow), popup embedding, streaming responses, or any scenario involving dxChat or DxChat. Trigger phrases: "DevExtreme Chat", "dxChat", "DxChat", "chat component", "chat messages", "chat user", "chat bot", "typing indicator", "chat suggestions", "AI chat", "chat markdown", "chat editing", "chat popup", "onMessageEntered", "renderMessage", "typingUsers".
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 virtual-influencer-slideshows, content-cms, motion-react-microinteractions. 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.