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.
-
serejaris Bundle Storage Analyzer KhazixmacOS / Windows 只读存储分析助手(自动识别系统)。扫描整机磁盘占用,找出占空间大户,把每一项分成 🟢可自动清理 / 🟡需人工判断 / 🔴谨慎清理 三级并给出可执行处置方案,生成排版精美、可折叠、命令可一键复制的交互式 HTML 报告,并可起本地服务在网页上一键删除(移废纸篓/直接删)。扫描全程只读。务必在以下场景使用:用户说"存储分析"、"磁盘满了"、"C盘/硬盘满了"、"空间不够"、"清理空间"、"清理磁盘"、"占空间"、"哪些东西占地方"、"帮我看看存储"、"看一下电脑存储/空间"、"存储空间"、"电脑空间不够"、"内存满了/不够/不足"、"看下内存/存储"(中文口语里"内存"常指存储空间)、"storage analysis"、"disk cleanup"、"清缓存"、"磁盘清理",或用户抱怨电脑没空间、想知道什么东西吃硬盘、想要清理建议时。注意:若用户明确指运行内存/RAM(如"哪个进程吃内存""内存占用高"想看活动监视器),那是 RAM 不是存储,不属于本 skill。
-
serejaris Bundle Vibecoding Webapp SwarmBuild any web-based project: websites, landing pages, web apps, dashboards, browser games, portfolios, and interactive experiences. Design-first React workflow. Skip if the user explicitly requests a non-React framework (Vue, Svelte, Angular, vanilla HTML) or the task is unrelated to web UI (CLI tools, scripts, data pipelines).
Audited -
runxhq Bundle ExtractExtract schema-validated JSON from messy HTML or text fixtures with digest-bound provenance.
-
saeed-vayghan Bundle Angular ArchitectExpert Angular architect mastering Angular 15+ with enterprise patterns. Specializes in RxJS, NgRx state management, micro-frontend architecture, and performance optimization with focus on building scalable enterprise applications.
-
saeed-vayghan Bundle Frontend DeveloperExpert UI engineer focused on crafting robust, scalable frontend solutions. Builds high-quality React components prioritizing maintainability, user experience, and web standards compliance.
-
saeed-vayghan Bundle Accessibility TesterExpert accessibility tester specializing in WCAG compliance, inclusive design, and universal access. Masters screen reader compatibility, keyboard navigation, and assistive technology integration with focus on creating barrier-free digital experiences.
-
ever-just Skill RemotionRemotion — Programmatic Video Creation with React
-
ever-just Skill Framer MotionMotion (Framer Motion) — React UI Animation Library
-
ever-just Bundle UX EvaluationEvaluate user experience by locating decisions on a layered framework drawn from Jesse James Garrett's Elements of User Experience and modern frontend practice. Use this skill when reviewing or auditing any product interface, when diagnosing a UX problem (where does it actually live?), when designing or systematizing a frontend, when discussing information architecture, interaction design, layout, design tokens, or design systems, when asked questions like "is this a UI problem or a deeper problem", "what should we systematize", "where should this decision be made", or any request to evaluate, critique, or improve a digital product holistically. Trigger this skill whenever a question touches the structure of a product rather than just its surface — even if the user doesn't say "UX" explicitly.
-
ever-just Skill Everjust Odoo Shell OpsOperate an everjust.app (Odoo 19) tenant from the BOX SHELL (SSH + docker), the deploy-pipeline and box-ops layer. Use when the task needs bulk DB writes, DB-only page publishing, clearing the sitemap ir.attachment cache, creating an ir.cron, recovering a CI deploy whose rsync silently did not land, avoiding deploy-collisions across concurrent agents (gh run idle check, scoped git add), restarting Odoo to compile a QWeb edit, or fixing an nginx stale-inode after a config redeploy. Covers the odoo shell invocation, the COW-fork-overrides-generic gotcha, and the Deploy to Production pipeline. The deploy/ops layer around [[everjust-website-customization]] (which owns durable view/CSS/behavior customization from the shell). Prefer the MCP ([[everjust-agent-mcp]], [[everjust-website]]) for ordinary edits; drop to the shell when it cannot. Cross-references [[everjust-platform]], [[github-actions-ec2-deploy]].
-
ever-just Bundle Parallel Agent RefactorOrchestrate many parallel subagents to run a large multi-file refactor, migration, or codemod sweep SAFELY and fast — partition by disjoint file ownership, fan out one write-agent per independent slice behind typecheck+build barriers, and synthesize their structured returns. Use when adopting a component library across routes, migrating design tokens / dark mode, running a rename or codemod sweep, modernizing per-route, or applying one rubric across a whole codebase — any breadth change that decomposes into independent file sets. Not for interdependent foundation work (shared config, a token layer, coupled modules) — do that inline.
-
ever-just Bundle Dark Mode Token MigrationAdd dark mode to a light-only app that styles with RAW color utilities (Tailwind `stone-*`/`slate-*`/`gray-*`) via a semantic token layer, migrating utilities onto it so light stays PIXEL-IDENTICAL and dark comes for free. Use when asked to "add dark mode", or to refactor hardcoded color utilities into a themeable token system. Not for apps already on semantic tokens — just add `.dark` values plus a toggle.
-
ever-just Bundle Empirical Responsive AuditAudit a web UI for mobile/layout defects EMPIRICALLY by rendering every servable surface across a phone/tablet/desktop viewport matrix (both orientations, light + dark) with a Playwright DOM probe that MECHANICALLY flags horizontal overflow, sub-44px tap targets and sub-16px inputs, then ships the probe as a non-zero-exit pre-merge gate. Use when the frontend "isn't optimized for mobile", text "spills outside its container", small-screen stacking is "awkward", or for any responsive / tap-target / layout audit or checked-in gate. Not for pure visual-taste questions — use `ui-ux-audit` / `frontend-design`.
-
ever-just Bundle Shadcn Tailwind V4 PrimitivesScaffold a token-based shadcn/ui + Radix primitive set (select/combobox/command/switch/tooltip/form/drawer/…) matching a codebase's house conventions on Tailwind v4 — semantic-token colors, a global focus ring, no tailwindcss-animate, 44px touch targets, forwardRef like the existing button. Use when an app hand-rolls or fakes controls (native `<select>`s, `title=` tooltips, custom dropdowns, DIY meters), or when standing up shadcn/ui on Tailwind v4.
-
ever-just Skill Everjust Website CustomizationDeeply and durably customize an EverJust.app (Odoo) tenant website from the odoo shell — the layer below the MCP website_* tools. Use when a change needs QWeb view edits, site-wide CSS/JS, new server-side behavior, or model/config writes that the everjust MCP and website builder cannot do (editing views, server actions, custom_code_head, base automations). Covers COW inherit views (website_id=1) that survive addon redeploys, the website.custom_code_head Markup-escaping trap, base_automation for behavior, the "view edits need docker restart to render" rule, and the durable-vs-reverts-on-upgrade matrix. Use when the user says "edit the Odoo view/template", "inject CSS/JS site-wide", "add a server action / automation", "the change keeps getting reverted on deploy", or "customize the everjust/connectdomain website beyond the MCP tools".
-
ever-just Bundle Markdown To PDFConvert markdown files to styled PDFs using pandoc and WeasyPrint with CSS. Use when exporting markdown documents to PDF with custom styling.
-
nirholas Skill Bitcoin Inscription GuideGuide to Bitcoin inscriptions (Ordinals) — creating, minting, and managing content inscribed on the Bitcoin blockchain. Covers Ordinal theory, inscription types (text, images, HTML), BRC-20 tokens, recursive inscriptions, and marketplace integration.
Audited -
nirholas Skill Web3 Accessibility GuideGuide to W3AG (Web3 Accessibility Guidelines) — accessibility standards and patterns for Web3 applications. Covers wallet connect UX, transaction confirmation patterns, error handling, screen reader support, and inclusive design for dApps. Making DeFi usable by everyone.
Audited -
nirholas Skill Crypto Market Dashboard GuideGuide to building a real-time crypto market dashboard with Next.js, React, and TradingView charts. Features multi-chain portfolio tracking, DeFi position monitoring, price alerts, and social sentiment integration. Production-ready dashboard template.
Audited -
gked2121 Skill Dark Mode ConverterConvert a light-only site or app to a real dark mode -- semantic token mapping, elevation-based surfaces, recalibrated shadows and imagery -- not a naive inversion. Handles Tailwind, CSS variables, and styled-components, plus the toggle, persistence, and no-flash boot.
-
gked2121 Skill Claude Design CriticAudit a website or UI and de-AI it — find the patterns that make it look template-generated (in both design and copy) and return specific, prioritized fixes that push it toward editorial, premium, human-crafted. Reviews layout, color, type, spacing, motion, accessibility, AND the words. Use after building or generating any frontend, or when a site looks "fine but generic" and you can't say why.
-
gked2121 Bundle CSS Animation CreatorCreate professional CSS animations, transitions, micro-interactions, and complex motion design. Use when adding animations, hover effects, loading states, page transitions, scroll animations, or any motion design work.
-
gked2121 Skill Design Style InstallerInstall a complete design-token theme into any project in one pass -- pulls a style from the Open Agent Stack design-styles collection (aurora-mesh, cirrus, liquid-glass, mono-brutalist, neo-terminal, sand-terra, tidal) or a local tokens.json, wires it into Tailwind/CSS, and repaints existing components to match.
-
gked2121 Bundle Error Boundary CreatorCreate error boundaries, error handling, and fallback UIs for React applications. Use when implementing error handling, creating fallback components, or setting up error reporting.
-
gked2121 Bundle Full Codebase MigratorUses 1M context window to ingest an entire codebase and output a file-by-file migration plan. Supports JS to TS, React class to hooks, framework migrations, and more. Generates migration-plan.md with file inventory, dependency graph, migration order, file-by-file changes, estimated effort, and risk assessment.
-
gked2121 Bundle Overnight Repo AuditorUses Managed Agents' 14.5-hour runtime to audit an entire codebase overnight. Security, performance, accessibility, dependency issues. You wake up to a full report.
-
gked2121 Bundle Design System GeneratorCreate design systems with tokens, components, and documentation. Use when building design systems, creating component libraries, or establishing design tokens.
-
agentik-os Skill Artifact DesignPublishes deliverable reports (audit, research memo, strategy doc, mission recap, dashboard, brief) as LIVE claude.ai Artifacts via the native Artifact tool; surface 1 of the OmegaOS report router (R-ARTIFACT). Use when the user says "report", "live report", "publish an artifact", "make this a report", "dashboard report", "share a page", or in French "rapport", "rapport live", "publie un artifact", "fais-moi un rapport", "tableau de bord". NOT for explicit PDF asks (omega pdf, R-PDF), plain file-only asks (R-HTML), generating videos or images, or scripted browser E2E.
-
agentik-os Bundle Changelog AdoptClaude Changelog Adopt — a daily autonomous self-improvement pass that reads the OFFICIAL Claude Code changelog (the authoritative GitHub CHANGELOG for anthropics/claude-code, with @claudecodelog as a secondary mirror), diffs it against the last version OmegaOS already absorbed, and for each NEW entry decides whether it implies a concrete OmegaOS or system-agent improvement — a new primitive, a doctrine change, an agent-behavior shift, a deprecation to unwind. It classifies each entry (opus), proposes a surgical adoption (what to change, in which file, why — like the manual /loop -> R-LOOP native-loop doctrine move), runs an adversarial anti-fabrication gate (opus, default-reject), writes a self-contained HTML report + Telegram alert for the operator to decide, and — only when ARMED — dispatches each vetted proposal to an oracle behind the full quality gate (In-Review handoff, never auto-Done, never force-push). Auto-adoption is scoped to doctrine (rules.rs), agent identities (agents/*.md), skills, and instal
-
agentik-os Skill A11yauditForensic accessibility audit v1 (Gestalt-Popper). 21-phase deep analysis of every accessibility surface: WCAG 2.1 AA compliance, keyboard navigation (every interactive element), screen reader testing, ARIA labels/roles/states, color contrast (4.5:1 AA, 3:1 large text), focus management, skip navigation, form labels, error announcements, alt text, heading hierarchy, landmark regions, touch targets (44px), motion/animation preferences, cognitive load, reading level, plus verdict, fix plan, fix execution, re-audit, and integration smoke gate. Score /320. Preamble v1.0 compliant. Audit -> Plan -> Fix -> Re-audit. Use when user says "/a11yaudit", "accessibility audit", "wcag audit", "a11y check", "keyboard navigation test", "screen reader test", "color contrast check".
-
agentik-os Skill FlowauditForensic user flow audit v2. 25-phase deep analysis of every user journey, workflow, state machine, edge case, error recovery, and experience gap. Covers flow mapping, state verification, dead-end detection, permission gaps, data integrity through flows, onboarding completeness, cross-session continuity, error recovery paths, accessibility of journeys, flow performance, plus verdict, fix plan, fix execution, re-audit, and integration smoke gate. Score /400. Preamble v1.0 compliant. Audit → Plan → Fix → Re-audit. Use when user says "/flowaudit", "audit the flows", "check user journeys", "workflow audit", "flow review".
-
agentik-os Skill I18nauditForensic internationalization & localization audit v1 (Gestalt-Popper). 18-phase deep analysis of everything that decides whether the product is WORLD-READY: hardcoded user-facing string detection (JSX text, alt/title/aria/placeholder attributes, toast/error/email/notification copy), i18n framework wiring integrity (key existence, namespace structure, interpolation contract), locale routing & detection (path/subdomain/cookie/Accept-Language, persistence across navigation), pluralization rules (CLDR plural categories: zero/one/two/few/many/other), gender/grammatical agreement, date/time formatting (Intl.DateTimeFormat, timezone), number/percent/unit formatting, currency formatting (ISO 4217, symbol placement, minor-unit precision), RTL support (dir attribute, logical CSS properties, bidi-safe interpolation, mirrored icons), translation completeness + fallback chains, character encoding (UTF-8 end to end, normalization, mojibake), locale-aware sorting & collation (Intl.Collator), and untranslated-UI leakage at
-
agentik-os Skill MotionauditForensic motion design audit v1 (Gestalt-Popper). 23-phase deep analysis of everything that MOVES on the site: CSS transitions, JS animations, WebGL effects, scroll-driven choreography, P5.js/canvas, page transitions, micro-interactions, loading sequences, easing systems, duration consistency, choreography composition, reduced-motion compliance, mobile motion, brand motion DNA, performance budget, plus verdict, fix plan, fix execution, re-audit, and integration smoke gate. Score /360. Preamble v1.0 compliant. ABORTS on non-UI projects (CLI, library, backend-only, headless). Audit -> Plan -> Fix -> Re-audit. Use when user says "/motionaudit", "motion audit", "animation audit", "why does it feel lifeless", "motion review", "animation quality", "easing audit", "scroll animation check", "does the motion make sense", "audit the animations".
-
agentik-os Skill RefontauditSenior Dashboard REFONTE engine v2. Three modes: EVOLUTION (default — surgical improvement), REVOLUTION (ground-up when unsalvageable), VERIFY (post-impl measurement 2-4 weeks later). 25-phase pipeline ALWAYS, scored /540, driven by real user data + user stories. Keep Audit classifies KEEP/IMPROVE/RETHINK/KILL. Component Forge writes real shadcn code. Reference patterns from shadcn official blocks/components (Context7 MCP) + product design knowledge. Confidence score per proposal. shadcn/ui + Tailwind v4 foundation. Use when user says "/refontaudit", "/refonte", "refonte", "refund audit", "redesign dashboard", "repenser dashboard", "comme Linear", "comme Vercel", "comme ElevenLabs", "dashboard pro", "dashboard senior", "vérifie la refonte", "verify refonte".
-
agentik-os Skill Design Taste FrontendSenior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
-
agentik-os Skill Audit OrchestratorIntelligent audit orchestrator — detects project type + user intent, recommends optimal audits with three bounded modes (Focused/Standard/Forensic). Use when user says "/audit", "what should I audit", "full audit", "audit my project", "audit fast", "audit deep", "find issues", "improve quality", "production ready check", "ship-ready audit". Auto-detects project stack and intent keywords (speed, security, design, content, accessibility, full) to pick best 1-N audits. Dispatches in parallel waves. Reads results from audits/.<audit-id>/verdict.json after each run.
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 storage-analyzer-khazix, vibecoding-webapp-swarm, extract. 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.