applying-fsd-architecture
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.
Best use case
applying-fsd-architecture is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.
Teams using applying-fsd-architecture should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/applying-fsd-architecture/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How applying-fsd-architecture Compares
| Feature / Agent | applying-fsd-architecture | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Feature-Sliced Design Architecture Skill
Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발을 지원합니다.
## Description
이 스킬은 FSD 아키텍처에 대한 깊은 이해를 바탕으로 개발자가 올바른 구조를 설계하고 유지할 수 있도록 돕습니다. 레이어, 슬라이스, 세그먼트의 개념과 의존성 규칙을 적용하여 확장 가능하고 유지보수가 쉬운 코드베이스를 구축합니다.
## When to Use
이 스킬은 다음과 같은 상황에서 자동으로 활성화됩니다:
- FSD 아키텍처 관련 질문 (레이어, 슬라이스, 세그먼트)
- 프로젝트 폴더 구조 설계
- 의존성 규칙 및 import 방향 문의
- shared, entities, features, widgets, pages 등의 레이어 사용법
- FSD 마이그레이션 또는 리팩토링
## Trigger Patterns
- "FSD", "Feature-Sliced Design" 언급
- "레이어 구조", "슬라이스 생성", "세그먼트 추가"
- "shared 레이어", "entities 레이어", "features 레이어" 등
- "의존성 규칙", "import 방향"
- "프론트엔드 아키텍처", "폴더 구조 설계"
## Core Concepts
### 레이어 (Layers)
FSD는 7개의 표준화된 레이어를 정의합니다 (상위 → 하위):
1. **app** - 애플리케이션 진입점, 라우팅, 프로바이더
2. **processes** - (deprecated) 복잡한 페이지 간 시나리오
3. **pages** - 라우트 기준 화면 단위
4. **widgets** - 독립적인 대규모 UI 블록
5. **features** - 사용자 가치를 제공하는 기능 단위
6. **entities** - 비즈니스 엔티티 (User, Product 등)
7. **shared** - 재사용 가능한 유틸리티, UI 컴포넌트
### 의존성 규칙
```
app → pages → widgets → features → entities → shared
↓
상위 레이어는 하위 레이어만 import 가능
같은 레이어 내 슬라이스 간 import 금지
```
### 세그먼트 (Segments)
각 슬라이스 내부는 역할별로 구분됩니다:
- `ui/` - UI 컴포넌트, 스타일
- `api/` - API 요청 함수
- `model/` - 비즈니스 로직, 상태 관리
- `lib/` - 유틸리티 함수
- `config/` - 설정값
## References
- [layers.md](./references/layers.md) - 레이어별 상세 가이드
- [slices.md](./references/slices.md) - 슬라이스 패턴 및 예시
- [segments.md](./references/segments.md) - 세그먼트 구조화
- [dependency-rules.md](./references/dependency-rules.md) - 의존성 규칙
- [migration-guide.md](./references/migration-guide.md) - 마이그레이션 전략
## External Documentation
최신 공식 문서는 WebFetch를 통해 참조합니다:
```
https://feature-sliced.design/kr/docs/get-started/overview
https://feature-sliced.design/kr/docs/reference/layers
https://feature-sliced.design/kr/docs/reference/slices-segments
```Related Skills
architecture-documentation-creator
Create comprehensive technical documentation for code systems including data flow diagrams, architecture overviews, algorithm documentation, cheat sheets, and multi-file documentation sets. Use when documenting pipelines, algorithms, system architecture, data flow, multi-stage processes, similarity algorithms, or creating developer onboarding materials. Covers Mermaid diagrams, progressive disclosure, critical patterns, JSON schemas, Pydantic models, and print-friendly reference materials.
architecture-docs
Create and maintain architecture documentation with Mermaid diagrams. Use when writing technical documentation, system diagrams, or updating the implementation plan.
architecture-discovery
Guide users through discovering and defining system architecture through structured conversation. Triggers on "I want to build", "design a system", "architect", "planning a new project", "how should I build X".
architecture-diagrams
This skill should be used when the user asks to "create a diagram", "draw architecture", "make a Mermaid diagram", "update the system diagram", "visualize data flow", or when generating flowcharts, module diagrams, or dependency graphs. Provides standards for clear, unambiguous Mermaid diagrams.
Architecture Diagramming Expert
Create professional architecture diagrams using D2, Draw.io, Mermaid, and OCI official icons for enterprise-grade visualizations
architecture-diagram
Generate architecture diagrams in Mermaid, PlantUML, or diagrams.net formats
architecture-diagram-creator
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
architecture-designer
Use when designing new system architecture, reviewing existing designs, or making architectural decisions. Invoke for system design, architecture review, design patterns, ADRs, scalability planning.
architecture-design
Designs comprehensive software solution architectures including system components, technology stacks, integration patterns, scalability strategies, and deployment models. Produces architecture diagrams, technical specifications, and implementation roadmaps. Use when planning new software systems, modernizing legacy applications, designing microservices, evaluating technology choices, creating architecture documentation, or when users mention system design, architecture patterns, scalability planning, or technical architecture decisions.
architecture-design-review
Conducts comprehensive architecture design reviews including system design validation, architecture pattern assessment, quality attributes evaluation, technology stack review, and scalability analysis. Produces detailed review reports with findings, recommendations, and risk assessments. Use when reviewing software architecture designs, validating architecture decisions, assessing system scalability, evaluating technology choices, or when users mention architecture review, design assessment, technical review, or architecture validation.
architecture-decisions
Make and document architecture decisions using structured frameworks
architecture-decisioning
Guides the selection and documentation of architectural decisions using ADR patterns.