claude-design-patterns

A set of engineering rules and reusable patterns for creating web interfaces, React outputs, slide decks, animations, and device mockups.

In plain words
What is it for?
Use it alongside frontend-design when creating or iterating on visual web pages, React artifacts, presentations, animations, or device mockups.
Why use it?
It gives coding agents shared guidance for producing consistent visual work when building or revising these outputs.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/codeclawd/fable-mode/claude-design-patterns
Any agent
npx skills add codeclawd/fable-mode --skill claude-design-patterns
Clone the repo
git clone --depth 1 https://github.com/codeclawd/fable-mode

Made for: Claude Code, Codex.

Per session 0 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,296 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin unknown No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00000 $0.01296
Opus 5 $0.00000 $0.00648
Sonnet 5 $0.00000 $0.00259
Haiku 4.5 $0.00000 $0.00130

Measured yesterday against content hash 2f650b0d74b0, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

claude-design-patterns scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured yesterday.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/claude-design-patterns/SKILL.md · 107 lines

The source is not reproduced here

No licence file

A repository with no LICENSE is all rights reserved by default, so the body is not copied here. The metadata, the measurements and the link are.

Read it on GitHub

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. yesterday First seen · 107 lines · 0 tokens per session scan A 2f650b0d74b0

Subscribe to this mod's changes

claude-design-patterns is a skill published in the GitHub repository codeclawd/fable-mode (16 stars, last pushed 1mo ago), with no licence file. It costs nothing until one of its globs matches a file; then it loads 1,296 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

banner-design

Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter/X, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold…

VKirill/claude-lane-stack · 118 tokens

issue-triage

Issue triage: audit open issues, categorize, detect duplicates, cross-ref PRs, risk assessment, post comments. Args: "all" for deep analysis of all, issue numbers to focus (e.g. "42 57"), "en"/"fr" for language, no arg = audit only in French.

rtk-ai/rtk · 70 tokens

performance

CLI performance optimization - startup time, memory usage, token savings benchmarking.

rtk-ai/rtk · 13 tokens

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components…

zhukunpenglinyutong/desktop-cc-gui · 127 tokens

build-teaql-app

Build or change a TeaQL application in Java, Rust, Go, Swift, Python, C#/.NET, or TypeScript, including Kotlin/JVM applications that consume Java-generated libraries. Mandatory order: first draft and save a complete KSML model, then verify the client and evaluate that saved model, repair it through repeated evaluation…

teaql/teaql-agent-kit · 112 tokens

moai-ref-ui-polish

UI polish and interface-completion reference: the small visual details — concentric border radius, optical alignment, shadow-vs-border, motion easing, typography smoothing, tabular numbers, icon stroke weight, hit areas — that separate polished interfaces from generic ones. Agent-extending skill that amplifies…

modu-ai/moai-adk · 98 tokens