skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

fluent-syntax-attributes

Validate and apply Fluent attribute syntax for localization messages.

1|Updated Mar 19, 2026
Search Tags:#react#localization#i18n#attributes#fluent#ftl
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Fluent-i18n-Claude-Skill-Package --skill fluent-syntax-attributes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fluent-syntax-attributes
Source: https://github.com/OpenAEC-Foundation/Fluent-i18n-Claude-Skill-Package/tree/main/skills/source/fluent-syntax/fluent-syntax-attributes
Command: npx skills add https://github.com/OpenAEC-Foundation/Fluent-i18n-Claude-Skill-Package --skill fluent-syntax-attributes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Managing Fluent attribute syntax can be error-prone, leading to missing or incorrect attribute usage, private term attributes, and runtime errors when formatting attributes. This Skill provides a clear guide to correctly defining and using message and term attributes in Fluent FTL, including value-less messages, compound messages, and React attribute mappings.

Core Features & Use Cases

  • Clear guidance on message vs. term attributes, value-less messages, and compound messages.
  • Guidance for TypeScript and React access to attributes via Fluent bundles, getMessage, and Localized.
  • Practical examples and anti-patterns to avoid common mistakes.

Quick Start

Write a Fluent file with a single message that has an attribute and format the attributes using getMessage().attributes in TypeScript.

Frequently Asked Questions about fluent-syntax-attributes

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

FAQPage Schema
How do I access Fluent attributes in React using getMessage?▼

Access Fluent attributes in React by retrieving them from the attributes object returned by getMessage().attributes. This pattern ensures safe property access when rendering localized message attributes in components.

What is the correct syntax for defining attributes on Fluent terms and messages?▼

Defining Fluent attributes requires placing them on a new line below the message or term value using a dot prefix. This syntax applies to both compound messages and value-less messages within FTL files.

Can I use private term attributes in Fluent FTL files?▼

Private term attributes in Fluent FTL are supported but require careful syntax to avoid runtime errors. The Skill provides specific guidance on safe access patterns and error handling for these private attributes.

How do I map Fluent message attributes to React Localized components?▼

Mapping Fluent attributes to React Localized components involves passing the specific attribute name to the component. This ensures the correct attribute value is extracted and rendered from the Fluent bundle.

Why does my Fluent localization formatting fail with missing attributes?▼

Fluent localization formatting fails with missing attributes due to incorrect syntax or attempting to access non-existent properties. Following safe access patterns and proper EBNF grammar prevents these runtime errors.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
1

fluent-syntax-terms

Define and reference Fluent terms in FTL for consistent branding.

Official
Advanced
nayukatanayukata

format-ui-display

Format UI dates and enum labels for Japanese applications using dayjs utilities.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
1

fluent-impl-project-setup

Bootstrap Project Fluent setups with npm dependencies and FTL validation tooling.

Official
Advanced
mauriciodelriomauriciodelrio
3

i18n-react-rules

Configure react-i18next with language detection and namespace translation files for React Vite SPAs.

Community
Intermediate