design-systems

design-systems is a skill for Claude Code, Codex from saolalab/clawforce. It costs 23 tokens per session (394 once invoked), scanned A, original, Apache-2.0.

A system for managing and documenting reusable interface components. It covers a component’s purpose, structure, variants, states, design tokens, accessibility, and implementation details.

In plain words
What is it for?
Use it to create or update component documentation, define colors and spacing tokens, describe variants, and record accessibility requirements.
Why use it?
It helps teams keep interface components consistent and gives designers and developers shared usage rules.

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/saolalab/clawforce/design-systems
Any agent
npx skills add saolalab/clawforce --skill design-systems
Clone the repo
git clone --depth 1 https://github.com/saolalab/clawforce

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for design-systems

README.md
[![agentmods](https://agentmods.dev/badge/skills/saolalab/clawforce/design-systems.svg)](https://agentmods.dev/skills/saolalab/clawforce/design-systems)
Your own site
<a href="https://agentmods.dev/skills/saolalab/clawforce/design-systems"><img src="https://agentmods.dev/badge/skills/saolalab/clawforce/design-systems.svg" alt="Measured on agentmods" height="20"></a>
Per session 23 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 394 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original 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.00023 $0.00394
Opus 5 $0.00012 $0.00197
Sonnet 5 $0.00005 $0.00079
Haiku 4.5 $0.00002 $0.00039

Measured 3d ago against content hash 76c7fc819829, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

design-systems 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 3d ago.

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.

marketplace/roles/ux-designer/workspace/skills/design-systems/SKILL.md · 86 lines

What it actually says

Design Systems

Component Structure

Component/
├── Overview          # What and when to use
├── Anatomy           # Parts and naming
├── Variants          # States and variations
├── Guidelines        # Do's and don'ts
├── Accessibility     # A11y requirements
└── Code              # Implementation reference

Design Token Categories

Category Examples
Colors Primary, secondary, semantic, neutral
Typography Font families, sizes, weights, line heights
Spacing Margins, padding, gaps
Borders Widths, radii, styles
Shadows Elevation levels
Motion Duration, easing

Component Documentation Template

# [Component Name]

## Overview
Brief description of the component and its primary use case.

## When to Use
- Use case 1
- Use case 2

## When Not to Use
- Anti-pattern 1

## Anatomy
[Diagram showing component parts]

## Variants
### Primary
[Description and usage]

### Secondary
[Description and usage]

## States
- Default
- Hover
- Active
- Disabled
- Focus
- Error

## Accessibility
- Keyboard navigation requirements
- Screen reader considerations
- ARIA attributes

## Guidelines
### Do
- Best practice 1

### Don't
- Anti-pattern 1

Consistency Checklist

  • Uses design tokens, not hardcoded values
  • Follows naming conventions
  • Documented with all variants
  • Accessibility reviewed
  • Responsive behavior defined
  • Motion/animation specified
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. 3d ago First seen · 86 lines · 23 tokens per session scan A 76c7fc819829

Subscribe to this mod's changes

design-systems is a skill published in the GitHub repository saolalab/clawforce (38 stars, last pushed 4mo ago), licensed Apache-2.0. It adds 23 tokens to every session and 394 once invoked, about $0.0001 per session on Opus 5. 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

agenticmail

🎀 AgenticMail — Full email, SMS, storage & multi-agent coordination for AI agents. 63 tools.

InternLM/WildClawBench · 28 tokens

ai-meeting-scheduling

Booking links fail for groups. SkipUp schedules meetings with 2-50 participants via email — one API call coordinates across timezones automatically. Also: check status, pause, resume, or cancel requests. Async only — does not instant-book, access calendars, or do free/busy lookups.

InternLM/WildClawBench · 66 tokens

agentic-paper-digest-skill

Fetches and summarizes recent arXiv and Hugging Face papers with Agentic Paper Digest. Use when the user wants a paper digest, a JSON feed of recent papers, or to run the arXiv/HF pipeline.

InternLM/WildClawBench · 54 tokens

eachlabs-voice-audio

Text-to-speech, speech-to-text, voice conversion, and audio processing using EachLabs AI models. Supports ElevenLabs TTS, Whisper transcription with diarization, and RVC voice conversion. Use when the user needs TTS, transcription, or voice conversion.

InternLM/WildClawBench · 60 tokens

arxiv-summarizer-orchestrator

End-to-end orchestration skill for periodic arXiv collection and reporting using three sub-skills: arxiv-search-collector, arxiv-paper-processor, and arxiv-batch-reporter. Supports manual language control across all markdown outputs and Stage-B processing strategy (subagentparallel default max 5, or serial).

InternLM/WildClawBench · 75 tokens

academic-literature-search

这是一个专注于学术文献检索的专业工具,集成了多个权威学术数据库,提供全面、快速、准确的文献检索服务。支持多数据库并发检索、高级过滤、智能排序和多种输出格式。.

InternLM/WildClawBench · 0 tokens