Agent skill
web-artifacts-builder-performance
Sub-skill of web-artifacts-builder: Performance (+2).
Install this agent skill to your Project
npx add-skill https://github.com/vamseeachanta/workspace-hub/tree/main/.claude/skills/_internal/builders/web-artifacts-builder/performance
SKILL.md
Performance (+2)
Performance
- Minimize dependencies: Only include what you need
- Use CDN with version pinning:
library@4.4.0notlibrary@latest - Lazy load when possible: Defer non-critical scripts
- Optimize images: Use SVG or base64 for small images
Accessibility
<!-- Always include -->
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Use semantic HTML -->
<main>, <nav>, <article>, <section>, <header>, <footer>
<!-- Add ARIA labels -->
<button aria-label="Close dialog">x</button>
<!-- Ensure color contrast -->
/* Minimum 4.5:1 for normal text */
Responsive Design
/* Mobile-first approach */
.container {
padding: 10px;
}
@media (min-width: 768px) {
.container {
padding: 20px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
gsd-complete-milestone
Archive completed milestone and prepare for next version
gsd-reapply-patches
Reapply local modifications after a GSD update
gsd-verify-work
Validate built features through conversational UAT
gsd-thread
Manage persistent context threads for cross-session work
clinical-trial-protocol
Generate clinical trial protocols for medical devices or drugs through a modular, waypoint-based architecture with research-only and full protocol modes.
single-cell-rna-qc
Performs quality control on single-cell RNA-seq data (.h5ad or .h5 files) using scverse best practices with MAD-based filtering and comprehensive visualizations.
Didn't find tool you were looking for?