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.
-
sheshiyer Bundle Arch OrchestratorTurn a raw product brief into a consistent, implementation-ready spec pack under specs/ (frontend, backend, API, AI) by coordinating specialist agents and enforcing a project's preferred stack. USE WHEN the user says "create architecture plan/specs", "turn this brief into docs", "generate frontend/backend/api specs", or "write the spec markdown files" — wants end-to-end software architecture documentation from a product brief.
-
sheshiyer Bundle Artifacts BuilderBuild elaborate multi-component HTML artifacts with React, Tailwind CSS, and shadcn/ui, then bundle them into a single HTML file. USE WHEN a complex artifact needs state management, routing, or shadcn/ui components — NOT for simple single-file HTML/JSX artifacts.
-
sheshiyer Skill Expo OrchestratorRoute an Expo task to the right spoke across the app lifecycle — dev environment (dev client, NativeWind), Expo Router app-building, in-app API routes, native modules, EAS build/submit/update, and SDK upgrades. USE WHEN building or shipping an Expo / React Native app with the Expo toolchain but the specific step isn't named. For RN UI/animation/gesture craft that isn't Expo-specific, hand off to the react-native cluster.
-
sheshiyer Skill Frontend Web CoreShared reference for the frontend-web cluster: the rendering-model decision (CSR / SSR / RSC / static) that sets the hydration boundary, plus the conventions every spoke shares — the SSR/'use client' contract, the motion-foundations layering rule, the accessibility baseline, and the framework/tooling matrix. USE WHEN choosing a framework, wiring SSR-sensitive or motion code, or planning accessibility — the interlocking rules every frontend-web spoke depends on.
-
sheshiyer Bundle Mobile IOS DesignMaster iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. USE WHEN designing iOS interfaces to Apple's HIG, laying out SwiftUI views/grids/navigation, choosing SF Symbols and Dynamic Type, or making an app feel native across iPhone and iPad (Dark Mode, accessibility, adaptive layout).
-
sheshiyer Skill Raycast ExtensionBuild Raycast extensions with React and TypeScript. Use when the user asks to create a Raycast extension, command, or tool.
-
sheshiyer Bundle React Native CoreShared reference for the React Native cluster: the New Architecture (Fabric/TurboModules/JSI/bridgeless), styling approaches, navigation options, the Reanimated + Gesture Handler animation stack, platform differences, performance rules, and integrated product-flow audits. USE WHEN making RN UI/interaction decisions or reviewing whole-app flow gaps. Pairs with expo-core for the toolchain.
-
sheshiyer Skill React PerformanceReact and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
-
sheshiyer Skill Vercel DeploymentDeploy Next.js apps to Vercel — environment variables across environments, edge/serverless functions, build config, and production rollout. USE WHEN configuring or shipping a Next.js project on Vercel.
-
sheshiyer Skill Astro OrchestratorRoute an Astro task to the right spoke — building the site (components, islands/hydration, content, SSR, actions, i18n) or publishing a docs/wiki/press-kit site. USE WHEN working on an Astro project but the specific concern isn't named, or when deciding the rendering mode (static vs on-demand vs hybrid). For scroll/animation/video on an Astro page, hand off to the creative-frontend cluster.
-
sheshiyer Skill Tauri OrchestratorRoute a Tauri task to the right skill among 40 Tauri specialists — scaffolding, the security/capability model, IPC and the Rust↔frontend bridge, windows/UI chrome, sidecars, plugins, building, signing, per-platform distribution, debugging, and migration. USE WHEN a user is building, configuring, securing, or shipping a Tauri v2 desktop/mobile app but hasn't named the specific concern.
-
sheshiyer Bundle Web Motion LibrarySelect and implement interactive web animations, 3D elements, and pre-built React/Tailwind/Framer Motion components for landing pages and hero sections. Use when adding hover effects, morphing shapes, hero sections with background video, or choosing from Magic UI's 50+ animated component library.
-
ashfordeou Skill PropulsionUse when a task concerns aircraft or rocket propulsion: guide the router to the propulsion pack: gas-turbine-cycle Brayton, regenerative-cycle regenerator efficiency, real-cycle-effects component losses, turbofan-cycle turbofan parameters, bypass-ratio-trade bypass design, turbofan-off-design part-power behavior, free-turbine power turbine matching, turbine-stage stage velocity triangles, axial-compressor-stage compressor stage, compressor-map operating maps, multi-stage-compressor stacked stages, rocket-sizing rocket sizing, nozzle-design nozzles, propellant-selection propellant trade, ramjet-cycle ideal ramjet performance, ramjet-inlet supersonic inlet starting. Trigger: propulsion, gas turbine, Brayton cycle, regenerator, turbofan, bypass ratio, rocket equation, delta-v, rocket nozzle, area ratio, propellant, axial compressor, compressor map, multi-stage compressor, off-design turbofan, real cycle, free turbine, power turbine, turboshaft, ramjet, ramjet inlet, Kantrowitz, specific thrust, specific impulse.
Audited -
ashfordeou Bundle Fprime ComponentUse when designing or reviewing an F Prime topology, checking opcode and port-type consistency, or generating the component scaffold manifest. Model and validate a NASA JPL F Prime (F´) flight software component architecture: define components as active, queued or passive, attach typed input and output ports plus serial interfaces, register commands with unique opcodes, declare telemetry channels and severity-flagged events, connect producer outputs to consumer inputs across a topology, schedule component input ports in rate groups, and run a deterministic clocked dispatch simulation that records invocations, deliveries, command log entries and telemetry samples with per-channel sequence counters. Produces the validated component model, the connection and rate group report, and a scaffold manifest for code generation. Trigger: F Prime, F´, component framework, topology, rate group, command dispatch, telemetry channel, port connection, flight software modeling.
-
ashfordeou Bundle Creep RuptureUse when you must assess the elevated-temperature creep and stress rupture behavior of an aerospace metallic part: compute the steady-state creep strain rate with the Norton power law eps_dot = A * sigma^n * exp(-Q/(R*T)) from the stress and the temperature, estimate the rupture life in hours with the Larson-Miller parameter from the stress-LMP master curve, apply the Monkman-Grant relation between the minimum creep rate and the rupture life, accumulate the creep strain over the service time, and check the time to 1 percent creep strain and the rupture life against the required design life with the margin verdict. Produces the creep rate, the rupture life, the accumulated creep strain, and the governing margin for the hot-section component. Trigger: creep-rupture, norton-creep-law, steady-state-creep-rate, larson-miller-parameter, monkman-grant, rupture-life, stress-rupture, accumulated-creep-strain, time-to-one-percent-creep, elevated-temperature.
-
ashfordeou Bundle Data Control Coupling AnalysisUse when you must analyze data coupling and control coupling between airborne software components: identify the data-coupling items between component pairs from their written and read variable sets with declared synchronization suppression, identify the control-coupling items across call edges where a caller-written variable is read by the callee, compute the coupling coverage ratio against declared evidence, and return the PASS or FAIL verdict with the uncovered item list. Produces the data-coupling item list, the control-coupling item list, the coupling coverage ratio and the evidence verdict that gate the level A inter-component coupling objective. Trigger: data coupling analysis, control coupling analysis, shared-variable pairs, call-edge coupling items, coupling coverage evidence, level-a coupling objectives, inter-component coupling.
-
ashfordeou Bundle Real Cycle EffectsUse when you must compute the real-cycle gas turbine performance with component losses: the compressor exit temperature and the turbine exit temperature from the pressure ratio and the component-efficiency (isentropic-efficiency) of each machine, the real-cycle thermal efficiency of the non-ideal Brayton cycle, the actual-SFC from the efficiency and the fuel lower heating value, and the efficiency penalty from the combustor pressure-loss. Produces the actual station temperatures, the real-cycle efficiency, the actual-SFC, and the pressure-loss penalty in SI units that gate the engine cycle assessment. Trigger: real cycle, component efficiency, isentropic efficiency, pressure loss, combustor loss, actual SFC, off-ideal Brayton.
-
ashfordeou Bundle Inertia EstimationUse when you must estimate mass properties for vehicle design: compute moments of inertia from masses and radii of gyration, move inertia between axes with the parallel axis theorem, and check the gyration radius against the component dimension. Produces the inertia estimates, the parallel axis transfers, and the gyration sanity verdict that feed the loads analysis. Trigger: mass properties, moment of inertia, radius of gyration, parallel axis theorem, inertia estimation.
-
ashfordeou Bundle Component Weight EstimationUse when you must predict the airframe structural group weights at the class-II level from geometry and design loading: evaluate the statistical wing-group-weight regression on the planform area, aspect ratio, sweep, thickness ratio and design load factor, the horizontal-tail-group-weight and vertical-tail-group-weight regressions on the tail planforms, and the fuselage-group-weight regression on the wetted area, fineness ratio and design gross weight, with the limit load factor scaled to ultimate by the 1.5 safety factor and the pressurization penalty added when a pressurized volume and differential are supplied. Produces the four group masses in kg, the airframe group total, and the group fractions of MTOW that feed the weight statement. Trigger: component weight estimation, group weight equation, wing group weight, fuselage group weight, horizontal tail weight, vertical tail weight, statistical weight prediction, class ii weight buildup.
-
ashfordeou Bundle Balanced Field LengthUse when you must compute the balanced field length and V1 decision speed of a multi-engine transport: derate the total thrust to the remaining engines, derive the constant ground accelerations and the braking deceleration, trace the accelerate-stop distance (roll on all engines to V1, react, brake to a stop) and the accelerate-go distance (roll to V1, continue on the remaining engines to lift-off, rotate, and climb over the 35-ft obstacle on the engine-out climb gradient), solve the quadratic balance for the V1 where the two distances are equal, and read the balanced field length. Produces the engine-out thrust, the accelerations, the accelerate-stop and accelerate-go distance curves, the balanced V1, and the balanced field length that gate the runway-length and engine-out certification assessment. Trigger: balanced field length, V1 decision speed, accelerate-stop distance, accelerate-go distance, engine-out field length, balanced V1.
-
mturac Bundle Frontend SlidesCreate stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
-
mturac Skill Coding StandardsBaseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns.
-
mturac Skill UI To VueUIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。
-
mturac Skill Documentation LookupUse up-to-date library and framework docs via Context7 MCP instead of training data. Activates for setup questions, API references, code examples, or when the user names a framework (e.g. React, Next.js, Prisma).
-
mturac Skill Frontend Design DirectionSet an ecc-specific frontend design direction for production UI work. Use when building or improving websites, dashboards, applications, components, landing pages, visual tools, or any web UI that needs stronger product-specific design judgment.
-
tuyv Bundle Expo UIFramework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.
-
tuyv Bundle ReleaseRelease pipeline for CLI, mobile, web, and server. Guides through version bumping, building, testing, publishing, and deploying. Replaces the old interactive release-it flow with a Claude Code-native experience. Use when user types /release or asks to release, publish, deploy, or ship any component.
-
tuyv Bundle Eas ObserveEAS service (paid). Use for anything related to EAS Observe - adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive and ObserveInteractiveMarker, the useObserve hook, the Expo Router / React Navigation integrations for per-route metrics, user-defined events via `Observe.logEvent`, error reporting via ObserveErrorBoundary and `Observe.reportError`, and runtime config such as sampleRate and dispatchInDebug), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:session`, `observe:versions`), interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate/device/network params for triaging slow startups), or shipping an Observe integration inside a third-party package.
-
tuyv Bundle Expo ObserveUse for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, the Expo Router / React Navigation integrations for per-route metrics, and user-defined events via `Observe.logEvent`), querying via the EAS CLI (`eas observe:metrics-summary`, `observe:metrics`, `observe:routes`, `observe:events`, `observe:versions`), or interpreting the resulting metrics (cold/warm launch, TTR, TTI, navigation cold/warm TTR, update download, and the TTI frameRate params for triaging slow startups).
-
tuyv Bundle Web To NativeMigrate an existing web React app to a native iOS/Android app with Expo. Use when the user wants to turn a website into a mobile app, port a Next.js/Vite/CRA React codebase to React Native, reuse web code on native incrementally, or asks how web idioms (the DOM, CSS, React Router, localStorage, window) map to native. This is the end-to-end migration guide; use the `use-dom` skill for the DOM-component mechanism itself.
-
tuyv Bundle Eas App StoresEAS service (paid). Build and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.
-
tuyv Bundle Expo AnimationFramework (OSS). Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use `animate`.
-
tuyv Bundle Book To SkillConverts books and documents (PDF, EPUB, DOCX, HTML, Markdown, plain text, RTF, MOBI/AZW with Calibre) into structured agent skills, extracting frameworks, mental models, principles, techniques, and anti-patterns. Use when the user wants to study a document through GitHub Copilot CLI, Amp, Claude Code, or Hermes Agent, apply an author's frameworks while working, or build a reusable knowledge base from a file.
-
tuyv Bundle Expo BrownfieldFramework (OSS). Integrate Expo and React Native into an existing native iOS or Android app. Use for brownfield, embedding a React Native screen in SwiftUI/UIKit or Kotlin, or AAR/XCFramework packaging. Covers isolated and integrated approaches. For building or distributing a purely native app with EAS, use eas-app-stores.
-
tuyv Bundle Lark Apps妙搭(Spark/Miaoda)应用开发与托管:应用创建、HTML静态站点发布、本地全栈开发、云端生成迭代、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理。当用户要开发/新建一个系统·工具·平台·应用,或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接,或用 HTML 做页面·网站·部署到妙搭,或提到妙搭/Spark/Miaoda(应用运行时域名形如 *.aiforce.cloud)、应用数据库、应用文件存储、开放 API Key、可见范围、线上日志、接口请求量、错误量、延迟、访问量、环境变量时使用。不负责普通云盘文件上传(lark-drive)、飞书文档编辑(lark-doc)、原生幻灯片创建(lark-slides)。
-
tuyv Bundle Seer EmbedAdd a new Seer embed widget — a rich component rendered inline in Seer's markdown output via tag syntax. Covers schema, component, registration, and backend codegen. Use when asked to "add an embed", "new seer embed", "create a seer widget", "add a markdown widget", "new seer tag", or "embed widget".
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 arch-orchestrator, artifacts-builder, expo-orchestrator. 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.