applying-fsd-architecture

Feature-Sliced Design(FSD) 아키텍처를 적용한 프론트엔드 프로젝트 개발 지원. FSD 레이어, 슬라이스, 세그먼트 구조 설계, 의존성 규칙 적용, 마이그레이션 시 사용.

16 stars

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

$curl -o ~/.claude/skills/applying-fsd-architecture/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/development/applying-fsd-architecture/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/applying-fsd-architecture/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How applying-fsd-architecture Compares

Feature / Agentapplying-fsd-architectureStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Create and maintain architecture documentation with Mermaid diagrams. Use when writing technical documentation, system diagrams, or updating the implementation plan.

architecture-discovery

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Create professional architecture diagrams using D2, Draw.io, Mermaid, and OCI official icons for enterprise-grade visualizations

architecture-diagram

16
from diegosouzapw/awesome-omni-skill

Generate architecture diagrams in Mermaid, PlantUML, or diagrams.net formats

architecture-diagram-creator

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

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

16
from diegosouzapw/awesome-omni-skill

Make and document architecture decisions using structured frameworks

architecture-decisioning

16
from diegosouzapw/awesome-omni-skill

Guides the selection and documentation of architectural decisions using ADR patterns.