skills.rest
razorpay
razorpayOFFICIAL
Explore all skills by this author →
Website𝕏@razorpayGitHub

update-component

Updates existing Blade web components using Figma designs and knowledgebase documentation.

649|197|Updated Jan 28, 2020
Search Tags:#storybook#Figma#typeScript#Design system#component update#reAct#Design tokens
One-click install
npx skills add https://github.com/razorpay/blade --skill update-component
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-component
Source: https://github.com/razorpay/blade/tree/main/.agents/skills/update-component
Command: npx skills add https://github.com/razorpay/blade --skill update-component

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Keeping React components in sync with evolving Figma designs requires manually comparing design tokens, props, and styles across files, which is slow and error-prone. This Skill automates the comparison and update workflow for Blade design system components.

Core Features & Use Cases

  • Figma Design Extraction: Pulls design context, variable definitions, and screenshots from a Figma URL using Figma MCP tools.
  • Guided Update Workflow: Updates types, constants, web implementation, exports, knowledgebase docs, and Storybook stories in a defined order.
  • Use Case: A designer updates the Popover component in Figma with new spacing tokens. Run the Skill with the component name and Figma URL to align the web implementation, types, and documentation with the new design.

Quick Start

Ask the AI to update the Popover component using the Figma URL from your design file, and it will sync the web implementation with the latest design tokens.

Frequently Asked Questions about update-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I update a Blade component from a Figma design?▼

Run the update-component command with the component name and Figma URL. The Skill extracts the file key and node ID from the URL, fetches design context and variables via Figma MCP tools, then updates types, constants, and the web implementation.

How to sync React components with Figma design tokens?▼

The Skill uses the Figma get_variable_defs tool to retrieve all design tokens as JSON, then compares them against existing Blade constants. It updates constants.ts and the web implementation to use theme tokens instead of hardcoded values.

Does this work for React Native components?▼

No, this Skill only updates web implementations (.web.tsx files). Native component files (.native.tsx) are explicitly ignored during the update process.

What files get changed when updating a component?▼

The Skill updates types.ts, constants.ts, the .web.tsx implementation, index.ts exports, the knowledgebase markdown documentation, and Storybook stories. It then checks modified files for linter errors.

Does updating a component break backward compatibility?▼

The Skill's guidelines require maintaining backward compatibility. Existing props cannot be removed without deprecation, and new features are added as new props or variants rather than breaking changes.

Related Skills

Explore More Software Engineering Skills→
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced
alps-asdalps-asd
39

release

Publish npm packages, update versions, and tag releases across a monorepo.

Official
Intermediate
davidrrowleydavidrrowley

frontend-design-review

Review frontend interfaces for design quality and WCAG accessibility compliance.

Community
Intermediate
artosetrovartosetrov

edit-figma-design

Convert natural-language design prompts into Figma authoring tasks.

Community
Advanced