Claude Code: UI Design & Frontend Skills

Skill pack

kwondongkyunSkills in this pack

Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.

English

UX 전문가 관점에서 서비스를 평가하는 Agent. Jakob Nielsen의 10가지 휴리스틱 기준으로 체계적으로 사용성을 평가하고 심각도를 분류한다.

Korean

Playwright 시각적 회귀 테스트 작성 시 사용. 스크린샷 비교, 반응형 뷰포트, 동적 콘텐츠 마스킹, 베이스라인 관리.

Korean

AGENT SKILLS ATLAS

Claude Code: UI Design & Frontend Skills

Includes Frontend Structure and other workflows.

Install with

Claude Code

Codex

Cursor

GitHub Copilot

Gemini CLI

Supported by the Atlas install prompt. Skill-specific requirements vary.

Pack stats

Skills3CategorygeneralStars0

Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.

UX 전문가 관점에서 서비스를 평가하는 Agent. Jakob Nielsen의 10가지 휴리스틱 기준으로 체계적으로 사용성을 평가하고 심각도를 분류한다.

Playwright 시각적 회귀 테스트 작성 시 사용. 스크린샷 비교, 반응형 뷰포트, 동적 콘텐츠 마스킹, 베이스라인 관리.

Choose your skills. Select individual skills above, or choose the entire pack.
Copy the install prompt. Use Copy install prompt above the list.
Send it to your agent. Paste into your coding agent’s chat. Your agent reviews the source and guides the setup.

After installation, start with a request like:

Example request

Use the Frontend Structure skill to help with my task.
Ask me for the context you need before getting started.

A coding agent that can access your project files and install skills.
Your agent checks each skill’s instructions, dependencies, and permissions during setup.
License details are not provided in these listings. Check the author’s terms before using the skills.