fiction

Generates implementation-ready design-system guidelines for the Fiction playful storybook visual style.

Updated Jun 20, 2026
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill fiction-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fiction
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/fiction
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill fiction-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building interfaces in the Fiction style lack consistent, token-anchored rules, leading to inconsistent spacing, ambiguous component states, and accessibility gaps across playful, storybook-inspired UIs. ## Core Features & Use Cases - Token-Anchored Guidance: Produces design rules grounded in concrete tokens (colors like #222222 and #FFE9CE, Cossette Texte typography, 4/8/12/16/24/32 spacing scale) rather than vague adjectives. - Component-Level Rules: Defines anatomy, variants, and states (default, hover, focus-visible, active, disabled, loading, error) with keyboard, pointer, and touch interaction behavior. - Accessibility Acceptance Criteria: Enforces WCAG 2.2 AA with testable requirements, anti-patterns, migration notes, and a code-review QA checklist. - Use Case: Ask for a button component spec and receive a complete rule set covering variants, states, token usage, responsive behavior, and accessibility tests aligned with the Fiction brand. ## Quick Start Use the fiction skill to write design-system guidelines for a primary button component including states, tokens, and accessibility criteria.

Frequently Asked Questions about fiction

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

FAQPage Schema
How do I create design-system guidelines for a playful UI style?▼

Define tokens and foundations first (colors, typography scale, spacing), then specify component anatomy, states, and variants. Anchor every rule to a token or threshold, and end with accessibility acceptance criteria and a QA checklist.

What design tokens does the Fiction style use?▼

Fiction uses primary #222222, secondary #FFE9CE, success #16A34A, warning #D97706, danger #DC2626, with Cossette Texte for display and body text, JetBrains Mono for labels, and a 4/8/12/16/24/32 spacing scale.

Which component states should a design system define?▼

Define default, hover, focus-visible, active, disabled, loading, and error states as relevant. Describe interaction behavior for keyboard, pointer, and touch, plus responsive edge cases like long labels and empty states.

Does the Fiction skill enforce accessibility standards?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

When should I avoid a playful storybook design style?▼

Avoid it for contexts requiring formal or restrained tone, such as legal, financial, or clinical interfaces, where cartoonesque typography and saturated color blocks may undermine credibility or user trust.