Skill not invoked — Claude writes React inline instead of using artifacts-builder

Reference the sub-skill by name: 'use artifacts-builder to...'.

SKILL.md frontmatter wrong

Each sub-skill has its own SKILL.md; inspect the one not activating.

Build a shareable self-contained HTML artifact with React + shadcn

You'd like to hand someone a single .html file that works offline. One file, double-click to open, works anywhere.

● 커뮤니티 walidboulanouar ⚡ 바로 사용

Ay-Skills

Name: Ay-Skills (Claude Skill)
Author: walidboulanouar

제작: walidboulanouar · walidboulanouar/Ay-Skills

AY Automate's 10-skill bundle — React/Tailwind artifacts, MCP client, Remotion video, Excalidraw, Claude SEO, NotebookLM, and more.

A broad skill collection from walidboulanouar / AY Automate: artifacts-builder (React + Tailwind + shadcn/ui bundled HTML), mcp-client (universal MCP connector with Python execution), remotion (React video), skill-creator, notebooklm (Google NotebookLM via browser automation), ui-ux-pro-max (design system guidelines), agent-browser (browser automation with login persistence), claude-seo (DataForSEO MCP integration), superpowers (agentic TDD pipeline), excalidraw-diagram.

▶ 데모 보기 📦 설치 💡 사용 사례

왜 쓰나요

핵심 기능

artifacts-builder — standalone HTML artifacts from React/Tailwind/shadcn
mcp-client — universal connector with Python execution and presets
remotion — Claude-native conventions for React-based video
agent-browser — headless browser with element ID and login persistence
Auto-discovers when placed in .claude/skills/ at session start

라이브 데모

실제 사용 모습

ay-skill.replay ▶ 준비됨

0/0

설치

작성자 저장소 · Claude Skills 공식 문서

사용 사례

실전 활용법: Ay-Skills

Automate a task behind a login with agent-browser

👤 Engineers avoiding flaky Selenium scripts ⏱ ~30 min intermediate

언제 쓸까: You need Claude to interact with a web app that requires auth, and you want session persistence.

흐름

Start a persistent session

agent-browser: open mysaas.com, log in (I'll do 2FA), save session.✓ 복사됨

→ Session saved, subsequent requests reuse it
Automate the task

Now download last month's invoices from the billing page.✓ 복사됨

→ Files downloaded to CWD

결과: A scripted flow that survives across sessions without reauth hell.

함정

Site's terms forbid automation — Check ToS first — browser automation is a tool, not a license

함께 쓰기: filesystem

조합

다른 MCP와 조합해 10배 효율

ay-skill + filesystem

Save artifacts-builder output directly to a shared drop folder

Build the artifact and save to ~/Dropbox/demos/.✓ 복사됨

ay-skill + github

Ship the artifact as a GitHub Pages page in one step

Build the artifact, commit to gh-pages branch, push.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
artifacts-builder	UI description	Want a shareable single-file demo	0
mcp-client	target MCP server + task	Orchestrating multiple MCPs from one skill	0
remotion	scene description + assets	Programmatic video generation	0
agent-browser	URL + actions	Auth-gated or JS-heavy sites	0
claude-seo	URL or keyword	SEO audits with optional paid data	0 local, paid if DataForSEO enabled
superpowers	feature intent	Complex features that benefit from structured TDD	0

비용 및 제한

운영 비용

API 쿼터: None for the skills themselves
호출당 토큰: Varies widely across sub-skills
금액: Free — skills are local files. DataForSEO (used by claude-seo optionally) is paid.
팁: Don't enable all 10 sub-skills if you only use 3 — context overhead compounds.

보안

권한, 시크릿, 파급범위

자격 증명 저장: No credentials in the skill files. agent-browser stores a session file; claude-seo may need DataForSEO keys.

데이터 외부 송신: Depends on sub-skill — agent-browser and claude-seo hit external sites

agent-browser login persistence means a file on your disk can log into services — protect it.

문제 해결

자주 발생하는 오류와 해결

Wrong trigger keywords — mcp-client picks the wrong MCP

Specify the target MCP explicitly in the prompt.

대안

Ay-Skills 다른 것과 비교

대안	언제 쓰나	단점/장점
excalidraw-skill (Agents365)	You only need the diagram piece	Narrower; doesn't include the 9 other AY sub-skills
skills-skill-9	You want product-building skills rather than UI/browser focus	Different category emphasis