skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

storytelling

Implements narrative-driven design guidelines with WCAG 2.2 AA compliance and keyboard-first interactions.

Updated Jun 23, 2026
Search Tags:#typography#storytelling#visual design#color theory#design-system#spatial design#narrative-driven
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill storytelling-guideops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storytelling
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/storytelling
Command: npx skills add https://github.com/guideops/agentic-shared --skill storytelling-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill offers narrative-driven design principles to create engaging and emotionally resonant user experiences, transforming functional interfaces into memorable ones.

Core Features & Use Cases

  • Storytelling Foundations: Utilize a set of visual, typography, color, and spacing guidelines to develop a cohesive design narrative.
  • Accessibility Compliance: Follow WCAG 2.2 AA standards and keyboard-first interactions for inclusive design.
  • Implementation-Focused Guidance: Generate practical, actionable design guidelines for developers and designers.

Quick Start

Implement the storytelling style guidelines for your design system by referring to the provided tokens and foundational principles.

Frequently Asked Questions about storytelling

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

FAQPage Schema
What is narrative-driven design and how does it improve a design system?▼

Narrative-driven design uses visual storytelling to create emotionally resonant user experiences. It transforms functional interfaces into memorable ones by applying cohesive typography, color, and spacing guidelines within a design system.

How do I apply visual storytelling techniques to my UI components?▼

Apply visual storytelling by referencing provided design tokens and foundational principles for typography scale, color, and spacing. This generates actionable guidelines that developers and designers can implement directly into UI components.

Does narrative-driven design support WCAG 2.2 AA accessibility standards?▼

Yes, narrative-driven design ensures WCAG 2.2 AA compliance and keyboard-first interactions. This guarantees that visual storytelling elements remain accessible and inclusive for all users navigating digital experiences.

Can I use these storytelling guidelines for spatial design projects?▼

Yes, the storytelling guidelines apply to spatial design. They provide a cohesive narrative through typography, color tokens, and spacing principles that adapt to spatial environments while maintaining accessibility compliance.

What's the best way to integrate storytelling principles into an existing design system?▼

Integrate storytelling principles by mapping the provided typography scale, color tokens, and spacing guidelines to your existing design system components. This ensures a cohesive visual narrative without disrupting current functional architecture.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
HermeticOrmusHermeticOrmus
89

Archetypal Combinations: Alchemy Engine

Generate UI/UX design systems by combining Jungian archetypes with Major Arcana cards.

Community
Intermediate
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
jacob-balslevjacob-balslev
1

visual-design-foundations

Guide palette, typography, spacing, density, and grouping choices for visual hierarchy audits.

Community
Intermediate