fable-skills

Plugin fable-skills from marketplace fable5-skills-library in samirinyemi/fable5-skills-library. Commands read from the repo's manifest — 1 month ago.

Skills (27)

• fable-accessibility

  Use when making an interface usable by everyone — contrast, focus states, keyboard navigation, screen-reader semantics, accessible forms, and WCAG 2.2 — or as the accessibility ship-gate before delivering any design work.

• fable-animation-engineering

  Use when implementing web animation in code (GSAP/ScrollTrigger, scroll-driven scenes, timelines, page transitions, text reveals) or when motion feels janky, laggy, or drops frames. The build-and-optimize half of fable-motion-design; for a single hero showpiece use fable-signature-effects, for hover

• fable-award-winning-web

  Use for prestige-tier, Awwwards/FWA-caliber web experiences — portfolio, product-launch, agency, or campaign sites — or when the user asks for "award-winning", "premium", "high-end", or "cinematic" web. Escalate here from fable-web-design when the job is a showpiece, not a conversion page.

• fable-brand-identity

  Use when defining a brand's core identity — positioning, tension/enemy, logo/wordmark idea, the one ownable color, signature element, and voice card — or when a brand feels interchangeable with competitors. Delegates palette-building to fable-color-craft, type craft to fable-typography, and copy to

• fable-color-craft

  Use when building or fixing a color palette — dominant field, neutrals, and the single accent — plus light/dark theming and functional colors; reach for this when color feels muddy, clashing, arbitrary, or default-purple. (Contrast checks live in fable-accessibility; multi-hue chart palettes in fabl

• fable-data-viz

  Use when choosing a chart/KPI/sparkline's form, emphasis, honesty, and decluttering so it makes one clear claim — or when fixing charts that are cluttered, misleading, or rainbow-colored. (Chart-rendering code → dataviz skill; full dashboard layout → fable-product-ui.)

• fable-design-critique

  Use when finishing ANY fable-* design draft, before calling it done — a hostile-CD self-review that names the weakest element, diagnoses it on a 7-rung ladder (concept→motion), and routes the fix back to the owning fable-* skill. Also for reviewing/critiquing existing work.

• fable-design-dna

  Use when starting ANY Fable design task — before layout, color, or code — to set concept-first direction and kill generic/"AI-made"/template output; the mindset layer every other fable-* skill builds on and hands craft rules to.

• fable-design-research

  Use when hunting for design references or inspiration before committing to a direction — "find examples of...", "search Pinterest/Cosmos/Awwwards/Mobbin for...", "what are current patterns for..." — to sweep sources, curate 5-8 annotated picks, and present a selectable board in chat. Precedes fable-

• fable-design-systems

  Use when building the reusable token + component layer — design tokens, semantic theming, component-library API and states, drift audits — that other screens consume; NOT for one-off screen visuals (fable-product-ui) or the Figma-file mechanics of variables/instances (fable-figma-craft).

• fable-editorial-design

  Use when designing reading-first editorial layouts — magazines, blogs, longform articles, news, digital publications — pacing text with grid, type voice, and planned interruptions; NOT for portfolio case-study narratives (use fable-portfolio-case-study) or the type system itself (fable-typography).

• fable-figma-craft

  Use when working IN Figma — structuring files, building auto-layout + variables, componentizing with variants, prototyping the golden path, or prepping dev handoff — or when a Figma file is canvas soup (detached instances, raw hex, unnavigable pages). For token DEFINITION see fable-design-systems; t

• fable-image-direction

  Use when choosing, grading, or AI-generating a page's imagery as one consistent system — photography, illustration, 3D, hero and product shots — especially when images clash, look stock, or came from five different projects. (Color grade values come from fable-color-craft; page-wide grain/effects fr

• fable-micro-interactions

  Use when adding component-scale feedback to interactive controls — button press, toggle, checkbox, input focus, submit/success, copy, toast, skeleton, drag — or when a UI works but feels dead, mushy, or unresponsive to touch. Component states and sub-300ms feedback; page-level choreography belongs t

• fable-mobile-ui

  Use when designing native or mobile-first app screens, flows, navigation, and touch interactions (iOS/Android/React Native/Flutter) — thumb ergonomics, one-job screens, platform physics — or when a mobile UI feels cramped, desktop-shrunk, or fights the platform. For responsive scaling of a marketing

• fable-motion-design

  Use when deciding a product's motion strategy — what should move, why, and its timing/physics personality — before implementing, or when an interface feels static and dead, or conversely janky, floaty, and over-animated. Sets the direction that fable-animation-engineering, fable-micro-interactions,

• fable-onboarding-empty-states

  Use when designing onboarding, first-run/signup flows, setup checklists, or empty states (lists, dashboards, no-results, error, cleared) — or when new users drop off before first value, or empty screens are a dead-end "No data" + sad illustration.

• fable-portfolio-case-study

  Use when writing a portfolio or client case study — narrating finished design work as decisions-with-reasons and outcomes — especially when strong work reads flat because it's told as a chronological activity log. (For the page's visual layout, pair with fable-editorial-design.)

• fable-presentation-design

  Use when designing slides, pitch decks, keynotes, or any deck (.pptx, Canva, Google Slides, HTML slides) — turning topic-title, text-dense slides into billboard-clear ones read in three seconds from across a room.

• fable-product-ui

  Use when refining the interior craft of a data-heavy product — tables, forms, settings, admin panels, dashboards — for calm, scannable, low-fatigue daily use; when a working UI feels cluttered or noisy. For picking an app's overall archetype/elevation, use fable-web-app-design first.

• fable-signature-effects

  Use when building the ONE showpiece web mechanic a site owns — custom cursor, magnetic elements, image trail, gradient mesh, grain, WebGL distortion hover, reactive marquee, text scramble. Not per-component feedback (fable-micro-interactions) or timeline/scroll plumbing (fable-animation-engineering)

• fable-site-replication

  Use when asked to replicate/clone/rebuild an existing site or page 1:1 from a URL or screenshots ("make me this site", "copy this design", "rebuild this page") — measured, forensic fidelity on ANY stack (Next.js, Webflow, Framer, WordPress, SPA, static). NOT for "in the style of" (use fable-style-ex

• fable-style-extraction

  Use when applying a reference's aesthetic to DIFFERENT content — "make my site feel like this one", "in the style of X", "use this as inspiration", "match this vibe" — extracting its type/color/spacing/motion rules as a token sheet. NOT a 1:1 clone (fable-site-replication); NOT finding references (f

• fable-typography

  Use when choosing or pairing typefaces, building type scales, setting headline/body sizing, leading, tracking, or line length — or when type feels default, flat, or unreadable. Governs the type itself across web, mobile, and brand; for page-level longform pacing use fable-editorial-design.

• fable-ux-copywriting

  Use when writing or fixing the actual words in a UI — headlines, button labels, error messages, form helper text, microcopy — or when a layout is strong but the copy reads vague, hypey, or robotic. (Flow/layout for onboarding and empty states: pair with fable-onboarding-empty-states.)

• fable-web-app-design

  Use when designing or elevating the interface of a web APPLICATION (dashboard, tool/editor, developer console, CRM/records, chat, admin) — naming its archetype and spending a small expression budget to move it from generic-template to fast, crafted, owned. For marketing sites use fable-web-design; f

• fable-web-design

  Use when designing a marketing/landing/SaaS-marketing page whose job is to communicate a message and convert a visitor — NOT the logged-in app UI (fable-web-app-design) or an awards-tier showpiece (fable-award-winning-web) — especially when the draft reads like a template or fails to turn attention

Similar plugins