growgroup/figma-to-pug-scss
.cursor/skills/figma-to-pug-scss/SKILL.md
Implement Figma designs as Pug/SCSS in this repository. Use when user provides a Figma URL or asks design implementation for this project. Run figma-mcp-core first, then follow .cursor/docs rules for Pug/SCSS implementation.
$ install --global
skillsauthnpx skillsauth add growgroup/gg-styleguide figma-to-pug-scssInstall 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 17, 2026, 9:27 AM15.9s1 file scanned
SKILL.md
- name:
- figma-to-pug-scss
- description:
- Implement Figma designs as Pug/SCSS in this repository. Use when user provides a Figma URL or asks design implementation for this project. Run figma-mcp-core first, then follow .cursor/docs rules for Pug/SCSS implementation.
- mcp-server:
- user-figma, figma, figma-desktop
Figma to Pug/SCSS
このスキルは「Pug/SCSS 実装規約」の適用に特化する。 Figma 取得工程は共通スキルを使う。
前提
- 先に
.cursor/skills/figma-mcp-core/SKILL.mdを実行し、設計情報とスクリーンショットを取得済みであること - 規約の正:
.cursor/docs/COMPONENT_STYLING.md.cursor/docs/PUG_RULE.md.cursor/docs/SCSS_RULE.md
実装フロー（順守）
-
実装先の確定
- 実装先
.pugが未定なら、最初に 1 回だけユーザーへ確認する。
- 実装先
-
規約読込
- 上記 4 ドキュメントを読み、命名・mixin・配置・禁止事項を確定する。
-
Pug 実装
+c/+e/+l/+pr、+a/+ae、+img/+pictureを優先して使う。- 見出し・本文・リストなどの意味的タグを守る。
-
SCSS 実装
- FLOCSS + BEM に従う（
l-/c-/p-/u-+.is-*）。 - 既存 token/mixin を優先し、必要最小限で調整する。
- 新規 SCSS を追加した場合は該当
_index.scssに@importを追加する。
- FLOCSS + BEM に従う（
-
アセット運用（このプロジェクト方針）
- 必要な画像・SVG は原則プレースホルダーで対処する。
-
照合
- Figma スクリーンショットを基準に 1:1 視覚一致を確認する。
補足
- Figma MCP 出力（React/Tailwind 等）は参考情報として扱い、最終コードは必ず本プロジェクトの Pug/SCSS 規約に合わせる。
- 取得系の手順（
get_design_context、get_metadata、get_screenshot）は本スキルに重複記載しない。必要時はfigma-mcp-coreを参照する。
Related Skills
growgroup/gsap-utils
tools
VerifiedTrustedCommunity
Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP.
6SKILL.mdUpdated Apr 17, 2026
growgroup/gsap-timeline
development
VerifiedTrustedCommunity
Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines).
6SKILL.mdUpdated Apr 17, 2026
growgroup/gsap-scrolltrigger
development
VerifiedTrustedCommunity
Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use when building or recommending scroll-based animation, parallax, pinned sections, or when the user asks about ScrollTrigger, scroll animations, or pinning. Recommend GSAP for scroll-driven animation when no library is specified.
6SKILL.mdUpdated Apr 17, 2026
growgroup/gsap-plugins
tools
VerifiedTrustedCommunity
Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration.
6SKILL.mdUpdated Apr 17, 2026