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.
-
crestapps Bundle Orchardcore AI Chat 2Skill for configuring AI Chat in Orchard Core using the CrestApps AI Chat module. Covers chat profiles, admin chat UI, frontend chat widgets, provider connections, and the AI Agent module for task automation. Use this skill when requests mention Orchard Core AI Chat, Configure AI Chat, Available AI Completion Providers, Enabling AI Chat Features, Setting Up a Provider Connection via Recipe, Creating a Chat Profile via Recipe, or closely related Orchard Core implementation, setup, extension, or troubleshooting work. Strong matches include work with CrestApps.OrchardCore.AI.Chat, CrestApps.OrchardCore.AI.Agent, CrestApps.OrchardCore.OpenAI, CrestApps.OrchardCore.AzureAIInference, CrestApps.OrchardCore.Ollama. It also helps with ai chat examples, Setting Up a Provider Connection via Recipe, Creating a Chat Profile via Recipe, Making a Chat Profile Visible on the Admin Menu, plus the code patterns, admin flows, recipe steps, and referenced examples captured in this skill.
-
xpert-ai Bundle Ripple 2A Material-style ripple spreads from the point of contact. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Toast Pop 2
A toast slides up from the bottom, holds, then fades away. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Anim Flip 2
Flip — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Tada 2
Tada — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Flash 2
Flash — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Hinge 2
Hinge — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Jello 2
Jello — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Pulse 2
Pulse — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Shake 2
Shake — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Swing 2
Swing — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Shiny Text 2
A soft highlight sweeps across muted text — a quiet premium shimmer for one short label ("new", "pro", a CTA word). Keep the base text readable; one or two per view. Pure CSS; solid under reduced-motion.
- xpert-ai Bundle Anim Bounce 2
Bounce — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadein 2
Fade In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Rollin 2
Roll In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Shakex 2
Shake X — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Shakey 2
Shake Y — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Wobble 2
Wobble — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Zoomin 2
Zoom In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Border Beam 2
Give one card or CTA a lively accent: a small bright comet of light travels around its border. Brighter/livelier than shine-border — use for a single "new"/"featured" element, one per view. Pure CSS; fully static under prefers-reduced-motion.
- xpert-ai Bundle Glitch Text 2
An RGB-split glitch flickers across a headline — a techy, edgy reveal. One short line; techy tones only. Pure CSS; steady under prefers-reduced-motion.
- xpert-ai Bundle Star Border 2
A soft light rotates around a pill/button border — a gentle animated outline for a single CTA. One per view; keep it slow and low-contrast. Pure CSS; static border under prefers-reduced-motion.
- xpert-ai Bundle Bottom Sheet 2
A bottom sheet slides up over a dimmed backdrop, then dismisses. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Button Press 2
A button that springs down on press and pops back — tactile tap feedback. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Checkbox Pop 2
A checkbox that pops and draws its check on toggle. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Anim Fadeout 2
Fade Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Flipinx 2
Flip In X — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Flipiny 2
Flip In Y — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Rollout 2
Roll Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Zoomout 2
Zoom Out — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Shine Border 2
Give one hero card or CTA quiet premium life: a soft band of light travels around its border. One shining element per view; keep it slow and low-contrast. Pure CSS. Fully static under prefers-reduced-motion. Do not put several on screen at once.
- xpert-ai Bundle Tab Bar Slide 2
A bottom tab bar whose active pill slides between tabs. An App-UI micro-interaction (mobile component feedback). Honors prefers-reduced-motion. Keep it short and snappy; only on controls that actually change state.
- xpert-ai Bundle Anim Backinup 2
Back In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Bouncein 2
Bounce In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Fadeinup 2
Fade In Up — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
- xpert-ai Bundle Anim Rotatein 2
Rotate In — a drop-in CSS keyframe animation from Animate.css (Hippocratic-2.1, © Daniel Eden). No JS required. Honors prefers-reduced-motion. Use restrained; attribute Animate.css.
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 orchardcore-ai-chat, ripple, toast-pop. 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.