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.
-
cslawyer1985 Bundle Shuidi Equity Report生成企业股权结构与关联企业深度分析报告(HTML→SVG+PNG→PDF)。 涵盖实控人穿透、股权架构四层可视化、控制力六档分档评估、关联企业全景梳理及关键风险揭示五大模块。 适用场景包括:港股/内地上市公司实控人核查、非上市企业股权架构梳理、BVI/信托多层穿透。 当用户请求分析企业股权、绘制架构图、穿透实际控制人或生成股权报告时使用此技能。
-
cslawyer1985 Bundle Aladin Drama Portrait阿拉丁·AI短剧数字人肖像权合规工坊把「AI 演员/数字人/换脸/声音克隆做完却因肖像权没授权被投诉下架、数字人授权到期还在用、授权只买了一个平台却全网发、AI 形象神似明星惹官司、被举报时拿不出授权链举证」升级成一条纯本地零依赖的上架前置授权链自查工具链:多源导入(drama-cast 角色卡 _cast.json 双契约兼容/人物资产类型声明 assets.json/授权凭证登记 CSV 或 JSON/drama-publish 发行计划 _publish_plan.json 抽平台)→人物资产五分类(AI原创 ai_original/真人出演 real_actor/第三方数字人 digital_human/换脸 face_swap/声音克隆 voice_clone)逐类判定所需授权→10 条确定性授权链规则(A1缺授权凭证 A2要素缺失 A3已过期 A4即将到期 A5平台越界 A6用途越界 A7撞脸公众人物 A8声音克隆缺授权 A9转授瑕疵 A10平台报备缺失)→门禁评分(P0=25/P1=8/P2=3 扣分,100分制 A-D 档,READY可提审/REVIEW建议整改/BLOCK禁止上架)→自包含 HTML 授权链看板(门禁灯+逐条命中+整改建议)+Markdown 整改清单(可直接交制片执行)+feedback 回灌契约(缺证角色回灌 drama-cast 补授权、越界平台回灌 drama-publish 调发行、续签观察名单、报备提醒)。与 aladin-drama 系列闭环衔接(cast/publish 进,整改反馈回灌 cast 补授权、publish 调发行矩阵)。区别于内容合规工具只扫违禁词与画面红线:本款专管「人」的授权链(肖像权/声音权/数字人许可/换脸源授权),确定性规则可复算、命中带人物名与整改方向、纯本地零依赖零API、授权信息不出本机(法务资产敏感)。触发词:短剧肖像权、数字人授权、换脸授权、声音克隆授权、AI演员合规、肖像授权到期、授权链自查、撞脸明星、数字人合规、AI形象报备、肖像权侵权、portrait rights、digital human license、face swap consent、voice clone authorization、AI短剧、阿拉丁短剧、短剧创作闭环。
-
cslawyer1985 Bundle Labor Dispute Simulator劳动纠纷法律程序模拟器,支持仲裁、一审、二审全流程模拟,可扮演员工律师、公司律师、仲裁员、法官等多角色,生成法律文书和证据对抗,最终输出HTML总结报告。
-
javimosch Skill Skywork DocumentSkywork Document (skywork) - Use for ANY task producing a document output. Generates professional documents in docx, pdf, markdown, and html. Capabilities: (1) Create new documents on any topic - reports, proposals, blogs, papers, fiction, memos, letters, contracts, plans, resumes, research summaries, study notes; (2) Base documents on user's uploaded files - rewrite resumes, summarize papers, expand outlines, translate; (3) Auto web search for up-to-date content. Trigger when users ask for a 'document'/'docx' OR when intent implies document output. If output is longer than a short answer and benefits from structure/formatting, default to this skill. Do NOT use for short plain-text answers, code files, small notes, ad-hoc Q&A, or casual chat. Trigger keywords include: 'write a report', 'draft a proposal', '写报告', '帮我写一篇', 'レポートを作って', '보고서 써줘', 'rédiger un document', 'redactar un informe', 'Bericht erstellen', 'написать документ', 'كتابة تقرير', 'scrivere un documento'.
-
javimosch Skill Mail ClientIMAP/SMTP mail client for OpenClaw agents. Use when: (1) reading or listing emails from a mailbox, (2) searching emails by sender, subject, date or text, (3) sending emails with plain text or HTML body, with optional file attachments, (4) moving, marking, or deleting messages. NOT for: bulk mailing, newsletters, calendar/contacts (use CalDAV), or providers requiring OAuth (use a dedicated skill).
-
javimosch Skill Ant Design SkillAnt Design (React) — Practical Front-end Design Skill
-
wonsukchoi Bundle Auto Body RepairerUse when a task needs the judgment of an auto-body-repairer — deciding whether a damaged structural component gets pulled or replaced, reconciling an insurance estimate against actual teardown damage, writing a supplement, determining whether a repair triggers ADAS recalibration, or checking a proposed repair against an OEM position statement.
-
wonsukchoi Bundle Financial ExaminerUse when a task needs the judgment of a bank/depository-institution Financial Examiner — calculating risk-based capital ratios against well-capitalized thresholds, independently classifying a loan (Pass/Special Mention/Substandard/Doubtful/Loss) rather than accepting management's internal grade, testing allowance for credit losses (ALLL/CECL) adequacy, assigning CAMELS component ratings, or issuing a Matter Requiring Attention finding with a corrective action timeline.
-
wonsukchoi Bundle Materials EngineerUse when a task needs the judgment of a Materials Engineer — selecting an alloy or process for a design under a strength/weight/cost constraint, running a fatigue-life or mean-stress (Goodman/Gerber) calculation on a loaded component, doing root-cause fractography and fitness-for-service on a field failure, specifying a heat-treatment or hardenability callout for a given section size, or setting an inspection interval from a fracture-mechanics critical flaw size. Distinct from a materials-scientist (develops new materials and characterizes fundamental structure-property relationships in the lab) and a mechanical-engineer (takes material properties as a given input to size a structure) — this role owns the applied engineering questions of which material, which process, and why a specific part actually broke.
-
wonsukchoi Bundle Medical DosimetristUse when a task needs the judgment of a medical dosimetrist — designing an IMRT/VMAT beam arrangement and optimization objectives, resolving a PTV-coverage-vs-OAR-constraint conflict, evaluating a DVH and isodose distribution before physician sign-off, triaging a failed patient-specific QA, or writing a plan directive for therapy handoff. US radiation oncology default (AAPM/ASTRO practice norms).
-
wonsukchoi Bundle Power Plant OperatorUse when a task needs the judgment of a Power Plant Operator — diagnosing whether a drum-level change during a load ramp is real or shrink/swell by cross-checking feedwater against steam flow, deciding whether to escalate a water-chemistry excursion despite no active trip, setting a startup/shutdown ramp rate against the plant's most thermally-restrictive component, or triaging an alarm that doesn't match the expected process state.
-
haibarakiku Bundle UX DesignerExpert-level UX Designer skill covering user research, information architecture, interaction design, usability testing, design systems, accessibility (WCAG 2.1), and design critique
-
haibarakiku Bundle Prompt EngineerExpert-level Prompt Engineer skill. Transforms AI into a specialist who designs, evaluates, and optimizes prompts for LLMs, RAG pipelines, and agent workflows. Covers prompt patterns (zero-shot, few-shot, CoT, ReAct, Tree-of-Thought), RAG context injection and chunking strategies, agent tool-calling and multi-agent coordination, LLM-as-judge evaluation pipelines, and prompt injection
-
wonsukchoi Bundle Anthropologist ArcheologistUse when a task needs the judgment of an Anthropologist/Archeologist working in cultural resource management (CRM) — scoping a Section 106 Phase I identification survey, designing a shovel-test-pit sampling strategy, evaluating National Register of Historic Places eligibility under Criteria A-D, interpreting excavation stratigraphy via a Harris matrix and radiocarbon results, or running the ethnographic field-methods branch (participant observation, informant interviewing) for a cultural-anthropology component of a project.
-
wonsukchoi Bundle Wind Energy Operations ManagerUse when a task needs the judgment of a Wind Energy Operations Manager — decomposing a production shortfall into curtailment vs. availability vs. wind-resource causes, deciding whether a component failure falls under OEM warranty/service-agreement scope, triaging SCADA/condition-monitoring alerts against a spare-parts and dispatch plan, evaluating O&M spend against diminishing-returns availability targets, or reconciling curtailment events against PPA compensation terms.
-
wonsukchoi Bundle Textile Dyeing Machine OperatorUse when a task needs the judgment of a Textile Bleaching/Dyeing Machine Operator — recalculating bath concentration when a dye recipe's liquor ratio changes even though %owf stays the same, diagnosing which specific dye component in a multi-dye recipe is over/under-exhausting, tracing an uneven dye uptake defect back to an incomplete bleaching stage, or reproducing a prior batch's water quality and temperature profile, not just its recipe percentages.
-
wonsukchoi Bundle Timing Device Assembler AdjusterUse when a task needs the judgment of a Timing Device Assembler and Adjuster — verifying rate accuracy across multiple positions and temperatures rather than a single bench-test condition, applying component-specific lubrication rather than a generalized approach, treating cleanliness as a functional requirement equivalent to dimensional tolerance, or catching an assembly issue at an intermediate checkpoint rather than only at final test.
-
wonsukchoi Bundle DemographerUse when a task needs the judgment of a demographer — building a cohort-component population projection, reconciling fertility/mortality rate estimates against ACS or vital-statistics counts, judging whether a population trend is real or sampling/measurement noise, sizing a census undercount adjustment, or advising a public agency on age-structure-driven facility or service demand.
-
wonsukchoi Bundle Tire BuilderUse when a task needs the judgment of a Tire Builder — measuring a ply/belt splice against its specified tolerance rather than accepting any visible overlap, checking rubber component stock against its tack window before building, deciding whether a detected air pocket must be corrected before curing, or tracing a recurring defect back to a specific build station or stock batch.
-
wonsukchoi Bundle Carpenter HelperUse when a task needs the judgment of a carpenter's helper — cutting and staging lumber to a carpenter's layout marks, assembling and standing framed wall panels, running a material take-off and waste calculation for a framing package, or recognizing when a jobsite condition (a missing guardrail component, a nail-gun trigger setting, a header that doesn't match the plan) is a stop rather than a workaround.
-
wonsukchoi Bundle Frontend EngineerUse when a task needs the judgment of a Frontend Engineer — diagnosing which Core Web Vital (LCP/INP/CLS) a change actually affects before optimizing, fixing forced synchronous layout thrashing from interleaved DOM reads/writes, reducing bundle size through code splitting rather than assuming one more dependency is negligible, or building UI with semantic HTML/ARIA so accessibility isn't a retrofit.
-
wonsukchoi Bundle Orthotist ProsthetistUse when a task needs the judgment of a certified orthotist/prosthetist (CPO) — selecting a socket design and components for a limb-loss patient, diagnosing the cause of a prosthetic or orthotic gait deviation, justifying a Medicare K-level and component choice in a letter of medical necessity, or deciding between a preparatory and definitive device during residual-limb maturation.
-
wonsukchoi Bundle Heavy Equipment MechanicUse when a task needs the judgment of a Mobile Heavy Equipment Mechanic — diagnosing a slow or drifting hydraulic cylinder on an excavator/dozer/loader, measuring undercarriage wear to decide replace-now vs run-on, deciding whether to repair on the job site or haul the machine to the shop, sequencing OEM PM intervals for abrasive-site duty cycles, or investigating a repeat hydraulic component failure tied to fluid contamination.
-
onfire7777 Bundle DotA pixel art specialist agent that generates pixel art using code (SVG/Canvas/Phaser 3/Pillow/CSS). Also supports delegating SVG generation to the Gemini CLI.
-
onfire7777 Bundle BoltPerformance improvements on both frontend (reducing re-renders, memoization, lazy loading) and backend (N+1 fixes, indexing, caching, asynchronous processing). Used when speed enhancement and optimization are needed.
-
onfire7777 Bundle FlowImplements CSS/JS animations such as hover effects, loading states, and modal transitions to add motion and smooth interactions to the UI.
-
onfire7777 Bundle XLSXUse this skill any time a spreadsheet file is the primary input or output. This means any task where the user wants to: open, read, edit, or fix an existing .xlsx, .xlsm, .csv, or .tsv file (e.g., adding columns, computing formulas, formatting, charting, cleaning messy data); create a new spreadsheet from scratch or from other data sources; or convert between tabular file formats. Trigger especially when the user references a spreadsheet file by name or path — even casually (like "the xlsx in my downloads") — and wants something done to it or produced from it. Also trigger for cleaning or restructuring messy tabular data files (malformed rows, misplaced headers, junk data) into proper spreadsheets. The deliverable must be a spreadsheet file. Do NOT trigger when the primary deliverable is a Word document, HTML report, standalone Python script, database pipeline, or Google Sheets API integration, even if tabular data is involved.
-
onfire7777 Bundle ForgeQuickly build prototypes for both frontend (UI components/pages) and backend (API mocks/simple servers). Used to validate new features and shape ideas. Prioritize working over perfect.
-
onfire7777 Bundle MorphDocument format conversion (Markdown↔Word/Excel/PDF/HTML). Converts specifications created by Scribe and reports from Harvest into various formats. Also capable of creating conversion scripts.
-
onfire7777 Bundle ProseA specialized agent for user-facing text, responsible for microcopy, error messages, voice & tone design, onboarding copy, and accessibility text. Used when UX writing and content strategy are needed.
-
onfire7777 Bundle OpenuiBuild generative UI apps with OpenUI and OpenUI Lang — the token-efficient open standard for LLM-generated interfaces. Use when mentioning OpenUI, @openuidev, generative UI, streaming UI from LLMs, component libraries for AI, or replacing json-render/A2UI. Covers scaffolding, defineComponent, system prompts, the Renderer, and debugging OpenUI Lang output.
-
onfire7777 Bundle ShadcnManages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
-
onfire7777 Bundle ArtisanA production frontend craftsman for React/Vue/Svelte. Responsible for hooks design, state management, Server Components, form handling, and data fetching. Converts Forge prototypes into production-quality code. Use when production frontend implementation is required.
-
onfire7777 Bundle PaletteUsability improvement, interaction quality enhancement, cognitive load reduction, feedback design, and accessibility support. Used to improve UX ease of use and operational feel.
-
onfire7777 Bundle VoyagerSpecialist in E2E testing. Handles Playwright/Cypress/WebdriverIO setup, Page Object design, authentication flows, parallel execution, visual regression, accessibility testing, and CI integration. Validates entire user journeys. The E2E specialist version of Radar. Used when E2E test creation is needed.
-
onfire7777 Bundle HTML PptCreate professional static HTML presentations with templates, keyboard navigation, responsive layouts, and tasteful slide pacing.
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 mail-client, shuidi-equity-report, aladin-drama-portrait. 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.