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.
-
jackchuka Bundle Gh Org ChartGenerate an interactive HTML org explorer from a GitHub organization. Surfaces team hierarchy, members, owned repos, and CODEOWNERS path attributions. Two stages: collect.sh writes a canonical JSON, render.py emits a self-contained HTML file. The JSON is the cache (mtime ≤ 24h skips re-collection) and is hand-editable. Triggers: "org chart", "team chart", "visualize github org", "who owns this repo", "github team hierarchy", "/gh-org-chart"
Audited -
joneqian Skill Agent BrowserHeadless browser automation CLI optimized for AI agents with accessibility tree snapshots and ref-based element selection
-
juicesharp Bundle DesignDesign complex features by decomposing them into vertical slices, generating and verifying one slice per session, and producing a resumable design artifact (architecture decisions, slice breakdown, file map) in .rpiv/artifacts/designs/. The design feeds the plan or blueprint skill. Use for complex multi-component features touching 6+ files across multiple layers, when the user wants a feature designed before implementation. Requires a research artifact or a solutions artifact (from explore); resume an in-progress design with --resume. Prefer design over plan or blueprint when the focus is architecture and decomposition rather than phased execution steps.
Audited -
juicesharp Skill BlueprintPlan complex features by decomposing them into vertical slices (one slice equals one phase) with developer micro-checkpoints between phases, producing an implement-ready phased plan in .rpiv/artifacts/plans/. Use for complex multi-component features touching 6+ files across multiple layers when iterative review between slices is valuable. Optionally consumes a research/solutions artifact; can also run standalone with a free-text feature description for small tasks. Prefer blueprint over plan when mid-flight micro-checkpoints matter, and prefer plan when a straightforward phased breakdown is enough.
-
juicesharp Skill Quick PlanProduce a single unsliced, consistently-phased implementation plan for a small, well-understood task and write it directly to .rpiv/artifacts/plans/ with status: ready — one non-interactive pass, no slice decomposition, no in-skill review (the workflow's grade and validate stages are the gates). Dispatched by the ship preset's plan stage; also usable standalone for a small task whose research is done or whose shape is obvious. Prefer blueprint for multi-component features needing slice-by-slice micro-checkpoints, and plan when turning an existing design artifact into phases.
-
juicesharp Skill Frontend DesignInject tailored visual design guidance for frontend work. Scope: web frontends (HTML/CSS/JS, React, Vue, Svelte, Astro, etc.). Aesthetic principles generalize to native/TUI but examples assume web. Use when the user asks to build a page, full layout, or new application, or explicitly wants design direction. SKIP for single-component requests in codebases with an established style system. The skill auto-adapts: empty scan → 2-question micro-interview; established system → scan-only injection; otherwise full 7-dimension checkpoint with skip logic.
-
ldaume Skill Frontend CraftGuides frontend, UX, UI, responsive design, microcopy, accessibility, feedback states, and AI-assisted product surfaces with production-grade taste. Use when designing, building, reviewing, or polishing screens, React islands/components, Tailwind UI, mobile flows, loading/empty/error states, or user-facing copy.
-
ldaume Skill Testing StrategiesPlans pragmatic test coverage across unit, integration, contract, e2e, visual, accessibility, performance, and smoke tests based on risk and behavior. Use when deciding what to test, designing a test pyramid, adding coverage for a feature, reducing flaky tests, or reviewing QA strategy.
-
ldaume Skill Playwright Best PracticesWrites, reviews, and debugs Playwright tests for web apps with stable locators, fixtures, auth setup, API mocking, trace debugging, responsive checks, accessibility assertions, and CI reliability. Use when creating Playwright tests, fixing flaky e2e tests, debugging traces, testing UI flows, or configuring browser tests.
-
lklimek Skill TriageThis skill should be used when the user says "triage" or asks to triage a GitHub issue: reproduce it, identify the root cause and owning component, estimate severity, discuss the findings with the user, and then post a short status comment.
-
lklimek Skill Frontend Best PracticesThis skill should be used when writing, reviewing, or discussing frontend code — TypeScript, React/Vue/Svelte, CSS, accessibility, and testing.
-
mesh-llm Skill Skippy ServerUse this skill when running, configuring, debugging, or embedding skippy-server, binary stage transport, OpenAI frontend integration, activation wire dtype settings, stage configs, lifecycle status, or nonblocking telemetry.
-
full-stack-skills Bundle Stitch MCP Get ScreenRetrieves the full details of a specific screen, including HTML code.
-
full-stack-skills Bundle Stitch React ComponentsConvert Stitch designs into modular Vite/React components with validation and design token consistency. Uses Stitch MCP get_screen to retrieve design JSON and HTML; supports high-reliability fetch via scripts; enforces modular structure, type safety, and theme-mapped Tailwind.
Audited -
full-stack-skills Bundle Stitch Uview ComponentsConvert Stitch designs into uni-app and Vue 2 and uView 2.0 pages and components. Uses Stitch MCP get_screen for retrieval; high-reliability fetch via scripts; enforces uni-app page structure and uView 2 u-* component contracts.
Audited -
full-stack-skills Bundle Stitch Uviewpro ComponentsConvert Stitch designs into uni-app and Vue 3 and uView Pro pages and components. Uses Stitch MCP get_screen for retrieval; high-reliability fetch via scripts; enforces uni-app page structure and uView Pro u-* component contracts, rpx, script setup.
Audited -
full-stack-skills Bundle Stitch Vue Vant ComponentsConvert Stitch designs into modular Vite/Vue 3 and Vant 4 mobile components. Uses Stitch MCP get_screen for retrieval; high-reliability fetch via scripts; enforces Vue SFC structure and Vant 4 component contracts van-button van-field van-nav-bar etc..
Audited -
full-stack-skills Bundle Stitch UI Design Spec LayuiLayui-Vue design spec for Stitch. Outputs hard-constraints prefix or selector JSON and assembled prompt.
-
full-stack-skills Bundle Stitch Vue Layui ComponentsConvert Stitch designs into modular Vite/Vue 3 and Layui-Vue components. Uses Stitch MCP get_screen for retrieval; high-reliability fetch via scripts; enforces Vue SFC structure and Layui-Vue component contracts layui-btn layui-input lay-card etc..
Audited -
full-stack-skills Bundle Stitch Uview Plus ComponentsConvert Stitch designs into uni-app + Vue 3 + uview-plus pages and components. Use when the user mentions Stitch, uview-plus, up- components, or uni-app Vue 3 conversion targeting uview-plus. Retrieves screen HTML via Stitch MCP get_screen, rewrites Tailwind structure into up-* components, and enforces stronger setup, theme, safe-area, tabbar, popup, upload, and dark-mode rules than the generic uView Pro conversion skill.
Audited -
full-stack-skills Bundle Stitch Vue Element ComponentsConvert Stitch designs into modular Vite/Vue 3 and Element Plus components. Uses Stitch MCP get_screen to retrieve design JSON and HTML; supports high-reliability fetch via scripts; enforces Vue SFC structure, data decoupling, and Element Plus component contracts.
Audited -
full-stack-skills Bundle Stitch UI Design Spec BootstrapBootstrap-Vue design spec for Stitch. Outputs hard-constraints prefix or selector JSON and assembled prompt.
-
full-stack-skills Bundle Stitch Vue Bootstrap ComponentsConvert Stitch designs into modular Vite/Vue 3 and BootstrapVue or BootstrapVueNext components. Uses [BootstrapVue Vue 3] support; Stitch MCP get_screen for retrieval; high-reliability fetch via scripts; enforces Vue SFC structure and Bootstrap component contracts b-container b-row b-button etc..
Audited -
gitbyeos Bundle HTML Cut用 Playwright 将网页或本地 HTML 渲染为高清 PNG 截图,支持全页、视口、分辨率和加载等待控制。用户提到 html-cut、cut-html、网页截图、HTML 截图、网页转 PNG、全页长截图时使用。
Audited -
gitbyeos Bundle Md To Png把 Markdown 文件渲染成手机友好的 HTML,再调用 html-cut 截图为高清 PNG。用户提到 md-to-png、md 转 png、md 截图、把 md 发到手机看时使用。
Audited -
gitbyeos Bundle Blog Narrator把博客 Markdown 导出为逐行披露演示 HTML,支持轻量预览和 Edge TTS 分段配音合并。当用户需要把博客转成演讲演示或配音 HTML 时使用
Audited -
gitbyeos Bundle Holiday Of 1230612306 节假日抢票日历。输入出发站与返程站,自动同步 chinesecalendar、分别查两站起售时间,生成 HTML 页,一键下载 ICS 导入日历。用户提及「节假日购票」「12306 起售时间」时使用本 skill。
Audited -
gitbyeos Bundle Meet Record HTML将面试/会谈问题 Markdown 生成为可现场填写纪要的单页 HTML(候选人徽章、问题标签、总结 textarea、临时追加问题、打印与导出 Markdown 按钮)。用户提到 meet-record-html、面试纪要、会谈纪要、面试问题转网页、面经 HTML 时使用。
Audited -
huifer Skill UX Compliance AuditUser Experience (UX) and accessibility compliance check. Verify navigation, content-to-ad ratio, readability, accessibility, and mobile usability. Maps to ARB UX criteria: UX01-UX15.
-
impertio-studio Bundle Axum Impl Static FilesUse when an Axum app must serve static files: a CSS/JS/image assets directory, a single file on one route, or a single-page-app build where any unmatched path falls back to index.html. Prevents the trait-bound compile error from passing ServeDir to .layer() instead of mounting it as a route service, prevents the .fallback() versus .fallback_service() mix-up, prevents repeating the URL prefix inside the disk path, and prevents an SPA fallback that returns 200 for unknown URLs. Covers the tower-http fs and set-status feature flags, ServeDir and ServeFile as tower Services, .nest_service / .fallback_service / .route_service mounts, .not_found_service versus .fallback, SetStatus, and the canonical SPA fallback pattern. Keywords: axum static files, ServeDir, ServeFile, tower-http, nest_service, fallback_service, route_service, not_found_service, SetStatus, fs feature, set-status feature, serve a directory, serve index.html, SPA fallback, single page app routing, ServeDir is not a Layer, the trait bound Layer is no
-
skills-il Bundle Github Actions IlCI/CD workflow templates tailored for Israeli development teams, including Shabbat/holiday-aware deployment schedules ("shabbat deploy freeze", "hakpaaat prisa"), Hebrew Slack/Teams notifications, Israeli compliance checks (IS-5568 accessibility, Privacy Protection Authority), Monday.com issue sync, and reusable composite actions for Israeli startup stacks. Use when user asks to "set up CI/CD for Israeli team", "add Shabbat deploy freeze", "configure Hebrew notifications in GitHub Actions", "hakpaat prisa beshabbat", "add IS-5568 check to pipeline", "Israeli compliance CI", or "create workflow for Vercel fra1". Supports Israeli work week (Sunday-Thursday) scheduling and Hebrew locale awareness. Do NOT use for JFrog Artifactory pipelines (use jfrog-devops), general GitHub repository management, non-CI/CD GitHub Actions, or Jenkins/CircleCI/GitLab CI configurations.
-
skills-il Bundle Hebrew Chatbot BuilderBuild conversational AI chatbots with native Hebrew support, including WhatsApp Business API integration, Telegram bot scaffolding, web chat widgets, Hebrew NLP patterns, and RTL chat UI components. Prevents common Hebrew chatbot mistakes like broken RTL alignment, incorrect gender inflections, and poor tokenization of prefixed prepositions that break intent detection. Use when user asks to "build a Hebrew chatbot", "integrate WhatsApp bot in Hebrew", "binui bot b'ivrit", or design conversation flows for Hebrew speakers. Covers intent detection for Hebrew morphology, entity extraction for Israeli data (NIS amounts, phone numbers, dates), and gender-aware responses. Do NOT use for non-Hebrew chatbots or general NLP pipelines without a Hebrew component.
Audited -
skills-il Bundle Remotion Best PracticesBest practices for Remotion video creation in React with Hebrew RTL support. Use when dealing with Remotion code, creating programmatic videos, building Hebrew video content with RTL captions and text animations, or generating social media videos with Hebrew fonts. Covers animations, compositions, sequencing, transitions, audio/video, captions, 3D, charts, voiceover, and Hebrew/RTL text rendering. Do NOT use for non-Remotion video editing, general React development, or static image generation.
-
skills-il Bundle Open Slide Best PracticesBest practices for authoring presentations with open-slide, the React slide framework with a fixed 1920×1080 canvas, with full Hebrew and RTL support. Covers the slides/[id]/index.tsx file contract, type scale, DesignSystem tokens, themes/ system, @slide-comment inspector markers, current.json deictic resolution, Hebrew Google Fonts (Heebo, Rubik, Assistant, Noto Sans Hebrew), CSS logical properties, bidirectional Hebrew+English text with the bdi element, and Hebrew-aware type scale tuning. Use when authoring or editing slides under slides/[id]/ in an open-slide project, or when building Hebrew or bilingual decks on the framework. Do NOT use for video creation (use remotion-best-practices or hyperframes-best-practices), or for generic Hebrew presentations outside open-slide (use presentation-generator).
-
skills-il Bundle Wcag Accessibility WidgetBuild a self-hosted floating accessibility widget for Israeli websites, WCAG 2.1 AA / ת"י 5568 toggles (high contrast, font size, keyboard nav, readable font, heading/link markers), settings persisted in localStorage, applied as CSS classes on the root html element. Use when building an accessibility widget, implementing Israeli accessibility law compliance (חוק שוויון זכויות לאנשים עם מוגבלות), creating an הצהרת נגישות page, or debugging position:fixed elements that break under CSS filter. Covers React/Next.js component architecture, RTL-safe toggle switches, CSS class strategy, and required accessibility declaration page content. Do NOT use for third-party accessibility overlay services (UserWay, AccessiBe) or non-Israeli WCAG audits.
-
syncfusion Bundle Syncfusion Vue GridImplements Syncfusion Vue Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
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 stitch-uview-components, remotion-best-practices, design. 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.