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.
-
majiayu000 Bundle Javascript SdkJavaScript/TypeScript SDK for inference.sh - run AI apps, build agents, integrate 150+ models. Package: @inferencesh/sdk (npm install). Full TypeScript support, streaming, file uploads. Build agents with template or ad-hoc patterns, tool builder API, skills, human approval. Use for: JavaScript integration, TypeScript, Node.js, React, Next.js, frontend apps. Triggers: javascript sdk, typescript sdk, npm install, node.js api, js client, react ai, next.js ai, frontend sdk, @inferencesh/sdk, typescript agent, browser sdk, js integration
567 -
majiayu000 Bundle Email Render BuilderUse when the user asks to "build the email HTML", "make this email responsive", "fix dark-mode rendering", or "QA the email across clients"; produces the coded HTML build — a responsive table layout, dark-mode + accessibility pass, a client-render matrix, image-block fallbacks, and a plain-text parity check. Not for writing the copy — use email-creative-builder; not for scoring the email or computing EQS — use email-quality-auditor. 邮件HTML/响应式邮件/暗色模式渲染
567 -
majiayu000 Bundle Fec Image GenerationUse when generating or editing diagrams, charts, visual assets, posters, UI mockups, product images, infographics, academic figures, comics, avatars, storyboards, brand boards, or image-edit workflows, especially when exported PNGs need visual QA and bounded self-repair. Prefer deterministic Mermaid/SVG/HTML/canvas sources for text-heavy diagrams; do not use for ordinary UI polish without generated imagery. Chinese triggers include 图片生成, 图像编辑, 图表生成, 架构图, ER 图, UML, 序列图, 海报, UI 样机, 产品图, 信息图, 学术图, 漫画, 头像, 分镜, 品牌板, PNG 自检, 自动修复.
567 -
majiayu000 Bundle Localization ToolkitThis skill should be used when setting up, auditing, or enforcing internationalization/localization in UI codebases (React/TS, i18next or similar, JSON locales), including installing/configuring the i18n framework, replacing hard-coded strings, ensuring en-US/zh-CN coverage, mapping error codes to localized messages, and validating key parity, pluralization, and formatting.
567 -
majiayu000 Bundle Mobile Testing DetoxDetox E2E gray-box testing for React Native - matchers, actions, expectations, waitFor, device API, synchronization, mocking, artifacts, CI integration
567 -
majiayu000 Bundle Vercel React Best PracticesReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
567 -
majiayu000 Bundle Solution ExplorationExplores the problem and the range of possible approaches before any code is written — clarifying what is actually being asked, surfacing options with their tradeoffs, and converging on one. Use this at the start of any feature, component, or behavior change, when a request is ambiguous, when the first idea is the only idea on the table, or when a design decision needs pressure-testing before commitment.
567 -
majiayu000 Bundle 1k PerformancePerformance optimization for React/React Native — re-renders, memoization, FlashList, memory leaks, and bundle size.
567 -
majiayu000 Bundle Vision To MissionTransform a user's builder vision into a complete, executable GSD mission package. Use this skill whenever a user has described what they want to BUILD (a product, tool, feature, system, educational pack, or ecosystem component) and wants it structured for GSD execution. Triggers include: 'structure this for GSD', 'make this into a milestone', 'turn this vision into a mission', 'package this up for Claude Code', 'create the mission files', 'I want to hand this to GSD', 'make me a mission package', or any request to decompose a described system into wave-based executable tasks. Also trigger when the user has a vision doc already written and needs mission decomposition. Prefer this skill over generic document creation whenever the GSD ecosystem is mentioned alongside building something.
567 -
majiayu000 Bundle Code Quality AuditUse when checking code quality, running security audits, testing coverage, finding SOLID/DRY violations, or setting up quality tools. Use when user says "audit this code", "check security", "run PHPStan", "code quality", "find violations", "SOLID check", "DRY check", "test coverage", "lint this", "security review", "is this production ready", "check for vulnerabilities", "code review", "grade this code". Supports Drupal (PHPStan, PHPMD, Psalm, Semgrep, Trivy, Gitleaks via DDEV) and Next.js (ESLint, Jest, Semgrep, Trivy, Gitleaks). Use proactively before deployment or after significant code changes.
567 -
majiayu000 Bundle Fec Validation FixUse when running existing project validation commands and fixing failures after code changes, including lint, type-check, unit/integration test, build, CI, or local script failures. Do not use when the task is to design or author new component/E2E tests; Chinese triggers include 验证, 检查失败, 修复失败, CI 失败.
567 -
majiayu000 Bundle Nextjs Code ReviewProvides comprehensive code review capability for Next.js applications, validates Server Components, Client Components, Server Actions, caching strategies, metadata, API routes, middleware, and performance patterns. Use when reviewing Next.js App Router code changes, before merging pull requests, after implementing new features, or for architecture validation. Triggers on "review Next.js code", "Next.js code review", "check my Next.js app".
567 -
majiayu000 Bundle PPTX Quality GatesUse when validating or repairing an editable PPTX deck for geometry, accessibility, native editability, source lineage, and OOXML package integrity.
567 -
majiayu000 Bundle Af Write Rtl TestsWrite React Testing Library component tests for UI behaviour and accessibility. Use when testing component interactions, verifying accessibility requirements, or validating design contracts from Storybook.
567 -
majiayu000 Bundle Web Testing VitestPlaywright E2E, Vitest, React Testing Library - E2E for user flows, unit tests for pure functions only, network-level API mocking - inverted testing pyramid prioritizing E2E tests
567 -
majiayu000 Bundle Pipeline DnaseseqExecute ENCODE DNase-seq pipeline from FASTQ to hotspots and footprints. Child of pipeline-guide. Provides Nextflow execution with Docker and cloud deployment. Use when processing DNase-seq data, calling DNase hypersensitive sites, performing footprinting analysis. Trigger on: DNase-seq pipeline, DNase hypersensitive, DHS, Hotspot2, footprinting, DNase I, chromatin accessibility DNase.
567 -
majiayu000 Bundle Langchain React AgentLangChain ReAct agent implementation with tool binding for reasoning and action loops
567 -
majiayu000 Bundle Read Software DocsRead and navigate software package documentation websites. Use when the user provides a documentation URL and wants to understand an API, SDK, framework, or library. Triggers on requests like "read the docs at [url]", "look up [topic] in the [package] documentation", "what does [API] do according to the docs", or any task requiring fetching and comprehending online software documentation. Supports any HTML-based documentation site including Sphinx, Doxygen, ReadTheDocs, MkDocs, and custom doc sites. Common targets include NVIDIA Isaac Sim, Omniverse Kit, OpenUSD, ROS 2, PyTorch, and similar software packages.
567 -
majiayu000 Bundle Proposal GeneratorGenerate HTML proposals for consulting and enterprise clients from meeting transcripts. Extracts client needs, recommends pricing, and weaves in NGM platform value props with editorial styling.
567 -
majiayu000 Bundle Astro Supabase NetlifyAstro with Supabase integration for Netlify.
567 -
majiayu000 Bundle Auditing AccessibilityWCAG 2.1/2.2準拠のアクセシビリティ監査と改善を支援します。Webサイトやアプリケーションのアクセシビリティ問題を特定し、優先度付きの改善提案を提供します。アクセシビリティチェック、WCAG準拠確認、スクリーンリーダーテストが必要な場合に使用してください。
567 -
majiayu000 Bundle Axiom Swiftui GesturesUse when implementing SwiftUI gestures (tap, drag, long press, magnification, rotation), composing gestures, managing gesture state, or debugging gesture conflicts - comprehensive patterns for gesture recognition, composition, accessibility, and cross-platform support
567 -
majiayu000 Bundle Base Miniapp DeveloperBuild or migrate React/Next.js apps into Base/Coinbase Wallet Mini Apps using MiniKit + OnchainKit, while keeping thirdweb as the primary wallet/onboarding/payment integration; manage farcaster.json manifests, readiness, and gasless transactions.
567 -
majiayu000 Bundle Batch Report GeneratorGenerate GenuVerity fact-check reports from structured input (Gemini research output). Use /batch-report to process research into HTML reports. Optimized for token efficiency - expects pre-researched sources.
567 -
majiayu000 Bundle Change Impact AnalyzerAnalyzes impact of proposed changes on existing systems (brownfield projects) with delta spec validation. Trigger terms: change impact, impact analysis, brownfield, delta spec, change proposal, change management, existing system analysis, integration impact, breaking changes, dependency analysis, affected components, migration plan, risk assessment, brownfield change. Provides comprehensive change analysis for existing systems: - Affected component identification - Breaking change detection - Dependency graph updates - Integration point impact - Database migration analysis - API compatibility checks - Risk assessment and mitigation strategies - Migration plan recommendations Use when: proposing changes to existing systems, analyzing brownfield integration, or validating delta specifications.
567 -
majiayu000 Bundle Cloud Deploy BlueprintEnd-to-end cloud deployment skill for Kubernetes (AKS/GKE/DOKS) with CI/CD pipelines. Covers managed services integration (Neon, Upstash), ingress configuration, SSL certificates, GitHub Actions workflows with selective builds, and Next.js build-time vs runtime environment handling. Battle-tested from 9-hour deployment session.
567 -
majiayu000 Bundle Color Contrast AuditorDetects and fixes color contrast violations using WCAG 2.1 guidelines and perceptual analysis. Expert in contrast ratio calculation, color blindness simulation, and providing accessible alternatives. Activate on "check contrast", "color accessibility", "WCAG audit", "readability check", "contrast ratio", "hard to read", "can't see text". NOT for general color theory (use color-theory-palette-harmony-expert), brand color selection (use web-design-expert), or non-visual accessibility (use ux-friction-analyzer).
567 -
majiayu000 Bundle Component ArchitectureDesign and build reusable, well-documented components. Master component composition, prop design, variant systems, state management, and documentation. Create a scalable component library that enables consistency and speeds up development. Works with React, TypeScript, and Tailwind CSS.
567 -
majiayu000 Bundle Component Docs Batcher批量生成和维护前端组件库文档的自动化工具。专为 Monorepo 组件库设计(如 atom-ui-mobile),通过对比组件文件和文档的修改时间,自动生成任务清单并批量生成符合规范的完整组件文档。支持以下场景:(1) 定期批量更新组件文档,(2) 单个组件文档维护,(3) 新组件文档初始化。自动识别主要组件文件,跳过 index.ts、store、hooks 等辅助文件,文档路径为组件目录下的 index.zh-CN.md。
567 -
majiayu000 Bundle Component From Capture画像キャプチャ(直接貼り付けまたはファイルパス指定)から既存のWindows Forms風Astroコンポーネントを組み合わせて画面ページを自動生成します。UIデザインを解析し、レイアウト、色、サイズ、テキストを再現した画面を作成します。
567 -
majiayu000 Bundle Component OrganizationMaintain consistent file structure - components/ui for base shadcn, components/shared for composed components, pages for routes, always use barrel exports
567 -
majiayu000 Bundle Composable Svelte ChatStreaming chat and collaborative features for Composable Svelte. Use when implementing LLM chat interfaces, real-time messaging, or collaborative features. Covers StreamingChat (transport-agnostic), presence tracking, typing indicators, and WebSocket integration from @composable-svelte/chat package.
567 -
majiayu000 Bundle Composable Svelte CodeCode editing, syntax highlighting, and visual programming for Composable Svelte. Use when implementing code editors, syntax highlighting, or node-based visual programming. Covers CodeEditor (CodeMirror), CodeHighlight (Prism), and NodeCanvas (SvelteFlow) from @composable-svelte/code package.
567 -
majiayu000 Bundle Composable Svelte CoreCore architecture patterns for Composable Svelte. Use when creating stores, writing reducers, working with effects, composing reducers, or implementing business logic. Covers the Store-Reducer-Effect trinity, all 12 effect types, composition strategies (scope, combineReducers, forEach), and immutable state updates.
567 -
majiayu000 Bundle Composable Svelte I18NInternationalization (i18n) system for Composable Svelte. Use when implementing multi-language support, translations, date/number formatting, locale detection, or localizing applications. Covers translation loading, ICU MessageFormat, formatters (dates/numbers/currency), locale detection, SSR integration, and the i18n reducer.
567 -
majiayu000 Bundle Conditional GenerationDetermines which files and dependencies to generate based on application type (standalone vs micro-frontend). Controls conditional features.
567
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 javascript-sdk, email-render-builder, fec-image-generation. 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.