mohitagw15856/figma-spacing-system
plugins/pm-figma/skills/figma-spacing-system/SKILL.md
Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a complete spacing scale, grid definition, component spacing conventions, and Figma implementation guide.
$ install --global
skillsauthnpx skillsauth add mohitagw15856/pm-claude-skills figma-spacing-systemInstall 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: Jun 9, 2026, 7:31 AM141.8s1 file scanned
SKILL.md
- name:
- figma-spacing-system
- description:
- Design a spacing and layout token system for a Figma design system. Use when asked to create a spacing system, define layout tokens, set up a grid system, build a spacing scale, or establish layout foundations for a Figma file. Produces a complete spacing scale, grid definition, component spacing conventions, and Figma implementation guide.
Figma Spacing System Skill
Produces a complete spacing and layout token system — the foundation that makes a design system consistent and developer handoff unambiguous.
Required Inputs
- Platform (iOS / Android / Web / Multi-platform)
- Base unit (4px / 8px — default to 8px)
- Design system name (for token naming)
- Component density (compact / standard / comfortable)
- Grid requirements (or "derive from platform standard")
Output Structure
1. Base Unit
[4px or 8px] with rationale. All values must be multiples.
2. Spacing Scale
| Token | Value | Use case | |---|---|---| | spacing.none | 0px | Removing space intentionally | | spacing.xs | 4/8px | Icon padding, tight labels | | spacing.sm | 8/12px | Internal component padding compact | | spacing.md | 12/16px | Internal component padding standard | | spacing.lg | 16/24px | Section padding, card internal | | spacing.xl | 24/32px | Between components | | spacing.2xl | 32/48px | Section separation | | spacing.3xl | 48/64px | Page-level breaks | | spacing.4xl | 64/96px | Hero sections |
3. Layout Grid
Mobile (375px): 4 columns, margin [value], gutter [value] Tablet (768px): 8 columns, margin [value], gutter [value] Desktop (1440px): 12 columns, margin [value], gutter [value], max content width [value]
4. Component Spacing Conventions
| Context | Token | Example | |---|---|---| | Button horizontal padding | spacing.md | Left/right | | Button vertical padding | spacing.sm | Top/bottom | | Card internal padding | spacing.lg | All sides | | Input padding | spacing.sm vertical, spacing.md horizontal | | | Icon gap from label | spacing.xs | | | Section gap | spacing.xl | |
5. Figma Implementation
- Create SPACING page documenting each token visually
- Resources > Variables > create Number collection named Spacing
- Apply variables to Auto Layout padding/gap values
- Share token names with engineers as-is or via Tokens Studio
6. Anti-Patterns to Avoid
- Values not on the scale (13px, 22px) — round to nearest token
- Absolute pixel values in components instead of tokens
- Mixing 4px and 8px base units in the same product
Quality Checks
- [ ] All token values are multiples of the base unit
- [ ] Scale covers xs through 4xl
- [ ] Grid defined for all relevant breakpoints
- [ ] Component conventions cover common decisions
- [ ] Figma implementation steps included
Anti-Patterns
- [ ] Do not create a spacing scale with arbitrary values — the scale must follow a consistent mathematical ratio (e.g. 4px base, 8-4-2 system)
- [ ] Do not define spacing tokens without Figma implementation instructions — token names alone are not actionable
- [ ] Do not create a spacing system that doesn't account for component-level spacing conventions — global tokens and component usage must both be documented
- [ ] Do not skip grid definitions — spacing without a grid system is incomplete layout foundation documentation
- [ ] Do not produce a spacing system that ignores responsive behaviour — define how spacing adapts across breakpoints
Example Trigger Phrases
- "Create a spacing system for our Figma design system"
- "Define our spacing tokens for Figma"
- "Set up a grid and spacing scale for [product]"
- "What spacing values should we use in our design system?"
- "Help me build the layout foundation for our Figma file"
Related Skills
mohitagw15856/win-loss-analysis
business
VerifiedTrustedCommunity
Analyze why deals are won and lost and turn it into an action plan. Use when asked to run a win/loss analysis, review closed-won and closed-lost deals, understand why the team is losing to a competitor, or summarize sales feedback into patterns. Produces a structured win/loss report with themes, win/loss rates by segment and competitor, representative quotes, and prioritized actions for product, marketing, and sales.
1,117SKILL.mdUpdated Jul 2, 2026
mohitagw15856/which-skill
development
VerifiedTrustedCommunity
Route a fuzzy request to the right skill in this library. Use when the user is unsure which skill fits, asks 'which skill should I use for X', describes a task without naming a skill, or when a request could plausibly match several skills. Produces a best-fit recommendation with the inputs to gather, a runner-up with the tie-breaker, and a workflow recipe when the job spans multiple skills.
1,117SKILL.mdUpdated Jul 2, 2026
mohitagw15856/vuln-triage
testing
VerifiedTrustedCommunity
Triage a vulnerability or scanner finding — assess real severity, exploitability, and how urgently to fix. Use when asked to triage a CVE, prioritize scanner/pentest findings, assess a vuln's risk, or decide what to patch first. Produces a triage verdict: CVSS-informed severity adjusted for your context, exploitability, real risk, a fix/mitigation, and an SLA — so you fix what matters, not just what's red.
1,117SKILL.mdUpdated Jul 2, 2026
mohitagw15856/voice-of-customer-program
development
VerifiedTrustedCommunity
Stand up a Voice of Customer (VoC) program that turns feedback into action. Use when asked to build a VoC program, design a customer feedback loop, consolidate feedback sources, or set up a closed-loop feedback process. Produces a VoC program design — objectives, feedback sources and channels, a taxonomy, collection and analysis cadence, closed-loop routing, ownership, and success metrics.
1,117SKILL.mdUpdated Jul 2, 2026