skills.rest
superpollo02
superpollo02COMMUNITY
Explore all skills by this author →
GitHub

storytelling

Apply narrative-driven design guidelines to multi-step UI flows with WCAG 2.2 AA accessibility.

Updated May 13, 2026
Search Tags:#onboarding#accessibility#design system#ux writing#component states#narrative ui
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill storytelling-superpollo02
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storytelling
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/storytelling
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill storytelling-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Storytelling helps teams design AI-generated or assistant-driven UI that feels engaging and intuitive by aligning visuals, interaction patterns, and copy into a coherent narrative journey.

Core Features & Use Cases

  • Narrative-first design direction: Defines a playful visual approach supported by a consistent typography and spacing system.
  • Implementation-ready guidance: Provides explicit rules for component states, interaction behavior, and token usage so the UI remains consistent and accessible.
  • Accessibility and quality gates: Enforces WCAG 2.2 AA, keyboard-first interaction, visible focus states, and testable acceptance criteria to prevent regressions.
  • Use case: When building onboarding flows, multi-step task completion screens, or empty/error states, apply the narrative tone and hierarchy rules to reduce confusion and increase completion.

Quick Start

Ask the AI to generate Storytelling-aligned UI guidance and component rules for your onboarding flow, including accessibility-tested acceptance criteria.

Frequently Asked Questions about storytelling

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

FAQPage Schema
How do I design onboarding flows that feel emotionally engaging?▼

Narrative-driven design guidelines align visuals, copy, and interaction patterns into emotionally resonant journeys. Applying these rules to onboarding flows reduces user confusion and increases multi-step task completion rates.

What is narrative UI and how does it improve UX writing?▼

Narrative UI transforms interfaces into conversational experiences by coordinating visual hierarchy, tone, and component states. UX writing becomes more intuitive and user-friendly when guided by consistent storytelling foundations and explicit interaction behavior rules.

How do I ensure my task wizard meets WCAG 2.2 AA accessibility standards?▼

Enforce WCAG 2.2 AA compliance by applying keyboard-first interaction behavior, visible focus states, and testable acceptance criteria. These accessibility quality gates prevent regressions and ensure narrative UI experiences remain usable for everyone.

Can I use design tokens for typography and spacing in conversational UI?▼

Yes, token-based typography and spacing constrained by storytelling foundations ensure consistent application across conversational UI. Explicit component state rules and token usage guidelines keep multi-step flows visually and functionally aligned.

What's the best way to structure empty and error states in a design system?▼

Apply narrative tone and hierarchy rules to empty and error states to reduce confusion. Coordinated visuals, copy, and interactions transform these states into intuitive, emotionally resonant touchpoints within the overall user journey.

Does narrative-driven design work for multi-step task completion screens?▼

Yes, narrative-driven design is specifically applicable to multi-step task completion screens. By aligning interaction patterns and copy into a coherent narrative journey, users experience reduced friction and increased completion rates.

Related Skills

Explore More Design & Creative Skills→
AshesOfTheUndeadAshesOfTheUndead

agentic

Generate conversational AI interface design specifications with WCAG 2.2 tokens.

Community
Intermediate
PiercingXXPiercingXX
1

storytelling

Author narrative-driven design-system guidance with accessibility and interaction states.

Community
Intermediate
bergsidebergside
2.3k

elegant

Define typography, spacing, radii, and color tokens for Elegant design systems.

Official
Basic
ProppyAIProppyAI

seedance-brand-story

Generate brand storytelling prompts and narrative templates for Seedance 2.0 on Higgsfield.

Official
Advanced