skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

storytelling

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

1|Updated Jul 9, 2026
Search Tags:#accessibility#design tokens#design-system#content standards#interaction states#UI guidelines#narrative UX
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill storytelling-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: storytelling
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/design-skills/storytelling
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill storytelling-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps designers and engineers create narrative-driven UI guidance that uses visuals, copy, and interaction to move users through a cohesive and emotionally resonant experience.

Core Features & Use Cases

  • Design-system foundations: Establishes playful visual style, typography (Inter and Abril Fatface, with JetBrains Mono for labels), and a defined token palette for spacing, color, and hierarchy.
  • Implementation-ready rules: Provides operational guidance with do/don’t constraints, component-level expectations, and explicit interaction states (default/hover/focus-visible/active/disabled/loading/error where relevant).
  • Quality gates and accessibility: Enforces testable accessibility requirements (WCAG 2.2 AA, keyboard-first interactions, visible focus states) and a QA checklist designed for code review.

Quick Start

Use the storytelling skill to author an implementation-ready design system guideline document for a product onboarding flow that needs clear narrative, accessible interactions, and consistent token-based styling.

Frequently Asked Questions about storytelling

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

FAQPage Schema
How do I create design-system guidelines for narrative UX onboarding flows?▼

To create narrative UX guidelines for onboarding flows, you generate implementation-ready documentation covering visual style, copy, and interaction states. This aligns design tokens with emotionally resonant user journeys for your product UI.

What is narrative-driven UI guidance and when do I need it for my product?▼

Narrative-driven UI guidance uses visuals, copy, and interaction to move users through a cohesive, emotionally resonant experience. You need it when authoring product design rules for onboarding, flows, and component patterns to ensure consistent user journeys.

Can I use this approach to enforce WCAG 2.2 AA accessibility in my component library?▼

Yes, you can enforce WCAG 2.2 AA accessibility in your component library by applying explicit interaction states and keyboard-first interactions. The guidance includes visible focus states and a QA checklist designed for code review.

How do I structure design tokens for emotionally engaging user journeys?▼

Structure design tokens by defining a palette for spacing, color, and hierarchy alongside typography rules. This establishes a visual style that translates into implementation-ready rules for component patterns and interaction states.

Does narrative UX design guidance include interaction states for default and disabled components?▼

Yes, narrative UX design guidance includes explicit interaction states for components. You get operational rules for default, hover, focus-visible, active, disabled, loading, and error states, ensuring consistent behavior across your UI library.

What's the best way to document do and don't constraints for UI guidelines?▼

The best way to document UI guidelines is to produce a structured output covering foundations, component rules, acceptance criteria, and QA. This includes do and don't constraints with component-level expectations for code review.

Related Skills

Explore More Design & Creative Skills→
Ayub-KhanAyub-Khan

ui-ux-design

Define scalable UI/UX design systems with tokens for Figma handoff.

Community
Intermediate
superpollo02superpollo02

glassmorphism

Standardize frosted glass UI components with token-driven styling and WCAG 2.2 AA accessibility.

Community
Intermediate
superpollo02superpollo02

brutalism

Standardize brutalist design-system guidance with WCAG 2.2 AA accessibility rules.

Community
Advanced
jasonmichaelbell78-creatorjasonmichaelbell78-creator

ux-researcher-designer

Generate data-driven personas and journey maps from user data.

Community
Advanced