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.
-
jhamidun Bundle Standalone HTMLСвернуть HTML со всеми ассетами в один офлайн-файл (inline base64). Триггеры: «один файл html», «self-contained», «чтобы можно было отправить».
- jhamidun Bundle Design Canvas
N вариантов дизайна бок-о-бок в одном HTML: pan/zoom, фокус. Триггеры: «сравни 3 версии», «покажи варианты». НЕ постеры/арт → canvas-design.
- jhamidun Bundle Device Frames
CSS-рамки iOS, Android, окно macOS и браузера вокруг макета. Триггеры: «в iPhone», «iOS frame», «browser frame».
- jhamidun Skill React Pinning
Готовый блок script-тегов React/ReactDOM/Babel с integrity-хешами для HTML-артефактов с inline JSX. Триггеры: «pin react», «integrity хеши».
- jhamidun Bundle Research Docs
Document Q&A с визуальными цитатами: парсит папку PDF/DOCX/PPTX/XLSX/картинок через LiteParse, отвечает на вопрос, отдаёт HTML-отчёт со скриншотами страниц и подсветкой цитат. Триггеры: «Q&A по PDF», «отчёт по документам с цитатами», «Q&A по документам», «отчёт по PDF с цитатами», «проанализируй папку документов», «research docs».
- jhamidun Bundle Comment Injector
Overlay в HTML: Alt+Click по элементу кладёт в clipboard CSS-селектор и outerHTML — правки без скриншотов. Триггеры: «ревью прототипа в браузере». НЕ правка мышкой→visual-edit.
- jhamidun Skill Canonical HTML
Канонический HTML: закрытые теги, double-quotes, без implied-close — для предсказуемых правок инструментами. Триггеры: «почини разметку», «закрой теги».
- jhamidun Skill Claude In HTML
Вызов LLM прямо из HTML-артефакта — прототипы с живой AI-фичей: чат, саммари, классификация. Триггеры: «встрой Claude в HTML», «AI inside prototype».
- jhamidun Skill Storybook Bridge
Экспорт component-playground в Storybook 7+ (CSF3) для команды с существующим Storybook. Триггеры: «выгрузи в Storybook», «CSF3».
- jhamidun Bundle Website Creation
Создание современных лендингов и сайтов — от vanilla HTML до React+Tailwind (Lovable-style). Триггеры: «создай сайт», «landing page», «website».
- jhamidun Skill Marp Presentations
Marp: Markdown → слайды (HTML/PDF/PPTX) через npx marp-cli, бесплатная альтернатива Gamma. Триггеры: «слайды из markdown», «marp».
- jhamidun Bundle Slides 2
HTML-презентации: навигация, скейлинг под экран, спикер-ноты, печать в PDF. Триггеры: «сделай слайды», «дек», «питч», «1920x1080 дек». НЕ стили Manus→команда /slides.
- jhamidun Bundle Design Orchestrator
Главный дизайн-скилл: «сделай дизайн/прототип/слайды/лендинг/макет» — любой HTML-артефакт с дизайном; ведёт процесс, подключает design-скиллы.
- jhamidun Bundle Tweaks Panel 2
Панель крутилок в прототипе: цвета, шрифты, варианты; localStorage + запись в исходник. Триггеры: «крутилки в прототипе», «запиши в tokens.css».
- jhamidun Skill Component Playground
Storybook-подобная страница: все компоненты дизайн-системы во всех вариантах, контролы пропсов. Триггеры: «storybook страница», «all states UI».
- jhamidun Bundle Web Assets Generator
Фавиконы, PWA-иконки, og-images и брендовые баннеры: HTML-шаблон → скриншот. Триггеры: «сделай баннер», «og картинка», «обложка для анонса», «фавикон».
- jhamidun Bundle PPTX Editable Extractor
HTML → редактируемый PPTX: каждый текст-узел — нативный TextBox, правится в PowerPoint. Триггеры: «pptx с editable text». НЕ скриншоты→export-pptx.
- jhamidun Bundle Design Orchestrator 2
Главный дизайн-скилл: «сделай дизайн/прототип/слайды/лендинг/макет» — любой HTML-артефакт с дизайном; ведёт процесс, подключает design-скиллы.
- jhamidun Bundle Interactive Prototype
Кликабельный React-прототип в одном HTML (inline JSX, Babel): state, переходы, валидация форм. Триггеры: «интерактивный прототип», «кликабельный мокап».
- jhamidun Skill Competitive Intelligence
Sales-батлкарта конкурентов: интерактивный HTML с матрицей сравнения. Триггеры: «battlecard», «чем мы лучше конкурента». НЕ маркетинг → competitive-analysis-mktg.
- jhamidun Skill Javascript Typescript Dev
Разработка на JS/TS: React, Next.js, Node.js, тесты Jest/Vitest/Playwright. Триггеры: «напиши на typescript», «react-компонент», «типизируй».
- jhamidun Skill Competitive Intelligence 2
Sales-батлкарта конкурентов: интерактивный HTML с матрицей сравнения. Триггеры: «battlecard», «чем мы лучше конкурента». НЕ маркетинг → competitive-analysis-mktg.
- jhamidun Bundle Web Artifacts Builder
HTML-артефакты claude.ai на React, Tailwind, shadcn/ui. Триггеры: «shadcn artifact», «веб-приложение артефактом». НЕ простой HTML/JSX — напрямую.
- jhamidun Bundle Export PPTX 2
HTML-дек в PPTX: режим картинок (надёжный) или редактируемый (нативный текст, pptxgenjs). Триггеры: «html в pptx», «выгрузи в PowerPoint».
- jhamidun Bundle Manus Slides 2
Слайды полным циклом: 24 AI-стиля (Gemini) + HTML-шаблоны, темы Manus 1.6, экспорт PPTX/PDF/HTML. Триггеры: «слайды», «презентация», «pitch deck».
- jhamidun Skill Canonical HTML 2
Канонический HTML: закрытые теги, double-quotes, без implied-close — для предсказуемых правок инструментами. Триггеры: «почини разметку», «закрой теги».
- jhamidun Bundle Research Docs 2
Document Q&A с визуальными цитатами: парсит папку PDF/DOCX/PPTX/XLSX/картинок через LiteParse, отвечает на вопрос, отдаёт HTML-отчёт со скриншотами страниц и подсветкой цитат. Триггеры: «Q&A по PDF», «отчёт по документам с цитатами», «Q&A по документам», «отчёт по PDF с цитатами», «проанализируй папку документов», «research docs».
- jhamidun Bundle Website Creation 2
Создание современных лендингов и сайтов — от vanilla HTML до React+Tailwind (Lovable-style). Триггеры: «создай сайт», «landing page», «website».
-
majiayu000 Bundle Trpc 5Auto-activates when user mentions tRPC, type-safe APIs, procedures, or tRPC routers. Expert in tRPC including router setup, procedures, middleware, and React Query integration.
567 - majiayu000 Bundle Unit Testing 6
Use this skill to write or modify unit-tests in the application for non-component files.
567 - majiayu000 Bundle Shadcn Vue 3
shadcn-vue for Vue/Nuxt with Reka UI components and Tailwind. Use for accessible UI, Auto Form, data tables, charts, or encountering component imports, dark mode, Reka UI errors.
567 - majiayu000 Bundle Swagger UI 2
Swagger UI を用いた OpenAPI ドキュメントの公開・統合を支援するスキル。静的HTML/React/Next.js/サーバー埋め込みの構成を整理し、安全なAPI Explorerを構築する。 Anchors: • OpenAPI Specification / 適用: API仕様互換 / 目的: 定義の一貫性確保 • Swagger UI Documentation / 適用: UI構成 / 目的: 設定項目の正確な適用 • OWASP ASVS / 適用: 公開・認証設計 / 目的: セキュリティ要件の確認 Trigger: Use when embedding or publishing Swagger UI, configuring OpenAPI docs, or securing API explorer access. swagger ui, openapi docs, api explorer, swagger config, authentication
567 - majiayu000 Bundle Npmrc 2
Conditionally generates .npmrc for GitHub Packages registry configuration. Maps organization scope to registry endpoint when component library is requested. Token stored in ~/.npmrc only.
567 - majiayu000 Bundle React 15
React rules for the project Applies to files matching: **/*.tsx.
567 - majiayu000 Bundle A11Y 5
Universal accessibility best practices and standards across all technologies (HTML, CSS, React, MUI, Astro, React Native). WCAG 2.1/2.2 Level AA compliance, semantic HTML, ARIA, keyboard navigation, color contrast. Trigger: When implementing UI components, adding interactive elements, or ensuring accessibility compliance.
567 - majiayu000 Bundle Pinia V3 3
Pinia v3 Vue state management with defineStore, getters, actions. Use for Vue 3 stores, Nuxt SSR, Vuex migration, or encountering store composition, hydration, testing errors.
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 standalone-html, design-canvas, device-frames. 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.