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.
-
rashid2801 Skill Startup Tech StackExpert tech stack recommendation for a startup idea — detailed frontend/backend/DB/AI-ML/infrastructure choices with justifications, cost estimates, and alternatives. Calibrated for India deployment (AWS Mumbai / Azure India). Usable standalone or as Phase 3 of the startup-analyzer pipeline.
-
rashid2801 Skill Startup Report MakerAssembles all startup analysis outputs into a beautiful, tabbed interactive HTML report with 8 tabs, a BUILD/PIVOT/PASS verdict card, and an executive summary. Saves to D:\AI\Startups\ and pushes to GitHub. Usable standalone (with pasted context) or as Phase 4 of the startup-analyzer pipeline.
-
rashid2801 Skill Startup Architecture DiagramSystem architecture and data flow diagram for a startup — generates a clean inline HTML/CSS visual showing all components, services, data flows, and external integrations. Usable standalone or as Phase 3 of the startup-analyzer pipeline.
-
labrodev Skill Labrodev Inertia ReactUse when creating or reviewing React/Inertia frontend code in a Labrodev Laravel project — Inertia page components under resources/js/pages, typed Props interfaces, useForm form submissions, Wayfinder route usage, t()/lang/*.json i18n wiring, flash/toast consumption, destructive-action confirmation dialogs, or in-page JSON API calls via @/lib/http.
Audited -
liyown Bundle Enterprise StackUse when an agent needs the full enterprise-dev-flow skill set: language-specific code review (java/react/go/python/node), spec-to-code orchestration (goal-driven-development), durable post-impl knowledge (project-knowledge-capture), doc drift linting (spec-doc-linter), and (planned) data lineage / CODEOWNERS / incident trace / compliance / rollout / RFC / observability skills. Triggers on: 'set up enterprise skills', 'install the full stack', 'enterprise-stack', 'give me the augment', 'what skills should I load', 'superpower-enterprise'. Do NOT use for: a single review (load the matching `*-code-reviewer` directly); a generic TDD/debugging/brainstorming request (use obra/superpowers).
-
liyown Bundle Data Lineage TraceUse when you need to prove where a piece of data (PII, PHI, payment data, customer identifier) originates, where it flows through the system, where it lands, and who reads it. Triggers on: data lineage, PII flow, GDPR right-to-erasure, data residency, schema change, retention policy, 'where does field X come from', 'who reads PII column Y', 'walk this field end to end', deletion propagation, audit trail, data classification. Do NOT use for: static code review (use java-code-reviewer, react-code-reviewer, go-code-reviewer, python-code-reviewer, or node-code-reviewer for that), or for design-time brainstorming (use obra/superpowers brainstorming). Complementary to goal-driven-development, which orchestrates the spec-to-code flow; data-lineage-trace is the regulated-data counterpart that runs after a change lands.
-
liyown Bundle Incident Call TraceUse during a live incident or while writing a postmortem, to walk the call path from a user-facing entry point (HTTP route, queue consumer, cron, CLI) to the persistence layer or external system involved in the failure. Triggers on: incident, outage, postmortem, on-call, SLO breach, 'walk the call path from the route to the DB', 'trace the failing request', 'which service did the timeout come from', runbook, customer impact. Do NOT use for: static code review (use java-code-reviewer, react-code-reviewer, go-code-reviewer, python-code-reviewer, or node-code-reviewer for that), or for local bug debugging (use obra/superpowers systematic-debugging). Complementary to goal-driven-development, which orchestrates the spec-to-code flow; incident-call-trace is the on-call counterpart that walks a live distributed-system failure.
-
liyown Bundle React Code ReviewerReact Code Reviewer
-
liyown Bundle Code Ownership ImpactUse before any change that crosses team or service boundaries, to find CODEOWNERS, blast radius, and required reviewers. Triggers on: rename, refactor, deprecate, schema change, API break, cross-team change, 'who owns this', 'who needs to review', 'what does this PR break', CODEOWNERS, service boundary, dependency request, shared kernel. Do NOT use for: code-review findings (use java-code-reviewer, react-code-reviewer, go-code-reviewer, python-code-reviewer, or node-code-reviewer for that), or for plan decomposition within one team (use obra/superpowers writing-plans). Complementary to goal-driven-development, which orchestrates the spec-to-code flow; code-ownership-impact is the pre-merge counterpart that names the per-team approvers.
-
lroolle Bundle HtmlizeTechnical explanation and HTML artifact protocol. Decides whether a deliverable beats markdown, models the reader's questions, chooses a single page or multi-page briefing site, builds it against a craft baseline, and reviews existing artifacts. Fires on three branches: an explicit ask for an HTML, visual, interactive, or site-level deliverable; a plan, report, system explainer, comparison, deck, or diagram whose structure is lost in linear markdown; and improving an HTML deliverable that looks generic, fragmented, or hard to navigate. Production frontend is kiln's territory; a growing knowledge base is wiki-it's; hand-maintained project docs should remain markdown.
-
lroolle Bundle Animate ItAnimation implementation protocol for web interfaces: easing, duration, springs, CSS transitions, keyframes, Motion (Framer Motion), WAAPI. Fires on three branches: adding motion to a component ("animate this", "should this animate?"); diagnosing motion that feels wrong ("make this transition smoother", "what easing should I use"); and reviewing pasted animation code. Deciding what should move and why is kiln's job (motion.md); this skill makes it move correctly. Static styling without motion is kiln's too.
-
ltatarev Skill VerifyBuild, launch and drive a React Native app on the iOS simulator to observe a change end-to-end. Use when verifying a code change actually works at runtime and not just in tests, when the user asks to run the app, take a screenshot, or check something on device, or when a bug can only be confirmed by driving the UI. Covers idb-based tapping, why synthetic clicks fail, where console output actually goes, and simulator gotchas.
-
ltatarev Bundle UnistylesStyle React Native components with react-native-unistyles (StyleSheet.create, theme tokens, variants, breakpoints, runtime). Use whenever writing or editing styles in this codebase, or when asked about Unistyles APIs, theming, or migration behavior.
-
ltatarev Bundle IOS WidgetBuild and wire an iOS home-screen widget (WidgetKit) into a React Native app — the App Group snapshot architecture, adding the extension target to project.pbxproj by script, the Swift native module bridge, rendering the widget's image offscreen with Skia, dark mode, freshness, and the build verification traps. Use when the user asks to add, change, or debug a widget, a WidgetKit extension, an App Group, a home-screen widget, or a lock-screen widget; when a widget renders blank, stale, or light-only; or before touching anything under an ios/*Widget/ directory.
-
ltatarev Skill Add FeatureScaffolds a new feature module under src/modules/ or extends an existing one in a package-by-feature React Native codebase. Use when the user asks to add a feature, screen, module, setting, Redux slice, selector, or thunk; wire a new route into React Navigation; register a reducer in the store; or extend an existing module. Also use when deciding where new code belongs (module vs utils vs theme) or when a change crosses module boundaries.
-
ltatarev Skill Write TestsWrites Jest unit tests the house way in a React Native repo. Use when the user asks to add or write tests, says "test this", or after changing merge logic, persist transforms, sync, eligibility rules, verification, ordering, or utility logic. Covers detecting the repo's unit Jest config, what its setup file mocks, the fixture-builder test style, how to run one focused file, and what does or does not deserve a test.
-
ltatarev Bundle Xcode CloudSet up, debug and maintain Xcode Cloud CI for a React Native iOS app — the ci_post_clone.sh / ci_pre_xcodebuild.sh scripts that install node, pods and the RN prebuilt tarballs, the workflow settings, and the App Store Connect prerequisites for TestFlight. Use when the user asks to set up Xcode Cloud, add CI to an iOS app, get builds into TestFlight, or fix a failing cloud build; when an archive fails with "Unable to load contents of file list", "node: command not found", a curl error inside pod install, a bigdecimal or bundler failure, or a bare exit 65; when a green archive never reaches TestFlight; or before touching anything under ios/ci_scripts/, .xcode.env, Podfile, or Gemfile. Also use to record a newly diagnosed cloud build failure so it is not re-derived next time.
-
ltatarev Bundle Truesheet UsageConsumer-side guide for integrating @lodev09/react-native-true-sheet into a React Native app. Use this skill whenever the user wants to add, configure, control, or debug a bottom sheet using TrueSheet — including ref-based sheets, named global sheets, web support with TrueSheetProvider/useTrueSheet, React Navigation or Expo Router sheet flows, Reanimated-driven animations, scrolling content, stacking, headers/footers, detents, side sheets, keyboard handling, dimming, liquid glass, and Jest testing. Also use when the user is migrating from v2 to v3, troubleshooting layout or gesture issues, or asking about any TrueSheet prop, event, or method — even if they don't mention "TrueSheet" by name but describe a bottom sheet in a React Native context.
-
ltatarev Skill Validate ChangeValidation and handoff procedure for React Native changes. Use when finishing any code change, before committing or handing off, when the user says "run the checks", "is this ready", "validate", or asks whether tests/lint/types pass. Covers which checks match which change scope, how to establish a baseline so pre-existing issues are not blamed on new work, and the handoff report format.
-
ltatarev Skill Implement TicketImplement a ticket end-to-end as a frontend engineer — fetch it from whichever tracker the repo uses (Linear, Notion, or in-repo docs/tickets), implement following the codebase's existing structure and conventions, write tests, verify no regressions, move the ticket to In Review, and offer a commit. Use when the user asks to implement, work on, or pick up a ticket (e.g. "/implement-ticket ABC-123", "implement ticket 007", "pick up the sync bug ticket").
-
maxedapps Bundle ExplainRuns a manually initiated explanation workflow that produces concise, evidence-grounded Markdown and standalone HTML for code, systems, data relationships, and prior plans, reviews, or agent statements. Use this skill when, and only when, the user explicitly invokes explain by name. Do not use for ordinary Q&A, implementation or fixes, performing a new code review, slide creation, exhaustive documentation, or render-only conversion of supplied Markdown.
-
maxedapps Bundle Create ReportCreates concise, evidence-backed, actionable standalone HTML reports for decisions, assessments, research, and status outcomes. Use this skill when asked to create, build, or package a polished standalone HTML report, decision brief, cited research report, risk-assessment report, project-status report, or executive HTML report and no domain-specific workflow owns the task. Do not use as an automatic completion gate; for completed repository-change handoffs use `create-changes-report`; for defect reviews use `code-review`; when `explain` is explicitly invoked use `explain`; for slide decks use `create-slides`; `create-plan`, `decomplex`, and `implement-plan` keep their domains; live KPI dashboards or apps are implementation, not this skill.
-
maxedapps Bundle Create SlidesCreates and materially redesigns polished, dependency-free HTML slide decks from five styled templates, with stepped and automatic reveal animations driven by named motion presets, a cross-slide title morph, and PDF plus MP4 export at 1080p, 2K and 4K with reveals optionally timed to a narration/caption track. Use this skill when asked to create, build, redesign, restyle, or export a slide deck, presentation, pitch deck, talk, tutorial/video slides, course slides, slide b-roll for a video, or keynote-style slides as a web page. Do not use for ordinary websites or apps, editing proprietary slide files (PowerPoint, Keynote, Google Slides), research-only requests without a deck deliverable, or generating slide images only.
-
bastienlimbour Bundle Improve Codebase ArchitectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.
-
brbndon Skill Apple Design SystemUse when adding or changing reusable design-system tokens or components. Do not use for application branding, app-specific screens, or a general accessibility audit.
-
brbndon Skill Swiftui Component AuthorUse when creating or refactoring a reusable SwiftUI component. Do not use for business-specific screens, non-UI services, or design-token-only changes.
-
brbndon Skill Apple Accessibility ReviewUse when reviewing reusable SwiftUI UI for accessibility. Do not use for non-UI code, general design-token work, or pixel-only critique.
-
caomeiyouren Skill Nuxt Code Editor遵循项目标准生成和修改 Vue 3、TypeScript 和 SCSS 代码。
Audited -
caomeiyouren Skill Vue Frontend Expert专注于 Vue 3 (Nuxt 4)、SCSS (BEM) 和 I18n 前端实现。
Audited -
cdeust Skill Experience And TransmissionThe artifact is correct and nobody can use, learn, or read it. Use when every component metric is green but the end-to-end experience is broken, when onboarding is too slow or documentation goes unread, when the observer is inside the system being studied (UX research, dogfooding), or when code is right but unreadable by the next maintainer.
Audited -
cdeust Bundle DesignUX/UI design and accessibility audit -- name the user, task, and success criterion before any layout decision, enforce WCAG 2.2 AA as a constraint from the first sketch, walk the 10 Nielsen heuristics, and refuse patterns that defeat usability or research integrity.
-
verstak-ai Skill DesignUse when the user asks to design, architect, or choose the structure/lifecycle of a system, component, or feature and NKS tools are available. Triggers: 'спроектируй', 'давай продумаем', 'архитектура', 'нужен дизайн', 'design', 'let's think through', 'plan the system', 'what should this look like', mentions of 'жц' / 'lifecycle', 'крия' / 'эстафета' / 'холон', or 'записать в NKS' / 'положить в граф' / 'зафиксировать'. Also use at real decision moments — 'we chose X', 'we decided', 'persist this design' — and after elicitation produced an accepted design/spec. Do not use for implementing an already accepted concrete spec, routine bug fixes, repository inspection, or ordinary coding where no structural choice is open.
-
erkamyaman Bundle Ionic VueBuild a production-ready Ionic Capacitor mobile app with Vue 3 Composition API, composables for cross-cutting concerns, @ionic/vue-router, and vue-i18n. Trigger when the user wants to create an Ionic Vue app, scaffold pages (onboarding, paywall, tabs, settings), or wire RevenueCat / AdMob / push notifications into a Vue Ionic project.
-
erkamyaman Bundle Ionic ReactBuild a production-ready Ionic Capacitor mobile app with React functional components, hooks for cross-cutting concerns, react-router via @ionic/react-router, and react-i18next for i18n. Trigger when the user wants to create an Ionic React app, scaffold pages (onboarding, paywall, tabs, settings), or wire RevenueCat / AdMob / push notifications into a React Ionic project.
-
erkamyaman Bundle Ionic SharedFramework-agnostic Capacitor concerns shared by Ionic Angular, React, and Vue apps — AdMob, RevenueCat, push notifications, @capacitor/preferences storage, theme switching, localization content, and App/Play store submission notes. Referenced by ionic-angular, ionic-react, and ionic-vue.
-
fajjarnr Bundle Quality EngineerPayU quality engineering for Java/Spring and Quarkus services, Python APIs, Next.js and React Native clients, contract testing, integration testing, financial invariants, performance, accessibility, security, migration, and release gates. Use when designing, writing, reviewing, debugging, or improving tests; verify third-party test APIs and commands with Context7 first.
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 react-code-reviewer, startup-tech-stack, startup-report-maker. 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.