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.
-
thedixitjain Skill Responsive Breakpoint Analyzer'Analyze responsive breakpoint analyzer operations. Auto-activating skill for Frontend Development. Triggers on: responsive breakpoint analyzer, responsive breakpoint analyzer Part of the Frontend Development skill category. Use when analyzing or auditing responsive breakpoint analyzer. Trigger with phrases like "responsive breakpoint analyzer", "responsive analyzer", "analyze responsive breakpoint r". '
2 -
thedixitjain Skill Salesforce Component StandardsQuality standards for Salesforce Lightning Web Components (LWC), Aura components, and Visualforce pages. Covers SLDS 2 compliance, accessibility (WCAG 2.1 AA), data access pattern selection, component communication rules, XSS prevention, CSRF enforcement, FLS/CRUD in AuraEnabled methods, view state management, and Jest test requirements. Use this skill when building or reviewing any Salesforce UI component to enforce platform-specific security and quality standards.
2 -
hashgraph-online Bundle Wayfinding Search And RecoveryUse this skill when designing search as the universal wayfinding recovery, or when designing for users who got lost — 404 pages, "results not found," "you''ve reached an unexpected page," empty states that should orient, and any moment where the user''s mental map has failed and the system must repair it. Trigger when designing global search, command palette, error pages, or recovery flows. Sub-aspect of `wayfinding`; read that first.
-
thedixitjain Skill Code Exemplars Blueprint GeneratorTechnology-agnostic prompt generator that creates customizable AI prompts for scanning codebases and identifying high-quality code exemplars. Supports multiple programming languages (.NET, Java, JavaScript, TypeScript, React, Angular, Python) with configurable analysis depth, categorization methods, and documentation formats to establish coding standards and maintain consistency across development teams.
2 -
thedixitjain Skill Engineering SkillsIndex of the engineering-team skills bundle for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365 (stdlib-only Python tools). Use when browsing or choosing among engineering-team role skills — load only the one specialist SKILL.md you need, never bulk-load the bundle.
2 -
affaan-m Skill Blender Motion State InspectionUse this skill when inspecting Blender characters, rigs, poses, animation retargeting, ground contact, facing direction, or model-vs-motion alignment where screenshots alone are not enough.
226k -
thedixitjain Skill Code Showcase React UI PatternsModern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
2 -
hashgraph-online Bundle Factor Of Safety Content StressUse this skill when designing UI to survive content extremes — long names, big numbers, multi-line addresses, missing images, internationalized strings, dense data. Trigger when reviewing a design against worst-case content, when bug reports show layouts breaking on real data, or when picking content limits and validation rules. Sub-aspect of `factor-of-safety`; read that first.
-
hashgraph-online Bundle Factor Of Safety Failure MarginUse this skill when planning capacity, redundancy, graceful degradation, or recovery for systems that must keep working under stress — performance budgets, dependency failure handling, retry logic, error budgets, infrastructure capacity. Trigger when scoping infrastructure, designing error-handling architecture, planning for failure modes, or reviewing reliability incidents. Sub-aspect of `factor-of-safety`; read that first.
-
thedixitjain Skill Frontend Slides Frontend SlidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration...
2 -
hashgraph-online Bundle Iteration Design Vs DevelopmentUse this skill when reviewing where in the project lifecycle iteration is happening — desirable iteration during design vs. costly rework during development. Trigger when a project keeps slipping due to "design changes during build," when scoping how much design work to do before engineering begins, or when retrospectives reveal that issues were caught too late. Sub-aspect of `iteration`; read that first.
-
hashgraph-online Bundle Scaling Interaction AssumptionsVerify and design for user-base scaling — broader audiences, more diverse use cases, more edge cases, behaviors that weren''t anticipated. Use when launching to a new market, scaling from beta to GA, expanding from one team to a company, or any context where the user population is growing or changing. Interaction scaling is often harder than load scaling because it surfaces design assumptions that worked for the original audience but fail for a broader one.
-
jeremylongshore Bundle Detecting Directory Listing| Probe a target for directories that return auto-generated index listings instead of denying or serving a specific file — exposes the full file tree under any reachable directory, including files the application never linked to. Use when: post-deploy verification on a static-asset host, security audit before SOC2, or following up on a finding from skill #6 (exposed-files) where a backup-file path returned 200 with HTML body instead of the expected file content (suggests autoindex serving a directory listing). Threshold: any directory-shaped path returns 200 with HTML body matching the framework-specific autoindex fingerprint (nginx fancyindex, Apache mod_autoindex Index of/, Caddy browse, Lighttpd mod_dirlisting, etc.). Trigger with: "directory listing check", "autoindex detection", "open directory scan".
-
ruvnet Skill Agent Spec Mobile React NativeAgent skill for spec-mobile-react-native - invoke with $agent-spec-mobile-react-native
-
hashgraph-online Bundle Feedback Loop States And LatencyUse this skill when designing the visible states an interactive element passes through (idle / pending / success / error) and matching feedback timing to the user''s perceptual thresholds. Trigger when designing button states, form-submit flows, file-upload progress, loading screens, or any interaction whose response time is variable. Sub-aspect of `feedback-loop`; read that first.
-
hashgraph-online Bundle Forgiveness Undo And Soft DeleteUse this skill when designing reversibility — undo systems, soft delete, archive-with-recovery, version history, "Undo Send" patterns, and any mechanism that lets a user step back from an action they regret. Trigger when designing destructive actions you want to be safe rather than friction-heavy, when picking between confirmation dialogs and undo toasts, when defining recovery windows, or when planning version-history features. Sub-aspect of `forgiveness`; read that first.
-
hashgraph-online Bundle Recognition Pickers And PalettesUse this skill when designing pickers, dropdowns, comboboxes, autocompletes, command palettes, or any UI that lets the user select from a known set. Trigger when picking between a free-text field and a select; when designing a command palette; when reviewing why users keep typing wrong values into autocomplete inputs. Sub-aspect of `recognition-over-recall`; read that first.
-
rohitg00 Skill Styleseed Design Judgment Engine- Color discipline — #2A2A2A as refined black, 5-level grayscale, one accent color maximum - Spatial rhythm — alternating section heights, 2:1 number-to-unit ratios - Information hierarchy — card/background separation, progressive density - Shadow & elevation — 4% opacity ceiling, dark mode border substitution - Component variance — never 4 identical KPI cards, stagger content types
-
thedixitjain Bundle Foundry Hosted Agent CopilotkitOngoing development guidance for agentic web apps that pair a CopilotKit frontend with Microsoft Agent Framework agents on Azure AI Foundry hosted agents over the AG-UI protocol - add and gate agent tools, wire human-in-the-loop approvals, build generative UI and shared state, debug the event stream, upgrade pre-1.0 packages safely, and deploy hosted agent updates.
2 -
hashgraph-online Bundle Documentation Quality MetricsAudit and measure developer documentation quality using functional quality, structural quality, accessibility, purpose, findability, accuracy, completeness, clarity, concision, consistency, analytics, user goals, doc goals, and metric plans. Use when evaluating docs, designing documentation metrics, selecting dashboards, or linking docs work to user and business outcomes.
-
thedixitjain Bundle Exploiting HTTP Request SmugglingDetecting and exploiting HTTP request smuggling vulnerabilities caused by Content-Length and Transfer-Encoding parsing discrepancies between front-end and back-end servers.
2 -
hashgraph-online Bundle Figure Ground Overlays And ModalsApply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it right means users naturally focus on the overlay, getting it wrong means modals blur into the page or feel jarring.
-
thedixitjain Skill Frontend API Integration PatternsProduction-ready patterns for integrating frontend applications with backend APIs, including race condition handling, request cancellation, retry strategies, error normalization, and UI state management.
2 -
thedixitjain Skill Frontend Mobile Security Xss ScanYou are a frontend security specialist focusing on Cross-Site Scripting (XSS) vulnerability detection and prevention. Analyze React, Vue, Angular, and vanilla JavaScript code to identify injection poi
2 -
thedixitjain Skill Poq Survey Design And MeasurementUse when defending the survey design and measurement of a Public Opinion Quarterly (POQ) manuscript through the Total Survey Error framework — coverage, sampling, nonresponse, measurement (question wording/order/scales), mode effects, and weighting. POQ is the leading survey-methodology journal and expects AAPOR-standard rigor. Strengthens the design; it does not write code.
2 -
thedixitjain Skill Jep Accessibility And TranslationUse when translating technical results, models, and methods into plain language for a Journal of Economic Perspectives (JEP) article — minimizing jargon and notation without dumbing down. Handles language and translation of ideas; defer evidence/number presentation to jep-evidence-without-equations and exhibits to jep-exhibits-for-general-readers.
2 -
hashgraph-online Bundle Mental Model System Vs InteractionUse this skill when distinguishing the two mental-model types — system models (how the user thinks the system works) and interaction models (how the user thinks they should use it). Trigger when designing onboarding (which model to teach), reviewing user confusion (which model is wrong), or building documentation (which model to explain). Sub-aspect of `mental-model`; read that first.
-
hashgraph-online Skill UI Designercomponent SpecificationUI组件规范,定义按钮、输入框、卡片等基础组件的变体、尺寸、状态
-
hashgraph-online Bundle Wayfinding Breadcrumbs And ContextUse this skill when designing the orientation chrome that tells users where they are — breadcrumbs, current-page indicators, page titles, header context, "you are here" markers, parent-link affordances. Trigger when designing a multi-level IA, when users complain "I lost track of where I was," when reviewing whether to add or remove a breadcrumb, or when picking between navigation patterns for hierarchical content. Sub-aspect of `wayfinding`; read that first.
-
jeremylongshore Bundle Checking HTTP Security Headers| Audit a target's HTTP security headers — CSP, HSTS, X-Frame-Options, X-Content-Type-Options, Referrer-Policy, Permissions-Policy, and the Cross-Origin trio (COOP, COEP, CORP). Use when: SOC2 / PCI auditor flagged "missing security headers" or a Mozilla Observatory grade is below B, OR you need HSTS preload eligibility for chrome://net-internals. Threshold: any missing required header on production HTML response, HSTS max-age below 31536000s (preload requirement), CSP with 'unsafe-inline' or 'unsafe-eval', X-Frame-Options absent AND CSP frame-ancestors absent (clickjacking), Cache-Control allowing public cache on authenticated endpoint. Trigger with: "audit security headers", "check csp", "hsts check", "header posture".
-
thedixitjain Skill Power Bi Report Design ConsultationPower BI report visualization design prompt for creating effective, user-friendly, and accessible reports with optimal chart selection and layout design.
2 -
hashgraph-online Bundle Recognition Recents And SuggestionsUse this skill when designing surfaces that accelerate repeat tasks through recents, frequently-used items, and contextual suggestions. Trigger when designing pickers used repeatedly, command palettes, navigation that should adapt to user behavior, or any surface where a returning user shouldn''t have to retype their frequent destinations. Sub-aspect of `recognition-over-recall`; read that first.
-
thedixitjain Skill Folder Structure Blueprint GeneratorComprehensive technology-agnostic prompt for analyzing and documenting project folder structures. Auto-detects project types (.NET, Java, React, Angular, Python, Node.js, Flutter), generates detailed blueprints with visualization options, naming conventions, file placement patterns, and extension templates for maintaining consistent code organization across diverse technology stacks.
2 -
am-will Skill Frontend Responsive Design StandardsBuild responsive, mobile-first layouts using fluid containers, flexible units, media queries, and touch-friendly design that works across all screen sizes. Use this skill when creating or modifying UI layouts, responsive grids, breakpoint styles, mobile navigation, or any interface that needs to adapt to different screen sizes. Apply when working with responsive CSS, media queries, viewport settings, flexbox/grid layouts, mobile-first styling, breakpoint definitions (mobile, tablet, desktop), touch target sizing, relative units (rem, em, %), image optimization for different screens, or testing layouts across multiple devices. Use for any task involving multi-device support, responsive design patterns, or adaptive layouts.
-
thedixitjain Bundle Migrate XML Views To Jetpack ComposeProvides a structured workflow for migrating an Android XML View to Jetpack Compose. This skill details the step-by-step process, from planning and dependency setup, to theming and layout migration, validation and XML cleanup. Use this skill when you need to migrate an XML View to Jetpack Compose in an Android project. It solves the problem of converting the UI of a legacy XML View into modern, declarative Compose components while maintaining interoperability.
2 -
thedixitjain Skill Technology Stack Blueprint GeneratorComprehensive technology stack blueprint generator that analyzes codebases to create detailed architectural documentation. Automatically detects technology stacks, programming languages, and implementation patterns across multiple platforms (.NET, Java, JavaScript, React, Python). Generates configurable blueprints with version information, licensing details, usage patterns, coding conventions, and visual diagrams. Provides implementation-ready templates and maintains architectural consistency for guided development.
2
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 agent-spec-mobile-react-native, ui-designercomponent-specification, blender-motion-state-inspection. 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.