Community코딩 & 개발github.com

aldunchev/ai-fe-skills

프론트엔드 개발을 위한 에이전트 스킬 — 드루팔, AEM, 성능 최적화. Claude Code, Codex, Gemini CLI, Cursor 등과 호환되는 SKILL.md 형식.

ai-fe-skills란 무엇인가요?

이 스킬은 프론트엔드 개발, 특히 Drupal, Adobe Experience Manager(AEM), 성능 최적화 분야에 특화된 에이전트 기능을 제공합니다. 개발자와 AI 에이전트 사용자가 일관된 작업 흐름을 유지하면서 다양한 도구와 플랫폼에서 활용할 수 있도록 설계된 SKILL.md 형식을 지원합니다. Claude Code, Codex, Gemini CLI, Cursor 등 주요 AI 에이전트와 호환되어, 프론트엔드 프로젝트에서 Drupal의 테마 및 모듈 개발, AEM의 구성 요소 및 템플릿 작업, 전반적인 웹 성능 최적화(로딩 속도, 번들 크기, 렌더링 효율성)를 자동화합니다. 이 스킬은 재사용 가능한 지침과 컨텍스트를 제공하여 에이전트가 반복적인 작업을 자동으로 처리하고, 모범 사례를 적용하며, 생산성을 크게 향상시킵니다.

지원 대상✓Claude Code✓Codex CLI✓Cursor✓Gemini CLI
npx skills add aldunchev/ai-fe-skills

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

ai-fe-skills은(는) 무엇을 하나요?

프론트엔드 개발을 위한 에이전트 스킬 — 드루팔, AEM, 성능 최적화. Claude Code, Codex, Gemini CLI, Cursor 등과 호환되는 SKILL.md 형식.

이 저장소는 AI 에이전트(예: Claude Code, Cursor, Codex, Gemini CLI)가 프론트엔드 개발 작업을 수행할 때 사용할 수 있는 재사용 가능한 스킬 세트를 제공합니다. 주요 초점은 Drupal 및 AEM 관련 개발, 그리고 웹 성능 최적화에 있습니다.

주요 기능

  • Drupal 지원: 테마 개발, 모듈 구성, Twig 템플릿 작업, Drush 명령어 처리.
  • AEM 지원: 구성 요소 개발, Sling 모델, HTL( Sightly ) 템플릿, OSGi 서비스.
  • 성능 최적화: Lighthouse 점수 개선, 번들 크기 최적화, 이미지 최적화, 캐싱 전략.
  • 크로스 플랫폼 호환성: 동일한 SKILL.md 형식이 여러 AI 에이전트에서 작동합니다.

사용 방법

  1. 이 저장소를 복제하거나 SKILL.md 파일을 프로젝트 루트에 복사합니다.
  2. AI 에이전트(Claude Code, Cursor, Codex 등)에서 프로젝트를 엽니다.
  3. 에이전트가 자동으로 스킬을 인식하고 지침을 따릅니다.

스킬 세부 사항

Drupal

  • hook_theme() 및 hook_preprocess() 구현
  • 커스텀 모듈 및 블록 생성
  • Drush를 사용한 데이터베이스 작업 및 설정 관리
  • Twig 템플릿 최적화 및 디버깅

AEM

  • AEM 구성 요소 및 대화 상자 생성
  • Sling 모델을 사용한 백엔드 로직
  • HTL( Sightly ) 템플릿 언어
  • OSGi 서비스 및 구성

성능 최적화

  • 이미지 지연 로딩 및 WebP 변환
  • CSS/JS 번들 크기 최소화
  • HTTP/2 및 CDN 활용
  • Lighthouse 감사 및 개선

호환성

이 스킬은 다음 플랫폼과 호환됩니다:

  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
  • 기타 SKILL.md 형식을 지원하는 도구

라이선스

MIT

관련 스킬