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.
-
majiayu000 Bundle Ship FeatureImplement a feature safely end-to-end in this repository. Use when adding or changing functionality across backend, frontend, or MCP with required verification and documentation updates.
567 -
majiayu000 Bundle Md ReviewPre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology. Use when reviewing docs before publishing, wiring a docs CI gate, or auditing a Markdown corpus.
567 -
majiayu000 Bundle Paper TexTypeset a working paper or journal submission in house-style LaTeX from any draft — Markdown, Word (.docx), TeX, ODT, RTF, or HTML. Convert with pandoc, wrap in an EB Garamond template, build the PDF with latexmk, and prepare for a specific journal (spacing, page limit, anonymization, disclosures, citation style). Use for "format/typeset/convert my paper to LaTeX", "make a working paper", "prepare this for submission to <journal>".
567 -
majiayu000 Bundle Modal LogicExtending propositional and predicate logic with modal operators -- necessity and possibility, and their relatives (obligation, knowledge, belief, time). Covers Kripke possible-worlds semantics, accessibility relations, the main modal systems (K, T, S4, S5), translation from natural language, and applications in epistemic, deontic, and temporal reasoning. Use when ordinary logic is insufficient to capture distinctions like "must" vs "might," "knows" vs "believes," "always" vs "sometimes."
567 -
majiayu000 Bundle Section 508Expert Section 508 compliance advisor for US federal ICT accessibility. Use this skill whenever a user asks about Section 508, WCAG 2.0/2.1 AA for federal systems, VPAT or Accessibility Conformance Reports (ACR), accessibility audits, remediation planning, PDF accessibility, web or software accessibility, mobile accessibility, federal procurement accessibility requirements, contractor obligations, undue burden exceptions, assistive technology compatibility, or Section 508 testing. Covers the Revised Section 508 Standards (2018), all WCAG 2.0 Level AA success criteria, the four POUR principles, testing methodologies, and agency compliance workflows. Trigger even if the user doesn't say "skill" — any Section 508 or ICT accessibility question for federal systems should use this skill.
567 -
majiayu000 Bundle AccessibilityUse when working on accessibility, a11y, WCAG, ARIA, screen readers, keyboard nav, focus order, contrast, alt text, captions, reduced motion, or target sizes; not language/culture/device (see inclusive-design).
567 -
majiayu000 Bundle Ase Meta MintMint an identifier or a name of a requested type out of a free-text hint: a UUID, a SHA-1 digest, a constant, variable, function, or class identifier, a path component, or a product-like name. Use when the user wants an identifier, id, symbol, slug, or name "minted", "coined", "derived", or "generated" from a description.
567 -
majiayu000 Bundle Compdf APIIntegrate with the ComPDF Server API to convert PDF, Office, HTML, CSV, RTF, TXT, and image files; edit PDF pages; merge, split, extract, insert, rotate, compress, compare, encrypt, decrypt, and watermark PDFs; parse document structure; and extract fields or tables with ComPDF AI. Use whenever a user asks to process, convert, OCR, edit, protect, analyze, parse, or extract data from documents through ComPDF, or needs an exact ComPDF API endpoint, request field, request mode, response field, or implementation/debugging guidance.
567 -
majiayu000 Bundle Design StylesApplies a deliberate visual direction to an interface — minimalist editorial, industrial utilitarian, or high-polish commercial — each with its own type scale, palette behavior, surface treatment, and motion. Use this when a product needs a point of view rather than defaults, when choosing between visual directions, when an interface reads as generic, or when restyling something without changing its structure.
567 -
majiayu000 Bundle Theme FactoryToolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.
567 -
majiayu000 Bundle Harness UIDisplays Harness UI dashboard for monitoring and task management. Use when user mentions '/harness-ui', dashboard, monitoring, or UI display. Do NOT load for: app UI implementation, dashboard component creation, admin panel features.
567 -
majiayu000 Bundle Add FeatureAdd a new feature to the Next.js app following best practices
567 -
majiayu000 Bundle Fec AlchemyUse when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.
567 -
majiayu000 Bundle Raweb AuditAudit web pages and components against RAWeb 1.1 (Luxembourg Web Accessibility Framework). Use when reviewing existing code for accessibility compliance, generating audit reports, checking conformance levels, or preparing for Luxembourg accessibility certification. Covers all 17 themes with systematic test procedures. Default target: Level AA.
567 -
majiayu000 Bundle Review A11YAccessibility audit. Dispatches an accessibility auditor to identify WCAG conformance gaps, prioritize by user impact, and recommend fixes. Advisory only — no changes made.
567 -
majiayu000 Bundle Verify DiagVerify an architecture diagram against the actual codebase. Checks component existence, connection accuracy, and read/write directionality. Use when user says "verify diagram", "verify diag", "check diagram", or wants to validate diagram accuracy.
567 -
majiayu000 Bundle A11Y TesterRun automated accessibility tests on URLs or HTML content using axe-core engine to WCAG 2.2 AA standards, then format findings as standardized issue reports. Use this skill when users want to test website accessibility, find WCAG violations, audit pages for accessibility issues, check if sites are accessible, analyze HTML for accessibility problems, or create accessibility issue tickets. Triggers on requests like "test accessibility", "check for WCAG violations", "audit this URL", "is this page accessible", "find accessibility issues", or "write accessibility issues".
567 -
majiayu000 Bundle API TestingTest and debug Next.js API routes, validate responses, check authentication, and troubleshoot API errors. Use when testing API endpoints, debugging 500 errors, validating API responses, or checking authentication flows.
567 -
majiayu000 Bundle Barqnet E2eOrchestrator agent that coordinates all BarqNet specialized agents (backend, integration, client, documentation, audit, testing) to execute complete end-to-end workflows. Plans multi-agent deployments, manages task dependencies, tracks progress across all platforms, and ensures comprehensive completion. Use for complex multi-component tasks, full-stack features, or production deployments.
567 -
majiayu000 Bundle Spacing 001"Fix the spacing on this component. The cards feel disconnected, like they're floating islands instead of a related group."
567 -
majiayu000 Bundle UI EvidenceUse when an agent needs to bootstrap ui-evidence in a repo, then discover, configure, or run before/after UI screenshot capture, current UI snapshot capture, local HTML review generation, or git-baseline UI evidence workflows for a web app.
567 -
majiayu000 Bundle Convex AgentsBuilding AI agents with the Convex Agent component including thread management, tool integration, streaming responses, RAG patterns, and workflow orchestration
567 -
majiayu000 Bundle Shared API TypesProvides guidelines for using keys, schemas, and types from the shared @eridu/api-types package. This skill should be used when defining API contracts, ensuring type safety between frontend and backend, or implementing Zod schemas.
567 -
majiayu000 Bundle Landed CostYou are an international trade cost analyst. Calculate the total cost of importing goods from factory to final destination, including every cost component an importer will encounter.
567 -
majiayu000 Bundle HyperframesCreate video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML. Use when asked to build any HTML-based video content, add captions or subtitles synced to audio, generate text-to-speech narration, create audio-reactive animation (beat sync, glow, pulse driven by music), add animated text highlighting (marker sweeps, hand-drawn circles, burst lines, scribble, sketchout), or add transitions between scenes (crossfades, wipes, reveals, shader transitions). Covers composition authoring, timing, media, and the full video production workflow. For CLI commands (init, lint, preview, render, transcribe, tts) see the hyperframes-cli skill.
567 -
majiayu000 Bundle Atmos FunctionsUse when wiring cross-component dependencies in stack YAML. Covers !terraform.state syntax for passing outputs between components without remote-state lookups.
567 -
majiayu000 Bundle Better Auth SsoIntegrate with Better Auth SSO for OAuth2/OIDC authentication. Use this skill when implementing SSO login flows, PKCE authentication, token management, JWKS verification, or global logout in Next.js applications connecting to a Better Auth server.
567 -
majiayu000 Bundle Bknd PaginationUse when implementing paginated data retrieval in Bknd. Covers limit/offset pagination, page calculation, pagination metadata (total, hasNext, hasPrev), pagination helper functions, infinite scroll, and React integration patterns.
567 -
majiayu000 Bundle Block ScaffoldsCopy-paste scaffolds for Oh My Brand! blocks. Templates for block.json, render.php, helpers.php, view.ts, style.css, and tests. Use when creating new blocks.
567 -
majiayu000 Bundle Bootstrap IconsThis skill should be used when the user asks about Bootstrap Icons, Bootstrap icon library, how to install Bootstrap Icons, how to use Bootstrap Icons, Bootstrap icon fonts, Bootstrap icon SVGs, Bootstrap icon sprites, Bootstrap Icons CDN, Bootstrap Icons npm, Bootstrap Icons Composer, PHP Bootstrap Icons, Laravel icons, external image icons, img tag icons, CSS background icons, CSS mask icons, how to style Bootstrap icons, Bootstrap icon sizing, Bootstrap icon colors, Bootstrap icon accessibility, or needs help using icons in Bootstrap projects.
567 -
majiayu000 Bundle Bugfix Workflow通用 Bugfix 工作流知识库,包含 TDD 流程、输出格式规范、置信度评分标准和通用最佳实践。适用于所有技术栈(backend/frontend/e2e)。
567 -
majiayu000 Bundle Building BlocksGuide for creating new AEM Edge Delivery blocks or modifying existing blocks. Use this skill whenever you are creating a new block from scratch or making significant changes to existing blocks that involve JavaScript decoration, CSS styling, or content model changes.
567 -
majiayu000 Bundle Building TablesBuilds tables and data grids for displaying tabular information, from simple HTML tables to complex enterprise data grids. Use when creating tables, implementing sorting/filtering/pagination, handling large datasets (10-1M+ rows), building spreadsheet-like interfaces, or designing data-heavy components. Provides performance optimization strategies, accessibility patterns (WCAG/ARIA), responsive designs, and library recommendations (TanStack Table, AG Grid).
567 -
majiayu000 Bundle Bundle AnalysisAnalyze and optimize JavaScript bundle size, identify large dependencies, and improve load times. Use when bundles are large, investigating performance issues, or optimizing frontend assets.
567 -
majiayu000 Bundle Common PitfallsApply when debugging errors, reviewing code for issues, or encountering unexpected behavior. Contains known mistakes with ChurchTools API, Vue components, TypeScript, Safari cookies, and form handling.
567 -
majiayu000 Bundle Component LayerThis skill should be used when the user asks to 'create a component', 'add a button', 'build a card', 'add UI element', or 'create a feature component'. Provides guidance for React components using shadcn/ui, Radix primitives, and CVA patterns in components/**/*.tsx.
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 ship-feature, paper-tex, modal-logic. 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.