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.
-
maikotrindade Bundle React Native ExpoExpo toolchain for React Native — Expo Router, EAS Build/Update/Deploy, native modules, SDK upgrading, and Expo UI/data patterns.
-
maikotrindade Bundle React Native TestingDeep React Native Testing Library (RNTL) reference — v13 (React 18 sync) and v14 (React 19 async), queries, userEvent, matchers, anti-patterns.
-
maikotrindade Bundle React Native EcosystemReact Native ecosystem — navigation, state, data fetching, Reanimated, storage, TypeScript patterns, accessibility, and deep linking. Use when building production React Native apps with React Navigation, Zustand, TanStack Query, or Reanimated v3.
-
maikotrindade Bundle React Native Reusablesshadcn/ui-style components for React Native with NativeWind v4, RN Primitives, and CLI scaffolding. Use when building Expo apps with copy-paste UI components, theming, or overlay patterns.
-
maikotrindade Bundle Upgrading React NativeUpgrades React Native apps to newer versions by applying rn-diff-purge template diffs, updating package.json dependencies, migrating native iOS and Android configuration, resolving CocoaPods and Gradle changes, and handling breaking API updates. Use when upgrading React Native, bumping RN version, updating from RN 0.x to 0.y, or migrating Expo SDK alongside a React Native upgrade.
-
maikotrindade Bundle React Native PerformanceDeep React Native performance — FPS profiling, bundle size, TTI measurement, native threading, memory leaks, and profiling tools.
-
maikotrindade Bundle React Native Brownfield MigrationProvides an incremental adoption strategy to migrate native iOS or Android apps to React Native or Expo using @callstack/react-native-brownfield for initial setup. Use when planning migration steps, packaging XCFramework/AAR artifacts, and integrating them into host apps.
-
playerrch Skill Cleanup Deprecated ArtifactsSafely removes deprecated files, stale caches, and superseded code from a project while preserving anything still referenced. Use when the user asks to "清理", "整理", "清掉废弃", "remove deprecated", "cleanup legacy", "tidy up the repo", or when the agent spots obvious leftovers such as `tmp_*.html`, `setup_*.py` replaced by newer tooling, old prompt files, or abandoned yml references. Classifies each candidate into zero-risk / low-risk / high-risk tiers, runs a reference scan before deletion, updates cross-file links, and reports a clear before/after summary.
-
opsrobot-ai Skill Anyrobot Shadcn Frontend JSAnyRobot 前端开发核心指南:提供 JavaScript + React + shadcn/ui 开发的精简实用规范和最佳实践。 当用户需要前端开发指导、组件开发或项目结构建议时触发。 本技能提供实际可用于项目开发的核心代码示例和开发指南。
-
anilveersingh1308 Bundle ImpeccableDefault skill for production frontend work. Use for design, redesign, audit, polish, UX improvements, visual hierarchy, accessibility, responsive behavior, and interaction quality across websites, dashboards, and components. Not for backend-only tasks.
-
anilveersingh1308 Bundle Huashu Design花叔Design(Huashu-Design)——用HTML做高保真原型、交互Demo、幻灯片、动画、设计变体探索+设计方向顾问+专家评审的一体化设计能力。HTML是工具不是媒介,根据任务embody不同专家(UX设计师/动画师/幻灯片设计师/原型师),避免web design tropes。触发词:做原型、设计Demo、交互原型、HTML演示、动画Demo、设计变体、hi-fi设计、UI mockup、prototype、设计探索、做个HTML页面、做个可视化、app原型、iOS原型、移动应用mockup、导出MP4、导出GIF、60fps视频、设计风格、设计方向、设计哲学、配色方案、视觉风格、推荐风格、选个风格、做个好看的、评审、好不好看、review this design、带解说的动画、解说视频、概念解释视频、长视频科普、配音动画、voiceover、narration、TTS+动画、5分钟讲清楚什么是XX。**主干能力**:Junior Designer工作流(先给假设+reasoning+placeholder再迭代)、反AI slop清单、React+Babel最佳实践、Tweaks变体切换、Speaker Notes演示、Starter Components(幻灯片外壳/变体画布/动画引擎/设备边框/解说Stage)、App原型专属守则(默认从Wikimedia/Met/Unsplash取真图、每台iPhone包AppPhone状态管理器可交互、交付前跑Playwright点击测试)、Playwright验证、HTML动画→MP4/GIF视频导出(25fps基础 + 60fps插帧 + palette优化GIF + 6首场景化BGM + 自动fade)、**带解说的长动画pipeline**(豆包TTS生人声+实测时长生timeline.json+NarrationStage驱动画面+ducking混音→交付HTML实播+发布MP4双形态;铁律:整片是一个连续的运动叙事,禁PowerPoint切换)。**需求模糊时的Fallback**:设计方向顾问模式——从5流派×20种设计哲学(Pentagram信息建筑/Field.io运动诗学/Kenya Hara东方极简/Sagmeister实验先锋等)推荐3个差异化方向,展示24个预制showcase(8场景×3风格),并行生成3个视觉Demo让用户选
-
anilveersingh1308 Bundle UI UX Pro MaxDeep UI/UX planning skill for web and mobile. Use when the user asks for palettes, font pairings, UX rules, design systems, or cross-stack UI plans (React/Next/Vue/Svelte/SwiftUI/RN/Flutter/Tailwind/shadcn/HTML), not simple single-component coding.
-
anilveersingh1308 Skill Emil Design EngThis skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great. ONLY USE when the user explicitly invokes `/emil-design-eng` or specifically asks for Emil Kowalski's design engineering style/philosophy. Do NOT auto-trigger on general frontend, polish, animation, or redesign requests; `impeccable` remains the default for those.
-
anilveersingh1308 Bundle Gstack Design HTMLDesign finalization: generates production-quality Pretext-native HTML/CSS. Works with approved mockups from /design-shotgun, CEO plans from /plan-ceo-review, design review context from /plan-design-review, or from scratch with a user description. Text actually reflows, heights are computed, layouts are dynamic. 30KB overhead, zero deps. Smart API routing: picks the right Pretext patterns for each design type. Use when: "finalize this design", "turn this into HTML", "build me a page", "implement this design", or after any planning skill. Proactively suggest when user has approved a design or has a plan ready. (gstack) Voice triggers (speech-to-text aliases): "build the design", "code the mockup", "make it real".
-
cris-achiardi Bundle Crazy 8sSolo rapid ideation method based on Google Design Sprint Crazy 8's exercise. Generates 8 distinct solution ideas in 8 minutes through rapid-fire ideation or sketch documentation. Use when working alone and need to explore multiple solution directions quickly, push beyond first obvious ideas, or generate variety before converging. Includes creativity warm-up questions, built-in timer, optional creative constraints, and generates visual HTML/CSS prototypes plus comparison table. NOT for team sessions (traditional Crazy 8's works better for teams).
-
cris-achiardi Bundle Codebase IndexAutomatically generate relationship and dependency maps for any component-based codebase (React, Vue, Svelte, Astro, Next.js, Angular, Solid). Auto-detects framework. Supports TOON format for 30-60% token savings. Use when indexing codebases, mapping component relationships, documenting dependencies, or understanding unfamiliar projects. Generates JSON/TOON files mapping component usage, imports, npm dependencies, utilities, CSS, and data queries.
-
anilveersingh1308 Skill Design Taste FrontendONLY USE when the user explicitly types `/design-taste-frontend` or `/taste`. Do NOT auto-trigger on generic 'premium UI', 'anti-slop', or 'high-end design' phrasing — `impeccable` is the default for premium frontend craft in this workspace. Kept available for direct invocation only.
-
just-agent Bundle Just Progress Bar SkillDesign, select, generate, and audit accessible creative progress bars for React, HTML/CSS, Gallery demos, recipes, CLI workflows, and Agent/MCP integrations.
-
houjingyi00417-hub Skill XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path 鈥?even casually (like "the xlsx in my downloads") 鈥?and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
houjingyi00417-hub Skill GenimlThis skill should be used when working with genomic interval data (BED files) for machine learning tasks. Use for training region embeddings (Region2Vec, BEDspace), single-cell ATAC-seq analysis (scEmbed), building consensus peaks (universes), or any ML-based analysis of genomic regions. Applies to BED file collections, scATAC-seq data, chromatin accessibility datasets, and region-based genomic feature learning.
-
agentbuff Bundle Animation Explainer把一个技术概念/流程/系统转化为"剧场式"动画 HTML — 多场景 + 自动播放 + 章节导航 + 旁白与真实代码。适用于网络协议、底层原理、算法、架构原理等"看不见但需要看见"的主题。单文件 HTML,无构建步骤。
-
houjingyi00417-hub Skill MarkitdownConvert files and office documents to Markdown. Supports PDF, DOCX, PPTX, XLSX, images (with OCR), audio (with transcription), HTML, CSV, JSON, XML, ZIP, YouTube URLs, EPubs and more.
-
andrewnggirl Skill Mega PipelineUse when user wants to orchestrate 50+ specialized PR review agents covering different concerns (security, performance, style, dependencies, accessibility, i18n, testing, docs, etc.). Routes through specialist agents and aggregates findings.
-
arronjeck Skill Code Review对指定 Git 提交范围进行全面 Code Review,输出结构化 HTML 报告(样式参考 CodeReview_Report_v9.0.28.html)
-
sol1986 Bundle Mindstudio Interface Designer SkillMaster frontend skill for MindStudio Interface Designer. Use this skill for every UI/UX request including creating, designing, building, improving, reviewing, or refactoring any interface, component, or web app inside MindStudio. Supports onboarding flows, dashboards, landing pages, forms, wizards, data visualizations, admin panels, e-commerce, SaaS apps, and portfolios. Always interviews the user first, commits to a bold aesthetic direction, then builds production-grade code.
-
mangiapanejohn-dev Bundle Openai Image GenBatch-generate images via OpenAI Images API. Random prompt sampler + `index.html` gallery.
-
bc05 Bundle ArquitetoUse esta skill para atuar como perfil Arquiteto com modelo-alvo gpt-5.5 ao desenhar arquitetura, tomar decisoes tecnicas, comparar alternativas, planejar refactors, revisar contratos entre frontend, backend, banco, mobile e infraestrutura, ou preparar handoff para implementacao.
-
hzq510473048 Bundle AI Mini Game DevelopmentGuide AI-assisted mini game development with phased delivery, risk-based autonomy, validation gates, documentation updates, backup/rollback discipline, and natural-language tuning. Use when Codex helps create, modify, polish, test, or package small games in Cocos, Unity, Godot, pygame, Three.js, HTML Canvas, Web games, or similar lightweight game projects.
-
panjason Skill Frontend ImplImplement frontend components from DESIGN.md with well-formatted commits and documentation
-
nicolasestrem Skill Vue Experta senior Vue expert with expertise in Vue 3 Composition API and the modern Vue ecosystem
-
gil-kapel Bundle UI Design Systems AgentTurn UX flows into a UI plan grounded in components, tokens, states, accessibility, responsive behavior, and a Stitch-ready prompt. Use when the user asks for UI design, component structure, design systems, shadcn, Tailwind, screen specs, visual inspiration, or a UI handoff before coding or polishing starts.
-
nicolasestrem Skill Nextjs Developera senior Next.js developer with expertise in Next.js 14+ App Router and full-stack development
-
nicolasestrem Skill Frontend Developera senior frontend developer specializing in modern web applications with deep expertise in React 18+
-
bruhxax Skill Accessibility FirstUse whenever creating or modifying UI, websites, apps, dashboards, forms, buttons, navigation, modals, interactive components, or visual interfaces. Ensures readability, contrast, keyboard navigation, focus states, labels, and usable controls.
-
yolo-labs-hq Skill Next 15 App RouterPatterns for Next.js 15 App Router projects — server vs. client components, route handlers, dynamic params (now async), revalidation primitives, and metadata. Covers gotchas introduced when upgrading from Next 14, including the params Promise change and async cookies/headers.
-
kaustubhhiware Skill Fullstack GuardianUse when implementing features across frontend and backend, building APIs with UI, or creating end-to-end data flows. Invoke for feature implementation, API development, UI building, cross-stack work.
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 react-native-expo, react-native-testing, react-native-ecosystem. 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.