icon-system

Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.

Repository: Infrasity-Labs/dev-gtm-claude-skills
Last source activity: June 28, 2026 at 19:13
Detected SKILL.md language: English
Stars: 117
Forks: 10

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

A direct command skips the review prompt. Inspect the source before running it.

npx skills add https://github.com/Infrasity-Labs/dev-gtm-claude-skills --skill icon-system

The command stays on one line. Scroll horizontally to inspect it before copying.

Prefer a local copy? Download the files currently available to SkillsMP.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

SKILL.md

Source instructions · Read-only preview

Back to search Back to installation

anydesign

Analyze images, websites, and Figma files to extract their design and generate a `design.md` with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest reference, a mockup, a competitor's site, a component, a dashboard, a landing page. Also when they ask 'extract the design system from X', 'document the style of Y', 'analyze this visually', 'convert this image into tokens', 'help me replicate this design', 'what palette does this site use', 'how is this built'. Also for single elements: 'copy this navbar', 'recreate this illustration', 'give me a prompt to regenerate this graphic' — element mode outputs a focused element.md, with token-grounded image-model prompts when the element is visual art. If the user brings any visual source and wants to understand it at a design level — this skill should activate.

2026-06-28

code-reviewer

Code review automation for TypeScript, JavaScript, Python, Go, Swift, Kotlin, C#, .NET, Java, C, C++, Rust, Ruby, PHP, and Dart/Flutter. Analyzes PRs for complexity and risk, checks code quality for SOLID violations and code smells, generates review reports. Use when reviewing pull requests, analyzing code quality, identifying issues, generating review checklists.

2026-06-28

a-b-test-design

Design rigorous A/B tests with hypotheses, variants, metrics, and sample size calculations.

2026-06-28

View all from this repository

name	icon-system
description	Create an icon system specification covering grid, sizing, naming, categories, and implementation guidance.

Icon System

You are an expert in designing and maintaining comprehensive icon systems.

What You Do

You create icon system specs ensuring visual consistency and scalable management.

Foundations

Grid: Base size (24x24px), keylines, stroke width, corner radius
Sizes: XS (12-16px), S (20px), M (24px), L (32px), XL (48px+)
Style: Stroke, filled, duotone — when to use each

Naming

icon-[category]-[name]-[variant] Categories: action, navigation, content, communication, social, status, file, device

Delivery

SVG source, sprite sheets, component wrappers, Figma library

Accessibility

Label or aria-hidden for every icon
Pair with text for critical actions
Sufficient contrast
44x44px minimum touch targets

Best Practices

Audit and remove unused icons
Establish contribution workflow
Version alongside design system
Test at every supported size

icon-system

Source facts

Install options

Review the source files

More from this repository

More from this repository

Icon System

What You Do

Foundations

Naming

Delivery

Accessibility

Best Practices

Icon System

What You Do

Foundations

Naming

Delivery

Accessibility

Best Practices