All authors
Claude Skills by thedixitjain
github.com/thedixitjain12,707 skills283 installs48,721 views
- Feedback Loop Positive Vs NegativeUse 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...Votes: 0GitHub stars: 3
- Feedback Loop States And LatencyUse 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.Votes: 0GitHub stars: 3
- Feedback LoopUse 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...Votes: 0GitHub stars: 3
- FictionA 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 shapesVotes: 0GitHub stars: 3
- Figma Advanced Troubleshooting'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\". 'Votes: 0GitHub stars: 3
- Figma Automation DavepoonAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.Votes: 0GitHub stars: 3
- Figma AutomationAutomate Figma tasks via Rube MCP (Composio): files, components, design tokens, comments, exports. Always search tools first for current schemas.Votes: 0GitHub stars: 3
- Figma Ci Integration'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\". 'Votes: 0GitHub stars: 3
- Figma Code Connect ComponentsConnects 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`.Votes: 0GitHub stars: 3
- Figma Common Errors'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\". 'Votes: 0GitHub stars: 3
- Figma Core Workflow A'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\". 'Votes: 0GitHub stars: 3
- Figma Core Workflow B'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\". 'Votes: 0GitHub stars: 3
- Figma Cost Tuning'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\". 'Votes: 0GitHub stars: 3
- Figma Create Design System RulesGenerates 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.Votes: 0GitHub stars: 3
- Figma Create New FileCreate 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)Votes: 0GitHub stars: 3
- Figma Data Handling'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\". 'Votes: 0GitHub stars: 3
- Figma Deploy Integration'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\". 'Votes: 0GitHub stars: 3
- Figma Enterprise Rbac'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\". 'Votes: 0GitHub stars: 3
- Figma Generate DesignUse 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...Votes: 0GitHub stars: 3
- Figma Generate LibraryBuild 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.Votes: 0GitHub stars: 3
- Figma Hello World'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\". 'Votes: 0GitHub stars: 3
- Figma Implement DesignTranslates 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`.Votes: 0GitHub stars: 3
- Figma Incident Runbook'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\". 'Votes: 0GitHub stars: 3
- Figma Install Auth'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\". 'Votes: 0GitHub stars: 3
- Figma Known Pitfalls'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\". 'Votes: 0GitHub stars: 3
- Figma Load Scale'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\". 'Votes: 0GitHub stars: 3
- Figma Local Dev Loop'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\". 'Votes: 0GitHub stars: 3
- Figma Multi Env Setup'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\". 'Votes: 0GitHub stars: 3
- Figma Policy Guardrails'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\". 'Votes: 0GitHub stars: 3
- Figma Prod Checklist'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\". 'Votes: 0GitHub stars: 3
- Figma Rate Limits'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\". 'Votes: 0GitHub stars: 3
- Figma Reference Architecture'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\". 'Votes: 0GitHub stars: 3
- Figma Reliability Patterns'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\". 'Votes: 0GitHub stars: 3
- Figma Sdk Patterns'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\". 'Votes: 0GitHub stars: 3
- Figma Use**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...Votes: 0GitHub stars: 3
- Figma Webhooks Events'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\". 'Votes: 0GitHub stars: 3
- FigmaUse 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.Votes: 0GitHub stars: 3
- Figure Ground CuesApply 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.Votes: 0GitHub stars: 3
- Figure Ground Overlays And ModalsApply 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.Votes: 0GitHub stars: 3
- Figure Ground RelationshipApply 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...Votes: 0GitHub stars: 3
- Find Animation OpportunitiesSearch 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.Votes: 0GitHub stars: 3
- Find Design AgencyUse 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 ...Votes: 0GitHub stars: 3
- Finman Empirical DesignUse 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).Votes: 0GitHub stars: 3
- Fitts Law Pointer AccelerationUse 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.Votes: 0GitHub stars: 3
- Fitts Law Screen EdgesUse 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`...Votes: 0GitHub stars: 3
- Fitts Law Touch TargetsUse 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.Votes: 0GitHub stars: 3
- Fitts LawUse 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,...Votes: 0GitHub stars: 3
- Fixing AccessibilityAudit and fix HTML accessibility issues including ARIA labels, keyboard navigation, focus management, color contrast, and form errors. Use when adding interactive controls, forms, dialogs, or reviewing WCAG compliance.Votes: 0GitHub stars: 3
- Flat Design 2Web and App implementation guide for Flat Design 2.0 (Semi-Flat). Trigger when the user wants flat design with subtle shadows and improved usability.Votes: 0GitHub stars: 3
- Flat DesignWeb and App implementation guide for the Flat Design style. Trigger when the user wants no shadows, simple shapes, and bold colors.Votes: 0GitHub stars: 3