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.
-
liaosw97 Bundle Nextjs React TS Next JS Conventions状态变化、Web Vitals 和客户端代码使用的关键 Next.js 约定。
-
liaosw97 Bundle Chakra UI Component Composition确保使用 Chakra UI 组件以可组合的方式构建 React 组件
-
liaosw97 Bundle Composition API Vue 3 Project Structure定义 Vue 3 项目的推荐文件夹结构,以保持一致性和组织性。
-
liaosw97 Bundle Nextjs UI General Javascript React Next JS Rule定义项目中 JavaScript、React 和 Next.js 代码的一般行为,强调清晰度和现代框架。
-
liaosw97 Bundle Nextjs Typescript Code Style And Structure RulesTypeScript、Node.js 和 Next.js 项目中代码风格和结构的规则。
-
liaosw97 Bundle Chakra UI Accessibility Features使用 Chakra UI 构建的 React 组件的可访问性功能
-
liaosw97 Bundle Chakra UI Semantic HTML Rendering在使用 Chakra UI 组件时使用 'as' prop 进行语义化 HTML 渲染
-
liaosw97 Bundle Chakra UI React Chakra UI General Preferences使用 Chakra UI 的 React 组件的一般偏好,包括使用带有 hooks 的函数式组件
-
liaosw97 Bundle React Components React Component Creation General为创建 React 组件提供指导原则,强调仔细规划、现有组件检查和提示生成。
-
liaosw97 Bundle Nextjs React TS Next JS Server ActionsNext.js 服务器操作的特定指导原则,包括错误建模、验证和 next-safe-action 的使用。
-
liaosw97 Bundle Nextjs Supabase Next JS 15 Conventions为 Next.js 15+ 项目设置约定,包括利用 App Router、React 服务器组件 (RSC)、SSR 功能和 Zustand 进行状态管理。
-
liaosw97 Bundle Nextjs Typescript Key Conventions RuleNext.js 项目的关键约定,如使用 'nuqs'、Web Vitals 优化和限制客户端组件。
-
liaosw97 Bundle Chakra UI Dark Mode Implementation在构建 React 组件时使用 Chakra UI 的颜色模式实现暗模式
-
liaosw97 Bundle Chakra UI Performance Optimization遵循 Chakra UI 最佳实践来优化 React 组件的性能
-
liaosw97 Bundle Nextjs Typescript General Typescript Node JS Next JS RulesTypeScript、Node.js 和 Next.js 项目的一般规则,包括包管理器偏好和首选技术。
-
liaosw97 Bundle Apollo GRAPHQL React Functional Components Preference在 React 组件中强制使用带有 hooks 的函数式组件
-
oklahomie-580 Bundle SpeedcleanUse when the user says /speedclean, speedclean, or asks for a speed, responsiveness, loading, performance, or page-transition cleanup in the Det 430 App 2.0 Next.js/Supabase app. Focus on measuring real route timing, reducing duplicate server data work, preserving behavior, and validating with lint, typecheck, tests, build, and browser timing evidence.
-
manager-rubens Bundle Career Company JobsFind current job openings from official company careers surfaces and build single-company or aggregated HTML job digests from primary sources. Use when Codex needs to search company careers pages or ATS boards, collect and normalize current openings, package them for a career-company-jobs or job-alerts digest, or deliver the digest through Apps Script and Gmail relay without leaving raw payload emails visible in the inbox.
-
yrzhe Skill Vote PredictPredict how a target population would vote, respond to a policy, or react to a political message. Use when the user wants a distribution (not a winner-take-all answer) across demographic segments, with calibration disclaimers. Triggers on 投票预测, 民意模拟, policy response, 政策反应, 选举模拟, 民意分布, 某群体怎么看.
-
yrzhe Skill Social SandboxRun a what-if social experiment — inject a policy, event, or information shock and observe how a simulated population responds. Use for hypothesis generation (not ground truth) on questions like "what if minimum wage doubled", "how would users react if we added feature X", "which demographics push back first". Triggers on 社会实验, 沙盒模拟, what-if, 如果 X 发生了会怎样, 反事实模拟, counterfactual experiment.
-
hegeo Bundle Lobster Research🦞 龙虾智能调研助手 — 通用研报生成技能,覆盖7种快报+22种研报。 A股/港股/美股大盘分析、个股深度研究、持仓诊断、快速选股、跨资产分析。 覆盖领域:通讯物流、投资理财、科技风向、战争政治、企业行业、农业工业、 生物医疗、社会金融、消费潮流、文化艺术、游戏娱乐、宇宙地球。 触发:大盘/个股/持仓/选股/ETF/行业/企业研报/短线/科技/跨资产/期货/战争/文化/游戏/生物/社会/消费/农业/宇宙 核心约束: ① 你只做 Phase 2:读取 JSON → 补充搜索 → 填写 5_agent_report_input.json ② 数据采集由 main.py 精确命令完成,禁止跳过 main.py 自行采集 ③ 报告生成由 python main.py generate 完成,禁止直接调用 generate_report() ④ 可用 --style 选色(purple/blue/green/indigo/orange等10色),--color-type 选渲染(solid/gradient/liquid),--layout 选布局(rounded/square/minimal) ⑤ 可用 --type quick 走快速数据采集(跳过耗时步骤,Agent 自行搜索) ⑥ 5_agent_report_input.json 的 sections 已预埋到模板 JSON 中,Agent 展开填充即可 ⑦ 专家模式需 5000-8000 字,快报模式需 ≥1800 字,sections 内容必须充实 ⑧ 报告生成后必须用 deliver_attachments 交付 + 写一句话确认,禁止长回复 ⑨ 必须正确识别当前时间 —— 使用系统提供的 current_time 四段式架构: 【Phase 1 - 代码】main.py 命令采集数据 → 任务文件夹 JSON 【Phase 2 - Agent】读 JSON + 补充搜索 → 填写 5_agent_report_input.json 【Phase 3 - 代码】main.py generate → 生成 HTML/PDF 报告 【Phase 4 - 代码】模拟持仓周期(自动,Agent 无需介入) 持仓诊断/个股/企业报告生成后触发(需 config.json 中 emu.enabled=true): → 读取诊断建议 → 生成交易决策 → 执行买卖 →
-
moii-dev Bundle Codex Task ExecutorExecute programming tasks safely and completely in existing projects or new codebases. Use when the user asks Codex to implement, fix, refactor, complete, debug, test, improve, or prepare code, including features, bugs, architecture, UI/frontend behavior, Android apps, web apps, ASP.NET/C# projects, Python projects, Telegram bots, database work, and homework or student projects.
-
jackie-jiaqi-yin Bundle Arxiv Latest SummaryGenerate education-focused summaries of the latest arXiv papers from plain-language user interests and deliver polished HTML/PDF reports. Use when users want quick understanding of recent technical or academic trends, need help converting interests into valid arXiv queries, want a Codex-native workflow without external LLM API calls in scripts, or want to convert a scoped summary workflow into a recurring Codex automation with a complete task prompt.
-
jackie-jiaqi-yin Bundle Tabular Data ExplorerExplore CSV, Excel, Parquet, TSV, and similar tabular datasets with type-aware profiling, descriptive statistics, missingness review, correlation and association analysis, optional target-aware feature exploration, and polished interactive HTML reporting. Use when users want to inspect an unfamiliar dataset, profile data quality, compare features against one or more target columns, or generate explainable charts plus grounded narrative from mixed-format tabular data. Especially useful for health, epidemiology, biostatistics, biology, and life-science workflows where users need interpretable views of missingness, multicollinearity, follow-up variables, and target-feature relationships before choosing explainable methods.
-
yrzhe Bundle AppsnapCapture a Mac app window as agent context. Use when the user asks to snap, inspect, read, capture, summarize, or work from the current Mac window, a visible app, a selected window, or an app screenshot. Strongly prefer for Appshot-like requests, "what is on this window", "use this app as context", and "grab the window text". SKIP for remote websites/files that can be fetched directly, for controlling the UI, clicking, typing, automating actions, or extracting hidden Google Docs/Sheets/Slides/Gmail canvas text beyond what macOS Accessibility exposes.
-
chasexu168340-rgb Bundle FrontendWorld-class frontend engineering - React philosophy, performance, accessibility, and production-grade interfacesUse when "frontend, react, vue, svelte, next.js, nuxt, component, state management, redux, zustand, client side, spa, ssr, hydration, bundle size, web vitals, accessibility, a11y, responsive, css, tailwind, frontend, react, typescript, performance, accessibility, components, state, architecture" mentioned.
-
xiangdong-415 Bundle Office Export QAFinal export, compatibility, render, metadata, accessibility, and quality-assurance workflow for Office files including DOCX, XLSX, PPTX, PDF, Word, Excel, PowerPoint, and Google Workspace-targeted artifacts. Use when users ask to check, verify, package, export, clean, inspect, anonymize, or prepare Office deliverables for sharing, submission, printing, presentation, or GitHub examples.
-
cursor-js Skill Cursor JSUse when the user wants to simulate realistic user interactions, write end-to-end tests, frontend automation, or create interactive tutorials using the cursor.js library.
-
lsw417 Bundle Source Sync Architect소스코드 분석을 통해 기능 중심의 통합 문서(Master README)를 생성하고, 화면(Frontend), 백엔드(Backend), 주요 개념(Core Concepts)별 상세 기술 문서를 실시간으로 동기화합니다. 기능 요약, 스크린샷, API 스펙, 테스트 시나리오를 하나로 묶어 관리합니다.
-
lsw417 Bundle Team Blueprint Scaffold팀 표준 Next.js + FastAPI + GCP 아키텍처를 기반으로 새로운 프로젝트를 스캐폴딩합니다. /{카테고리}/{앱이름} 라우팅 규칙과 팀의 골든 룰(GEMINI.md), 그리고 표준화된 4종 문서 양식을 자동으로 주입하여 일관된 개발 환경을 구축합니다.
-
chasexu168340-rgb Bundle AccessibilityAccessibility
-
joaoalvess Bundle Codex ModeSwitch Codex App plugin sets by explicit working mode. Use when the user says "mode", "mode nextjs", "mode vite", "mode react-native", "mode ios", "mode tvos", "mode macos", "mode ai-app", "mode restore", "mode status", "mode list", "codex mode", "trocar modo", "ativar modo", or asks to reduce Codex plugin or skill context by selecting a focused plugin mode.
-
tcvdog Skill UI DesignerExpert UI designer specializing in visual design systems, component libraries, and pixel-perfect interface creation. Creates beautiful, consistent, accessible user interfaces that enhance UX and reflect brand identity
-
tcvdog Skill UX ArchitectTechnical architecture and UX specialist who provides developers with solid foundations, CSS systems, and clear implementation guidance
-
chasexu168340-rgb Bundle System DesignerSoftware architecture and system design - scalability patterns, reliability engineering, and the art of making technical trade-offs that survive productionUse when "system design, architecture, scalability, how should we structure, distributed, microservices, monolith, high availability, design the system, component diagram, architecture, system-design, scalability, reliability, distributed, api, modeling, c4" mentioned.
-
chasexu168340-rgb Bundle State ManagementExpert guidance on frontend state management patterns including Redux, Zustand, MobX, Jotai, Recoil, and React Context. Helps choose the right solution and implement it correctly for your use case. Use when "set up state management, redux vs zustand, global state, store architecture, state not updating, prop drilling problem, share state between components, Working with Redux, Zustand, MobX, Jotai, Recoil, state, redux, zustand, mobx, jotai, recoil, context, frontend, react" mentioned.
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 nextjs-react-ts-next-js-conventions, chakra-ui---component-composition, composition-api-vue-3-project-structure. 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.