Auto-invoke when reviewing React, Vue, or frontend component code. Enforces component architecture, state management patterns, and UI best practices.
English프론트엔드 기능과 화면, 시스템을 코드 작성 전에 설계하는 RADIO 방법론이다. Requirements(무엇을 보장할까), Architecture(상태의 원천과 데이터 흐름), Data Model(화면을 위한 모델), Interface(경계의 계약), Optimization(설계에 내장된 성능과 장애 대응, 운영) 5단계를 순서대로 밟는다. "무한 스크롤 피드 만들자", "채팅 붙여줘", "검색 자동완성 넣자", "알림 기능 설계해줘", "이 기능 어떻게 만들지", "아키텍처 잡아줘", "상태 관리 어떻게 할까", "설계 문서 써줘"처럼 비자명한 기능을 새로 만들거나 구조를 잡는 맥락이면 설계라는 단어가 없어도 사용하라. 실시간과 낙관적 업데이트, 대규모 목록, 복잡한 상태, race condition, 오프라인, 접근성이 얽힌 UI일수록 반드시 사용하라. 색과 타이포, 간격 같은 시각 디자인이나 이미 작성된 코드의 리팩토링, 버그 수정, 타입 에러 해결이 목적이면 쓰지 마라.
Korean
AGENT SKILLS ATLASIncludes Frontend Fundamentals and other workflows.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLISupported by the Atlas install prompt. Skill-specific requirements vary.
Pack stats
What’s included
Frontend Fundamentals
Auto-invoke when reviewing React, Vue, or frontend component code. Enforces component architecture, state management patterns, and UI best practices.
Radio System Design
프론트엔드 기능과 화면, 시스템을 코드 작성 전에 설계하는 RADIO 방법론이다. Requirements(무엇을 보장할까), Architecture(상태의 원천과 데이터 흐름), Data Model(화면을 위한 모델), Interface(경계의 계약), Optimization(설계에 내장된 성능과 장애 대응, 운영) 5단계를 순서대로 밟는다. "무한 스크롤 피드 만들자", "채팅 붙여줘", "검색 자동완성 넣자", "알림 기능 설계해줘", "이 기능 어떻게 만들지", "아키텍처 잡아줘", "상태 관리 어떻게 할까", "설계 문서 써줘"처럼 비자명한 기능을 새로 만들거나 구조를 잡는 맥락이면 설계라는 단어가 없어도 사용하라. 실시간과 낙관적 업데이트, 대규모 목록, 복잡한 상태, race condition, 오프라인, 접근성이 얽힌 UI일수록 반드시 사용하라. 색과 타이포, 간격 같은 시각 디자인이나 이미 작성된 코드의 리팩토링, 버그 수정, 타입 에러 해결이 목적이면 쓰지 마라.
Quick start
- 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.
Try it with your agent
After installation, start with a request like:
Use the Frontend Fundamentals skill to help with my task.
Ask me for the context you need before getting started.Requirements & license
- 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.