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.
-
zuoguyoupan2023 Skill Recipe Front BuildExecute frontend implementation in autonomous execution mode
-
zuoguyoupan2023 Bundle Test ImplementTest implementation patterns and conventions. Use when implementing unit tests, integration tests, or E2E tests, including RTL+Vitest+MSW component testing and Playwright E2E testing.
-
zuoguyoupan2023 Skill How To Write ComponentReact/TypeScript component style guide. Use when writing, refactoring, or reviewing React components, especially around props typing, state boundaries, shared local state with Jotai atoms, API types, query/mutation contracts, navigation, memoization, wrappers, and empty-state handling.
-
zuoguyoupan2023 Bundle Color ExpertUse when working with color naming, color theory, color spaces, color definitions, or any task involving color knowledge - palettes, ramps, gradients, conversions, accessibility, perceptual matching, pigment mixing, print-vs-screen color, CSS color syntax, or historical color terminology. Use this skill whenever the user is choosing, comparing, generating, naming, converting, or explaining colors, even if they do not explicitly ask for "color theory."
-
zuoguyoupan2023 Skill Recipe Front DesignExecute from codebase analysis to frontend design document creation
-
zuoguyoupan2023 Skill Frontend AI GuideFrontend-specific technical decision criteria, anti-patterns, debugging techniques, and quality check workflow. Use when making frontend technical decisions or performing quality assurance.
-
zuoguyoupan2023 Skill Recipe Front PlanCreate frontend work plan from design document and obtain plan approval
-
zuoguyoupan2023 Skill Engineering Skills23 engineering agent skills and plugins for Claude Code, Codex, Gemini CLI, Cursor, OpenClaw, and 6 more tools. Architecture, frontend, backend, QA, DevOps, security, AI/ML, data engineering, Playwright, Stripe, AWS, MS365. 30+ Python tools (stdlib-only).
-
zuoguyoupan2023 Skill Recipe Fullstack ImplementOrchestrate full-cycle implementation across backend and frontend layers
-
zuoguyoupan2023 Skill Recipe Fullstack Implement 2Orchestrate full-cycle implementation across backend and frontend layers
-
bodymobarez Bundle Fullstack Stacks MasterMaster hub for cohesive full-stack technology stacks where every layer is compatible. Use to build with TypeScript unified (Node.js + Next.js + React + TypeScript), Python (FastAPI/Django + Next via OpenAPI), or Go/Rust/Laravel/ Java/.NET paired with the right frontend. Covers stack selection, monorepos, shared types, and API contracts. Bundles 4 specialized skills (in skills/ <name>/GUIDE.md). Use when choosing or implementing a full-stack language stack.
-
yunfanleoq Bundle Jeecg E2e Doc CaptureJeecgBoot Vue3 E2E automation: Playwright multi-role login with ddddocr captcha OCR, step screenshot capture, HTML test report + soft-copyright operation manual (manifest.json), and test-user DB seeding for HR/recruitment apps. Use for E2E测试, Playwright, doc-capture, e2e-manual, 操作说明书采集, 测试账号预置, 图形验证码OCR, 多角色自动化, xgsrms 招聘系统测试, 安全扫描登录复验, 软著截图流水线.
-
bodymobarez Bundle Cross Platform Apps MasterMaster hub for building professional desktop, mobile, and unified one-codebase apps. Use to ship desktop apps (Electron vs Tauri, packaging, code signing, notarization, auto-update), high-end mobile apps for iOS + Android (React Native/Expo, native modules, performance, push, offline, store deploy), and a SINGLE codebase that targets web + desktop + mobile (Expo Router + React Native Web + Tauri/Electron, or Flutter), plus app-store/Play/desktop distribution and CI/CD. Bundles 6 specialized skills (in skills/<name>/GUIDE.md). Use for any desktop/mobile/cross-platform build.
-
yunfanleoq Bundle Jeecg Webapp Security ScanCross-project security scanning for JeecgBoot-style apps (Spring Boot + Shiro/JWT + Vue, JimuReport, Druid, multi-role HR/recruitment with PII). Delivers checklists, curl steps, code-audit grep targets, attack-chain tests, and findings (PROJ-xxx or VULN-xxx). Includes L3 Playwright E2E regression (Authz/File/Rep/Auth-02/Api-03) per e2e-automation.md. Use for 漏洞扫描, 渗透测试, 安全测试, 安全复测, AWVS补测, IDOR, 越权, JeecgBoot安全, 低代码后台安全.
-
emojiiii Bundle Dota2 Arcade DebuggingDiagnose Dota 2 Arcade failures across TypeScript builds, Lua runtime, Panorama UI, XML/CSS loading, KV syntax, addon structure, hot reload, events, nettables, assets, launch commands, and in-game console logs. Use when the user reports errors, missing UI, broken abilities, failed builds, or behavior mismatch.
-
emojiiii Bundle Dota2 Arcade Panorama UIBuild, modify, and debug Dota 2 Arcade Panorama UI with XML, CSS, TypeScript, JavaScript, Panel APIs, custom events, and nettable-driven state. Use when working on HUD, custom panels, layout files, Panorama scripts, UI styling, or client-side communication with VScripts.
-
couse-123 Bundle Crawl Web TextExtract clean, source-recorded text from public webpages or saved HTML files. Use when Codex needs to crawl or fetch public web pages for textual content, convert HTML into readable text, preserve source metadata, or prepare webpage text for summarization, analysis, citation, or downstream processing while respecting robots.txt, access limits, paywalls, logins, CAPTCHA, and anti-bot restrictions.
-
idoforgod Bundle Churchplan DiagnosticsTLDR — guided-recall이 길어 올린 표준 회상 데이터셋을, 담임목사가 한눈에 들여다보는 "한 장짜리 교회 현황 진단 거울"로 비추는 PastorPlan 2027 패키지의 진단(DISCERN 1) 대표 스킬. 본질은 판단·정죄가 아니라 방향을 보여주는 거울 — 추정 기반으로 추이·깔때기 병목·8영역 건강·작년 마음을 비추고, 신뢰수준을 또렷이 표기해 컨설팅급 진단 대시보드(HTML)+정리표(xlsx)를 산출한다. 사용자(목사)는 이 대표 스킬과만 대화하며, 7개 INTERNAL 하위 스킬(trend-analysis·funnel-analysis·health-radar·resolution-review·findings-synthesis·dashboard-builder·fidelity-guard)을 자동 orchestration 한다. ## Triggers — 사용자가 '교회 현황 진단', '작년 리뷰', '진단 대시보드', '우리 교회 어디쯤', '회상 데이터로 진단', '교회 건강 진단', 'church diagnostics', '목회계획 세션1 진단', '강점과 과제 정리', '깔때기 병목', '8영역 진단'을 말하거나, guided-recall 회상 후 현황을 한 장으로 정리해 표어·목표 설계로 넘어가려 할 때 *단독으로* 발동한다. 7개 하위 스킬은 disable-model-invocation 이며 본 대표 스킬만 호출한다. 입력은 guided-recall의 recall-dataset.json, 출력은 vision-discernment(#2)·goal-architect(#3)의 입력이 된다. ## Detailed Methodology — "우리는 지금 어디에 있는가"를 거울처럼 비춘다. 추정 충실도(신뢰수준 보존·범위는 범위로)와 돌봄의 톤(약한 신호=실패점수 아닌 돌봄점)을 모든 단계의 DNA로 둔다. (1) trend-analysis가 출석·헌금·등록의 방향(↑↓→)을 범위+신뢰 그대로 비추고 (2) funnel-analysis가 전도→정착→양육→리더에서 어디가 새는지 — 진단의 심장
-
jshearin01 Bundle AI Slop DetectorDetect and remediate AI-generated slop in copywriting/text, frontend UI/design, React components, and backend/architecture code. Use this skill whenever reviewing code before shipping, auditing AI-generated content, doing code reviews, evaluating copywriting, or when asked to improve text/UI/code that looks or feels AI-generated. Trigger on phrases like: does this look AI-generated, clean up this copy, this looks like AI slop, review this code for quality, make this less AI, improve this UI, audit for vibe coding anti-patterns, this copy sounds robotic, or any request to review or improve AI-assisted output across text, UI, or code.
-
jshearin01 Bundle Security AuditorExpert security audit and penetration testing skill for evaluating frontend and backend code repositories. Use this skill whenever a user wants to audit code for security vulnerabilities, find exposed secrets or API keys, check for OWASP Top 10 issues, review authentication/authorization flaws, identify injection vulnerabilities, assess dependency risks, or generate a security report. Trigger on any mention of "security audit", "pen test", "penetration test", "security review", "find vulnerabilities", "exposed keys", "hardcoded secrets", "security scan", "code security", "OWASP check", "security flaws", or whenever the user shares code and asks if it is secure. Also trigger when users ask to "check my repo", "review my code for security", or "find security issues" even without explicitly naming it a security audit.
-
idoforgod Bundle Churchplan Plan Compiler Compiler RendererTLDR — [INTERNAL 하위 스킬] churchplan-plan-compiler 대표 스킬 전용. "문서를 굽는 자" AI Agent. 목사 확정(HITL) 후의 plan-package.json을 받아 계획서 본문(docx+pdf)·당회/제직회 슬라이드(pptx)·성도용 비전 한 장(html+pdf)·옵션2 보강 안내를 자기완결 렌더한다(scripts/build_package.py — python-docx·python-pptx·weasyprint, 코어 출력 스킬 비의존). 앞 산출물(52주표·행사·캘린더·스코어카드·실행표·예산)은 재생산하지 않고 bundle로 참조 묶음. 렌더 전 핵심 게이트 재강제(필수 블록·표어·확정 게이트·9요소). 위반 시 렌더 거부. ## Triggers — 모델 자동 발동 금지(disable-model-invocation). 대표 스킬 churchplan-plan-compiler가 목사 검토·확정 HITL 이후에만 호출한다(확정 전 렌더 금지). ## Detailed Methodology — 입력: 확정된 plan-package.json. scripts/build_package.py가 ① plan-document.docx(python-docx·9요소·나눔명조·표어 머리)+plan-document.pdf(weasyprint) ② slide-deck.pptx(python-pptx·10장) ③ vision-onepager.html+pdf(은혜 톤) ④ reinforce-guide(보강 안내·#12·#9 다리) ⑤ bundle 목록(앞 산출물 참조·재생산 안 함)을 만든다. 렌더 전 게이트 재강제: 필수 블록(meta·sources·plan_document·slide_deck·vision_onepager)·meta.chosen_theme·status∈{제안,확정}·sources.missing/unconfirmed 비어야(미확정 산출물 거부·#10 고유 게이트)·plan_document.chapters 9요소 위반 시 렌더 거부(종료코드 1). 전체 정밀 검증(전사 충실·할
-
omgutty Skill Vue Test Utils TestingVue.js component testing using Vue Test Utils with mount/shallow mount, event simulation, Vuex/Pinia store testing, and composition API testing.
-
alexpeclub Bundle BackendBuild APIs, database schemas, and server-side logic with Supabase. Use after frontend is built.
-
alexpeclub Bundle FrontendBuild UI components with React, Next.js, Tailwind CSS, and shadcn/ui. Use after architecture is designed.
-
idoforgod Bundle Churchplan Ministry Calendar Calendar RendererTLDR — [INTERNAL 하위 스킬] churchplan-ministry-calendar 대표 스킬 전용. "달력을 짓는 자" AI Agent. 목사 검토·확정(HITL) 후에만 작동해, calendar.json을 2027 통합 연간 사역 캘린더로 렌더한다 — html(분기·월·주 보기 + 부하 히트맵 + 안식 주간 강조)과 xlsx(52주 통합 그리드 + 경고·안식 시트, openpyxl 없으면 csv 폴백). 렌더 전 핵심 게이트(필수 블록·표어·52주 무결성·상속 id)를 재강제한다(cys-insight 패턴). ## Triggers — 모델 자동 발동 금지(disable-model-invocation). 대표 스킬 churchplan-ministry-calendar가 목사 검토·확정 HITL 이후에만 호출한다(확정 전 렌더 금지). ## Detailed Methodology — scripts/build_calendar.py 실행(표준 라이브러리만, xlsx는 openpyxl 있을 때만·없으면 csv). 입력 calendar.json → ① calendar.html: 분기 섹션 + 각 주 셀(주차·날짜·절기·설교 제목·행사·캠페인·마일스톤)에 부하 level 히트맵 색상(낮음 연녹·보통 연황·높음 연적)·안식 보호 주간 파랑 강조·밀집 경고 배지, 분기/월/주 보기, inline CSS·세피아 팔레트(#594B3B) ② calendar.xlsx: 52주 그리드 시트(주차·날짜·분기·절기·설교·행사·캠페인·마일스톤·부하) + 경고·안식 시트. 렌더 전 gate()로 핵심 게이트 재강제 — 필수 블록·meta.chosen_theme·week 1~52 무결성(중복/범위)·status. 위반 시 렌더 거부(종료코드 1). 전체 정밀 검증은 fidelity-guard.
-
idoforgod Bundle Churchplan Diagnostics Dashboard BuilderTLDR — [INTERNAL 하위 스킬] churchplan-diagnostics 대표 스킬 전용. "한 장 거울을 닦는 자" AI Agent. 종합된 diagnosis.json을 담임목사가 한눈에 보는 한 장짜리 HTML 진단 대시보드와 xlsx 정리표로 결정론 스크립트가 렌더한다. 신뢰수준 배지·범위 오차띠·8영역 inline SVG 레이더·따뜻한 팔레트로, 추정이 사실로 둔갑하지 않게 그린다. ## Triggers — 모델 자동 발동 금지(disable-model-invocation). 대표 스킬 churchplan-diagnostics가 종합 후 렌더링 단계에서 호출한다. ## Detailed Methodology — scripts/build_dashboard.py가 diagnosis.json(+recall-dataset.json)을 입력받아 diagnostics-dashboard.html과 diagnostics.xlsx 동시 산출. LLM이 차트를 그리지 않아(스크립트 결정론) 할루시네이션 차단. 렌더 규칙(references/dashboard-design.md): 모든 수치에 신뢰 배지, 범위는 오차 띠(점값 막대 금지), 신뢰 '하'는 흐리게/점선, 낮은 점수는 경보색 아닌 따뜻한 저채도. 상단에 병목 헤드라인, 8영역 SVG 레이더, 흐름 카드, 깔때기 그림, 강점/돌봄점, 귀가 후 확인 목록.
-
idoforgod Bundle Churchplan Review Rhythm Rhythm RendererTLDR — [INTERNAL 하위 스킬] churchplan-review-rhythm 대표 스킬 전용. "점검표를 짓는 자" AI Agent. 목사 확정(HITL) 후의 review.json을 받아 점검 스코어카드·월간 점검표를 html + xlsx로 렌더한다(scripts/build_review.py). 렌더 전 핵심 게이트를 재강제한다(cys-insight 패턴) — 필수 블록·표어·미래값 둔갑 금지·반기 수정일·status. 위반 시 렌더 거부. xlsx는 openpyxl 있으면 쓰고 없으면 csv 폴백. ## Triggers — 모델 자동 발동 금지(disable-model-invocation). 대표 스킬 churchplan-review-rhythm이 목사 검토·확정 HITL 이후에만 호출한다(확정 전 렌더 금지). ## Detailed Methodology — 입력: 확정된 review.json. scripts/build_review.py가 ① review-scorecard.html(분기 신호등 카드 4분기 — 색은 점검 시점 빈칸·돌봄 frame·월간 5분 점검·빨강 대응·연간 일정·반기 수정일 강조) ② review-rhythm.xlsx(분기 스코어카드 시트·월간 점검표 시트·점검 일정 시트, openpyxl 없으면 csv)를 만든다. 렌더 전 게이트 재강제: 필수 블록(meta·scorecard·schedule)·meta.chosen_theme·status∈{제안,확정}·미래값 둔갑(점검 전 status 채워짐)·반기 수정일(midyear_revision official) 위반 시 렌더 거부(종료코드 1). 전체 정밀 검증(돌봄 프레이밍·상속 충실)은 fidelity-guard의 validate_review.py가 맡는다. xlsx 헤더 세피아 #594B3B. 표준 라이브러리만(xlsx는 openpyxl 있을 때만).
-
jon-devlapaz Bundle Integration PlannerUse when sequencing multi-component changes, merges, interfaces, generated artifacts, dependency order, or integration risk in coding work.
-
openmatter-network Bundle AI Model Outputs AuditUse when auditing the scores an AI/ML personnel assessment produces — Component 6 of the Landers & Behrend (2023) framework. Covers evaluating the quality of model predictions: reliability (consistency over time and repeated administrations), validity evidence (do scores reflect the claimed constructs and predict the outcome), appropriateness of the cross-validation given generalizability claims, and subgroup differences across protected classes and their intersections. Triggers: "evaluate AI assessment scores", "algorithm reliability and validity", "subgroup differences in algorithm scores", "intersectional bias audit", "does the AI score predict performance", "adverse impact of the model outputs".
-
openmatter-network Bundle AI Audit Meta ComponentsUse when auditing the cross-cutting "meta" considerations of an AI/ML personnel assessment that apply across every other component — Components 10-12 of the Landers & Behrend (2023) framework: cultural context (power differentials, cross-cultural transfer, community participation), respect (conformance to accepted ethical standards — the Standards, SIOP Principles, OECD Principles, UGAI), and research designs (whether the studies behind every empirical claim are methodologically defensible). Triggers: "cross-cultural AI hiring", "power differentials in algorithm design", "ethical standards conformance audit", "are the studies behind the claims valid", "research design integrity of an AI audit", "community participation in AI design".
-
stevefeldman Skill Evinced Web SdkUse when adding accessibility scanning to existing Playwright checks via --evinced flag, when instrumenting browser tests for WCAG compliance, or when integrating Evinced SDK with Playwright scripts.
-
openmatter-network Bundle Generalizing Validity EvidenceUse when justifying a selection procedure with validity evidence gathered elsewhere instead of (or alongside) a local study — via transportability, synthetic/job-component validity, or meta-analytic validity generalization (VG). Covers when each applies, the work-analysis link required, moderators, and limits on generalization. Triggers: "validity generalization", "use existing/meta-analytic evidence", "transport a study", "synthetic validity", "job component validity", "do we need a local study", "borrow validity".
-
stevefeldman Skill Performance AuditAnalyze codebase for performance bottlenecks across code, database, frontend, network, and async operations
-
openmatter-network Bundle AI Applicant Reactions And CommunicationsUse when considering how candidates react to an AI/ML selection tool and what is communicated to candidates and stakeholders about it — Concerns 9-10 of Tippins, Oswald & McPhail (2021). Covers applicant reactions and their tenuous link to behavior, the faking-vs-training question for video interviews, pitfalls in reaction metrics, and what information can/should be shared with unsuccessful applicants and other stakeholders. Triggers: "candidate reactions to AI hiring", "applicant perceptions video interview", "faking vs training interview", "what to tell rejected candidates", "explain AI hiring decision", "what to share with stakeholders about selection".
-
sassumix Skill Graphifyany input (code, docs, papers, images) → knowledge graph → clustered communities → HTML + JSON + audit report. Use when user asks any question about a codebase, project content, architecture, or file relationships — especially if graphify-out/ exists. Provides persistent graph with god nodes, community detection, and BFS/DFS query tools.
-
sassumix Bundle Proforma Invoice Generator杭州碧图进出口有限公司(Hangzhou Betrue Import & Export Co. Ltd)Proforma Invoice 在线生成器。当用户需要生成外贸形式发票(P/I)、发送报价单、创建 Proforma Invoice 时激活。支持填写买家信息、商品明细、HS Code、成交条款、银行账户信息,输出 HTML/PDF 文件和可分享预览链接。
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 recipe-front-build, test-implement, how-to-write-component. 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.