# Cursor Prd Fsd Frontend

> Use when the user wants to follow or migrate a Cursor-style frontend rule pack into Codex, especially for `.mdc` or `.cursor/rules` based workflows. Covers PRD-first development, PRD -> test -> implement workflow, FSD architecture rules, shadcn UI conventions, Next.js/React best practices, Vitest/RTL testing standards, and PRD samples for auth, sidebar, equipment, notice, maintenance-intake, and work-permit screens. Triggers include requests about Cursor rules, Cursor settings migration, .mdc files, PRD 먼저, FSD, shadcn, frontend rule packs, and sidebar/auth/workflow PRDs.

- Skill: `kim-dh2417/cursor-prd-fsd-frontend` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add kim-dh2417/cursor-prd-fsd-frontend`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kim-dh2417/cursor-prd-fsd-frontend/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Product & Planning
- Author: kim-dh2417 (https://skillmd.com/u/kim-dh2417)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/kim-dh2417/cursor-prd-fsd-frontend

---


# Cursor PRD FSD Frontend

Use this skill when work should follow the imported Cursor rule pack rather than generic frontend implementation.

## What This Skill Enforces

- PRD first, then tests, then implementation
- FSD import and layer discipline
- shadcn-first UI composition
- Next.js / React best practices
- terminology consistency via a product glossary
- Vitest / RTL testing standards

## Workflow

1. If the request is a new feature or UI change, create or update the PRD first.
2. If the request is implementation work, inspect the relevant PRD before changing code.
3. Apply the architecture and UI rules before writing or reviewing code.
4. If tests are expected, follow the imported testing standard and run targeted tests.

## Reference Loading Guide

Read only the files needed for the task:

- Workflow rules:
  - `references/feature-workflow.mdc`
- Architecture and import rules:
  - `references/fsd-architecture.mdc`
  - `references/react-best-practices.mdc`
- UI and terminology rules:
  - `references/ui-shadcn.mdc`
  - `references/ui-terminology.mdc`
- Testing rules:
  - `references/testing-standard.mdc`
- PRD structure:
  - `references/prd-template.md`

## Reference Selection Rules

After this skill is triggered, choose references by request type:

- New frontend feature or broad UI implementation:
  - `references/feature-workflow.mdc`
  - `references/fsd-architecture.mdc`
  - `references/react-best-practices.mdc`
  - `references/testing-standard.mdc` when tests matter
- Auth, login, role, menu, permission, navigation wording:
  - `references/ui-terminology.mdc`
  - `references/feature-workflow.mdc`
  - relevant PRD sample from `assets/prd-samples/`
- Sidebar, layout, form, dialog, filter, input-heavy UI:
  - `references/ui-shadcn.mdc`
  - `references/fsd-architecture.mdc`
  - relevant PRD sample from `assets/prd-samples/`
- FSD refactor, import cleanup, slice structure work:
  - `references/fsd-architecture.mdc`
- React / Next.js rendering, RSC, Server Action, searchParams, Suspense work:
  - `references/react-best-practices.mdc`
- Test addition or failing UI tests:
  - `references/testing-standard.mdc`
- New PRD creation or PRD rewrite:
  - `references/prd-template.md`
  - closest matching sample in `assets/prd-samples/`

## Bundled PRD Samples

Use the sample PRDs in `assets/prd-samples/` when you need concrete examples for:

- auth/login
- sidebar/navigation
- equipment management
- workflow pages such as notice, maintenance intake, and work permit

## Integration Policy

- Do not overwrite existing Codex skills unless explicitly asked.
- Treat this skill as an additional ruleset that activates only when relevant.
- If an existing project already has stronger local rules or an `AGENTS.md`, follow the project-local rules first and use this skill as supporting guidance.