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.
-
zaxbysauce Bundle Codebase Review SwarmCodex adapter for running a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Use for full-repo or large-subsystem review reports; not for normal implementation.
-
zaxbysauce Skill Codebase Review Swarm 2Claude Code adapter for running a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Use for full-repo or large-subsystem review reports; not for normal implementation.
-
zaxbysauce Bundle Codebase Review Swarm 3Run a rigorous, quote-grounded codebase review or security/QA/accessibility/performance/AI-slop/enhancement audit. Use for full-repo or large-subsystem review reports; not for normal implementation. Performs Phase 0 inventory, selected exhaustive tracks with non-diluting depth, coverage closure, reviewer/critic validation, and writes .swarm/review-v8 artifacts without modifying source files.
-
onyx-dot-app Skill Image GenerationGenerate or edit raster images (photos, illustrations, textures, sprites, mockups, logos, infographics) using the workspace's configured image-generation provider via `onyx-cli image`. Use when the task should produce a brand-new bitmap image, transform an existing image, or derive variants from references — not when the output is better as code-native SVG/vector or built directly in HTML/CSS/canvas. If no image provider is configured, tell the user to set one up at /admin/configuration/image-generation.
-
francostino Skill Context7 Auto ResearchAutomatically fetch latest library/framework documentation for Claude Code via Context7 API. Use when you need up-to-date documentation for libraries and frameworks or asking about React, Next.js, Prisma, or any other popular library.
63 -
moliboy5000 Bundle SpeechUse when the user asks for text-to-speech narration or voiceover, accessibility reads, audio prompts, or batch speech generation via the OpenAI Audio API; run the bundled CLI (`scripts/text_to_speech.py`) with built-in voices and require `OPENAI_API_KEY` for live calls. Custom voice creation is out of scope.
-
beita6969 Bundle Openai Image GenBatch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
-
fridrichmethod Skill Scientific SchematicsDesigning scientific schematics, diagrams, and graphical abstracts. Covers tool selection (BioRender, Inkscape, Affinity, PowerPoint), design principles for pathway diagrams, mechanism schematics, experimental workflows, and journal graphical abstracts. Includes composition, icon sourcing, color for biological entities, and accessibility. Use when creating illustrative (not data-driven) scientific figures.
-
fridrichmethod Bundle Bio Workflows Liquid Biopsy PipelineOrchestrates the cell-free DNA / liquid-biopsy pipeline from plasma sequencing to tumor monitoring, forking tumor-naive (screening) vs tumor-informed (MRD), and chaining pre-analytic QC, UMI/duplex error-suppression (fgbio), fragment QC, ichorCNA tumor fraction (sWGS) or VarDict low-VAF calling (panel), CHIP subtraction against matched WBC, optional fragmentomics/methylation, and longitudinal tracking. Use when treating pre-analytics as the irreversible sensitivity ceiling (tube/time-to-plasma/hemolysis), running error-suppression BEFORE calling (single-strand consensus does not remove deamination; only duplex does), reporting a VAF only with input genome-equivalents (TF ~ 2x VAF only for clonal-het-diploid), subtracting CHIP before reporting somatic, or keeping tube/panel/pipeline identical across a longitudinal MRD series. Hands mechanism to the liquid-biopsy component skills; not a re-teach of any single step.
-
fridrichmethod Bundle Bio Population Genetics Rare Variant AssociationGene and region-based rare-variant aggregation - burden/collapsing, SKAT, SKAT-O, ACAT-V/ACAT-O, annotation-weighted STAAR - with regenie (--vc-tests), SAIGE-GENE+, and the SKAT R package. Single-variant tests are powerless at low minor allele count, so rare variants are aggregated across a gene or region under an explicit mask (functional class plus a MAF cutoff). A burden test collapses variants into one score assuming a single effect direction (powerful when true, near-zero power when risk and protective variants cancel); SKAT is a variance-component test robust to mixed directions; SKAT-O blends the two; ACAT/STAAR are dependence-robust and annotation-weighted. The mask is the hypothesis, imbalance needs SPA or Firth, and testing burden is per-gene-per-mask. Use when aggregating rare coding or regulatory variants into gene or region tests, choosing burden vs SKAT vs SKAT-O, or building masks. For single-variant GWAS see association-testing; for mask annotations see variant-calling/variant-annotation.
-
fridrichmethod Skill Scientific VisualizationGuide for choosing and creating scientific visualizations for publications and talks. Covers chart-type selection by data structure, color theory for accessibility/print, figure composition, journal formatting (Nature, Cell, ACS), and common pitfalls. Consult when visualizing data or preparing submission figures.
-
fridrichmethod Bundle Bio Atac Seq Differential AccessibilityIdentify differentially accessible chromatin regions across conditions using DiffBind, csaw, DESeq2, or edgeR. Use when comparing ATAC-seq accessibility between treatment groups, choosing between consensus-peak vs sliding-window approaches, picking the correct normalization (full library vs reads-in-peaks), correcting batch with SVA/RUVseq, or interpreting log2FC and FDR thresholds in a chromatin context.
-
fridrichmethod Bundle Bio Workflows Genome Annotation PipelineOrchestrates genome annotation from assembled contigs to functional annotation, forking prokaryotic (Bakta one-step, genetic-code table from GTDB-Tk) vs eukaryotic (RepeatMask -> BRAKER3 -> functional -> ncRNA), then eggNOG/InterProScan functional assignment and Infernal/tRNAscan ncRNA. Use when committing the pro-vs-eukaryotic path and the genetic-code table from taxonomy (never guessing), annotating ONLY a decontaminated QC-passed assembly (CheckM2 before prokaryotic annotation is non-negotiable), committing the evidence set (RNA-seq + protein drives BRAKER3 training), soft-masking with a curated repeat library before gene prediction, or pinning the tool + DB version for any pangenome comparison. Hands mechanism to the genome-annotation component skills; not a re-teach of any single step.
-
fridrichmethod Bundle Bio Atac Seq Motif Deviation 2Analyze transcription factor motif accessibility variability using chromVAR. Use when identifying which TF motifs show variable accessibility across samples or conditions in ATAC-seq data.
-
fridrichmethod Bundle Bio Atac Seq Allele Specific AccessibilityDetect allele-specific chromatin accessibility from ATAC-seq using WASP, GATK ASEReadCounter, or RASQUAL. Use when mapping cis-regulatory genetic variants from heterozygous SNPs, separating cis from trans regulation, building chromatin QTL (caQTL) maps, validating GWAS variant function with allelic imbalance, or detecting reference allele mapping bias before downstream analysis.
-
intense-visions Bundle Vue Pinia PatternVue Pinia Pattern
18 -
intense-visions Bundle Vue Reactive RefsVue Reactive Refs
18 -
intense-visions Bundle Vue Slots PatternVue Slots Pattern
18 -
intense-visions Bundle A11Y Aria PatternsARIA Patterns
18 -
intense-visions Bundle A11Y Form PatternsAccessible Form Patterns
18 -
intense-visions Bundle A11Y Semantic HTMLSemantic HTML for Accessibility
18 -
intense-visions Bundle CSS Tailwind MergeTailwind Merge
18 -
intense-visions Bundle Next Auth PatternsNext.js Authentication Patterns
18 -
intense-visions Bundle Next Data FetchingNext.js Data Fetching Patterns
18 -
intense-visions Bundle Svelte Error PagesSvelte Error Pages
18 -
intense-visions Bundle Vue Provide InjectVue Provide / Inject
18 -
intense-visions Bundle A11Y Color ContrastColor Contrast and Color Independence
18 -
intense-visions Bundle A11Y Image Text AltImage and Text Alternatives
18 -
intense-visions Bundle A11Y Modal PatternsAccessible Modal Dialog Patterns
18 -
intense-visions Bundle CSS Layout PatternsCSS Layout Patterns
18 -
intense-visions Bundle Drizzle With NextjsDrizzle with Next.js
18 -
intense-visions Bundle Next Monorepo SetupNext.js Monorepo Setup
18 -
intense-visions Bundle Next Route HandlersNext.js Route Handlers
18 -
intense-visions Bundle Next Server ActionsNext.js Server Actions
18 -
intense-visions Bundle React Concurrent UIReact Concurrent UI
18 -
intense-visions Bundle React Hooks PatternReact Hooks Pattern
18
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 codebase-review-swarm, codebase-review-swarm, codebase-review-swarm. 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.