Community이미지github.com

feature-sliced/feature-sliced-design

Feature-Sliced Design (FSD) v2.1 공식 스킬로, 프론트엔드 프로젝트에 방법론을 적용할 때 사용합니다.

feature-sliced-design란 무엇인가요?

이 스킬은 Feature-Sliced Design (FSD) v2.1 방법론을 프론트엔드 프로젝트에 적용하기 위한 공식 도구입니다. 개발자는 이 스킬을 사용하여 FSD 계층 구조로 프로젝트를 구성하고, 코드 배치를 결정하며, 정적 자산(이미지, 아이콘, 폰트, PDF)을 적절한 위치에 배치하고, 관련 슬라이스를 그룹화하며, 공개 API와 가져오기 경계를 정의할 수 있습니다. 또한 교차 가져오기나 @x 패턴을 해결하고, 엔티티 생성/제거 여부를 판단하며, 엔티티 계층 자체가 필요한지 평가하고, 로직을 로컬에 유지할지 추출할지 결정하는 데 도움을 줍니다. Next.js(App Router 및 Pages Router), Nuxt, Vite, Astro 같은 프레임워크와의 FSD 통합을 지원하며, FSD v2.0 또는 비-FSD 코드베이스에서의 마이그레이션, 인증, API 처리, Redux, TanStack Query(React Query) 같은 공통 패턴 구현도 다룹니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/feature-sliced/skills/tree/main/skills/feature-sliced-design

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

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

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

문서

feature-sliced-design은(는) 무엇을 하나요?

Feature-Sliced Design (FSD) v2.1 공식 스킬로, 프론트엔드 프로젝트에 방법론을 적용할 때 사용합니다. 다음 작업에 사용하세요: FSD 계층으로 프로젝트 구조를 구성하거나, 코드가 속할 위치를 결정하거나, 정적 자산(이미지, 아이콘, 폰트, PDF)을 배치하거나, 밀접하게 관련된 슬라이스를 그룹화하거나, 공개 API와 가져오기 경계를 정의하거나, 교차 가져오기를 해결하거나 @x 패턴을 평가하거나, 엔티티를 생성 또는 제거할지 결정하거나, 엔티티 계층이 전혀 필요한지 평가하거나, 로직을 로컬로 유지할지 추출할지 결정하거나, FSD v2.0 또는 비-FSD 코드베이스에서 마이그레이션하거나, FSD와 프레임워크(Next.js App Router 및 Pages Router, Nuxt, Vite, Astro)를 통합하거나, FSD 내에서 인증, API 처리, Redux, TanStack Query(React Query)와 같은 일반적인 패턴을 구현할 때 사용합니다.

관련 스킬