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.
-
tonone-ai Skill Draft Proto 2Hi-fi interactive HTML prototype — single-file, double-click-to-open, Playwright-verified. Use when asked to "make it clickable", "build a prototype", "hi-fi mockup", "interactive demo", "iOS prototype", "app mockup", "ui demo", or "prototype this". Goes beyond wireframes into visually finished, state-driven HTML with device frames and real images. Not production code — a design artifact for testing flows and pitching ideas.
- tonone-ai Skill Draft Recon 2
UI and UX reconnaissance — scan existing frontend routes, components, navigation, and flows to understand the current UX state before designing. Use when asked to "understand the current UI", "what UX patterns exist", "map the navigation", "what screens exist", or before starting any flow or wireframe work.
-
bbgnsurftech Skill Tracking Application Response Times 2This skill enables Claude to track and optimize application response times. It uses the response-time-tracker plugin to monitor API endpoints, database queries, external service calls, frontend rendering, and background job execution. The plugin calculates P50, P95, and P99 percentiles, average and maximum response times. Use this skill when you need to identify performance bottlenecks, monitor SLOs, or receive alerts about performance degradation. Trigger this skill with phrases like "track response times", "optimize latency", or "monitor application performance".
- bbgnsurftech Skill Performing Visual Regression Testing 2
This skill enables Claude to execute visual regression tests using tools like Percy, Chromatic, and BackstopJS. It captures screenshots, compares them against baselines, and analyzes visual differences to identify unintended UI changes. Use this skill when the user requests visual testing, UI change verification, or regression testing for a web application or component. Trigger phrases include "visual test," "UI regression," "check visual changes," or "/visual-test".
- bbgnsurftech Skill Scanning For Xss Vulnerabilities 2
This skill enables Claude to automatically scan for XSS (Cross-Site Scripting) vulnerabilities in code. It is triggered when the user requests to "scan for XSS vulnerabilities", "check for XSS", or uses the command "/xss". The skill identifies reflected, stored, and DOM-based XSS vulnerabilities. It analyzes HTML, JavaScript, CSS, and URL contexts to detect potential exploits and suggests safe proof-of-concept payloads. This skill is best used during code review, security audits, and before deploying web applications to production.
- bbgnsurftech Skill Scanning For Accessibility Issues 2
This skill enables Claude to perform comprehensive accessibility audits. It uses the accessibility-test-scanner plugin to identify WCAG 2.1/2.2 compliance issues, validate ARIA attributes, check keyboard navigation, and assess screen reader compatibility. Use this skill when the user requests an accessibility scan, audit, or compliance check, or when terms like "WCAG", "ARIA", "screen reader", "accessibility testing", or "a11y" are mentioned. It provides actionable insights for improving web application accessibility.
- bbgnsurftech Skill Generating Database Documentation 2
This skill enables Claude to automatically generate comprehensive documentation for existing database schemas using the database-documentation-gen plugin. It is triggered when the user requests database documentation, ERD diagrams, or a data dictionary. The plugin supports multiple database engines and generates documentation that includes ERD diagrams, table relationships, column descriptions, indexes, triggers, stored procedures, and interactive HTML documentation. Use this skill when you need to document existing database schemas for team onboarding, architectural reviews, or data governance purposes. The trigger terms include "database documentation", "ERD diagram", "data dictionary", and `/db-docs`.
-
frank-luongt Skill Frontend Design 2<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Slides 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Components 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React UI Patterns 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Tailwind Patterns 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Developer 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Flow Node TS 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle Frontend UI Dark TS 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React Modernization 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Bundle React Best Practices 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React State Management 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Tailwind Design System 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill Frontend Security Coder 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
- frank-luongt Skill React Native Architecture 2
<!-- AUTO-GENERATED by export-skills.py — DO NOT EDIT -->
-
lord1egypt Skill Data Cowork Plugin Component Schemas 2Data Cowork Plugin Component Schemas
2 - lord1egypt Skill System Prompt Frontend Browser Verification 2
Requires Claude to start the dev server and verify UI or frontend changes in a browser before reporting completion
2 - lord1egypt Skill Tool Description Askuserquestion Preview Field 2
Instructions for using the HTML preview field on single-select question options to display visual artifacts like UI mockups, code snippets, and diagrams
2 - lord1egypt Bundle Geniml 2
This skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
2 - lord1egypt Bundle Markitdown 2
Convert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
2 - lord1egypt Skill Vite Frontend 2
Initializing, structuring, and bundling client-side Single-Page Applications (SPA) with Vite.
2 - lord1egypt Skill Tailwind Design 2
Configuring and structuring styling components with utility-first CSS classes in HTML or JSX.
2 - lord1egypt Skill Nextjs Framework 2
Building modern React web applications with Server-Side Rendering (SSR), API routes, and routing layouts in Next.js.
2 - lord1egypt Skill Resend Email API 2
Sending programmatic, HTML transactional emails with custom domains using Resend.
2 - lord1egypt Skill Accessibility A11Y 2
Implementing WCAG accessibility guidelines, semantic HTML5, and screen reader ARIA roles.
2 -
rudironsoni Skill Dotnet UI Testing Core 4Tests UI across frameworks. Page objects, test selectors, async waits, accessibility.
- rudironsoni Skill Dotnet UI Testing Core 5
Tests UI across frameworks. Page objects, test selectors, async waits, accessibility.
- rudironsoni Skill Dotnet Accessibility 4
Implements accessible .NET UI. SemanticProperties, ARIA, AutomationPeer, testing per platform.
- rudironsoni Skill Dotnet Accessibility 5
Implements accessible .NET UI. SemanticProperties, ARIA, AutomationPeer, testing per platform.
- lord1egypt Skill Beautifulsoup Scraping 2
Parsing HTML web structures, searching tags, and extracting text using BeautifulSoup4.
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 draft-proto, draft-recon, Tracking Application Response Times. 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.