mohitagw15856/figma-variant-matrix
skills/figma-variant-matrix/SKILL.md
Define component variants and states systematically for Figma. Use when asked to plan component variants, define states for a component, set up a Figma variant matrix, or work out what properties a component needs before building it. Produces a complete variant matrix with all properties, values, and combinations needed.
$ install --global
skillsauthnpx skillsauth add mohitagw15856/pm-claude-skills figma-variant-matrixInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 30, 2026, 12:30 PM11.5s1 file scanned
SKILL.md
- name:
- figma-variant-matrix
- description:
- Define component variants and states systematically for Figma. Use when asked to plan component variants, define states for a component, set up a Figma variant matrix, or work out what properties a component needs before building it. Produces a complete variant matrix with all properties, values, and combinations needed.
Figma Variant Matrix Skill
Defines all variants, properties, and states a component needs before building it in Figma — preventing missing variants discovered after the component is already used across 40 screens.
Required Inputs
- Component name (Button, Card, Input, Badge, Navigation item, etc.)
- Component purpose (what does it do, where is it used?)
- Platform (iOS / Android / Web / Multi-platform)
- Design system context (standalone / part of existing system)
Output Structure
1. Component Overview
Name, category (Interactive/Display/Layout/Form/Navigation/Feedback), used in contexts.
2. Variant Properties
| Property | Values | Notes | |---|---|---| | Type | Primary, Secondary, Tertiary, Destructive | | | Size | Large, Medium, Small | | | State | Default, Hover, Active, Disabled, Loading | | | Icon | None, Leading, Trailing, Only | |
Total combinations: [N]. Flag if over 50 — consider splitting into multiple components.
3. State Definitions
For each state, list only what changes from Default:
- Default: [Full visual spec]
- Hover (web): [Delta from default]
- Active/Pressed: [Delta]
- Disabled: [Delta — use layer-level properties, not opacity on whole component]
- Loading: [What replaces label, interactive during loading?]
- Error (forms): [Border colour, helper text, icon changes]
4. Anatomy Breakdown
| Layer name | Purpose | Required? | Notes | |---|---|---|---| | container | Background and bounds | Yes | | | label | Text | Conditional | Hide when icon-only | | icon-leading | Leading icon slot | No | |
5. Token Mapping
| Property | Token | Fallback | |---|---|---| | Background default | color.brand.primary | #hex | | Border radius | radius.medium | 8px |
6. Build Order
- Default state, most common variant
- Convert to component, add properties
- Size variants
- State variants
- Type variants
- Icon slot variants last
Quality Checks
- [ ] All interactive states defined
- [ ] Total variant count calculated, flagged if over 50
- [ ] Every layer named semantically
- [ ] Token mapping covers all visual properties
- [ ] Disabled state uses layer-level properties not opacity
Example Trigger Phrases
- "Define the variants for a [component] in Figma"
- "What states does my [component] need?"
- "Help me plan the variant matrix for [component]"
- "Set up the Figma properties for a [button/card/input]"
- "What are all the combinations I need for my [component]?"
Related Skills
mohitagw15856/viral-content-framework
development
VerifiedTrustedCommunity
Build a framework for creating shareable, high-reach social media content. Use when asked to plan viral content, develop a shareable content strategy, create a hook writing system, or build a repeatable process for content that gets shared. Produces a platform-specific viral content framework with hook formulas, content structures, shareability triggers, and a content testing system.
905SKILL.mdUpdated May 28, 2026
mohitagw15856/thumbnail-creator
development
VerifiedTrustedCommunity
Generate article or newsletter thumbnail candidates using the Gemini API from inside Claude Code. Claude reads article copy, proposes composition concepts, writes image generation prompts incorporating brand specs, calls Gemini to generate the images, evaluates the results via computer vision, and returns ranked candidates with rationale. Use when asked to create thumbnails, generate cover images, or produce visual candidates for an article or newsletter.
905SKILL.mdUpdated May 28, 2026
mohitagw15856/sycophancy-challenger
testing
VerifiedTrustedCommunity
Flips Claude's default from "find reasons you're right" to "find reasons you're wrong." A genuine thinking partner, not a mirror with grammar. Use before high-stakes decisions, plans, assumptions, or pitches you haven't stress-tested.
905SKILL.mdUpdated May 28, 2026
mohitagw15856/substack-notes-scraper
development
VerifiedTrustedCommunity
Scrapes a Substack Notes page and exports engagement data (likes, comments, restacks) to a formatted .xlsx file with conditional formatting and summary stats.
905SKILL.mdUpdated May 28, 2026