Dev Frontend Prompts — Claude Code Prompt Templates

Savoy Signature Hotels — Multi-Site Headless Platform
Purpose: Ready-to-use prompt templates for AI-assisted (Claude Code) frontend development
Phase Focus: Phase 1 — Design System + Figma-to-FE Integration

---

Prompt Template Index

Template	Filename	Focus
00	00_INDEX.md	This index
01	01_MODULE.md	Module development (Static or Interactive)
03	03_IMAGE_HEAVY_MODULE.md	Module with heavy image usage
04	04_FORM_MODULE.md	Form module with validation and submission
05	05_EXTRACT_THEME_TOKENS.md	Extracting design tokens from Figma
06	06_CREATE_THEME_VARIANT.md	Creating or extending a site theme variant
07	07_RESPONSIVE_IMAGE_SETUP.md	Responsive image setup with ResponsiveImage component
08	08_STORYBOOK_FIRST_DEVELOPMENT.md	Developing UI components in Storybook first
09	09_FIX_ACCESSIBILITY.md	Auditing and fixing accessibility issues
10	10_OPTIMIZE_PERFORMANCE.md	Performance auditing and optimization
11	11_ADD_TESTS.md	Writing Vitest unit and integration tests
12	12_RESPONSIVE_LAYOUT.md	Responsive layout and breakpoint handling
13	13_COMPLEX_DATA_MAPPER.md	Complex Umbraco-to-React mapper functions
14	14_CLIENT_STATE_MANAGEMENT.md	Client state management for interactive modules
15	15_MULTI_THEME_OVERRIDE.md	Site-specific theme overrides
16	16_CMS_CONTENT_TYPE.md	Umbraco Element Type for a module (Phase C — after frontend)

---

How to Use These Templates

Step-by-Step

1. Pick the template that matches the task you need to accomplish
2. Copy the prompt from the “Prompt Template” section
3. Fill in the {PLACEHOLDER} values with your specific module/component details
4. Paste the completed prompt into Claude Code
5. Claude Code will read the context files listed at the top of the template, then execute the task

Tips

• Always let Claude Code read the context files first — they provide the project conventions and patterns
• The “Acceptance Criteria” section doubles as a PR review checklist
• The “Common Pitfalls” section lists frequent mistakes — review these before accepting the output
• Combine templates when tasks overlap (e.g., 01 + 03 for a module with heavy images)

---

Development Process

Module development follows a frontend-first approach:

Phase A — Storybook       → Stories + mock data + visual validation
Phase B — React/Next.js   → Component + SCSS + types + mapper + tests
Phase B.5 — Pixel Perfect → Fetch Figma baselines, run visual tests, iterate, promote baselines (MANDATORY)
Phase C — Umbraco         → Element Type + API integration + real content

MANDATORY: No module is complete without passing Pixel Perfect visual tests. See template 01 for the full visual testing workflow.

---

Category Groupings

A. Module Creation (01, 03, 04, 16)

Templates for creating modules. Start with 01 (frontend), then 16 (backend) when ready for CMS integration.

Template	Use When
01 Module	START HERE — Create any module (Static or Interactive)
03 Image-Heavy Module	Module features hero images, galleries, or many visual assets
04 Form Module	Module contains user input forms (contact, newsletter, enquiry)
16 CMS Content Type	AFTER FRONTEND — Define the Umbraco Element Type (Phase C)

Workflow: Run 01 first (+ 03 if image-heavy, + 04 if form) → then 16 when ready for CMS.

B. Design & Theming (05-06)

Template	Use When
05 Extract Theme Tokens	Pulling tokens from a new Figma file
06 Create Theme Variant	Adding or modifying a site theme

C. Dev Workflows (07-13)

Template	Use When
07 Responsive Image Setup	Setting up desktop/mobile image pattern
08 Storybook-First Development	Developing and validating standalone UI components in Storybook
09 Fix Accessibility	Reviewing and fixing a11y issues
10 Optimize Performance	Auditing bundle size, LCP, CLS, runtime
11 Add Tests	Writing Vitest tests for modules or utilities
12 Responsive Layout	Implementing responsive layout and breakpoints
13 Complex Data Mapper	Building complex Umbraco JSON to React props mappers

D. Advanced Patterns (14-15)

Template	Use When
14 Client State Management	Managing state in interactive Client Components
15 Multi-Theme Override	Site-specific theme overrides and variant handling