Skip to content
{% story %}
AutoXXS (320px)XS (375px)SM (640px)MD (768px)LG (1024px)XL (1280px)XXL (1536px)
SketchMaterialiOSTamagui
DataInjectionKeyPatternsServiceTransactionProcessResearchProductQualityPerformanceSpecDomainFunctionTechnologyArchitectureConfigMiddlewareDataDatabaseDrizzleMigrationModelop-sqliteSchemaSQLState ManagementDraftKeystoneMergePatchPatchesPersistenceReactiveRedoStoreUndoTestingDeviceFactoryIsolationTypeScriptZodTopicsCommunicationBidsNVCDesignDesign ImplicationsEducationPedagogyFoundationsPsychologyAttachmentFloodingRelatingAuthentic RelatingUIEditorReact Native

{% story %}

Attributes

Parameter Type Required Description
id string Unqualified story id (e.g., 'save-bookmark')
role string Qualified id of the primary actor (e.g., 'user')
features string Space-separated list of qualified feature ids (e.g., 'feature/add-bookmark')
scope string Space-separated list of visibility scopes

Valid Children

TagMultiplicity
{% tldr %}[1]
{% explanation %}[*]
{% example %}[*]

Defines a narrative User Story walkthrough. Stories bridge the gap between abstract features and concrete user journeys.

Agent bundle shape

FieldSource
rolerole attribute — qualified id (e.g. "user")
featuresfeatures attribute — split on spaces into an array of qualified ids
narrativeFull prose body of the tag
Story linking a role to multiple features
tagstoryrolefeature story-tag-walkthrough
{% story id="save-bookmark" role="user" features="feature/add-bookmark" scope="public agent" %}
As a user, I want to save a link I found so that I can read it later.
First, I navigate to the bookmark form and paste the URL.
The system auto-fetches the title and suggests tags from my history.
I confirm and the bookmark appears at the top of my library.
{% /story %}

Tag Tree

{% tldr %}[1]One-sentence summary rendered as a lead paragraph and used as the document's short description throughout the site.{% explanation %}[*]Provides targeted advice or collapsible detail for a specific audience. Renders as a callout () or a disclosure element (). Supports full Markdown in the body.{% example %}[*]Embeds a named, filterable example inline in a document and collects it in the global Examples Gallery.