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.

modu-ai Skill

Doc Design Library 2

75개 글로벌 브랜드 디자인 시스템(Claude · ClickHouse · Clay 포함)의 토큰(색·타이포·radius·spacing·컴포넌트)을 단일 파일 HTML 산출물에 적용합니다. 본 스킬은 moai-designer 플러그인의 정본(canonical)을 가리키는 포인터입니다 — 실제 시스템 토큰·컴포넌트 정의·샘플은 `moai-designer:design-system-library`에서 관리합니다(cowork 중복 사본은 경계 계약 "산출물=cowork, 체계=design"에 따라 제거됨). 다음과 같은 요청 시 사용하세요: - "Claude 스타일로 HTML 보고서 만들어줘" / "브랜드 디자인 시스템 골라서 HTML로" - "Claude Design에 올릴 디자인 시스템 자료 정리"

Sep 21
modu-ai Skill

Design Handoff Reader 2

Claude Design → Claude Code 핸드오프 번들(공식 구성: README + 디자인 파일 + chat)을 방어적으로 분석해 요약 보고서와 Claude Code에 넘길 짧은 지시 1줄을 자동 생성합니다. README를 source of truth로 먼저 파싱하고, 토큰/컴포넌트 JSON은 있으면 사용·없으면 코드(HTML/CSS)에서 유도하는 best-effort 방식입니다(하드 5-파일 요구 없음). 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "Claude Design 핸드오프 번들 분석" - "handoff 번들 요약" - "핸드오프 번들 읽어 줘" - "디자인 토큰 추출" - "Claude Code 핸드오프 준비"

Sep 21
modu-ai Bundle

Design Landing Motion 2

기억에 남는 다이나믹 랜딩 페이지를 만듭니다. 브리프에서 컨셉 스파인을 뽑고, 시그니처 효과를 하나만 골라 끝까지 완성하며, 화면에 들어갈 비주얼은 Higgsfield로 생성해 브랜드 팔레트에 잠급니다. 스크롤 스크럽·시차 레이어·WebGL 디스플레이스먼트·파티클·마스크 리빌·수평 레일·키네틱 타이포 등을 다루고, React/Next(R3F·Framer Motion·GSAP)와 정적 사이트(바닐라 three.js·GSAP) 양쪽으로 냅니다. 다음과 같은 요청 시 사용하세요: - "랜딩 페이지 만들어 줘", "히어로 인상적으로" - "스크롤에 반응하는 사이트", "스크롤하면 영상이 재생되는" - "three.js 넣어 줘", "WebGL 효과", "3D로 보이게" - "패럴랙스", "마우스 따라 움직이는", "파티클" - "어워드 받을 만한 사이트", "밋밋해 보여" 호스팅·배포·도메인·DB는 범위 밖입니다. 코드는 사용자 프로젝트 안에 만들며 외부 호스팅에 올리지 않습니다. 브랜드 이미지 한 장만 필요하면 design-brand-visual을 쓰세요.

Sep 21
modu-ai Bundle

Design System Library 2

75개 글로벌 브랜드 디자인 시스템(Claude · ClickHouse · Clay 포함)을 단일 파일 HTML 산출물에 적용합니다. 각 시스템의 토큰(색·타이포·radius·spacing·컴포넌트)을 Tailwind Play CDN config + shadcn 스타일 vanilla 컴포넌트로 변환해 렌더합니다. doc-html-report · 랜딩 페이지 · 각종 문서 생성 시 design_system을 지정하면 해당 브랜드 무드가 즉시 적용됩니다. Claude Design 핸드오프 시에는 DESIGN.md 지침 소스로 제공됩니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "Claude 스타일로 HTML 보고서 만들어줘" - "ClickHouse 다크 테마로 랜딩 만들어줘" - "Clay 디자인 시스템 적용해서 문서 생성" - "브랜드 디자인 시스템 골라서 HTML로" - "Notion / Linear / Stripe 스타일로 리포트" - "어두운 테마 / 따뜻한 화이트 테마로" - "Claude Design에 올릴 디자인 시스템 자료 정리"

Sep 21
modu-ai Skill

Education Tutor Research 2

학습 질문을 받으면 공식 문서와 최신 웹 자료를 웹검색으로 병렬 조사해, 출처가 검증된 최신 학습 근거를 종합해 드립니다. 개인 튜터가 자료를 미리 조사해 오는 역할입니다. 다음과 같은 요청 시 사용하세요: - "claude cowork의 Skills와 Sub-agents 차이를 최신 정보로 조사해줘" - "이 개념 정확한 최신 내용으로 알려줘" - "여러 자료 병렬로 조사해서 가르쳐줘" - "공식 문서랑 웹 최신 내용 같이 찾아줘" - "React 19 use훅 공식 문서 기준으로 설명 준비해줘" - "튜터처럼 이 주제 깊이 조사해줘" 질문을 리서치 축으로 분해해 공식 문서(WebSearch로 찾아 WebFetch로 본문 확인)와 최신 웹 자료(WebSearch)를 병렬 조사하고, 출처를 교차검증한 뒤 education-learning-material로 넘길 종합본을 만듭니다. [책임 경계] vs moai-tutor:education-research-assistant: 이 스킬=개인 학습용 최신 정보 빠른 조사, 저 스킬=학술 논문용 문헌 검토와 인용 관리.

Sep 21
modu-ai Bundle

Media Midjourney V8 Prompt 2

Midjourney v8.1 (2026.03 Alpha) 전용 이미지 프롬프트 빌더. 사용자 자연어 한 줄 + AskUserQuestion 프리셋·미세조정으로 컨텍스트를 수집해 Midjourney 공식 Parameter List 기반 키워드+`--파라미터` 형식으로 변환합니다. Discord `/imagine` 또는 alpha.midjourney.com에 그대로 복붙 가능. `--sref`/`--oref`/`--cw`/`--p`/`--hd`/`--q 4`/`--style raw`/`--no`/`--c`/`--s` 모두 지원. 보너스로 GPT-image-2(6-Block) · Gemini 3 Pro Image(5-component) 프롬프트도 동시 출력합니다. 다음과 같은 요청 시 반드시 이 스킬을 사용하세요: - "미드저니 프롬프트 만들어줘", "MJ 프롬프트" - "Midjourney 프롬프트", "/imagine 프롬프트 작성" - "Midjourney v8 프롬프트", "미드저니 8.1 프롬프트" - "--sref 프롬프트", "--oref 프롬프트", "스타일 코드 프롬프트" - "/media-midjourney-v8-prompt" (직접 호출) Midjourney는 공식 API 자동화가 제한적이므로 본 스킬은 프롬프트 텍스트만 산출하고, 실제 생성은 사용자가 Discord 또는 web alpha에서 직접 실행합니다.

Sep 21
xpert-ai Bundle

Anim Zoominright 2

Zoom In Right — 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.

Sep 21
xpert-ai Bundle

Anim Zoomoutdown 2

Zoom Out Down — 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.

Sep 21
xpert-ai Bundle

Anim Zoomoutleft 2

Zoom Out Left — 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.

Sep 21
xpert-ai Bundle

Fx Neural Net 2

A pulsing neural network — an AI backdrop. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Fx Orbit Ring 2

Particles orbiting rings — an elegant loop. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Anim Backoutright 2

Back Out Right — 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.

Sep 21
xpert-ai Bundle

Anim Bounceindown 2

Bounce In Down — 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.

Sep 21
xpert-ai Bundle

Anim Bounceinleft 2

Bounce In Left — 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.

Sep 21
xpert-ai Bundle

Anim Fadeoutright 2

Fade Out Right — 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.

Sep 21
xpert-ai Bundle

Anim Fadeoutupbig 2

Fade Out Up Big — 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.

Sep 21
xpert-ai Bundle

Anim Jackinthebox 2

Jack In The Box — 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.

Sep 21
xpert-ai Bundle

Anim Slideinright 2

Slide In Right — 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.

Sep 21
xpert-ai Bundle

Anim Slideoutdown 2

Slide Out Down — 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.

Sep 21
xpert-ai Bundle

Anim Slideoutleft 2

Slide Out Left — 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.

Sep 21
xpert-ai Bundle

Anim Zoomoutright 2

Zoom Out Right — 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.

Sep 21
xpert-ai Bundle

Fx Chain React 2

A chain reaction of bursts ripples across the frame. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Fx Data Stream 2

Streaming data lines — a flowing techy backdrop. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Fx Matrix Rain 2

Falling code glyphs — a techy backdrop. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Anim Bounceinright 2

Bounce In Right — 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.

Sep 21
xpert-ai Bundle

Anim Bounceoutdown 2

Bounce Out Down — 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.

Sep 21
xpert-ai Bundle

Anim Bounceoutleft 2

Bounce Out Left — 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.

Sep 21
xpert-ai Bundle

Anim Fadeindownbig 2

Fade In Down Big — 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.

Sep 21
xpert-ai Bundle

Anim Fadeinleftbig 2

Fade In Left Big — 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.

Sep 21
xpert-ai Bundle

Anim Fadeintopleft 2

Fade In Top Left — 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.

Sep 21
xpert-ai Bundle

Anim Slideoutright 2

Slide Out Right — 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.

Sep 21
xpert-ai Bundle

Fx Galaxy Swirl 2

A swirling galaxy of particles. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Fx Word Cascade 2

Words cascade into place — a kinetic title. A bold, canvas-based effect from Open Design's html-ppt fx pack — for slides and launch videos. Guards prefers-reduced-motion (does not start). One per screen; on web use sparingly.

Sep 21
xpert-ai Bundle

Anim Bounceoutright 2

Bounce Out Right — 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.

Sep 21
xpert-ai Bundle

Anim Fadeinrightbig 2

Fade In Right Big — 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.

Sep 21
xpert-ai Bundle

Anim Fadeintopright 2

Fade In Top Right — 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.

Sep 21

Frequently asked questions

What are Web & Frontend agent skills?

Which Web & Frontend skills are most installed?

Popular Web & Frontend skills on SkillMD right now include doc-design-library, design-handoff-reader, design-landing-motion. 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.