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.
-
ledgerhq Skill Component StoriesUse when creating or editing Storybook stories (*.stories.tsx, React or React Native) — story layout, docs source type, controls, and export naming conventions.
-
ledgerhq Bundle Component StylingUse when building or styling a component in libs/ui-react or libs/ui-rnative (and their visualization libs) — the cross-platform styling principles, plus routing to the platform mechanics: Tailwind + cva + cn on web, useStyleSheet + themeJS + lx on React Native. Load this before writing component styles.
-
ledgerhq Skill Component TestingUse when writing or editing component tests in libs/ui-react or libs/ui-rnative (and their visualization libs) — shared structure and coverage conventions, plus the per-platform runner: Vitest + React Testing Library on web, Jest + React Native Testing Library on RN. Load this before writing tests.
-
ledgerhq Skill Component ArchitectureUse when designing or changing a component's public API, its composition, or its state model in libs/ui-react or libs/ui-rnative — layering (core vs internal vs primitives), BaseProps/Props splits, converting a component to compound / changing its composition with createSafeContext, controlled/uncontrolled state, prop-naming conventions, and cross-platform API parity. Load this before shaping a new component, changing its props, or refactoring its composition.
-
lencamo Bundle Amo RefactorUse when the user asks how to refactor, split modules, clarify architecture, move ownership, reduce coupling, or fix unclear state, data-flow, or component boundaries before coding. Do not use for ordinary feature work, bug fixes, or second-pass solution challenges.
-
lencamo Bundle Draft To ProjectConvert UI drafts such as screenshots, HTML drafts, local file:// prototype pages, or mockups into frontend pages inside an existing project. Reuse existing components and styles, and keep the provided layout structure close to the source draft unless the user asks for redesign.
-
linuxfoundation Skill DrawerUse when building or modifying a Self Serve drawer component — slide-in detail panels with lazy data loading, chart integration, two-way `[(visible)]` bindings, and the standard responsive width class chain. Trigger phrases include "building a drawer", "open in a drawer", "drawer component", "lazy-load on open", "side panel".
-
linuxfoundation Bundle PreflightMechanical pre-PR pipeline, license headers, format, lint, build, protected file check, commit verification, and PR change summary. Run as the final deterministic check inside Mode 2 of `CLAUDE.md`'s **Pre-PR review** section, after the preceding review, fix, documentation-currency, and commit work and after `/lfx-self-serve-pr-readiness`. Review protocol and pattern/convention auditing are not owned by this skill.
-
loongyowl Bundle Wisdom To Course将佛教、哲学、心理学、人际沟通等领域的智慧转化为交互式HTML学习课程。帮助用户通过互动体验提升内心觉察、情绪管理和行为有效性。当用户想要学习情绪管理、改善人际关系、提升自我认知、或理解某个哲学/心理学概念时触发此技能。
-
lujih Skill Webnovel Export将网文正文导出为 Markdown/TXT/EPUB/HTML/DOCX/PDF 格式。立即使用此 skill 当用户说:导出、导出小说、导出章节、生成电子书、导出 TXT、导出 Markdown、导出 EPUB、导出 HTML、导出 Word、导出 PDF、下载小说、输出正文。
-
sergeyizmailov Bundle Secure CodingUse when writing JavaScript, Node.js, HTML, CSS code for websites, landing pages, admin panels, APIs. Reduces common vulnerability classes (XSS, injection, SSRF, etc.) via secure libraries, proper headers, and safe patterns. Includes AI code vulnerability patterns.
-
sergeyizmailov Bundle Design Stack PickerUse when building or restyling frontend UI and choosing building blocks — icon sets, fonts, component/block libraries, accessible primitives, imagery sources, color systems, motion, shadows, spacing, and image optimization. For landing pages, ecommerce, dashboards, web apps, emails, and single components.
-
shinpr Bundle Prototype GuideDefines evidence-grounded prototype quality and external-generator prompt construction. Use when generating or evaluating a prototype, or exporting a prompt for Lovable, v0, or a similar tool.
-
shinpr Bundle Design PerspectiveIntegrates design principles, WCAG 2.2 AA accessibility, persona context, and state design into product decisions. Use when reviewing UX decisions, checking accessibility, applying design principles, or ensuring state coverage in acceptance criteria.
-
shinpr Bundle Recipe Prototype PromptExports an evidence-grounded prompt for Lovable, v0, or a similar external prototype generator. Use when the desired artifact is a reusable generator prompt rather than an internally generated HTML prototype.
-
simiancraft Bundle IOS SimulatorDrive an iOS Simulator headlessly on macOS: discover and boot a device, install and launch an app, drive its UI by accessibility (AXe) rather than brittle coordinates, capture screenshots, and navigate the simulator's own chrome, menus, and execution modes. The iOS analog of android-emulator-harness and playwright-harness. Project-agnostic core; Expo/React-Native specifics live in expo-ios-simulator, and "make the app driveable" lives in mobile-accessibility. Use for any task that is "boot/run an iOS simulator", "drive an iOS screen", "screenshot the simulator", or "automate an iOS flow".
-
simiancraft Bundle Zone ComposerReact composition pattern for domain features (screens, panels, tools, editors, wizards). Trigger when designing, reviewing, or refactoring a domain-level React component, particularly when a leaf takes flag props like `disabled`, `loading`, `isSubmitting`, `canX`, `submitting`; when JSX has inline ternaries gating UI on state; when platform variance (`.tsx` / `.web.tsx`) is in play; when a hook returns multiple flags being relayed into one leaf; or when the user mentions "chassis", "zone", "layout", "prop drilling", "slop", "named slots", or "well-organized React". Apply BEFORE writing the component, not after. Skip for shadcn-style UI primitives, single-state presentational cards with no hook or branching, and pure utility components; those follow shadcn/ui conventions instead.
-
simiancraft Bundle Expo IOS SimulatorRun and drive an Expo / React Native app on the iOS Simulator. Pick an execution mode (Expo Go, dev client, Storybook-mobile, web-on-mobile), build and install a dev client, and clear the recurring Expo/RN prompts that block automation: the push-token alert that stacks until the overlay darkens the screen, the "Open in app?" deep-link dialog, the dev menu, and the element-inspector trap. Sits ON TOP of ios-simulator; failures route to ios-simulator-triage. Project-agnostic; discovers bundle id and scheme from the app config. Use for "run my Expo app on the simulator", "load a dev client", or "drive Storybook on iOS".
-
simiancraft Bundle Playwright HarnessDrive a real browser with Playwright on any OS and gate on what you observe: write a script, launch Chromium (headless by default; a shared headed window when a human must watch or drive), drive the page, and assert on screenshots plus collected page errors. The operational trunk for browser work; specializations layer on top. Use for ANY web task: "drive the UI headlessly", "smoke-test a screen", "screenshot a component or canvas", "reproduce a console error", "fill and submit a form", "test a login flow", "check responsive layout", "find broken links", "open a browser I can watch/drive", or "automate a browser flow". Open references/interactions.md and references/flows.md for the element vocabulary and multi-step recipes; switch to playwright-camera-mask-testing for a camera or person feed, or playwright-gif-capture for an animated GIF. Validated on Linux/WSL (headless, ANGLE GPU path for WebGL) and macOS (headless + interactive headed mode).
-
simiancraft Bundle Expo Developer ToolsRead and use the Expo / React Native in-app developer tools: the developer menu (reload, go home, performance monitor, element inspector, Open DevTools, and fast refresh) and React Native DevTools (Console, Sources, Network, Memory, Performance, Components, and Profiler), plus Rozenite plugins. The tools are identical on iOS and Android; only the gesture that opens the menu differs, so this skill is the shared home referenced by both the iOS-simulator and Android-emulator skills. This is the reference for reading these tools (what each shows and how to interpret it), not a driver. Use for "open the Expo dev menu", "read the performance monitor", "use the element inspector", or "inspect a component / a slow re-render with React Native DevTools".
-
simiancraft Bundle IOS Simulator TriageDiagnose and recover from failures when building, running, or driving an app on the iOS Simulator. A living catalog organized by layer: build failures (xcodebuild, CocoaPods, signing, codegen), runtime failures split into app-runtime vs Expo-runtime (the red error overlay), and automation failures that emit no error (element not found in the accessibility tree, stuck flow). Each layer names where its logs live. Used alongside ios-simulator and expo-ios-simulator when something breaks. Project-agnostic.
-
simiancraft Bundle Mobile AccessibilityMobile Accessibility (the shared trunk)
-
simiancraft Skill Android Emulator HarnessBring up an Android app in a headless emulator on Linux/WSL and drive it for automated integration testing, the Android analog of Playwright for web. Boots an AVD under KVM, installs an APK (standalone or dev-client+Metro), drives the UI with Maestro (resilient tap-by-label/wait/assert), and gates on logcat + screenshots that come back for inspection. Use for ANY Android/Expo/React-Native project (not just one app) when the task is "run the app on an emulator", "drive the Android UI", "smoke-test a screen", "reproduce a tap-and-crash", "automate an Android flow", or "set up Android UI testing". Project-agnostic base; layer a domain skill on top for specialized inputs (see android-emulator-mask-testing for camera/segmentation). Validated on Linux/WSL with KVM, Maestro 2.x, and JDK 17.
-
supermodo Bundle ReportsRenders the reports supermodo has written — every flow run, every standalone skill report, every release — as self-contained HTML pages plus a four-tab archive index, and opens them in the browser. Use whenever the user asks to see a run in the browser, wants the report page, the archive, the history of what supermodo has done in this project, what is waiting on them, or asks to re-render or reopen a report. Also invoked by other skills to render the report they just wrote. Triggers on 'show me the run', 'open the report', 'the archive', 'in the browser', 'what needs my attention', 're-render the reports'.
-
wjgoarxiv Skill Asw UI UXProduct-aware frontend and README presentation guidance for Antigravity Swarm work.
-
yike-gunshi Skill Forge Design Impl设计实现:把 DESIGN.md 转成代码,只改样式不改逻辑;CSS 优先、Token 驱动、反 AI 模板、原子提交,以真实截图和 CSS 断言验证。 触发方式:用户说"实现设计"、"forge-design-impl"、设计文档确认后需要写代码时。
-
yoanbernabeu Bundle Symfony Yoandev HTTPWrite the HTTP layer of a Symfony application: controllers, routes, request input mapping, JSON and HTML responses, forms and Twig templates. One controller class per resource, a class-level route prefix, input DTOs hydrated by #[MapRequestPayload] or a FormType, output through #[Serialize] for JSON and #[Template] for HTML, RFC 7807 Problem Details for API errors, and an items + meta envelope for lists. Use this skill whenever someone asks to add a page, add a route or an endpoint, expose something as JSON, build an API, make a CRUD, build or wire up a form, map an uploaded file off the request, read a query parameter, paginate a list, return a 404 or a 422, protect an action with a CSRF token, render or restructure a Twig template, or says their endpoint returns a 500, their form never validates, their JSON has the wrong shape, or their route matches the wrong action. For what then happens to that uploaded file — where it is stored, how it is served back, who may read it — use `symfony-yoandev-storage` inst
-
yoanbernabeu Bundle Symfony Yoandev FrontendBuild and debug the front end of a Symfony application with AssetMapper, Twig, Stimulus, Turbo and Symfony UX — no bundler, no Node build step. Use this skill whenever someone asks to make a page interactive, add a filter or a live search, add an autocomplete or a dropdown, add a JavaScript library, style a page or set up Tailwind, add an icon, build a reusable Twig component or a Live Component, add Turbo Drive, Frames or Streams, write a Stimulus controller, organise templates or translation keys, or set a form theme. Also use it for the failures: "my JavaScript does not run", "my JS stopped working after clicking a link", "the CSS did not update", "the page is slow to load", "the assets 404 in production", "the images are served by PHP", "importmap:audit is failing" — and whenever the question is *where* a piece of behaviour belongs, between a Stimulus controller, a Live Component and a Twig Component.
-
yoanbernabeu Skill Symfony Yoandev StandardsEntry point for writing code in a Symfony project: detects the project's versions and conventions, states the five rules that apply to everything, and routes to the specialised skill for the task at hand. Load this FIRST whenever a request touches a Symfony codebase and the right specialised skill is not obvious — a feature described in plain language ("let people rate a book", "make a CRUD", "add this to the admin"), a vague instruction ("refactor this", "clean this up", "fix this bug", "finish this"), a task spanning several areas at once, or the very first change on an unfamiliar project. Also load it before starting anything if you are unsure which of symfony-yoandev-architecture, symfony-yoandev-http, symfony-yoandev-doctrine, symfony-yoandev-testing, symfony-yoandev-security, symfony-yoandev-frontend, symfony-yoandev-async, symfony-yoandev-console, symfony-yoandev-performance, symfony-yoandev-quality, symfony-yoandev-local-dev, symfony-yoandev-deployment, symfony-yoandev-observability, symfony-yoandev-s
-
yoanbernabeu Bundle Symfony Yoandev DeploymentShip a Symfony application to production as a Docker image running FrankenPHP: the build and release sequence and what each step is for, migrations run automatically at deploy, production php.ini and OPcache preloading, environment variables and secrets on the server, Messenger workers under systemd or supervisor, post-deployment checks and rollback. Use this skill whenever someone says deploy this, put it in production, ship it, set up the server, prepare a Dockerfile or a production image, write a deploy script, run migrations on the server, restart the workers, configure OPcache or preloading, set environment variables in production, roll back a release — and equally when they describe a symptom: it works locally but not on the server, the site broke after deploying, my CSS is missing in production, production is slow, the workers are running old code, I get a 500 with no error message, the new code is not being picked up. Also use it before a first deployment, when nobody knows how the app is deployed.
-
zeusln Skill Zeus Failure ArchaeologyChronicle of Zeus's settled battles — every major investigation, revert, dead end, and multi-attempt saga as symptom → root cause → evidence (verified commit hashes/PRs) → status. Load BEFORE re-attempting anything that smells familiar, and whenever you hit these symptoms - stale wallet data appearing on a new iOS device / iCloud keychain leftovers; Fabric or New Architecture crashes (WalletHeader, keypad); infinite loading on app boot; settings corrupted or lost after a migration; "3600 hours" invoice expiry; Tor TLS certificate errors; navigation stack buildup or broken back-navigation; LDK Node crash on wallet deletion; embedded LND crash on restart (SQLite vs Bolt DB); Hermes regex stack overflow on QR scan; Cashu mint data shared between wallets; a merged fix that later vanished (revert). Also load before trusting any merged PR as final, before proposing a React Native or react-navigation upgrade, or when a commit hash/PR number from history needs context.
-
zeusln Skill Zeus Lightning ReferenceBitcoin/Lightning/ecash domain theory AS IMPLEMENTED IN ZEUS, for readers who may know React Native but zero Lightning (or vice versa). Load when working on or reading code that touches - BOLT11 invoice decoding (utils/Bolt11Utils.ts), payments (MPP/AMP/keysend, TLV records, routing fee limits), LNURL pay/withdraw/auth/channel or lightning addresses, ZEUS Pay / Zaplocker / nostr attestations, LSP flows (Olympus Flow 2.0, jit_bolt11 wrapping, LSPS0/1/7, 0-conf channel acceptance), Cashu/ecash (CDK FFI, multimint melts, token extraction), Nostr Wallet Connect (NIP-47, service and client roles), Boltz-protocol swaps, on-chain (address types, taproot, PSBT, coin control, CPFP bump retry, mempool.space fees), the universal input router utils/handleAnything.ts and its detector ordering, CLINK/noffer, or watchtowers. Also load when confused by terms like HTLC, preimage, hodl invoice, JIT channel, melt quote, submarine swap, or keysend while reading Zeus code.
-
joaoequer Bundle Improve Codebase ArchitectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
tefuirnever Bundle Eli5Explain a topic like I'm 5 with one HTML artifact of big pictures and few words. Use when the user types /eli5 <topic> or asks for a dead-simple picture explainer of how something works.
-
tefuirnever Bundle Excalidraw DiagramBuild or edit accurate, editable Excalidraw scenes; render the real scene, inspect the image, run deterministic layout/style checks, and deliver source plus requested exports. Use for workflows, architectures, sequences, data flows, concept maps, or existing .excalidraw files. Supports native JSON, offline Mermaid/SVG conversion, official component libraries, CJK-safe SVG/PNG export, and optional interactive preview.
-
ilya-valasiuk Bundle Building ComponentsBuilds, restructures, and standardizes React components according to project conventions (placement, folder/file naming, exports, props patterns). Use when adding components or when reorganizing existing components during refactors, migrations, or component moves.
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 prototype-guide, component-stories, component-styling. 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.