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 Supabase TSProduction-ready Supabase integration patterns for Next.js/React/TypeScript applications. Use when working with Supabase for (1) SSR authentication with @supabase/ssr, (2) Database operations and migrations, (3) Row Level Security (RLS) policies, (4) Storage buckets and file uploads, (5) Realtime channels and presence, (6) Edge Functions with Deno, (7) pgvector embeddings and semantic search, (8) Vercel deployment and connection pooling, (9) CLI operations (type generation, migrations). Triggers on Supabase client setup, auth patterns, RLS policies, storage uploads, realtime subscriptions, Edge Functions, vector search, or Vercel+Supabase deployment.
567 - majiayu000 Bundle Add API Route
Create Next.js API route with validation and error handling
567 - majiayu000 Bundle Mobile Cross
Mobile Cross-Platform Agent. React Native/Flutter를 사용한 크로스플랫폼 앱 개발을 담당합니다.
567 - majiayu000 Bundle Frontend Hook
커스텀 훅 개발 에이전트. React 커스텀 훅을 설계하고 구현합니다.
567 - majiayu000 Bundle Frontend Lint
코드 품질 검사 에이전트. 린팅과 포맷팅을 관리합니다.
567 - majiayu000 Bundle Frontend Perf
성능 최적화 에이전트. 프론트엔드 성능을 분석하고 최적화합니다.
567 - majiayu000 Bundle Design HTML
[デザイン] （任意）SSOT → 静的HTML を生成し、doc/input/design/html/ に保存
567 - majiayu000 Bundle Design Mock
[デザイン] 1.（会話起点）SSOT + 静的HTML（叩き台）を生成
567 - majiayu000 Bundle UX Patterns
UX patterns for task flows, wireframes, accessibility, and user interactions
567 - majiayu000 Bundle Personalcook
> type data:text/html, <html contenteditable> into browser address bar to change browser into a temprary editor.
567 - majiayu000 Bundle Frontend Build
빌드/배포 에이전트. 빌드 설정과 배포 파이프라인을 관리합니다.
567 - majiayu000 Bundle Frontend State
상태 관리 에이전트. 애플리케이션 상태 관리를 설계하고 구현합니다.
567 - majiayu000 Bundle Security React
Seguridad React. Use when reviewing security, implementing auth, or hardening code.
567 - majiayu000 Bundle Base UI Docs
Base UI (@base-ui/react) の公式ドキュメント参照とAPI確認を行うためのスキル。Base UIのコンポーネント/ハンドブック/概要に関する質問が来たら使う。
567 - majiayu000 Bundle Design Split
[デザイン] （任意）1枚ペラHTML → ページ単位の静的HTMLに分割
567 - majiayu000 Bundle Event System
Conventions for custom event naming, dispatching, and handling between components. Use when implementing component communication.
567 - majiayu000 Bundle Bio Read Qc Fastp Workflow
All-in-one read preprocessing with fastp including adapter trimming, quality filtering, deduplication, base correction, and HTML report generation. Use when preprocessing Illumina data and wanting a single fast tool instead of separate Cutadapt, Trimmomatic, and FastQC steps.
567 - majiayu000 Bundle Frontend Socket
실시간 통신 에이전트. WebSocket/Socket.io 통신을 구현합니다.
567 - majiayu000 Bundle UX UI Component
UI 컴포넌트 명세 에이전트. 컴포넌트의 UI/UX 명세를 작성합니다.
567 - majiayu000 Bundle Convex Docs
Query and manage local Convex documentation mirror (42 docs). Search Convex topics for real-time database, serverless functions, authentication, file storage, and React hooks. Use when implementing Convex backend features or answering Convex-related questions. (user)
567 - majiayu000 Bundle IOS Hig Design
Design native iOS interfaces following Apple Human Interface Guidelines. Use when the user mentions "iPhone app", "iPad layout", "SwiftUI", "UIKit", "Dynamic Island", "safe areas", "HIG compliance", "SF Symbols", "haptic feedback", or "iOS accessibility". Also trigger when building tab bars, navigation stacks, sheets, or modals for iOS, implementing dark mode, or adapting layouts for different screen sizes. Covers navigation patterns, accessibility, SF Symbols, and platform conventions. For general UI polish, see refactoring-ui. For affordance design, see design-everyday-things.
567 - majiayu000 Bundle Jp UI Consumer
Use when consuming jp-ui in an app: installation, CSS/theme setup, component selection, and token usage; guide Codex to the jp-ui docs and types for implementation details.
567 - majiayu000 Bundle Liquidglass UI
Generate SwiftUI LiquidGlass components + tokens + accessibility + perf checks for iOS 26+/watchOS 26+.
567 - majiayu000 Bundle Cairo Scanner
Use when the user wants to audit Cairo smart contracts for security vulnerabilities, scan Starknet contracts for felt overflow, storage collision, or account abstraction issues, review Cairo 2.x contracts for component architecture flaws, or analyze STARK-based protocols for cryptographic and computational errors.
567 - majiayu000 Bundle App Accessibility
Your approach to handling app accessibility. Use this skill when working on files where app accessibility comes into play.
567 - majiayu000 Bundle Frontend Refactor
코드 리팩토링 에이전트. 코드 구조를 개선하고 리팩토링합니다.
567 - majiayu000 Bundle Bio Reporting Rmarkdown Reports
Create reproducible bioinformatics analysis reports with R Markdown including code, results, and visualizations in HTML, PDF, or Word format. Use when generating analysis reports with RMarkdown.
567 - majiayu000 Bundle Frontend Component
컴포넌트 개발 에이전트. React/Next.js 컴포넌트를 설계하고 구현합니다.
567 - majiayu000 Bundle HTML Article
HTML文章编写规范，用于创建符合本站风格的技术文章
567 - majiayu000 Bundle Frontend Theming
Your approach to handling frontend theming. Use this skill when working on files where frontend theming comes into play.
567 - majiayu000 Bundle Design Components
[デザイン] 3. 静的UI骨格 → Layout/Component を抽出して分離
567 - majiayu000 Bundle Nextjs Tanstack Form
TanStack Form v1 for Next.js 16 with Server Actions, Zod validation, and shadcn/ui integration. Use when building forms, validation, multi-step wizards, or dynamic field arrays.
567 - majiayu000 Bundle Starknet Scanner
Use when the user wants to audit Starknet contracts for security vulnerabilities, scan Cairo contracts for Starknet-specific patterns including account abstraction, class replacement, or L1-L2 messaging, review Starknet DeFi protocols for component architecture flaws, or analyze cross-layer bridge security.
567 - majiayu000 Bundle Packages React
Your approach to handling packages react. Use this skill when working on files where packages react comes into play.
567 - majiayu000 Bundle Webpack Vite
详细记录了大型 Vue 项目从 Webpack 迁移到 Vite 的完整步骤，包括别名配置、环境变量处理和 CommonJS 兼容性问题的解决。
567 - majiayu000 Bundle Release Coordinator 2
Coordinates multi-component releases, feature flags, versioning, and rollback strategies. Trigger terms: release management, release planning, release coordination, feature flags, canary deployment, progressive rollout, release notes, rollback strategy, release train, deployment coordination, versioning, changelog, release approval, deployment checklist. Manages complex release workflows: - Multi-component release coordination - Feature flag strategy and management - Versioning and changelog generation - Canary and blue-green deployments - Progressive rollout strategies - Rollback procedures - Release approval workflows - Post-release verification Use when: planning releases, coordinating multi-service deployments, managing feature flags, or generating release notes.
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 supabase-ts, add-api-route, mobile-cross. 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.