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.
-
humaisali Bundle Radix UI Design SystemBuild accessible design systems with Radix UI primitives. Headless component customization, theming strategies, and compound component patterns for production-grade UI libraries.
-
humaisali 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.
-
humaisali Skill Frontend DeveloperBuild React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture.
-
humaisali Skill Markstream AngularIntegrate the alpha markstream-angular renderer into Angular 20+ applications with standalone components, signals, safe HTML defaults, and optional peer features.
-
humaisali Bundle Markstream InstallInstall and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, Next.js, and Vue 2 applications.
-
humaisali Skill React Flow Node TSCreate React Flow node components following established patterns with proper TypeScript types and store integration.
-
humaisali Skill Xss HTML InjectionExecute comprehensive client-side injection vulnerability assessments on web applications to identify XSS and HTML injection flaws, demonstrate exploitation techniques for session hijacking and credential theft, and validate input sanitization and output encoding mechanisms.
-
johnalbertini14-glitch Bundle FsweFull-Stack Web Engineer (Microservices & Modern Frontend)
1 -
johnalbertini14-glitch Bundle Mistral OcrConvert PDF/images to Markdown/JSON/HTML using Mistral OCR API. Supports image extraction, table recognition, header/footer handling, and multi-column layouts. Usage: Upload a file and say Use Mistral OCR to process this.
1 -
humaisali Skill AstroBuild content-focused websites with Astro — zero JS by default, islands architecture, multi-framework components, and Markdown/MDX support.
-
humaisali Bundle Angular UI PatternsModern Angular UI patterns for loading states, error handling, and data display. Use when building UI components, handling async data, or managing component states.
-
humaisali Bundle Expo Tailwind SetupSet up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
-
humaisali Skill Frontend LighthouseAdd a portable Lighthouse CI gate for production frontend builds with Core Web Vitals budgets, category floors, median runs, and CI artifacts.
-
humaisali Skill Frontend UI Dark TSA modern dark-themed React UI system using Tailwind CSS and Framer Motion. Designed for dashboards, admin panels, and data-rich applications with glassmorphism effects and tasteful animations.
-
humaisali Skill Markstream Vue2 CLIIntegrate markstream-vue2 into Vue CLI or Webpack 4 with export-map-safe CSS, CDN worker fallbacks, and conservative code-block defaults.
-
humaisali Bundle React ModernizationMaster React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
-
humaisali Bundle React Native SkillsUse when working with react-native-skills tasks or workflows
-
humaisali Skill Fixing AccessibilityAudit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.
-
humaisali Skill Markstream Vue2 ViteIntegrate markstream-vue2 into Vue 2 plus Vite with bundled worker imports, CSS ordering, Composition API compatibility, and safe streaming defaults.
-
johnalbertini14-glitch Bundle Invoice GeneratorCreates professional invoices in markdown and HTML
1 -
johnalbertini14-glitch Bundle Ddg SearchDuckDuckGo HTML search scraper CLI with JSON, CSV, OpenSearch, markdown, and compact outputs.
1 -
johnalbertini14-glitch Bundle Afrexai Accessibility EngineAccessibility Engineering Engine
1 -
johnalbertini14-glitch Bundle Invoice Generator 2Generate a professional invoice from natural language or structured input. USE WHEN: - User asks to create an invoice, bill, or payment request - User provides line items, client details, or says "invoice [client] for [work]" - User wants a receipt or proof of payment document DON'T USE WHEN: - User wants a quote, estimate, or proposal (different document structure and intent) - User wants to track invoices, manage accounts receivable, or build an invoicing system - User wants a contract or agreement (use a contract/legal template instead) - User wants to send an invoice via email (this generates the document; sending is a separate step) - User wants a recurring billing setup or subscription management OUTPUTS: Single self-contained .html file, print-ready. User opens in browser → Print → Save as PDF. Clean, professional layout. INPUTS: Sender info, client info, line items (description + qty + price). Optional: invoice number, dates, tax rate, notes, payment terms.
1 -
ncdevshiv Skill C4 ComponentC4 Component Level: [Component Name]
-
ncdevshiv Skill Shopify AppsExpert patterns for Shopify app development including Remix/React Router apps, embedded apps with App Bridge, webhook handling, GraphQL Admin API, Polaris components, billing, and app extensions. U...
-
ncdevshiv Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifac...
-
ncdevshiv Bundle UI UX Pro MaxUI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, cr...
-
ncdevshiv Skill Algolia SearchExpert patterns for Algolia search implementation, indexing strategies, React InstantSearch, and relevance tuning Use when: adding search to, algolia, instantsearch, search api, search functionality.
-
ncdevshiv Skill React PatternsModern React patterns and principles. Hooks, composition, performance, TypeScript best practices.
-
ncdevshiv Bundle Webapp TestingToolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browse...
-
ncdevshiv Skill Bevy Ecs ExpertMaster Bevy's Entity Component System (ECS) in Rust, covering Systems, Queries, Resources, and parallel scheduling.
-
ncdevshiv Bundle Frontend DesignCreate distinctive, production-grade frontend interfaces with intentional aesthetics, high craft, and non-generic visual identity. Use when building or styling web UIs, components, pages, dashboard...
-
ncdevshiv Skill 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...
-
ncdevshiv Bundle AngularModern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
-
ncdevshiv Skill Wiki QAAnswers questions about a code repository using source file analysis. Use when the user asks a question about how something works, wants to understand a component, or needs help navigating the code...
-
ncdevshiv Skill DevelopmentComprehensive web, mobile, and backend development workflow bundling frontend, backend, full-stack, and mobile development skills for end-to-end application delivery.
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 radix-ui-design-system, engineering-skills, frontend-developer. 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.