skills.rest
bergside
bergsideOFFICIAL
Explore all skills by this author →
WebsiteGitHub

fiction

Generate storybook-style UI design guidance with WCAG 2.2 AA accessibility rules.

2.3k|211|Updated Mar 9, 2026
Search Tags:#typography#accessibility#design system#design tokens#ui guidelines#component rules#storybook style
One-click install
npx skills add https://github.com/bergside/awesome-design-skills --skill fiction-bergside
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fiction
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/fiction
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill fiction-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Fiction helps teams consistently build a playful, storybook-inspired UI with warm colors, thick outlines, and expressive typography.

Core Features & Use Cases

  • Design foundations: Defines the typography scale (12/14/16/20/24/32), font families (Cossette Texte, JetBrains Mono), spacing rhythm (4/8/12/16/24/32), and a saturated token palette (primary/secondary/success/warning/danger).
  • Implementation-ready guidance: Provides accessibility expectations (WCAG 2.2 AA, keyboard-first, visible focus states) plus do/don’t rules that keep hierarchy, spacing, and labeling clear.
  • Quality gates for delivery: Sets testable constraints so generated UI guidance can be reviewed for correctness rather than vague style preferences.

Quick Start

Use the fiction skill to generate accessible component and styling guidance for a storybook-inspired landing page with thick black outlines and warm cream surfaces.

Frequently Asked Questions about fiction

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

FAQPage Schema
How do I create a storybook-style UI design system with accessibility rules?▼

To create a storybook-style UI design system with accessibility rules, use this skill to generate implementation-ready guidance covering typography, spacing tokens, and WCAG 2.2 AA constraints for consistent component behavior.

What design tokens and typography scales are needed for a storybook-style UI?▼

A storybook-style UI requires defined typography scales (12/14/16/20/24/32), font families like Cossette Texte and JetBrains Mono, 4/8/12/16/24/32 spacing rhythm, and saturated primary/secondary/success/warning/danger token palettes.

How do I enforce WCAG 2.2 AA accessibility in UI component guidelines?▼

To enforce WCAG 2.2 AA accessibility in UI component guidelines, apply keyboard-first interaction behavior, explicit interaction states, visible focus states, and testable quality gates that check hierarchy, spacing, and labeling correctness.

Can I use these UI component rules for common interface families like buttons and modals?▼

Yes, you can use these UI component rules across common interface families including buttons, inputs, cards, modals, and navigation, ensuring consistent token-based constraints and explicit interaction states throughout.

What is the best way to keep design system styling consistent across engineering workflows?▼

The best way to keep design system styling consistent across engineering workflows is to set testable constraints and do/don't rules that review generated UI guidance for correctness rather than relying on vague style preferences.

Do I need specific font families to build a playful storybook-inspired UI?▼

To build a playful storybook-inspired UI with warm cream surfaces and thick outlines, the defined font families Cossette Texte and JetBrains Mono are specified to maintain expressive typography and visual hierarchy.

Related Skills

Explore More Design & Creative Skills→
bergsidebergside
2.3k

minimal

Standardize minimal design system rules with token-first typography, spacing, and WCAG 2.2 AA accessibility.

Official
Intermediate
superpollo02superpollo02

material

Standardize Material Design UI implementation with design tokens and WCAG 2.2 AA accessibility constraints.

Community
Intermediate
NuclearPlayerNuclearPlayer
361

creating-components

Create React UI components with tests and Storybook stories.

Official
Intermediate
guideopsguideops

fiction

Provide playful storybook-inspired UI design foundations with typography, color, and spacing scales.

Community
Intermediate