Claude Skills by thedixitjain

Use this skill when planning capacity, redundancy, graceful degradation, or recovery for systems that must keep working under stress — performance budgets, dependency failure handling, retry logic, error budgets, infrastructure capacity. Trigger when scoping infrastructure, designing error-handling architecture, planning for failure modes, or reviewing reliability incidents. Sub-aspect of `factor-of-safety`; read that first.

Use this skill whenever the design will encounter conditions that can''t be fully predicted at design time — load spikes, edge-case content, real-world variability, hardware variation, third-party flakiness, or any \"what if\" scenario. Trigger when scoping performance budgets, designing for content extremes, picking infrastructure capacity, designing error-handling, or planning for the long tail of users with unusual setups. Factor of Safety is one of the foundational principles in ''Univers...

Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.

Use this skill when designing system architecture or product mechanics that involve feedback loops at a higher level than UI state — recommendation engines, gamification, growth mechanics, engagement systems, or any system where one user action affects subsequent actions in compounding or stabilizing ways. Trigger when designing growth loops, retention features, or system dynamics; when reviewing a feature for unintended consequences; when discussing engagement vs. wellbeing tradeoffs. Sub-as...

Use this skill when designing the visible states an interactive element passes through (idle / pending / success / error) and matching feedback timing to the user''s perceptual thresholds. Trigger when designing button states, form-submit flows, file-upload progress, loading screens, or any interaction whose response time is variable. Sub-aspect of `feedback-loop`; read that first.

Use this skill whenever a user takes an action and the system must communicate that the action was received, is in progress, succeeded, or failed. Trigger when designing button states, form submission, file uploads, payment flows, real-time UI updates, loading states, error states, success confirmations, or any moment when the user is waiting for the system to do something. Trigger when the user mentions \"feels broken,\" \"doesn''t seem to work,\" \"users keep clicking again,\" or any sympto...

A playful, energetic, cartoonesque interface inspired by friendly children's-book illustrations — warm cream backgrounds, big bold custom display typography, saturated brand color blocks, thick black outlines, generously rounded shapes

'Deep debugging for Figma API issues: network analysis, response inspection, and support escalation. Use when standard troubleshooting fails, diagnosing intermittent failures, or preparing detailed evidence for Figma support. Trigger with phrases like \"figma hard bug\", \"figma mystery error\", \"figma deep debug\", \"figma intermittent failure\", \"figma support ticket\". '

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

Automate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.

'Automate Figma design token sync and asset export in CI/CD pipelines. Use when setting up GitHub Actions for Figma, automating icon exports, or validating design token changes in pull requests. Trigger with phrases like \"figma CI\", \"figma GitHub Actions\", \"automate figma export\", \"figma CI pipeline\". '

Connects Figma design components to code components using Code Connect mapping tools. Use when user says \"code connect\", \"connect this component to code\", \"map this component\", \"link component to code\", \"create code connect mapping\", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

'Diagnose and fix common Figma REST API and Plugin API errors. Use when encountering HTTP errors, plugin sandbox crashes, or unexpected API responses from Figma. Trigger with phrases like \"figma error\", \"fix figma\", \"figma not working\", \"figma 403\", \"figma 429\". '

'Extract design tokens, colors, typography, and spacing from Figma files via REST API. Use when building a design-to-code pipeline, syncing design tokens, or extracting styles from a Figma design system file. Trigger with phrases like \"figma design tokens\", \"extract figma styles\", \"figma to CSS\", \"sync figma colors\", \"figma typography\". '

'Export images, icons, and assets from Figma files via the REST API. Use when building an asset pipeline, exporting icons as SVG/PNG, or rendering frames to images for documentation or previews. Trigger with phrases like \"figma export\", \"figma images\", \"export figma icons\", \"figma assets\", \"figma render\". '

'Optimize Figma API usage to minimize costs and stay within plan limits. Use when analyzing request volumes, reducing unnecessary API calls, or choosing the right Figma plan for your integration needs. Trigger with phrases like \"figma cost\", \"figma pricing\", \"reduce figma API calls\", \"figma plan limits\", \"figma budget\". '

Generates custom design system rules for the user's codebase. Use when user says \"create design system rules\", \"generate rules for my project\", \"set up design rules\", \"customize design system guidelines\", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

Create a new blank Figma file. Use when the user wants to create a new Figma design or FigJam file, or when you need a new file before calling use_figma. Handles plan resolution via whoami if needed. Usage — /figma-create-new-file [editorType] [fileName] (e.g. /figma-create-new-file figjam My Whiteboard)

'Handle Figma API data correctly: comments, versions, user data, and privacy compliance. Use when working with Figma comments API, version history, or ensuring GDPR compliance for Figma user data. Trigger with phrases like \"figma data\", \"figma comments\", \"figma versions\", \"figma GDPR\", \"figma user data\". '

'Deploy Figma-powered applications to Vercel, Cloud Run, and Fly.io. Use when deploying webhook receivers, design token APIs, or Figma-connected web apps to production platforms. Trigger with phrases like \"deploy figma\", \"figma Vercel\", \"figma production deploy\", \"figma Cloud Run\". '

'Configure Figma Enterprise features: OAuth 2.0, team management, and access control. Use when implementing OAuth flows, managing team/project access via API, or building Enterprise-level Figma integrations. Trigger with phrases like \"figma enterprise\", \"figma OAuth\", \"figma team management\", \"figma access control\", \"figma SCIM\". '

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Di...

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

'Make your first Figma REST API call to fetch a file and inspect its node tree. Use when starting a new Figma integration, testing API connectivity, or learning the Figma document structure. Trigger with phrases like \"figma hello world\", \"figma first call\", \"figma quick start\", \"fetch figma file\". '

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions \"implement design\", \"generate code\", \"implement component\", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

'Respond to Figma API outages, auth failures, and rate limit incidents. Use when Figma integration is down, experiencing errors, or running post-incident reviews for Figma-related failures. Trigger with phrases like \"figma incident\", \"figma outage\", \"figma down\", \"figma broken\", \"figma emergency\". '

'Set up Figma REST API authentication with personal access tokens or OAuth 2.0. Use when connecting to the Figma API, generating tokens, configuring scopes, or setting up OAuth flows for Figma integrations. Trigger with phrases like \"install figma\", \"setup figma API\", \"figma auth\", \"figma personal access token\", \"figma OAuth\". '

'Avoid the most common Figma API integration mistakes and anti-patterns. Use when reviewing Figma code, onboarding new developers, or auditing an existing Figma integration. Trigger with phrases like \"figma mistakes\", \"figma anti-patterns\", \"figma pitfalls\", \"figma code review\", \"figma what not to do\". '

'Load test Figma API integrations and plan for scale. Use when benchmarking API throughput, testing rate limit behavior, or planning capacity for high-volume Figma integrations. Trigger with phrases like \"figma load test\", \"figma scale\", \"figma benchmark\", \"figma capacity\", \"figma throughput\". '

'Set up a local development workflow for Figma plugin and REST API projects. Use when building Figma plugins, creating design-to-code pipelines, or developing against the Figma API with hot reload. Trigger with phrases like \"figma dev setup\", \"figma plugin development\", \"figma local development\", \"develop figma plugin\". '

'Configure Figma API access across dev, staging, and production environments. Use when setting up per-environment tokens, managing multiple Figma files, or isolating development from production Figma resources. Trigger with phrases like \"figma environments\", \"figma staging\", \"figma dev prod\", \"figma environment config\". '

'Enforce security policies and coding standards for Figma API integrations. Use when setting up linting rules for Figma tokens, preventing accidental credential leaks, or enforcing API usage best practices. Trigger with phrases like \"figma policy\", \"figma lint\", \"figma guardrails\", \"figma security rules\", \"figma best practices check\". '

'Production readiness checklist for Figma REST API integrations. Use when deploying Figma integrations to production, preparing for launch, or auditing an existing integration for production fitness. Trigger with phrases like \"figma production\", \"deploy figma\", \"figma go-live\", \"figma launch checklist\". '

'Handle Figma REST API rate limits with exponential backoff and request queuing. Use when encountering 429 errors, implementing retry logic, or optimizing API request throughput for Figma. Trigger with phrases like \"figma rate limit\", \"figma throttling\", \"figma 429\", \"figma retry\", \"figma backoff\". '

'Reference architecture for production Figma API integrations. Use when designing a new Figma integration, planning project structure, or establishing patterns for design-to-code pipelines. Trigger with phrases like \"figma architecture\", \"figma project structure\", \"figma integration design\", \"figma best practices layout\". '

'Build resilient Figma integrations with circuit breakers, fallbacks, and graceful degradation. Use when implementing fault tolerance, handling Figma outages gracefully, or building production-grade reliability into Figma API consumers. Trigger with phrases like \"figma reliability\", \"figma circuit breaker\", \"figma fallback\", \"figma resilience\", \"figma graceful degradation\". '

'Production-ready patterns for the Figma REST API and Plugin API. Use when building reusable Figma client wrappers, extracting design tokens, traversing node trees, or creating typed API helpers. Trigger with phrases like \"figma patterns\", \"figma best practices\", \"figma client wrapper\", \"figma typed API\". '

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to proper...

'Implement Figma Webhooks V2 for real-time file, comment, and library events. Use when setting up webhook endpoints, handling FILE_UPDATE events, or building event-driven Figma automation. Trigger with phrases like \"figma webhook\", \"figma events\", \"figma FILE_UPDATE\", \"figma notifications\", \"figma real-time\". '

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

Apply specific visual cues to control figure-ground perception — shadow, elevation, scale, contrast, saturation, opacity, and texture. Use when designing layered interfaces, focus states, hover treatments, or any context where one element should clearly stand forward against others. Each cue contributes a portion of the figure-ground signal; combining cues strengthens the effect. The skill is selecting and calibrating cues for the desired level of separation.

Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it right means users naturally focus on the overlay, getting it wrong means modals blur into the page or feel jarring.

Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what''s perceived as the figure (the focus, the object) from the ground (the surrounding context). Use when designing modals, overlays, focus states, hero elements, hover treatments, layered interfaces, or any context where one element should clearly stand forward against everything else. The user''s perception always sorts the visual field into figure and ground; designs that reinforce the desired sortin...

Search a codebase or UI for places that don't animate but should, and reject everything that shouldn't. Read-only; it proposes motion with exact values, it does not implement it. Use when the user asks \"what could be animated here?\" or wants to \"make this feel more alive\". For fixing existing animations, use improve-animations or review-animations instead.

Use whenever the user wants to find, shortlist, vet, or enrich US design and creative agencies — graphic design, UX/UI, product design, brand identity, packaging, illustration, motion design, and creative direction. Triggers on \"find me a UX/UI design agency for our SaaS product\", \"shortlist three brand-identity studios in NY\", \"packaging design firm for a CPG launch\", or \"pull contact info for these 10 design studio domains\", even when described indirectly (brand refresh, design our ...

Use when the sample construction, variable measurement, panel structure, or inference of a Financial Management (FM) manuscript is fragile — before identification can be trusted or exhibits finalized. Hardens the data layer; it does not establish the causal claim (finman-identification) or run robustness (finman-robustness).

Use this skill when the question involves cursor speed, pointer acceleration curves, or interaction with input devices that vary in precision (mouse, trackpad, stylus, touchscreen, eye-tracking). Trigger when designing for varied input devices, building drag interactions, designing scrubbers / sliders / handles, or analyzing why a UI feels \"fiddly.\" Sub-aspect of `fitts-law`; read that first if you haven''t already.

Use this skill when designing for the edges and corners of the screen — where the cursor cannot overshoot, making them effectively infinite-sized targets along one axis. Trigger when designing global navigation, system menus, sticky headers, fixed sidebars, full-bleed CTAs, or anywhere you can put the most-frequent or hardest-to-find actions. Trigger when reviewing an app that has wasteful margins on every side and asks the user to aim for tiny targets in the middle. Sub-aspect of `fitts-law`...

Use this skill when designing for touch — phones, tablets, kiosks, in-car displays, smart-TV remotes, anything where the input is a finger or thumb rather than a precise pointer. Trigger when sizing buttons for mobile, debugging \"users keep mistapping,\" designing a mobile bottom-nav, picking icon sizes for a phone toolbar, or reviewing whether a desktop UI is touch-friendly. Sub-aspect of `fitts-law`; read that first if you haven''t already.

Use this skill whenever the question involves how easy it is to *hit* an interactive target — buttons, links, form controls, drag handles, scrollbars, mobile tap targets, anything the user must move a pointer or finger to. Trigger when sizing buttons, designing toolbars, picking a hit-area for icon buttons, designing for touch screens, debugging \"users keep mis-clicking,\" or arguing about button density vs. usability. Trigger when the user mentions touch targets, target size, \"fat fingers,...