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.
-
tenstorrent Skill Tt Studio OverviewProject map for TT-Studio — what the platform is, where its docs live, its key components (React frontend, Django backend, FastAPI inference server, Docker), and the AI model types it supports. Use when you need a high-level orientation of the repo, want to know which doc covers a topic, or are trying to locate where a component or capability lives before diving into code.
-
tenstorrent Skill Tt Studio Debug BundleTriage a TT-Studio bug-report ZIP / log bundle (named `tt-studio-logs-ttbr-*` or referenced as `ttbr-*`) to root-cause why a model deploy, board allocation, or Voice Agent pipeline failed. Use when the user shares a path to a TT-Studio log bundle, mentions a bug report ID like `ttbr-<hex>`, or attaches a screenshot of the TT-Studio Bug Report issue template. Fans out parallel Explore subagents across `app/backend/board_control/`, `app/backend/docker_control/`, `app/backend/shared_config/`, and `app/frontend/src/components/` to map log evidence to source code.
-
tenstorrent Skill License Attribution ComplianceReview third-party license attribution for TT-Studio when dependencies or bundled assets change, and keep the attribution files in sync. Use when a PR adds/updates a dependency (app/backend/requirements.txt, app/agent, inference-api, docker-control-service, or app/frontend/package.json), bundles a binary/model/weights file, or when the user asks to "attribute a license", "update third-party-licenses", "check license compliance", or run the license check. Pairs with the deterministic gate dev-tools/check_license_attribution.py (freshness + new-dependency attribution) that runs on pull requests; this skill does the judgment the script cannot -- classifying licenses and flagging NonCommercial/copyleft/provenance risks.
-
theorcdev Bundle Shadscan Pre CommitAI-agent commit protocol that establishes a Shadscan baseline and reruns the audit immediately before every agent-created commit without installing dependencies or configuring Git. Use when an agent is asked to commit work in a React shadcn project, prevent UI regressions during an agent task, or run Shadscan before commits.
-
ethereum-optimism Bundle Release NotesWrite the release notes for an OP Stack component using the house style. Use when asked to write, polish, tidy, or finalize release notes, to clean up a draft GitHub release, or to prepare notes before publishing a release.
-
factorial-io Bundle Website EstimationGuided workflow for creating relative website project estimations. Use this skill whenever the user wants to estimate, scope, or price a website project — whether they say "estimation", "Schätzung", "Aufwandsschätzung", "quote", "proposal", "Angebot", "scope a project", "how long will this take", or similar. Also trigger when the user mentions analyzing wireframes or designs for estimation purposes, creating a component catalog, writing a rebriefing document, or comparing estimations against reference projects. Works for any CMS or framework (Drupal, WordPress, Next.js, etc.) and any project size.
-
flaminis Skill Dalaran Data ModelHow raw multimodal robot data maps onto the Dalaran data model. Read FIRST, before modeling or converting a dataset — and whenever you are about to convert/ingest/preprocess robot data into an .dlr or build a Dalaran recording, even if not asked for the data model. Resolves the entity-vs-component, property-vs-component-vs-layer, and static-vs-temporal decisions and routes to the mechanism (do it with readers and lenses, not hand-built chunks or per-message rr.log): dalaran-chunk-processing and the importer skills dalaran-mcap, dalaran-urdf, dalaran-parquet, dalaran-lerobot.
-
seckatie Bundle MermaidGenerate diagrams and flowcharts from mermaid definitions using the mermaid-cli (mmdc). Supports themes, custom CSS, and various output formats including SVG, PNG, and PDF. Mermaid supports 20+ diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, user journeys, Gantt charts, pie charts, quadrant charts, requirement diagrams, GitGraph, C4 diagrams, mindmaps, timelines, ZenUML, Sankey diagrams, XY charts, block diagrams, packet diagrams, Kanban boards, architecture diagrams, radar charts, and treemaps. This skill is triggered when the user says things like "create a diagram", "make a flowchart", "generate a sequence diagram", "create a mermaid chart", "visualize this as a diagram", "render mermaid code", or "create an architecture diagram".
-
shadcn-labs Bundle CompositionCreate video compositions with Editframe using HTML web components or React. Supports video, audio, images, text, captions, transitions, and cloud rendering.
-
yournextstore Skill Clone WebsiteReverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide the target URL as an argument.
-
justinqwerty Bundle UX WritingCreate user-centered, accessible interface copy (microcopy) for digital products including buttons, labels, error messages, notifications, forms, onboarding, empty states, success messages, and help text. Use when writing or editing any text that appears in apps, websites, or software interfaces, designing conversational flows, establishing voice and tone guidelines, auditing product content for consistency and usability, reviewing UI strings, or improving existing interface copy. Applies UX writing best practices based on four quality standards — purposeful, concise, conversational, and clear. Includes accessibility guidelines, research-backed benchmarks (sentence length, comprehension rates, reading levels), expanded error patterns, tone adaptation frameworks, and comprehensive reference materials.
-
justinqwerty Bundle Accessibility AuditConduct accessibility audits against WCAG 2.2 guidelines. Evaluate pages, components, and flows for conformance at A, AA, and AAA levels. Identify issues, assess severity, provide code fixes, and generate audit reports. Covers automated testing, manual testing, keyboard navigation, screen reader compatibility, color contrast, and semantic HTML.
-
pingcap Bundle Map UrlsModify URL mapping rules in the website-docs Gatsby site by editing gatsby/url-resolver/config.ts and gatsby/link-resolver/config.ts, updating Jest tests, updating gatsby/URL_MAPPING_ARCHITECTURE.md, and reviewing gatsby-plugin-react-i18next matchPath when URL prefixes or languages change.
-
pingcap Bundle Extend MdxExtend MDX rendering in website-docs when a request needs either a new custom MDX component that authors can invoke with JSX-like tags, or a build-time Markdown-to-MDX transform that compiles plain Markdown syntax into custom JSX/AST behavior. Implement runtime components under src/components/MDXComponents/, implement build-time transforms under gatsby/plugin/, register exports and plugins in the right places, and validate the end-to-end MDX rendering path.
-
pingcap Bundle Localize RoutesUpdate language-aware routing and translation wiring in website-docs when the task changes locale behavior, top-level route prefixes, translation keys, page language availability, or Gatsby i18n configuration. Review gatsby-config.js matchPath rules, locale translation files, route generation assumptions, and any template or component code that depends on language-specific behavior.
-
rajnandan1 Bundle Shadcn SvelteUse shadcn-svelte components in SvelteKit projects. Detects whether the current project is a SvelteKit app with shadcn-svelte installed, lists available components, and provides access to full component documentation via the official llms.txt. Helps choose the right UI components for the job — buttons, forms, dialogs, tables, charts, and more — following shadcn-svelte best practices. Use this skill whenever the user is working in a SvelteKit project and wants to: add UI components, build forms, create dialogs or modals, add a data table, use a date picker, build a sidebar or navigation, add charts, use a combobox or select, create an alert or toast notification, or generally build UI with pre-built accessible components. Also trigger when the user mentions "shadcn", "shadcn-svelte", "bits-ui", or asks about available components in their Svelte project.
-
volcengine Bundle Agentkit Codex HandoffContinue the current local Codex conversation and coding task in an AgentKit Studio cloud Codex Sandbox using a Studio URL and short one-time pairing code. Use when the user asks to hand off, migrate, or continue a local repository in Studio, especially when a prompt contains a Studio address and pairing code. Export the complete user-visible user and assistant message history from every prior turn, including interrupted turns and progress commentary, create a temporary Studio Sandbox, restore tracked and non-ignored working-tree files plus Git metadata, inject that visible history into the cloud Thread, transfer GitHub CLI authentication separately when needed, and send one final continuation message; never copy system or developer prompts, reasoning, tool logs, SQLite state, global configuration, local skills, or SSH private keys.
-
constellos Bundle AI Sdk UIThis skill should be used when the user asks to "add AI chat", "implement streaming UI", "use useChat hook", "add AI completion", "implement useCompletion", "create conversational interface", "add streaming text", "implement tool calling UI", "create generative UI", "add AI-powered features", "implement StreamableUI", or mentions AI SDK, streaming responses, chat interfaces, or AI-generated content in React/Next.js applications.
-
constellos Skill UI DesignThis skill should be used when the user asks to "create a component", "build static UI", "design with TypeScript", "use compound components", "implement contract-first UI", "create React component", "build with Shadcn", or mentions TypeScript interfaces for components, compound component patterns, or Server Components. Provides contract-first static UI methodology with compound components.
-
dajo-code Bundle NextjsNext.js 16.1+ App Router patterns including Server Components, Client Components, Server Actions, Route Handlers, Turbopack, MCP integration, and modern React patterns. Use when building pages, layouts, data fetching, or API routes. Triggers on Next.js, App Router, RSC, or Server Actions questions.
-
dajo-code Bundle TailwindcssUtility-first CSS styling with Tailwind CSS v4. Use when styling components, configuring themes, responsive design, or building design systems. Triggers on Tailwind, CSS, styling, theming, or responsive design questions.
-
snapcndev Skill Motion QualityHard-won, measured rules for animating text and shipping registry components in snapcn. READ THIS BEFORE you animate a scale or transform on text, pick an easing curve, add will-change, set a transformOrigin, split a word into per-letter spans, or touch a component that has a rendered demo. Explains why scaled text looks "stuck" and "shaky" in a browser (glyph pixel snapping, font hinting), which fixes are real and which are cargo cult, why aggressive ease-out curves freeze on a frame clock, and how to verify an animation by measuring rendered frames instead of eyeballing it. Triggers - scale animation, zoom text, transform, transformOrigin, easing, cubic-bezier, ease-out, will-change, jitter, judder, stutter, wobble, blurry text, text not smooth, letters stuck, Remotion component, registry component, preview looks wrong.
-
0xmassi Skill Typescript StrictTypeScript strictness, clean code, and security rules. Use when writing, reviewing, or refactoring TypeScript code in any project. Enforces strict type safety (no any, no as, no unknown abuse), proper error handling patterns, import hygiene, React component conventions, and vulnerability prevention. Derived from 10+ production TypeScript projects with 100% strict mode adoption.
-
hraness Bundle SlopcameraCreate, inspect, edit and render visual media with the Slopcamera CLI and SDK. Use for diagrams, raster-to-SVG conversion, screen or camera recordings, video editing and captions, AI images/video/speech/transcription, Three.js scenes and world-space media, Blender rigs and simulation, CadQuery models, Manim educational films, HTML/WGSL motion graphics, and durable agent workflows.
-
hraness Bundle Save Url KbCapture public or signed-in web content into a local Markdown knowledge base as an auditable source bundle with local assets. Use when the user asks to clip, save, scrape, or archive an article, social post or thread, GitHub or Discourse discussion, feed, inbox, private document, WhatsApp conversation, YouTube page, or another page already visible in their browser. Supports URL capture, the current signed-in tab, temporary browser-profile snapshots, saved HTML, media, evidence, honest completeness, and knowledge-base linking.
-
ls1intum Bundle React Best PracticesReact performance optimization guidelines from Vercel Engineering. Contains 45 rules across 8 categories. Use when optimizing React components, bundle size, or data fetching patterns. IMPORTANT: This codebase uses Vite + TanStack Router (SPA), NOT Next.js. See applicability notes below for which rules apply.
-
ls1intum Bundle Storybook ComponentsComponent API and Storybook conventions for the Hephaestus webapp. Use when writing or changing a component under `webapp/src/components/**`, writing or reviewing a `*.stories.tsx`, designing a component's props, or grading a webapp diff in review. Covers props/state shape, Base UI `render=` slots, the vocabulary registries, story titles, args and Controls, play-function assertions, and the accessibility posture. Ships a grading rubric.
-
ls1intum Skill Web Design GuidelinesReview UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
-
sprngr Bundle Docker Node InitGenerates dockerized Node.js boilerplate through guided init inputs, resolves template assets for core boilerplate files, and attaches official documentation links for selected stack packages/tools. Use when user asks to initialize new Node.js service with Docker and optional frontend scaffold.
-
chasen-liao Bundle Jd Tailorer根据职位描述(JD)定制简历的技能。当用户提到「JD」「职位描述」「岗位匹配」「针对...改简历」「投递」「求职」「招聘要求」「Job Description」或者提供具体职位链接/文本要求修改简历时使用。支持上传或粘贴 JD 文本,自动进行关键词匹配和内容优化,基于已有简历生成针对该岗位的定制版 HTML 和 PDF。
-
chasen-liao Bundle Resume Builder通过对话式采访构建精美简历的技能。当用户提到「简历」「resume」「CV」「求职」「找工作」「面试」「制作简历」「生成简历」或者想要创建一个展示个人经历和技能的网页时使用。支持 HTML 简历生成、A4 纸打印布局、PDF 导出。能够引导用户逐步完善简历内容,从个人信息到项目经历全面覆盖。
-
wigtn Bundle Wigtn PptWIGTN 브랜드 HTML 프레젠테이션 생성. 템플릿 없이 브랜드 원칙(잉크 네이비 + 시그니처 퍼플 점)을 기반으로 단일 self-contained HTML 발표자료를 만든다. Light / Dark 두 테마를 선택할 수 있고, WIGTN 로고와 퍼플 점 시그니처를 모든 슬라이드에 일관되게 적용한다. WIGTN 브랜드 발표자료에 한정해 동작한다(일반 PPT는 다른 PPT 스킬을 쓴다). Triggers on: 'wigtn ppt', 'wigtn 발표자료', '위그튼 ppt', 'wigtn 슬라이드', 'wigtn presentation', '브랜드 발표자료', '브랜드 PPT', '회사 PPT', '회사 발표자료'.
-
wjb127 Skill Consulting ReportGenerate consulting-firm style HTML reports — quotes, proposals, analyses, progress reports. 4 themes (Swiss/Signal, Slate/Teal, Warm Serif, Ivory/Navy/Gold) with 60/30/10 color discipline. Self-contained single HTML file, no build step. 컨설팅펌 스타일 HTML 보고서 생성 (견적서·제안서·분석보고서).
-
wso2 Skill Apicp UIBuild or change UI in portals/api-control-plane — pages, components, forms, dialogs, listings, app shell/navigation, theming, and MUI→Oxygen migration. Covers the Oxygen UI (@wso2/oxygen-ui) component/theming API plus this app's own rules for data access (hooks only), i18n (react-intl), routing/scope gating, and tests. Use for any .tsx/.ts work under portals/api-control-plane/src, and whenever asked how a page, listing, form, sidebar item, or theme override should be built here.
-
wtrocki Skill SlidesGenerate a reveal.js slide deck or PowerPoint (.pptx) from a topic description. Creates a markdown source file and builds HTML or PPTX output using pandoc.
-
wuyaojunkylin Skill Curatorial Prototype Standardization把研究型数字策展、线上展览、digital exhibition 中已确认的策展文本、页面结构和视觉语言实现为可测试原型与标准单元,并扩展到同类页面。用于用户需要 frontend implementation、prototype、component structure、content fields、responsive behavior 或标准页扩展时。
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 UI Design, jd-tailorer, tt-studio-overview. 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.