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.
-
bryanbenner Bundle De AI GateUse to check content for AI-writing tells / de-AI a draft / gate prose before publishing or committing - triggers include "check for AI tells", "de-AI this", "scan for em-dashes or curly quotes", "is this AI-written", "gate content before publish". Scans prose, HTML, or authored data records for de-AI typographic tells (em-dash, curly quotes, ellipsis, invisible unicode) and high-precision AI phrase tells, plus record-source corruption, with a hard pass/fail exit code. Read-only, no network, no credentials.
-
matt-wilkinson-za Bundle Design CritiqueCritique UI and interaction designs using eight complementary frameworks: Nielsen's 10 Usability Heuristics, Johnson & Henderson's Conceptual Model theory, Jef Raskin's Humane Interface principles, Don Norman's affordance and feedback model, Edward Tufte's information design principles, Luke Wroblewski's mobile-first and form design research, Jorge Arango's Information Architecture and semantic structure lens, and WCAG-based accessibility heuristics. Use this skill whenever the user asks to critique, review, evaluate, or analyse a design — whether provided as a screenshot, image, written description, prototype URL, or user flow. Also trigger for questions like "what's wrong with this UI?", "how does this design hold up?", "review this flow", "give me design feedback", or "is this accessible?". Works for any design context: mobile, web, dashboard, form, onboarding, data visualisation, navigation, or multi-surface product.
-
lbachelotcapitalb Bundle Review ContribContrôler, auditer, RESTITUER et intégrer le commit / la branche / la PR d'un collaborateur (souvent depuis un fork) avant merge dans main. Utilise-le quand le mainteneur dit « un collaborateur a poussé un commit », « regarde la branche/PR de X », « audite cette contribution », « comment adopter ce commit » ; quand la revue s'appuie sur une RÈGLE EXTÉRIEURE au dépôt (taux fiscal, plafond légal, barème, seuil réglementaire, limite d'une API tierce) à sourcer avant de la reprocher à quelqu'un : « c'est sourcé ? », « d'où sort ce chiffre » ; quand il demande à VOIR la contribution : « fais-moi un HTML de ses commits », « qu'est-ce que ça apporte vraiment » ; et quand il faut RENDRE COMPTE au contributeur : « écris-lui le retour », « un rapport qu'il puisse corriger », « où en est la revue de X ». Couvre la chaîne entière : découverte, conflits, validation, fact-check sur source primaire, banc de démonstration à captures, test en worktree, rapport de correction, merge. Softcodé par repo.
-
wizzeen Bundle Knowlink Page基于 KnowLink 知识星系引擎生成自包含交互式 HTML 知识图谱页面。输入 typed JSON 规范(知识点 + 边 + 页面配置),输出可分享的知识簇可视化页面(Canvas 渲染、缩放/平移/搜索/详情面板)。复用 knowlink-core.js 布局+渲染引擎,Node 端预计算布局坐标。当用户要求把知识点/概念/主题可视化为知识图谱页面、生成报告/演示用知识簇图、或把 JSON 数据变成交互式 HTML 时使用。
-
lbachelotcapitalb Bundle Deck BuilderBuild or restructure polished, on-brand decks — as a self-contained HTML deck (1920×1080 fixed stage, PDF export) or as a PowerPoint .pptx. Use when creating, redesigning, de-cluttering, or fixing the layout of a deck/pitch/plaquette/presentation/slides — especially slides that feel empty, repetitive, or inconsistent, or when the maintainer asks for a vignette, a stat card, a slide element seen in a reference. Use it too when he asks for photos or visuals for a deck (« trouve-moi des photos », « il manque des visuels »). The maintainer names the output medium (« en HTML », « en pptx »); this skill never guesses it. Carries the layout doctrine shared by both media (fill the space, cross-card alignment, colour encodes category, type floor, one fact one home, assertion titles), a 34-model HTML design-system library, a measured geometry gate (overlap / overflow / dead space / balance / legibility), and a bridge to visual-lab, which also SOURCES free licensed photography filtered by palette. Complements the base `
-
kikakikakikakika Skill Accessibility ReviewRun this automatically on ANY design output before presenting it — UI screens, flows, components, wireframes, interaction specs, or copy+layout combinations. Do not wait to be asked. Review against WCAG 2.1 AA, fix all violations internally, then present only the resolved output. This runs alongside design-critique — both must pass before a design is shown.
-
yuna78 Bundle HTML To PPTX把已有的幻灯片式 HTML(报告 / deck / dashboard)转成**真可编辑**的 PowerPoint .pptx—— 每段文字、每个表格单元格、每个色块、每根图表柱子都是 PPT 原生形状(DrawingML), 可以在 PowerPoint 里直接改字改色,不是把整页截成一张图。用真实无头 Chrome 渲染取布局, 保真度高。当用户说「把 HTML 转成 PPT」「html 转 ppt」「导出成 pptx」「生成可编辑的 PowerPoint」「把这个报告 / 幻灯片 / dashboard 做成 PPT」,或 "html to pptx"、 "convert this HTML to PowerPoint"、"export the deck as an editable ppt" 时使用。 最适合固定画布、每页一屏的 deck,长滚动报告也能自动分页。 ❌ 不用于从零新做一套 HTML 幻灯片——本 skill 只转已经存在的 HTML。
-
zmjjkk123-hub Skill Minecraft Data ComponentMinecraft Data Component 数据组件格式:Behavior 行为(组件编码、持久化/同步属性、隐式组件 NBT 绑定)、Item Stacks 物品堆栈(组件补丁 patch 数据、! 前缀移除默认组件、id/components/count 字段)、Block Entities 方块实体(部分组件使用、隐式组件 NBT 存储、components 字段)、Entities 实体(隐式组件存储、应用优先级 bucket_entity_data→entity_data→其他)、Data Component Types 数据组件类型列表(attack_animation/attack_range/attribute_modifiers/banner_patterns/base_color/bees/block_entity_data/block_state/block_transformer/blocks_attacks/break_sound/brewing_fuel/bucket_entity_data/bundle_contents/can_break/can_place_on/charged_projectiles/compostable/consumable/container/container_loot/cooking_fuel/custom_data/custom_model_data/custom_name/damage/damage_resistant/damage_type/death_protection/debug_stick_state/dye/dyed_color/enchantable/enchantment_glint_override/enchantments/stored_enchantments/entity_data/equippable/firework_explosion/fireworks/food/glider/instrument/intangible_projectile/interact_animation/item_model/item_name/jukebox_playable/kinetic_weapon/lock/lodestone_tracker/lore/map_color/map_decorations/map_id/max_
-
quannv1198 Skill React CodingReact Coding Skill
-
gauravs30 Bundle Mock InterviewRun a realistic DevOps / SRE / Cloud / Platform Engineer mock interview, then analyze the candidate's performance. Use whenever the user wants to practice, simulate, or be drilled in a technical interview for an infrastructure / platform / reliability / cloud / SRE / DevOps role. Triggers: /mock-interview, "mock interview", "interview me", "quiz me for my SRE interview", "act as my interviewer", "prep me for my Amazon / Google / service-company DevOps interview", or any request to be interviewed or evaluated on DevOps / SRE / cloud / Linux / Terraform / Kubernetes / incident-response topics. One question at a time with follow-ups, calibrated by topic, level and company tier. Ends with a scored rubric, model answers, a study plan, and a saved session log; also covers reviewing prep progress across sessions. NOT for: explaining a concept, reviewing code/config, writing a runbook/proposal/STAR story, CV or salary help, company research, or mock interviews for non-infra roles (PM, frontend, behavioral-only).
-
zmjjkk123-hub Skill Minecraft Tag Mob EffectMob effect tags: #tradeable tag controlling which potion effects' tipped arrows the fletcher villager can sell (41 entries including wind_charged, night_vision, long_night_vision, strong_leaping, slow_falling, etc.). Referenced by item modifiers and data component predicates.
-
zmjjkk123-hub Skill Minecraft Text ComponentMinecraft Text Component 文本组件格式:Context and Parsing 上下文和解析(Static context 静态上下文 语言/键绑定、Dynamic context 动态上下文 记分板/实体/方块实体/命令存储/实体位置朝向;Pre-parse dynamic components 预解析动态组件 读取世界数据 score/selector/nbt 服务器端预解析→静态快照→不跟踪后续变化;Parse static components 解析静态组件 客户端解析静态上下文)、Basic Structure 基本结构(String form 字符串形式 {text:} 简写、List form 列表形式 拼接简写 第一个元素成为根 其余追加到extra、Compound form 复合形式 type+extra+Style tags;Inheritance 继承 树结构 extra非空为父 子继承样式标签 渲染深度优先)、Pre-parse Triggers 预解析触发器(/tellraw /title 每接收者预解析、/title 命令立即预解析、written book lectern无触发实体、sign text 立即预解析、text display entity 显示实体触发、item modifier set_lore/set_name entity触发)、Component Types 组件类型(7种:text 纯文本静态、translatable 本地化文本静态 translate+fallback+with、keybind 键绑定静态、score 记分板数据动态 name+objective、selector 实体名称动态 separator+团队前缀后缀/颜色、nbt NBT数据动态 interpret/plain+source entity/block/storage、object 精灵组件 atlas sprite/player head)、Component Styles 组件样式(color 颜色 #RRGGBB/格式化代码颜色名、shadow_color 阴影颜色 ARGB、font 字体命名空间ID、bold/italic/underlined/strikethrough/obfuscated 布尔、insertion 插入文本 Shift点击)
-
zmjjkk123-hub Skill Minecraft Command ContextMinecraft Command Context 命令上下文:Parameters 参数(permission level 权限等级、executor 执行者名称+实体、environment 环境 维度/位置/旋转/锚点、output feedback 输出反馈)、Behavior 行为(/function 继承执行者/环境/权限 不继承输出反馈、函数命令权限上限2)、Static vs Dynamic Parameters 静态vs动态参数(Java 执行者名称和环境参数静态、/execute 冻结维度和旋转、align/in/positioned/facing/rotated 冻结位置/旋转、anchored 锚定动态位置到脚/眼、Bedrock 多参数动态获取)、Parameters in Detail 参数详情(Permission level 不可修改、Executor 执行者 空/命令方块、Execution dimension 维度 用于坐标/距离选择器、Execution position 位置 相对坐标原点、Execution rotation 旋转 局部坐标系、Execution anchor 锚点 脚/眼 Java独有、Output feedback 输出反馈 成功计数)、Contexts per Scenario 各场景上下文(Server console 级别4、Server-executed functions 级别2/1、Player 玩家聊天/动态、Command block 级别2/1、Command block minecart 动态、Sign 标志 级别2、Advancement reward function 级别2、Enchantment run_function 级别2、Bedrock entity-command 级别1 动态、Test environment 级别2)、Text Component Parsing 文本组件解析(继承命令上下文、score name:* 显示读者分数、命令调用组件、Written book/Sign/Text display entity/Item modifiers)。
-
zmjjkk123-hub Skill Minecraft Item Model MappingMinecraft Item Model Definition 物品模型定义格式:Root Format 根格式(hand_animation_on_swap 切换动画、oversized_in_gui 超出槽位渲染、swap_animation_scale 动画速度缩放、model 模型定义)、Item Model Definitions 模型定义类型(type 命名空间ID + 类型特定字段 + transformation 可选):Condition 条件分派 property+on_true/on_false 递归、Range Dispatch 数值分派 scale+entries threshold+fallback、Select 选择分派 cases when value list+fallback、Model 烘焙模型 model路径+tints着色列表(custom_model_data/constant/grass/firework/dye/potion/map_color/team)、Bundle/Selected Item 渲染选中物品、Composite 复合模型列表从后到前渲染、Special 特殊模型渲染 banner/book/chest/copper_golem_statue/end_cube/head/shulker_box)、Transformation 变换(矩阵16浮点 分解形式 right_rotation quaternion/scale/left_rotation/translation)、Condition Properties 条件属性(broken/bundle/has_selected_item/damaged/using_item/custom_model_data/component/has_component/keybind_down)、Range Properties 数值属性(custom_model_data/compass compass摇摆 progress target spawn/lodestone/none/count 栈数量/decay 损坏值/time 时间 clock wobble daytime/random/moon_phase/use_cycle/use_duration)、Select Properties 枚举属性(con
-
zmjjkk123-hub Skill Minecraft Tag Banner PatternBanner pattern tags: #no_item_required (32 patterns craftable on loom without specific pattern items), #pattern_item/* tags for patterns craftable from specific items (bordure_indented, creeper, field_masoned, flow, flower, globe, guster, mojang, piglin, skull), controls which patterns can be crafted on the loom and default provides_banner_patterns component values.
-
zmjjkk123-hub Skill Forge Concept InternationalizationForge 国际化(i18n)与本地化机制:翻译键(translation keys)、语言文件(assets/[namespace]/lang/[locale].json)、Block/Item 翻译键生成(getDescriptionId、registry name 转换)、客户端/服务端本地化差异、I18n 客户端本地化、TranslatableContents 惰性本地化、TextComponentHelper#createComponentTranslation、Component#translatable、语言文件格式、翻译键与注册名分离原则。
-
zmjjkk123-hub Skill Minecraft Data Component PredicateMinecraft Data Component Predicate 数据组件谓词:Usage Formats 使用格式(advancements/predicates predicates 映射、commands minecraft:item_predicate 参数类型、item models predicate/value condition/component)、Existence Checks 存在性检查(空对象 {} 测试组件存在、谓词ID与组件ID重叠 优先解释为值测试 回退存在性检查)、Value Predicates 值谓词(attribute_modifiers 修饰符 集合谓词 size/count/contains、bundle_contents/container 物品堆栈 集合谓词 count/items/components/predicates、custom_data 自定义数据 JSON/NBT/SNBT、damage damage/durability 整数边界、enchantments/stored_enchantments 附魔 条件数组 enchantments/levels、firework_explosion 爆炸集合谓词 has_trail/has_twinkle/shape、fireworks flight_duration+explosions、jukebox_playable song 歌曲ID、potion_contents potion/custom_effects 药水内容、trim 装饰 material/pattern ID、villager/variant 村民类型、writable_book_content 书与笔 pages 集合谓词、written_book_content 成书 pages/author/title/generation/resolved)。
-
mirzaaghazadeh Skill Iphone Duo React NativeAdapt a React Native or Expo app to iPhone Duo, Apple's first foldable iPhone — asymmetric safe area insets, resize handling, and how to expose the iOS 27.1 reserved-region and hinge APIs through a native module. Use when a React Native, Expo or JS-based iOS app needs foldable iPhone support.
-
zmjjkk123-hub Skill Minecraft EnchantmentMinecraft Enchantment Definition 附魔定义:Definition Format 定义格式(ENCHANTMENT 注册表、data/<namespace>/enchantment/ 数据包路径、tags/enchantment/ 标签、JSON 根字段 description/anvil_cost/max_level/weight/min_cost/max_cost/supported_items/primary_items/slots/exclusive_set/effects)、Cost Ranges 范围(min_cost/max_cost base+per_level_above_first*(n-1)、anvil_cost 铁砧消耗 XP 等级)、Effect Components 效果组件(Value-Effect Components 值效果组件:block_experience/damage/knockback/projectile_damage/sweeping_damage/smash_damage_per_fallen_block/mob_experience/fishing_time_reduction/fishing_luck_bonus/repair_with_xp/repair_cost;Entity-Effect Components 实体效果组件:on_hit_block/on_death/post_attack/tick/projectile_spawned;Location-Dependent Component 位置依赖组件:location_changed;Damage Immunity 伤害免疫:damage_immunity;Other Components 其他组件:attributes/crossbow_charging_sounds/trident_sound/unit components)、Enchantment Effects 附魔效果(Value Effects 值效果:all_of/add/multiply/set/remove_binomial/exponential;Entity Effects 实体效果:all_of/apply_exhaustion/apply_impulse/apply_mob_effect/c
-
zmjjkk123-hub Skill Minecraft Slot SourceMinecraft Slot Source 槽源格式:Definition Format 定义格式(26.3前仅战利品表使用、26.3后 SLOT_SOURCE 注册表 data/<namespace>/slot_source/、对象 type+字段 或槽源列表 列表=group行为)、Types 类型列表(group 分组 terms 递归列表 顺序连接槽列表 保留重复、filtered 过滤 item_filter 物品栈谓词+slot_source 递归 丢弃失败槽、limit_slots 限制 limit 最大数量+slot_source 保留前limit个槽、slot_range 槽范围 source 战利品上下文来源 block_entity/this/attacking_entity/last_damage_player/direct_attacker/target_entity/interacting_entity 默认container + slots 槽范围如armor.chest/container.* 26.3可直接指定槽范围转换为此类型)、contents 内容 component bundle_contents/charged_projectiles/container+slot_source 递归 获取输入槽物品的容器组件槽 空/缺失物品或组件无槽、reference 引用 26.3 name 槽源ID 循环解析失败、empty 空 无槽)。
-
vickyck428-ux Bundle Financial AnalysisAnalyze Amazon settlement reports together with SKU cost sheets and accounting rules to calculate running gross profit, refund impact, return-fee losses, and SKU-level profitability. Use when Codex needs to turn Amazon financial exports (`.xlsx`, `.csv`) plus product-cost mappings into employee-facing Excel or HTML analysis, especially for order/refund/customer-return-fee workflows and low-margin SKU diagnosis.
-
lzheng0411 Bundle Lzheng Fitness Plan基于用户当前状态、Skill 内置健身知识和最新官方指南,完成问诊、安全筛查、P0—L3 分层、固定器械与自由重量动作选择、完整训练计划、短期降级方案、时间快照及移动端友好 HTML 交付。用于用户要求制定、重做、解释或可视化增肌、减脂、体态重组、健康、基础力量或综合健身计划,以及询问一周练几次、如何分化、动作怎样选时;不用于单次训练复盘、医疗康复或未经用户确认的单项力量周期调用。
-
lzheng0411 Bundle Lzheng Strength Cycle Planner为深蹲、卧推、硬拉、负重引体、推举等力量主项制定、解释、调整或复盘完整的 8—12 周周期,并交付含主项渐进曲线的可本地打开训练计划 HTML。用于用户要求规划组数、次数、重量、RPE/RIR、顶组、回退组、减量、测试、渐进规则或未完成分支,或要求把训练计划做成网页、总览页、可视化计划时。
-
it235 Skill Multica Frontend ImplFrontend implementation skill—page/component/state/style coding conventions and acceptance checklist; the preferred mount for @FrontendDev.
-
it235 Skill Multica Frontend Impl 2前端实现:读 JIRA/Confluence/架构/UI/API,注重交互与体验完成界面开发。用于 @FrontendDev 组件实现、状态与对接验证。
-
it235 Skill Multica Artifact BackendLand API contract artifacts to the API collaboration platform (default Apifox). Used by @BackendDev to upload API contract for downstream frontend / test consumption. Swappable platform.
-
pedronishida-suno Skill BrowseAbre um Chromium real para navegar, inspecionar e testar uma URL — local (localhost, dev server, sandbox do /spike) ou de preview. Lê a página como snapshot acessível com refs, clica/preenche, lê console e requests, tira screenshot. Funciona para a sessão principal, subagentes e forks, em paralelo sem colisão. Use quando o pedido for "abre no browser", "testa a tela", "vê se renderiza", "navega em localhost:3000", "o que aparece no console", "screenshot da página", "valida o fluxo de login/formulário". NÃO use para fetch simples de HTML/JSON — aí é curl/WebFetch.
-
laasilva Skill Add Github WorkflowsAdd GitHub Actions workflows to a repo that has none, matching both the organisation's existing pipeline conventions and the repo's actual stack — Node steps for a frontend, Maven for a JVM service, and so on. Use when asked to "add the github flow/actions/CI" to a project, to bring a repo in line with its siblings' pipelines, or when a repo has no `.github/workflows`.
-
it235 Skill Multica Review DesignerUI-design dedicated review framework. Called by DesignReviewer to professionally analyze Designer's UI/interaction design (interaction soundness/accessibility/design-system consistency/edge states), output PASS/FAIL + fix list, report to Leader.
-
it235 Skill Multica Review FrontendFrontend-implementation dedicated review framework. Called by FrontendReviewer to professionally analyze FrontendDev's output (UI/API-contract fit/component quality/unit-test sufficiency/acceptance mapping), output PASS/FAIL + fix list, report to Leader.
-
it235 Bundle Multica Review Frontend 2前端实现专属评审框架。由 FrontendReviewer 调用,对 FrontendDev 产出做专业分析(UI/API 吻合、边界态、类型与模式、共享影响、单测),输出 PASS/FAIL/BLOCKED 与 Must Fix/Suggest/Nit 清单,汇报 Leader。
-
fe2-o3 Bundle SwiftuiUse for anything SwiftUI on iOS or macOS -- writing, reviewing, or refactoring views; state management (@State/@Observable/@Bindable/environment); gesture composition (simultaneous/sequenced/exclusive); adaptive layout (ViewThatFits/AnyLayout/size classes); architecture choice (MVVM vs TCA vs vanilla); navigation and presentation (NavigationStack, sheets, Inspector); modern API adoption and Liquid Glass; accessibility and HIG compliance; performance and maintainability review; or Instruments `.trace` capture/analysis for hangs, hitches, and excessive view updates. Reach for this before improvising SwiftUI guidance from memory -- it consolidates five prior overlapping skills and is more current and more complete than ad hoc knowledge.
-
it235 Skill Multica Artifact FrontendFrontend artifact sync—push the frontend deliverable set (page/component/state/style) and run-url to Multica frontend-artifact (product-requirement mapping); the preferred mount for @FrontendDev.
-
it235 Skill Multica Artifact Frontend 2前端产物薄编排:实现说明文档规范,落地调 multica-platform-confluence + multica-platform-jira。用于 @FrontendDev 发布交互/页面对照说明。
-
x1linwang Skill Skill AuthoringWrite an agent skill - a SKILL.md with YAML frontmatter - so that it is actually loaded at the right moment. Use this when authoring or editing a SKILL.md, when a skill you wrote is never picked up, when rewriting a skill's description or name so it routes, when deciding what belongs in written instructions versus a deterministic tool, and when a SKILL.md has grown long enough to split into a body plus references. Covers YAML frontmatter, progressive disclosure, why the description is the routing mechanism, and how to test that a skill triggers. This is about writing skills - it is NOT for a Langflow Agent component that will not call a connected tool.
-
x1linwang Bundle Langflow Env DoctorDiagnose a broken local Langflow course setup on macOS or Windows - Docker, docker compose, .env, the container, port 7860, or a component that will not load. Use this whenever `docker` is not found, the daemon will not respond, `docker compose up` hangs or exits, the container never reaches (healthy), localhost:7860 refuses to connect or shows an error page, or a pull or build stalls with no progress. Covers these literal errors: "docker-credential-desktop: executable file not found in $PATH", a bare "EOF" from the daemon, and "port is already allocated". Also use it as a first step before debugging anything else about a local Langflow, and after a fresh clone to check the setup is complete.
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 de-ai-gate, design-critique, review-contrib. 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.