sfcc-isml-development

Enforce Bootstrap 4 conventions and safe encoding in SFRA ISML templates.

27|9|Updated Aug 8, 2025
One-click install
npx skills add https://github.com/taurgis/sfcc-dev-mcp --skill sfcc-isml-development
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: sfcc-isml-development
Source: https://github.com/taurgis/sfcc-dev-mcp/tree/main/ai-instructions/skills/sfcc-isml-development
Command: npx skills add https://github.com/taurgis/sfcc-dev-mcp --skill sfcc-isml-development

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides practical, SFRA-first guidance for creating and troubleshooting ISML templates, ensuring consistency with Bootstrap 4 conventions and SFRA architecture.

Core Features & Use Cases

  • SFRA-focused ISML templates guide covering decorators, layout rules, and safe encoding practices.
  • Templates: how to structure templates under common/layout, components, and includes for maintainability.
  • Use Case: when building storefront pages, such as product grids or PDPs, follow the patterns to ensure compatibility with SFRA layout and decorators.

Quick Start

Begin by reading this guide and implementing a minimal ISML template following SFRA and Bootstrap 4 conventions.

Frequently Asked Questions about sfcc-isml-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure SFRA ISML templates to follow Bootstrap 4 conventions?

To structure SFRA ISML templates, organize files under common/layout, components, and includes directories while applying Bootstrap 4 markup conventions with proper encoding. This approach ensures maintainable templates with consistent layout, safe output, and correct decorator usage across storefront pages.

What is the best way to prevent raw business logic in ISML templates?

The best way to prevent raw business logic in ISML templates is to enforce SFRA architecture patterns using decorators like <isdecorate> and keeping logic in controllers. This guide mandates separating business logic from presentation markup to maintain clean, performant templates.

How do I use decorators in SFRA ISML templates correctly?

Use decorators in SFRA ISML templates by wrapping page layouts with <isdecorate> tags to ensure consistent rendering across pages. This guide enforces proper decorator patterns that maintain SFRA architecture compliance and standardize Bootstrap 4 layout rendering across components.

Does this SFRA ISML guide work with Bootstrap 4 for building product pages?

Yes, this guide applies Bootstrap 4 conventions to SFRA ISML templates for building storefront pages including product grids and PDPs. It ensures compatibility with SFRA layout and decorators while maintaining proper encoding and performance for e-commerce components.

Why should I use <isdecorate> instead of raw HTML in SFRA templates?

Using <isdecorate> instead of raw HTML in SFRA templates enforces SFRA architecture patterns, prevents raw business logic in ISML, and ensures consistent Bootstrap 4 layout rendering. This approach maintains safe output encoding and performance across storefront pages.

What are the limitations of using Bootstrap 4 with SFRA ISML templates?

When using Bootstrap 4 with SFRA ISML templates, limitations involve maintaining proper encoding, preventing raw business logic, and ensuring strict decorator compliance. Templates must follow SFRA architecture patterns to avoid layout and performance issues in storefront pages.