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.
-
actonos Skill Actonos Agent DevSkill for developing AI agent engine components in internal/agent/. Covers the ReAct loop, swarm delegation, planning, verification, memory reflection, and cron automation.
-
actonos Skill Actonos Frontend DevSkill for developing the ActonOS React 19 + Tailwind v4 frontend adhering to the official DESIGN.md specification. Covers design tokens, component decomposition, zero-hardcoded-text i18n, and go:embed delivery.
-
bcgov Bundle N8n Workflow BuilderCompose and chain cleaned snippets into n8n operational triage workflows — a webhook trigger, read-only idempotent triage steps in order, and a markdown-to-HTML response served back to the caller. Produces n8n workflow JSON in tools/n8n/workflows/ ready to POST to the n8n API (you post it, not the skill), plus a local_workflow.sh equivalent a developer can run without n8n. Use when building or iterating a triage workflow from cleaned snippets.
-
bhoon716 Bundle ArchitectureUse when the user asks to design, evaluate, document, or review software architecture for a new or existing system, including architecture alternatives, ADRs, component or integration boundaries, layered or modular monolith design, service decomposition, scalability, availability, quality attributes, runtime or deployment views, architecture risks, or migration plans. Inspect repository evidence when available, compare explicit tradeoffs, separate facts from assumptions, and produce decision-ready artifacts. Do not use for simple architecture definitions, generic brainstorming, isolated bug fixes, feature implementation, or behavior-preserving refactoring unless an explicit architecture decision is the task.
-
carreiras Bundle Security FrontendGuia completo de desenvolvimento seguro para aplicações frontend e web. Use esta skill sempre que o usuário pedir revisão de segurança de frontend, mencionar XSS, CSRF, Content Security Policy (CSP), Clickjacking, armazenamento seguro no browser (localStorage, cookies, sessionStorage), segurança de formulários, autenticação no cliente, OAuth no browser, gerenciamento de tokens no frontend, segurança em React, Angular, Vue, Next.js ou outras SPA frameworks, Subresource Integrity, sanitização de HTML, segurança de dependências npm/yarn, headers HTTP no frontend, ou quiser um checklist de segurança antes de fazer deploy de aplicação web. Acione também quando o usuário disser "revisar segurança do frontend", "está seguro?", "boas práticas de segurança web" ou mencionar vulnerabilidades de browser.
-
ls1072502993 Bundle CSS在当前仓库新增或修改 SCSS 样式时使用。适用于组件、页面或模块样式调整,要求输出合法 SCSS,并保持清晰的嵌套层级与结构。
-
ls1072502993 Bundle Vue在当前仓库内处理 Vue 3、TypeScript 页面、组件与路由时使用。适用于新增、重命名或修改页面和组件的目录、文件、Vue SFC、路由 path、Composition API、组件状态、事件、响应式数据、模板渲染、组件默认配置去重、第三方组件二次封装和样式联动,以及类型收窄、分支或兼容逻辑删除后的链路清理;要求页面目录、名称和路由 path 使用首字母小写的 camelCase、组件目录和名称使用首字母大写的 PascalCase,禁止使用横线命名,并使用 $attrs 透传第三方能力、使用 defineModel 封装双向交互、清除失效的纯透传代码。
-
ls1072502993 Bundle React在当前仓库新增或修改 React、TSX/JSX 组件、组件状态、事件、模板渲染或组件样式时使用。强制使用 CSS Modules 的 `*.module.scss` 文件,并要求 DOM 嵌套与 SCSS 嵌套结构严格对应。
-
ls1072502993 Bundle Frontend Global在当前仓库读取或修改任意文件时应用全局开发约束。适用于任何文件变动、文档修改、代码调整或内容更新场景,强制执行编码检查、最小改动、禁止无关重构、变更链路回查和残留清理等规则。
-
minorun365 Skill Kb Frontend SseKb Frontend Sse
-
prismatic-io Bundle Boomi MigrationThis skill should be used when the user needs to analyze a Dell Boomi export, parse Boomi Component XML files, migrate from Boomi to Prismatic, convert Boomi processes to CNI flows, map Boomi shapes to Prismatic equivalents, or interpret Boomi connector settings, transform maps, and process properties. Relevant when the user says "analyze this Boomi export", "migrate from Boomi", "parse Boomi XML", "convert Boomi process to Prismatic", or "what does this Boomi shape map to".
-
prismatic-io Bundle Embedded PatternsReference documentation for embedding Prismatic's integration marketplace and workflow builder in a web application. Covers JWT authentication, the embedded SDK, marketplace and workflow embedding, theming, i18n, additional screens, and custom marketplace UI. Use when the user asks about embedding Prismatic, JWT tokens for embedded apps, marketplace iframes, workflow builder integration, custom marketplace UI, or frontend SDK setup.
-
prismatic-io Bundle Component PatternsArchitecture patterns, code generation guides, and reference documentation for building Prismatic custom components.
-
shaddyx Skill Responsive DesignCreate responsive layouts using CSS Grid, Flexbox, and media queries.
-
t4ku Bundle Show MeHelp the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts. Use when the user asks to show / diagram / visualize / sketch / illustrate what is going on, asks "what does this look like", "how does this flow", "show me the structure", or in Japanese 図で見せて / 図解して / 図にして / 構造を見せて / フローを見せて / 全体像を見せて / どうつながってるか見せて. Also use it proactively when an explanation is running long and a call tree, file tree, component tree, diff, Mermaid diagram, or a small HTML artifact would land faster than prose.
-
lerianstudio Skill Ring Using Dev Team 2Guide to the dev-team skills - specialist developer agents and 6-gate development cycle. Provides backend engineers (Go/TypeScript), frontend engineers, DevOps, SRE, and QA agents.
-
cristhianzl Bundle Writing Tests 2Write unit, integration, and E2E tests in Langflow that follow the pyramid, AAA structure, should_X_when_Y naming, the 75% (target 80%) branch coverage gate per supported OS, AND Langflow's specific conventions (prefer real integrations over mocks per AGENTS.md, ComponentTestBase[With/Without]Client fixtures, uv run pytest, sub-package dev sync, marks like api_key_required and no_blockbuster). Use when writing tests, adding coverage, building a test suite, or fixing flaky tests in Langflow. For TDD bug fixes use fixing-bugs; for TDD feature work use developing-features-tdd; for the React frontend Langflow ships its own .agents/skills/frontend-testing.
-
cristhianzl Bundle Reviewing Code 3Review a Langflow pull request and produce a GitHub-comment-shaped review with severity-labeled findings (B/I/R/N) plus a copy-paste-safe action checklist — applying Langflow blockers (Component class rename = breaking, Alembic Phase label required, BUNDLE_API.md changelog gate, no-mock policy, SecretStrInput for API keys, no top-level SDK instantiation in components). Use when the user asks to review a PR, "code review", "review this diff", "verify changes before merge", or asks for a second opinion on a Langflow branch. Complements Langflow's own .agents/skills/backend-code-review and frontend-code-review. Output is the review comment in chat — never run git or post to GitHub directly.
-
cristhianzl Bundle Documenting Features 2Produce Langflow feature documentation — engineering-side as a 10-section single Markdown file (overview, ubiquitous language, domain model, Gherkin behaviors, ADRs, technical spec, observability, deployment, C4 diagrams, platform compatibility) AND user-facing pages in the Docusaurus site at docs/docs/ (Concepts, Components, Bundles, Contributing). Use when the user asks to document a Langflow feature, write feature docs, create ADRs, document a Component for users, update BUNDLE_API.md, or produce living docs alongside the code.
-
cristhianzl Bundle Writing Pull Requests 2Generate Langflow-shaped PR titles, commit messages, and descriptions from staged changes or a branch diff — conventional-commit format with Langflow scopes (auth, components, graph, api, frontend, bundles/<name>, lfx, docs, ci), Fixes
-
promovaweb Bundle Specsfy Setup 3Preparar, monitorar ou reconciliar o contexto persistente de um projeto Specsfy. Use ao iniciar o framework, antes e depois de mudanças na aplicação, ao verificar consistência documental, quando PROJECT.md ou os arquivos .specsfy/STACK.md, .specsfy/RULES.md e .specsfy/DATABASE.md estiverem ausentes, ou quando for necessário sugerir modelos coerentes com Laravel, Next.js, Astro ou um stack genérico. Pode ser executada repetidamente e deve preservar todo conteúdo já existente.
-
promovaweb Bundle Specsfy Specialist React 3Projetar, implementar e revisar interfaces React com composição, estado, efeitos, concorrência, acessibilidade, performance e testes. Use quando a tarefa envolve componentes React, hooks, context, forms ou renderização cliente; use também para decidir ownership de estado entre componente, context e biblioteca externa; não use para fronteiras server/client, cache ou routing de framework — aí use a skill Next.js; para a galeria de componentes visuais prontos, use react-ui-components.
-
promovaweb Bundle Specsfy Specialist Shadcn UI 3Instalar, compor e adaptar shadcn/ui com registry, Radix, theming, formulários, tabelas, gráficos, sidebars e componentes acessíveis. Use quando houver components.json, componentes shadcn já incorporados ou pedido explícito por shadcn; trate sempre o código copiado como código do projeto, nunca como dependência opaca; não use para o sistema de tokens/utilitários em si — combine com a skill Tailwind CSS — nem para uma galeria de componentes alternativa, coberta por react-ui-components.
-
promovaweb Bundle Specsfy Specialist Tailwind CSS 3Implementar e revisar Tailwind CSS com tokens, variantes, responsividade, dark mode, container queries e CSS sustentável. Use quando houver tailwindcss ou utilitários Tailwind em templates e a tarefa tocar estilo, tema ou responsividade; use também para decidir entre utilitário, `@apply` e extração de componente; confirme sempre a versão instalada, pois configuração (`tailwind.config` vs `@theme` em CSS) e diretivas mudam entre gerações — não aplique sintaxe de uma versão a outra sem checar o `package.json`.
-
cyberuni Skill Oracle Spec Governance 2Internal governance (not user-invocable): the Oracle bar for react-component at the spec gate. Scope / kill-or-ship criteria by discipline, loaded by both the spec-producer (self-align) and spec-judge (grade).
-
cyberuni Skill Builder Impl Governance 2Internal governance (not user-invocable): the Builder bar for react-component at the impl gate. Code-conformance criteria by discipline, loaded by both the impl-producer (self-align) and impl-judge (grade).
-
cyberuni Skill Builder Spec Governance 2Internal governance (not user-invocable): the Builder bar for react-component at the spec gate. Suite-coverage criteria by discipline, loaded by both the spec-producer (self-align) and spec-judge (grade).
-
cyberuni Skill Architect Impl Governance 2Internal governance (not user-invocable): the Architect bar for react-component at the impl gate. Code-structure criteria by discipline, loaded by both the impl-producer (self-align) and impl-judge (grade).
-
cyberuni Skill Architect Spec Governance 2Internal governance (not user-invocable): the Architect bar for react-component at the spec gate. Structural-fit criteria by discipline, loaded by the solution-producer (self-align) and spec-judge (grade).
-
heyzude Bundle Create System WalkthroughUse when a user wants a codebase, service, platform, runtime, or technical architecture explained as a self-contained HTML walkthrough, especially when the result must be approachable to general developers, printable, offline-capable, or suitable for onboarding and operational follow-up.
-
heyzude Bundle Web Artifacts BuilderSuite of tools for creating elaborate, multi-component codex.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
-
firecrawl Skill Firecrawl Parse 2Efficiently extract and convert the contents of any local file—such as PDF, DOCX, DOC, ODT, RTF, XLSX, XLS, or HTML—into clean, well-formatted markdown saved to disk. Use this skill whenever the user requests to parse, read, or extract information from a file on their computer, including phrases like “parse this PDF”, “convert this document”, “read this file”, “extract text from”, or when a local file path (not a URL) is provided. This skill offers advanced options like generating AI-powered summaries and answering questions based on the file's content. Prefer this tool over `scrape` when handling local files to deliver precise, structured outputs for downstream tasks.
-
giordanorogers Bundle HTML OutputCreate browser-native HTML artifacts for visual, interactive, or richly structured output. Use when the user asks for HTML, a browser-rendered artifact, visual report, dashboard, interactive explainer, simulation, timeline, concept map, chart-rich brief, or when a complex answer would materially benefit from layout, charts, interaction, animation, or browser verification.
-
giordanorogers Bundle Research Knowledge PipelineUse when the user asks for deep research, source-grounded investigations, research briefs, literature reviews, market maps, current-fact research, or research sessions mentioning HTML artifacts, learning, Obsidian, wiki, vault, notes, knowledge base, or durable research outputs.
-
godzhiwzz-create Bundle Sci Paper ReaderRead academic papers from primary sources to answer targeted mechanism or evidence questions, compare prior work, or produce deep Chinese/bilingual understanding packets and requested derivatives. Use when the user wants to understand, translate, teach, compare, or turn a paper into Markdown, HTML, Word, Obsidian, or presentation-ready material. Match reading depth to the question; keep reusable packets project-neutral and return candidate project relevance as a typed reading handback to sci-research-manager, never as project evidence or an experiment allocation.
-
hassancs91 Skill Storybook PipelineOrchestrator that runs the full AI Storybook pipeline end-to-end on one English story. Dispatches the 4 component skills in order — scene-splitter → story-illustrator → story-narrator → story-html-publisher — using the locked filename convention {slug}_* and {slug}_part_NN.{png,mp3} so every image and audio clip pairs by scene index, ending with one self-contained HTML storybook. Use this skill whenever the user wants to run the pipeline, make a storybook from a story, turn a story into an illustrated narrated storybook, process a story end to end, or build the storybook without invoking each skill by hand. Trigger on phrases like "run the pipeline on stories/my-story.md", "make a storybook from this", "turn this into a storybook", "build the storybook end to end", "process this story", or whenever the user drops an English story in stories/ and wants the full split → illustrate → narrate → HTML flow. Preserves every sub-skill's hard gate. Optionally accepts "with QA" to enable the illustrator's vision-QA pas
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 actonos-agent-dev, actonos-frontend-dev, n8n-workflow-builder. 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.