hyunseung1119

Modern Frontend — AI skill for Claude Code

AI community

/modern-frontend — Anti-AI Frontend Design (2026).

How to install Modern Frontend

Installs to ~/.claude/skills/hyunseung1119-my_claudecode_skill-modern-frontend/SKILL.md

Terminal

mkdir -p ~/.claude/skills/hyunseung1119-my_claudecode_skill-modern-frontend && curl -fsSL https://raw.githubusercontent.com/hyunseung1119/My_ClaudeCode_Skill/HEAD/commands/modern-frontend.md -o ~/.claude/skills/hyunseung1119-my_claudecode_skill-modern-frontend/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What Modern Frontend does

/modern-frontend — Anti-AI Frontend Design (2026)

프론트엔드 작업에 Anti-AI 디자인 원칙을 적용합니다.

이 커맨드는 `~/.claude/rules/modern-frontend.md` 규칙과 `react-component` 스킬의 내용을 활성화합니다.

실행 순서

WebSearch로 해당 컴포넌트/페이지 유형의 2026 트렌드 조사
react-component 스킬의 Anti-AI 디자인 원칙 적용
rules/modern-frontend.md의 금지 패턴 확인
구현 후 Anti-AI 체크리스트 검증

핵심 원칙 요약

중앙 정렬 금지 → 비대칭 레이아웃
보라/파랑 그라데이션 금지 → 단색 또는 예상 외 색상
둥근 pill 버튼 금지 → 각진 버튼 또는 밑줄 링크
Glass morphism 금지 → 솔리드 또는 투명
아이콘+제목+설명 카드 금지 → 숫자 인덱스

Alternatives in AI

Agency Agents — A complete AI agency at your fingertips - From frontend wizards to Reddit community ninjas, from whimsy inject 148k ★
Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Go Modern Guidelines — Help AI coding agents write modern Go 1.7k ★